mock

package.json

@@ -48,6 +48,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "mockjs": "^1.1.0",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

src/main.js

@@ -37,6 +37,8 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+//mock
+import "./mock/index.js"
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts

src/mock/index.js

@@ -0,0 +1,32 @@
+const Mock = require("mockjs");
+let data = Mock.mock({
+    "data|100": [ //生成xxx条数据 数组
+        {
+            "messageID|+1": 1,//生成id，自增1
+            "messageTitle": "@ctitle(3,7)", //生成消息标题，长度为10个汉字
+            "shopName": "@cname",//生成商品名 ， 都是中国人的名字
+            "messageTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号
+            "messageData":"@date('yyyy-MM-dd')",//生成随机发布时间
+            "shopAddress": "@county(true)", //随机生成地址
+            "shopStar|1-5": "★", //随机生成1-5个星星
+            "salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间
+            "shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成随机图片，大小/背景色/字体颜色/文字信息
+            "food|2": [ //每个商品中再随机生成2个food
+                {
+                    "foodName": "@cname", //food的名字
+                    "foodPic": "@Image('100x40','#c33', '#ffffff','小可爱')",//生成随机图片，大小/背景色/字体颜色/文字信息
+                    "foodPrice|1-100": 20,//生成1-100的随机数
+                    "aname|2": [
+                        { 
+                            "aname": "@cname", 
+                            "aprice|30-60": 20 
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+})
+Mock.mock(/goods\/goodAll/, 'post', () => { //三个参数。第一个：路径，第二个：请求方式post/get，第三个：回调，返回值
+    return data
+})

src/router/index.js

@@ -162,16 +162,17 @@ export const constantRoutes = [
     meta: { title: '公告管理', icon: 'announcement' },
     children: [
       {
-        path: 'announcementAdd',
-        component: () => import('@/views/announcement/add/index'),
-        name: 'announcementAdd',
-        meta: { title: '创建公告', icon: 'user' }
-      }, {
         path: 'announcementList',
         component: () => import('@/views/announcement/list/index'),
         name: 'announcementList',
-        meta: { title: '公告列表', icon: 'user' }
-      }
+        meta: { title: '公告列表', icon: 'announcement' }
+      },
+      {
+        path: 'announcementAdd',
+        component: () => import('@/views/announcement/add/index'),
+        name: 'announcementAdd',
+        meta: { title: '创建公告', icon: 'createseries' }
+      },
     ],
   },
   //消息管理

src/views/announcement/add/index.vue

@@ -1,31 +1,37 @@
 <template>
   <div>
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-      <el-form-item label="公告标题" prop="name">
-        <el-input v-model="ruleForm.name"></el-input>
-      </el-form-item>
-      <el-form-item label="活动时间" required>
-        <el-col :span="11">
-          <el-form-item prop="date1">
-            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
-              style="width: 100%;"></el-date-picker>
+    <el-card class="announcementBox" style="height: 700px;width: 700px;">
+      <div class="content">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item label="公告标题" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
           </el-form-item>
-        </el-col>
-        <el-col :span="11">
-          <el-form-item prop="date2">
-            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
+          <el-form-item label="活动时间" required>
+            <el-col :span="11">
+              <el-form-item prop="date1">
+                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
+                  style="width: 100%;"></el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="11">
+              <el-form-item prop="date2">
+                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
+              </el-form-item>
+            </el-col>
           </el-form-item>
-        </el-col>
-      </el-form-item>
-      <el-card style="height: 610px;">
-        <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
-        </quill-editor>
-      </el-card>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
-        <el-button @click="resetForm('ruleForm')">重置</el-button>
-      </el-form-item>
-    </el-form>
+          <el-form-item label="公告内容" prop="desc">
+            <quill-editor v-model="ruleForm.desc" ref="myQuillEditor" style="height: 370px;" :options="editorOption">
+            </quill-editor>
+          </el-form-item>
+          <div class="button">
+            <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+            <el-button @click="resetForm('ruleForm')">重置</el-button>
+          </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-card>
   </div>
 </template>
 <script>
@@ -44,7 +50,6 @@ export default {
   data() {
     return {
       //富文本
-      content: null,
       editorOption: {},
 
       ruleForm: {
@@ -87,4 +92,20 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style>
+.announcementBox {
+  margin-top: 40px;
+  margin-left: 300px;
+}
+.content{
+  margin-top: 20px;
+  margin-right: 30px;
+  position: relative;
+}
+.button{
+  position: absolute;
+  margin-top: 70px;
+}
+</style>

src/views/message/messageList/index.vue

@@ -1,5 +1,90 @@
 <template>
-    <div>
-        消息列表
-    </div>
-</template>
+  <div>
+    <el-card style="height: 160px;width: 1200px; margin: 30px 0 20px 30px;">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <div>
+          <i class="el-icon-search search">筛选搜索</i>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">查询搜索</el-button>
+            <el-button @click="resetForm('ruleForm')">重置</el-button>
+          </el-form-item>
+        </div>
+        <el-form-item label="消息标题">
+          <el-input v-model="formInline.messageTitle" placeholder="筛选消息标题"></el-input>
+        </el-form-item>
+        <span class="demonstration">发布时间</span>
+        <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
+          :default-time="['12:00:00']">
+        </el-date-picker>
+      </el-form>
+    </el-card>
+    <el-card class="addContainer">
+      <i class="el-icon-tickets">消息列表</i>
+      <el-button disabled class="addButton">添加</el-button>
+    </el-card>
+    <el-card style="height: 300px;width: 1200px; margin-left: 30px;">
+      <el-table :data="tableData" border height="250" style="width: 100%">
+        <el-table-column fixed prop="messageID" label="ID" align="center" width="250">
+        </el-table-column>
+        <el-table-column prop="messageTitle" label="消息标题" align="center" width="220">
+        </el-table-column>
+        <el-table-column prop="messageTel" label="手机号" align="center" width="220">
+        </el-table-column>
+        <el-table-column prop="messageData" label="发布时间" align="center" width="220">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
+            <el-button type="primy" size="small">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination background layout="prev, pager, next" :total="1000">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import axios from "axios"
+export default {
+  data() {
+    return {
+      formInline: {
+        messageTitle: '',
+      },
+      //消息列表
+      tableData: []
+    }
+  },
+  methods: {
+    onSubmit() {
+      console.log('submit!');
+    },
+    a() {
+      axios.post("http://localhost:8080/goods/goodAll").then((res) => {
+        console.log(res)
+        this.tableData = res.data.data
+      }).catch(error => {
+
+      })
+    },
+  },
+  mounted() {
+    this.a();
+  }
+}
+
+</script>
+
+<style>
+/* 消息列表行 */
+.addContainer{
+  height: 70px;
+  width: 1200px; 
+  margin: 0 0 20px 30px;
+}
+.addButton{    
+  margin-left: 990px;
+}
+</style>