diff --git a/src/main/resources/static/front/messageInfo.html b/src/main/resources/static/front/messageInfo.html
new file mode 100644
index 0000000..4c45a5a
--- /dev/null
+++ b/src/main/resources/static/front/messageInfo.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="pragma" content="no-cache"/>
+    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
+    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
+    <title>留言</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/my.css" rel="stylesheet">
+    <link href="css/nav.css" rel="stylesheet">
+
+    <style>
+        [v-cloak] {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+<div id="wrapper" v-cloak>
+    <div class="container">
+        <!-- 头部开始 -->
+        <div class="nx-header">
+            <div style="display: flex;width: 100%; height: 30px; line-height: 30px; background-color: #eee;">
+
+                <div style="flex: 5; text-align: right">
+                    <span v-if="user.name">
+                    欢迎您，{{user.name}}
+                    <a style="margin-right: 50px; color: blue" href="javascript:void(0)" @click="logout">退出</a>
+                    </span>
+                    <a v-if="!(user.name)" href="/end/page/login.html" target="_blank" style="margin-right: 10px; color: #666666">登录</a>
+                    <a href="/end/page/register.html" target="_blank" style="margin-right: 30px; color: #666666">注册</a>
+                </div>
+            </div>
+
+
+
+            <div>
+                <ul style="display: flex; background-color: orange; height: 30px">
+                    <li class="nav-item"><a href="index.html">首页</a></li>
+                    <li class="nav-item"><a href="advertiserInfo.html">系统公告</a></li>
+					<li class="nav-item"><a href="foodsMenuInfo.html">菜谱</a></li>
+<!--					<li class="nav-item"><a href="foodsMaterialInfo.html">食材</a></li>-->
+					<li class="nav-item"><a href="collectInfo.html">收藏</a></li>
+					<li class="nav-item"><a href="notesInfo.html">笔记</a></li>
+					<li class="nav-item"><a href="newsInfo.html">饮食资讯</a></li>
+					<li class="nav-item"><a class="active" href="messageInfo.html">趣味答题</a></li>
+
+                    <li v-if="isShow" class="nav-item"><a href="/end/page/index.html" target="_blank">进入后台系统</a></li>
+                </ul>
+            </div>
+
+        </div>
+        <!-- 头部结束 -->
+    </div>
+    <div class="container"  style="margin-top: 20px">
+        <div class="row">
+            <div class="col-md-12">
+                <h4>您印象最深的一道美食是什么呢？</h4>
+            </div>
+            <div class="col-md-12">
+                <textarea id="message-text" style="resize:none; width: 100%"></textarea>
+            </div>
+            <div class="col-md-12" style="text-align: right;">
+                <button class="btn btn-primary" @click="submitMessage">发送</button>
+                <hr>
+            </div>
+        </div>
+        <div class="row">
+            <div style="background-color: white; min-height: 300px">
+                <div style="width: 100%; height: 50px; background-color: #ddd; line-height: 50px; margin: 30px 0">
+                    <span style="font-weight: bold; margin-left: 20px; font-size: 16px">食客留言（{{totalMessage}}）</span>
+                </div>
+                <div id="comment-content">
+                    <div v-for="item in messages" class="row">
+                        <div class="col-md-1" style="text-align: right">{{item.name}}</div>
+                        <div class="col-md-10">
+                            <div class="row" style="padding: 0 40px">
+                                <div class="col-md-12" style="text-align: justify;">{{item.content}}</div>
+                                <div class="col-md-12" style="text-align: right; margin-top: 10px">
+                                    <span style="color: #888888">{{item.time}}</span>
+                                    <hr>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="js/jquery-1.10.2.js"></script>
+<script src="js/bootstrap.min.js"></script>
+<script src="js/jquery.metisMenu.js"></script>
+<script src="js/vue2.6.11/axios.js"></script>
+<script src="js/vue2.6.11/vue.min.js"></script>
+
+<script>
+    Date.prototype.Format = function (fmt) { // author: meizz
+        let o = {
+            "M+": this.getMonth() + 1, // 月份
+            "d+": this.getDate(), // 日
+            "h+": this.getHours(), // 小时
+            "m+": this.getMinutes(), // 分
+            "s+": this.getSeconds(), // 秒
+            "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
+            "S": this.getMilliseconds() // 毫秒
+        };
+        if (/(y+)/.test(fmt))
+            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+        for (var k in o)
+            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+        return fmt;
+    };
+
+    new Vue({
+        el: '#wrapper',
+        data: {
+            messages: [],
+            totalMessage: 0,
+            isShow: false,
+            user: {},
+            isShow: false
+        },
+
+        created: function() {
+            axios.get('/auth').then(res => {
+                if (res.data.code === '0') {
+                    this.user = res.data.data;
+                    if (this.user.level !== 3) {
+                        this.isShow = true;
+                    }
+                }
+            });
+            this.loadMessages(1);
+        },
+
+        methods: {
+            loadMessages() {
+                axios.get('/messageInfo').then(res => {
+                    if (res.data.code === '0') {
+                        this.messages = res.data.data;
+                        this.totalMessage = this.messages.length;
+                    } else {
+                        alert(res.data.msg)
+                    }
+                })
+            },
+            submitMessage() {
+                let user = JSON.parse(localStorage.getItem('user'));
+                if (!user) {
+                    alert('请先登录');
+                    this.loadMessages();
+                    return;
+                }
+                let data = {};
+                data.content = $('#message-text').val();
+                data.name = user.name;
+                data.time = new Date().Format('yyyy-MM-dd hh:mm:ss');
+                axios.post('/messageInfo', data).then(res => {
+                    $('#message-text').val('');
+                    alert('留言成功');
+                    this.loadMessages();
+                })
+            },
+            logout() {
+                axios.get("/logout").then(res => {
+                    if(res.data.code === '0') {
+                        location.href = '/front/index.html';
+                    } else {
+                        msg('error', res.data.msg);
+                    }
+                })
+            }
+        }
+    })
+</script>
+</body>
+</html>
