合并

package.json

@@ -17,6 +17,7 @@
     "qrcode.vue": "^1.7.0",
     "url-search-params-polyfill": "^8.0.0",
     "vue": "^2.6.6",
+    "vue-baidu-map": "^0.21.22",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
     "wangeditor": "^3.1.1"

src/api.js

@@ -179,7 +179,7 @@ export default {
 		})
 	},
 	// 文章列表
-	getArticle: params => {
+	getArticleList: params => {
 		return axios.get(`${baseURL}/api/admin/article/list`, {
 			params: params
 		})

src/components/fuEditor/index.vue

@@ -0,0 +1,143 @@
+<template lang="html">
+  <div class="editor">
+    <div ref="toolbar" class="toolbar">
+    </div>
+    <div ref="editor" class="text">
+    </div>
+  </div>
+</template>
+
+<script>
+import E from "wangeditor";
+export default {
+  name: "editoritem",
+  data() {
+    return {
+      // uploadPath,
+      editor: null,
+      info_: null
+    };
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    isClear: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    isClear(val) {
+      // 触发清除文本域内容
+      if (val) {
+        this.editor.txt.clear();
+        this.info_ = null;
+      }
+    },
+    value: function(value) {
+      if (value !== this.editor.txt.html()) {
+        this.editor.txt.html(this.value);
+      }
+    }
+    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  mounted() {
+    this.seteditor();
+    this.editor.txt.html(this.value);
+  },
+  methods: {
+    seteditor() {
+      // http://192.168.2.125:8080/admin/storage/create
+      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
+      this.editor.customConfig.uploadImgShowBase64 = false; // base 64 存储图片
+      this.editor.customConfig.uploadImgServer =
+        "http://otp.cdinfotech.top/file/upload_images"; // 配置服务器端地址
+      this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header
+      this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名
+      this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
+      this.editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
+      this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+
+      // 配置菜单
+      this.editor.customConfig.menus = [
+        "head", // 标题
+        "bold", // 粗体
+        "fontSize", // 字号
+        "fontName", // 字体
+        "italic", // 斜体
+        "underline", // 下划线
+        "strikeThrough", // 删除线
+        "foreColor", // 文字颜色
+        "backColor", // 背景颜色
+        "link", // 插入链接
+        "list", // 列表
+        "justify", // 对齐方式
+        "quote", // 引用
+        "emoticon", // 表情
+        "image", // 插入图片
+        "table", // 表格
+        "video", // 插入视频
+        "code", // 插入代码
+        "undo", // 撤销
+        "redo", // 重复
+        "fullscreen" // 全屏
+      ];
+
+      this.editor.customConfig.uploadImgHooks = {
+        fail: (xhr, editor, result) => {
+          // 插入图片失败回调
+        },
+        success: (xhr, editor, result) => {
+          // 图片上传成功回调
+        },
+        timeout: (xhr, editor) => {
+          // 网络超时的回调
+        },
+        error: (xhr, editor) => {
+          // 图片上传错误的回调
+        },
+        customInsert: (insertImg, result, editor) => {
+          // 图片上传成功，插入图片的回调
+          //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
+          // console.log(result.data[0].url)
+          //insertImg()为插入图片的函数
+          //循环插入图片
+          // for (let i = 0; i < 1; i++) {
+          // console.log(result)
+          let url = "http://otp.cdinfotech.top" + result.url;
+          insertImg(url);
+          // }
+        }
+      };
+      this.editor.customConfig.onchange = html => {
+        this.info_ = html; // 绑定当前逐渐地值
+        this.$emit("change", this.info_); // 将内容同步到父组件中
+      };
+      // 创建富文本编辑器
+      this.editor.create();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.editor {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  z-index: 0;
+  /deep/ .toolbar {
+    border: 1px solid #ccc;
+  }
+  /deep/ .text {
+    border: 1px solid #ccc;
+    min-height: 500px;
+  }
+}
+</style>

src/main.js

@@ -6,6 +6,12 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import 'font-awesome/css/font-awesome.css'
 import api from './api';
+
+import BaiduMap from 'vue-baidu-map'
+Vue.use(BaiduMap, {
+  ak: '1hqg34NFaCw9jcv0xG82cI7uINFaXGGM'
+})
+
 Vue.use(ElementUI);
 Vue.prototype.$api = api;
 Vue.config.productionTip = false

src/router.js

@@ -138,6 +138,11 @@ export default new Router({
           component: () => import('./views/content/Article.vue'),
           name: '文章管理'
         },
+        {
+          path: '/addArticle',
+          component: () => import('./views/content/addArticle.vue'),
+          name: '新增文章'
+        },
       ]
     },
     {

src/views/content/Article.vue

@@ -37,8 +37,8 @@
     </div>
     <el-table class="table" :data="list" border style="width: 100%">
       <el-table-column type="selection" fixed="left" width="55"></el-table-column>
-      <el-table-column prop="name" label="文章标题"></el-table-column>
-      <el-table-column prop="date" label="创建时间"></el-table-column>
+      <el-table-column prop="title" label="文章标题"></el-table-column>
+      <el-table-column prop="ctime" label="创建时间"></el-table-column>
       <el-table-column prop="zip" width="400" label="操作">
         <template>
           <!-- <el-button size="mini" type="success">查看</el-button> -->
@@ -62,24 +62,27 @@ export default {
       form: { name: "" },
       total: 1,
       list: [
-        {
-          date: "2020-05-02 12:00:00",
-          name: "文章标题1"
-        },
-        {
-          date: "2020-05-02 12:00:00",
-          name: "文章标题2"
-        },
-        {
-          date: "2020-05-02 12:00:00",
-          name: "文章标题3"
-        }
       ]
     };
   },
   methods: {
-    gopage(){}
+    gopage() {},
+    getData() {
+      this.$api.getArticleList().then(res => {
+        if (res.status == 200) {
+          this.list = res.data.data.list;
+          this.total = res.data.data.total;
+        } else {
+          this.$message({
+            message: res.message,
+            type: "error"
+          });
+        }
+      });
+    }
   },
-  created() {}
+  created() {
+    this.getData();
+  }
 };
 </script>

src/views/content/addArticle.vue

@@ -0,0 +1,124 @@
+<style lang="scss">
+.add {
+  .el-input,
+  button {
+    width: 300px;
+  }
+  .bm-view {
+    width: 100%;
+    height: 300px;
+  }
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+}
+</style>
+<template>
+  <section class="add">
+    <p>内容管理 > 新增文章</p>
+    <div class="content">
+      <el-form label-width="80px">
+        <el-form-item label="标题">
+          <el-input placeholder="标题" v-model="form.title"></el-input>
+        </el-form-item>
+        <el-form-item label="栏目">
+          <el-input type="name" placeholder="栏目" v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="详情">
+          <fuEditor v-model="form.content" :isClear="isClear" @change="change"></fuEditor>
+        </el-form-item>
+        <el-form-item label="多图上传">
+          <el-upload
+            class="avatar-uploader"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="百度地图定位">
+          <baidu-map class="bm-view" center="成都"></baidu-map>
+        </el-form-item>
+
+        <el-form-item label="联系方式">
+          <el-input placeholder="联系方式" v-model="form.title"></el-input>
+        </el-form-item>
+        <el-form-item label=" ">
+          <el-button type="primary">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </section>
+</template>
+<script>
+import fuEditor from "@/components/fuEditor/index.vue";
+export default {
+  components: {
+    fuEditor
+  },
+  data() {
+    return {
+      test: "",
+      form: { name: 1, a: "", status: 1 },
+      options: [
+        {
+          value: "选项1",
+          label: "超级管理员"
+        },
+        {
+          value: "选项2",
+          label: "一级管理员"
+        },
+        {
+          value: "选项3",
+          label: "二级管理员"
+        },
+        {
+          value: "选项4",
+          label: "三级管理员"
+        },
+        {
+          value: "选项5",
+          label: "四级管理员"
+        }
+      ],
+      isClear: false
+    };
+  },
+  methods: {
+    gopage() {},
+    change(val) {
+      this.form.content = val;
+    }
+  },
+  created() {}
+};
+</script>
+
+
+
+
+

src/views/system/AddAccount.vue

@@ -50,10 +50,11 @@
 </template>
 <script>
 export default {
+ 
   data() {
     return {
       test: "",
-      form: { name: 1, a: "",status:1 },
+      form: { name: 1, a: "", status: 1 },
       options: [
         {
           value: "选项1",

src/views/system/Index.vue

@@ -38,10 +38,10 @@
     </div>
     <el-table class="table" :data="list" border style="width: 100%">
       <el-table-column type="selection" fixed="left" width="55"></el-table-column>
-      <el-table-column prop="account" label="账号"></el-table-column>
-      <el-table-column prop="name" label="姓名"></el-table-column>
-      <el-table-column prop="permission" label="权限"></el-table-column>
-      <el-table-column prop="date" label="创建时间"></el-table-column>
+      <el-table-column prop="name" label="账号"></el-table-column>
+      <el-table-column prop="realname" label="姓名"></el-table-column>
+      <el-table-column prop="permissions" label="权限"></el-table-column>
+      <el-table-column prop="ctime" label="创建时间"></el-table-column>
       <el-table-column prop="zip" width="300" label="操作">
         <template>
           <el-button size="mini" type="warning">编辑</el-button>
@@ -64,18 +64,27 @@ export default {
       form: { name: "" },
       total: 1,
       list: [
-        {
-          account: "admin",
-          name: "肖小肖",
-          permission: "内容管理，培训管理",
-          date: "2020-05-02 12:00:00"
-        }
       ]
     };
   },
   methods: {
-     gopage(){},
+    gopage() {},
+    getData() {
+      this.$api.getAccountList().then(res => {
+        if (res.status == 200) {
+          this.list = res.data.data.list;
+          this.total = res.data.data.total;
+        } else {
+          this.$message({
+            message: res.message,
+            type: "error"
+          });
+        }
+      });
+    }
   },
-  created() {}
+  created() {
+    this.getData();
+  }
 };
 </script>

src/views/user/Index.vue

@@ -1,26 +1,26 @@
 <style lang="scss">
-    .apply{
-       .filter{
-            background: #fff;
-            padding: 20px 20px 10px; 
-            border:1px solid #EDEDED;
-            border-radius:2px;
-            margin-bottom: 10px;
-            margin-top: 10px;
-            .el-form-item{
-                margin-bottom: 10px;
-            }
-            .el-input,.el-select{
-                width: 150px;
-            }
-    
-       }
-       thead{
-           th{
-               background: #eee;
-           }
-       }
+.apply {
+  .filter {
+    background: #fff;
+    padding: 20px 20px 10px;
+    border: 1px solid #ededed;
+    border-radius: 2px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    .el-form-item {
+      margin-bottom: 10px;
     }
+    .el-input,
+    .el-select {
+      width: 150px;
+    }
+  }
+  thead {
+    th {
+      background: #eee;
+    }
+  }
+}
 </style>
 <template>
     <section class="apply">
@@ -82,7 +82,7 @@
     </section>
 </template>
 <script>
-import Page from '../../components/Page';
+import Page from "../../components/Page";
 // import { Base64 } from 'js-base64';
 export default {
   components:{
@@ -112,5 +112,5 @@ export default {
   created(){
     this.getData()
   }
-}
+};
 </script>