master

分支 (4)

管理

管理

master

dev

dev-惠萍

dev-荣东

foodshare-web
/
preview.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="bootStrap/css/bootstrap.css">
    <script src="./bootStrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./js/util.js"></script>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet icon" href="./img/egg.svg">
    <style>
        body{
            background-color: rgb(246,247,249);
        }
        /* 文章内容 */
        #content {
            position: relative;
            margin-top: -5px;
            width: 1000px;
            background-color: white;
            /* height: 500px; */
            border-radius: 10px;
        }

        /* 标题 */
        #content h1 {
            margin-left: 135px;
            margin-top: 40px;
            font-weight: bold;
        }

        /* title下的一些信息 */
        .note-info ul {
            margin-left: 105px;
            color: rgb(153, 153, 153);
        }

        .note-info ul li {
            list-style-type: none;
            padding-left: 20px;
            float: left;
            margin-top: 20px;
            margin-left: 10px;
        }

        /* 文章作者信息 */
        .userInfo {
            clear: both;
            margin-top: 60px;
            margin-left: 130px;
            position: relative;
        }

        .userInfo img {
            width: 50px;
            height: 50px;
            border-radius: 25px;
        }

        .userInfo a {
            margin-top: 5px;
            margin-left: 10px;
            position: absolute;
            text-decoration: none;
        }

        .userInfo span {
            margin-top: 28px;
            margin-left: 10px;
            position: absolute;
            color: rgb(153, 153, 153);
        }

        .userInfo button {
            position: absolute;
            margin-top: 10px;
            margin-left: 550px;
            width: 140px;
        }

        .userInfo button:focus,
        .userInfo button:active {
            outline: none;
        }

        /* 详细内容 */
        .note-content {
            margin-top: 20px;
            margin-left: 130px;
            width: 730px;
        }

        /* 侧边工具栏 */
        #tool {
            width: 70px;
            height: 300px;
            border-radius: 10px;
            position: sticky;
            left: 90%;
            bottom: 10%;
            background-color: white;
        }

        #tool div {
            width: 62px;
            height: 62px;
            margin-top: 15px;
            text-align: center;
        }

        #tool div i {
            font-size: 35px;
            margin-left: 10px;
            text-align: center;
        }

        #tool div span {
            margin-top: 5px;
            margin-left: 10px;
        }

        #tool div i:hover {
            color: orange;
        }

        .py{
            margin-left: -30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 导航 -->
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <!-- <a class="navbar-brand" href="#">
                  <img alt="food" src="...">
                </a>                     -->
                    <a class="navbar-brand" href="#">美食分享平台</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="./index.html"><span id="cart" class="glyphicon glyphicon-home"></span>&nbsp网站首页</a>
                        </li>
                        <li><a href="#"><span id="cart" class="glyphicon glyphicon-grain"></span>&nbsp菜谱专栏</a></li>
                        <li><a href="#"><span id="cart" class="glyphicon glyphicon-send"></span>&nbsp日常分享</a></li>
                        <li><a href="#" @click='write()'><span id="cart"
                                    class="glyphicon glyphicon-edit"></span>&nbsp写笔记</a></li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="./login.html" v-show="user==''">登录</a></li>
                        <li><a href="#" v-show="user==''">注册</a></li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false" v-show="user!=''">{{user.username}} <span
                                    class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">基本信息</a></li>
                                <li><a href="#">我的笔记</a></li>
                                <li><a href="#">收藏夹</a></li>
                                <li><a href="#">关注用户</a></li>
                            </ul>
                        </li>
                        <li><a href="#" v-show="user!=''" @click='exit()'>退出</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

        <!-- 文章详细 -->
        <div class="container " id="content">
            <h1>{{noteInfo.title}}</h1>
            <div class="note-info">
                <ul class="py">
                    <li>{{noteInfo.typename}}</li>
                    <li>{{noteInfo.pubTime}}</li>
                    <li>{{noteInfo.eyes}}阅读</li>
                    <li>{{noteInfo.like}}喜欢</li>
                    <li>{{noteInfo.comment}}评论</li>
                </ul>
            </div>
            <div class="userInfo">
                <img :src=`http://localhost:8080/foodShare/file/userImg/${author.headImg}` alt="">
                <a href="#">{{noteInfo.userName}}</a>
                <span>文章：{{noteCount}}</span>
            </div>
            <div class="note-content" v-html='noteInfo.content'></div>
        </div>


    </div>
</body>

<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                user: '',
                noteInfo: '',
                author: '',
                noteCount: 3,
            }
        }, methods: {
            //判断用户登录才能写笔记
            write() {
                if (this.user != '') {
                    location.href = "writeNote.html";
                    return;
                }

                layuiMsg("请先登录");
            },
            //注销功能
            exit() {
                localStorage.removeItem("token");
                localStorage.removeItem("user");
                // this.user='';
                location.href = 'index.html';
                console.log("注销");
            },

        }, mounted() {
            let that = this;
            let nid = localStorage.getItem("noteid");
            let writer = localStorage.getItem("writer");

            //设置网页title
            let title = localStorage.getItem("title");
            document.title = title + '-预览';

            //用户登录查询
            $.ajax({
                url: 'http://localhost:8080/foodShare/admin/checkJwt.do',
                dataType: 'json',
                type: 'post',
                beforeSend: function (xhr) {
                    // 使用请求头的方式传递
                    xhr.setRequestHeader("Authorization", localStorage.getItem("token"))
                },
                success: function (res) {
                    if (res.code == 200) {
                        that.user = res.data;
                        // console.log(res.data);
                        return;
                    }
                    console.log("未登录");
                }
            })

            //拿到文章的详细信息
            $.ajax({
                type: "get",
                url: "http://localhost:8080/foodShare/api/noteInfo.do",
                data: "nid=" + nid +'&type='+'0',
                dataType: "json",
                success: function (res) {
                    if (res.code == 200) {
                        that.noteInfo = res.data;
                        // console.log(that.noteInfo);
                    }
                }
            });

            //查询文章作者的信息
            if (writer != '') {
                $.ajax({
                    type: "get",
                    url: "http://localhost:8080/foodShare/api/author.do",
                    data: "writer=" + writer,
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 200) {
                            that.author = res.data;
                            // console.log(that.author);
                        }
                    }
                })
            }


        },
    })
</script>

</html>