master

分支 (1)

管理

管理

master

web-study
/
myhome.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="img/html.svg">
    <!-- 引入css -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 引入js -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/vue2.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <style>
        html::-webkit-scrollbar {
            width: 0;
        }

        body::-webkit-scrollbar {
            width: 0;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .active {
            font-weight: bolder;
        }
    </style>
</head>

<body>
<!-- 导航条开始 -->
<nav class="navbar navbar-expand-lg  py-4 sticky-top container-fluid" id="header_nav"
>
    <!-- 网站名字logo -->
    <a href="#" class="navbar-brand ms-4">前端探索者</a>
    <!-- 右边折叠按钮 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
            aria-controls="offcanvasNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 中间部分 -->
    <div class="navbar-collapse collapse d-none">
        <ul class="navbar-nav m-auto ">
            <!-- 左边菜单 -->
            <li class="nav-item ">
                <a href="index.html" class="nav-link active" role="button" aria-expanded="false">首页</a>
            </li>
            <li class="nav-item dropdown" id="QDBD">
                <a href="#" class="nav-link dropdown-toggle " role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">前端榜单</a>
                <ul class="dropdown-menu" id="QDBD_Web">
                    <li><a href="study.html" class="dropdown-item">Bootstrap</a></li>
                    <li><a href="#" class="dropdown-item">Layui</a></li>
                    <li><a href="#" class="dropdown-item">React</a></li>
                    <li><a href="#" class="dropdown-item">Vue</a></li>
                </ul>
            </li>
            <li class="nav-item dropdown" id="XXGL">
                <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">学习攻略</a>
                <ul class="dropdown-menu" id="XXGL_Web">
                    <li><a href="#" class="dropdown-item">零基础学Bootstrap</a></li>
                    <li><a href="#" class="dropdown-item">零基础学Layui</a></li>
                    <li><a href="#" class="dropdown-item">零基础学React</a></li>
                    <li><a href="#" class="dropdown-item">零基础学Vue</a></li>
                </ul>
            </li>
        </ul>
        <!-- 中间搜索 -->
        <form class="d-flex d-inline-block " role="search" id="sousuo">
            <input class="form-control rounded-0" id="sousuoneirong" type="search" placeholder="Search"
                   aria-label="Search"
            >
            <button class="btn btn-outline-primary rounded-0" type="submit">搜索</button>
        </form>
        <!-- 右边菜单 -->
        <ul class="navbar-nav m-auto d-none d-xxl-flex">
            <li class="nav-item ">
                <a href="myhome.html" class="nav-link " role="button" aria-expanded="false">论坛中心</a>
            </li>
            <li class="nav-item ">
                <a href="#" class="nav-link " role="button" aria-expanded="false">我的笔记</a>
            </li>
            <li class="nav-item ">
                <a href="#" class="nav-link " role="button" aria-expanded="false">联系我们</a>
            </li>
        </ul>
        <!-- 用户头像 -->
        <a role="button" class="btn me-1 yonghu" href="login.html">
            <img src="img/weekend.awebp" class="rounded-circle">
        </a>
    </div>
</nav>
<!-- 折叠按钮侧导航 -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"
>
    <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <h6 class="dropdown-header">Menu</h6>
            <li class="nav-item active">
                <a class="nav-link" aria-current="page" href="#">首页</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">
                    前端榜单
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Bootstrap</a></li>
                    <li><a class="dropdown-item" href="#">Layui</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">更多</a></li>
                </ul>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">
                    学习攻略
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">教你七天学会Bootstrap</a></li>
                    <li><a class="dropdown-item" href="#">零基础学Js</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">更多</a></li>
                </ul>
            </li>
            <div class="dropdown-divider my-4"></div>
            <h6 class="dropdown-header">More</h6>
            <li class="nav-item ">
                <a class="nav-link" aria-current="page" href="#">论坛中心</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" aria-current="page" href="#">我的笔记</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" aria-current="page" href="#">联系我们</a>
            </li>
        </ul>
        <div class="d-grid gap-2 col-6 mx-auto">
            <button class="btn btn-primary" type="button">登录</button>
        </div>
    </div>
</div>

<!-- 内容开始 -->
<div class="container mt-4">
    <div class="row">
        <!-- 侧导航开始 -->
        <div class="col-xl-2 col-md-3  d-none d-md-flex">
            <div class="nav flex-column nav-pills rounded-3 position-fixed" role="tablist"
                 aria-orientation="vertical" style="background-color: #ffffff;">
                <button class="nav-link active" data-bs-toggle="pill" type="button" role="tab" aria-selected="true">
                    <div class="d-flex align-items-center py-1 ps-1">
                        <img src="./img/zonghe.svg" width="20">
                        <div class="ms-2">
                            综合
                        </div>
                    </div>
                </button>
                <button class="nav-link" data-bs-toggle="pill" type="button" role="tab" aria-selected="false">
                    <div class="d-flex align-items-center py-1 ps-1">
                        <img src="./img/bootstrap.svg" width="20">
                        <div class="ms-2">
                            Bootstrap
                        </div>
                    </div>
                </button>
                <button class="nav-link" data-bs-toggle="pill" type="button" role="tab" aria-selected="false">
                    <div class="d-flex align-items-center py-1 ps-1">
                        <img src="./img/vue.svg" width="20">
                        <div class="ms-2">
                            Vue
                        </div>
                    </div>
                </button>
                <button class="nav-link" data-bs-toggle="pill" type="button" role="tab" aria-selected="false">
                    <div class="d-flex align-items-center py-1 ps-1">
                        <img src="./img/react.svg" width="20">
                        <div class="ms-2">
                            React
                        </div>
                    </div>
                </button>
                <button class="nav-link" data-bs-toggle="pill" type="button" role="tab" aria-selected="false">
                    <div class="d-flex align-items-center py-1 ps-1">
                        <img src="./img/know_more.svg" width="20">
                        <div class="ms-2">
                            More
                        </div>
                    </div>
                </button>

            </div>
        </div>
        <!-- 侧导航结束 -->

        <!-- 文章开始 -->
        <div class="col-xl-7  px-3 rounded-3 h-100 col-md-9 col-12 " style="background-color: #ffffff;"
             id="article">
            <!-- 标题开始 -->
            <div class="border-bottom ps-3 d-flex" style="justify-content: space-between;">
                <ul class="nav nav-underline pb-2">
                    <li class="nav-item" id="recommend">
                        <a class="nav-link active" aria-current="page" href="#">推荐</a>
                    </li>
                    <li class="nav-item" id="new">
                        <a class="nav-link" href="#">最新</a>
                    </li>
                </ul>
                <button class=" btn  my-2" data-bs-toggle="modal" data-bs-target="#articleadd">添加文章</button>

                <div class="modal fade" id="articleadd" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">添加文章</h1>
                                <!-- 关闭按钮 -->
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <!-- 文章标题 -->
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="articleaddtitle"
                                           placeholder="articleaddtitle">
                                    <label for="articleaddtitle">文章标题</label>
                                </div>
                                <!-- 文章内容 -->
                                <div class="form-floating mt-3">
                                    <input type="text" class="form-control" id="articleaddcontent"
                                           placeholder="articleaddcontent">
                                    <label for="articleaddcontent">内容</label>
                                </div>
                                <!-- 文章作者 -->
                                <div class="form-floating mt-3">
                                    <input type="text" class="form-control" id="articleaddzuozhe"
                                           placeholder="articleaddzuozhe">
                                    <label for="articleaddzuozhe">作者</label>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                                        id="addbtn">添加
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 结束 -->
            <!-- 帖子开始    -->
            <div class="lists">
                <div class="ps-3 mt-3 border-bottom " v-for="item in items">
                    <!-- 标题名字 -->
                    <div
                            class="fatiebiaoti">
                        <!-- {{item.articleTitle}} -->
                        {{item.articleTitle}}
                    </div>
                    <!-- 帖子内容 -->
                    <div
                            class="mt-2 fatieneirong">
                        {{item.articleContent}}
                    </div>
                    <!-- 发帖人信息   -->
                    <div class="py-2">
                        <div class="d-flex align-items-center py-1 ps-1 justify-content-between"
                             id="fatieren">
                            <div>
                                作者:{{item.articleAuthor}}
                            </div>
                            <div class="d-flex">
                                <img src="img/point.svg" width="20" class="point_p">
                                <div class="ms-2 point_num">{{item.num}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 文章结束 -->
        <!-- 广告开始 -->
        <div class="col-xl-3 px-3 d-none d-xl-flex">
            <div style="height: 400px;">
                <img src="img/advertisement.jpg" class="rounded-3 guanggao"
                     id="advertisement">
                <button type="button" class="btn-close" aria-label="Close" style="position: absolute;"
                        id="closebtn"></button>
            </div>
        </div>
        <!-- 广告结束 -->
    </div>
</div>
<!-- 底部开始 -->
<div class="container">
    <hr>
    <footer class="pt-5">
        <div class="row">
            <div class="col-6 col-md-2 mb-3">
                <h5>前端探索者</h5>
                <ul class="nav flex-column">
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">首页</a></li>
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">前端榜单</a></li>
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">学习攻略</a></li>
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">软件下载</a></li>
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">了解更多</a></li>
                </ul>
            </div>
            <div class="col-6 col-md-2 mb-3">
                <h5>编辑器推荐</h5>
                <ul class="nav flex-column">
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">VsCode</a></li>
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">WebStorm</a></li>
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Sublime</a></li>
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">KindEditor</a></li>
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">...</a></li>
                </ul>
            </div>
            <div class="col-6 col-md-2 mb-3">
                <h5>框架官方连接</h5>
                <ul class="nav flex-column">
                    <li class="nav-item mb-2"><a href="https://getbootstrap.com/" target="_blank"
                                                 class="nav-link p-0 text-muted">BootStrap</a></li>
                    <li class="nav-item mb-2"><a href="https://cn.vuejs.org/" target="_blank"
                                                 class="nav-link p-0 text-muted">Vue</a></li>
                    <li class="nav-item mb-2"><a href="https://react.dev/" target="_blank"
                                                 class="nav-link p-0 text-muted">React</a></li>
                    <li class="nav-item mb-2"><a href="https://www.ilayuis.com/" target="_blank"
                                                 class="nav-link p-0 text-muted">Layui</a></li>
                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">...</a></li>
                </ul>
            </div>
            <!-- 列偏移 -->
            <div class="col-md-5 offset-md-1 mb-3">
                <h5>有疑问请私信官方</h5>
                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">您的邮箱地址</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1"
                           placeholder="1844494570@qq.com">
                </div>
                <div class="mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">请输入</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
                <div class="d-flex justify-content-end mt-3">
                    <button class="btn btn-primary" type="submit" id="submit">发送</button>
                </div>
            </div>
        </div>
        <hr>
        <p class="text-center text-muted">&copy; 2023-12-19 2022080188 Pooh 制作,有事联系18658491360</p>
    </footer>
</div>
<!-- 底部结束 -->
<script>
    new Vue({
        el: "#article",
        data: {
            items: []
        },
        methods: {
            handleLoad() {
                axios.get('api/article.json').then(res => {
                    this.items = res.data
                })
            }
        },
        //加载结束
        mounted() {
            this.handleLoad()
        }
    })
</script>
<script>
    $(function () {
        // 1.鼠标经过显示菜单    移出隐藏   淡入淡出
        $("#QDBD").mouseover(function () {
            $("#QDBD_Web").fadeIn()
        })
        $("#QDBD").mouseleave(function () {
            $("#QDBD_Web").fadeOut()
        })
        $("#XXGL").mouseover(function () {
            $("#XXGL_Web").fadeIn()
        })
        $("#XXGL").mouseleave(function () {
            $("#XXGL_Web").fadeOut()
        })

        // 5.切换状态
        $("#new").click(function () {
            $("#new a").addClass("active")
            $("#recommend a").removeClass("active")
        })
        $("#recommend").click(function () {
            $("#recommend a").addClass("active")
            $("#new a").removeClass("active")
        })

        // 6.关闭广告
        $("#closebtn").click(function () {
            $("#advertisement").hide()
            $("#closebtn").hide()
        })
        //7.获取所有添加的内容
        //文章标题
        $("#articleaddtitle").val()
        //文章内容
        $("#articleaddcontent").val()
        // 文章作者
        $("#articleaddzuozhe").val()
        let num = 0
        // let content=document.querySelector("#articleaddcontent").html()
        // let zuozhe=document.querySelector("#articleaddzuozhe").html()
        $("#addbtn").click(function () {
            //创造
            let $list = $(`<div class="ps-3 mt-3 border-bottom">
                    <!-- 标题名字 -->
                    <div
                        style="white-space: nowrap;; text-overflow: ellipsis; overflow: hidden;font-size: 18px;font-weight: 600;">
                        ${$("#articleaddtitle").val()}
                    </div>
                    <!-- 帖子内容 -->
                    <div style="white-space: nowrap;; text-overflow: ellipsis; overflow: hidden; font-size: 14px;"
                        class="mt-2">
                        ${$("#articleaddcontent").val()}
                    </div>
                    <!-- 发帖人信息   -->
                    <div class="py-2">
                        <div class="d-flex align-items-center py-1 ps-1 justify-content-between"
                            style="font-size: 12px;">
                            <div>
                                作者:${$("#articleaddzuozhe").val()}
                            </div>
                            <div class="d-flex">
                                <img src="img/point.svg" width="20" class="point_p">
                                <div class="ms-2 point_num">${num}</div>
                            </div>
                        </div>
                    </div>
                </div>`)
            //添加
            $('.lists').prepend($list)
            //添加完后输入框清空
            $("#articleaddtitle").val("")
            $("#articleaddcontent").val("")
            $("#articleaddzuozhe").val("")
        })
        // 8.点赞
        $(".point_p").click(function () {
            if ($(this).attr('src') == 'img/point.svg') {
                $(this).attr('src', 'img/point01.svg')
                $(this).siblings().html(parseInt($(this).siblings().html()) + 1)
            } else {
                $(this).attr('src', 'img/point.svg')
                $(this).siblings().html(parseInt($(this).siblings().html()) - 1)
            }
            //获取数量
            console.log($(this).siblings().html())
            // console.log($(".point_num").html())
        })


    })


</script>
</body>

</html>