学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（2.13-2.14）

【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（2.13-2.14）

本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会
https://gitee.com/blaunicorn/node-vue-wangzherongyao
持续更新中…

2.13 文章管理，同一篇文章可能属于多个分类，这个要注意

2.13.1 admin端Main.vue中添加侧边栏

// admin\src\views\Main.vue
        <el-menu-item-group>
          <template slot="title">文章</template>
          <el-menu-item index="/articles/create">新建文章</el-menu-item>
          <el-menu-item index="/articles/list">文章列表</el-menu-item>
        </el-menu-item-group>

2.13.2 admin端复制添加ArticleEdit.vue和ArticleList.vue

2.13.3 admin端router.js中添加路由

// admin\src\router\index.js
import ArticleEdit from '../views/ArticleEdit.vue'
import ArticleList from '../views/ArticleList.vue'

      {path:'/articles/create',component:ArticleEdit},
      {path:'/articles/List',component:ArticleList},
      {path:'/articles/create/:id',component:ArticleEdit,props:true}

2.13.4 修改ArticleEdit.vue

// admin\src\views\ArticleEdit.vue
<template>
  <div class="about">
    <h1>{{id ? "编辑":"新建"}}分类</h1>
    <el-form label-width="120px" @submit.native.prevent="save">

      <!-- 上级分类选择,label是显示的内容，value是实际保存的值 -->
      <el-form-item label="所属分类">
        <el-select v-model="model.categories" multiple >
          <el-option v-for="item in categories" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="标题" >
        <el-input v-model="model.title"></el-input>
      </el-form-item>
      <el-form-item label="详情" >
        <el-input v-model="model.body"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">上传</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props:{
    id:{}
  },
  data(){
    return{
      model:{},
      categories: []
    }
  },
  methods:{
    async save(){
      if(this.id){
        this.$http.put(`/rest/articles/${this.id}`,this.model)
      }else{
        this.$http.post('/rest/articles',this.model)
      }
      this.$router.push('/articles/list')
      this.$message({
        type:'success',
        message:'保存成功'
      })
    },
    async fetch(){
      const res = await this.$http.get(`/rest/articles/${this.id}`)
      this.model = res.data
    },
    async fetchCategories(){
      const res = await this.$http.get(`/rest/categories`)
      this.categories = res.data
    }
  },
  created(){
    this.fetchCategories()
    this.id && this.fetch()
  }
}
</script>

2.13.5 server端添加Article.js模型

// server\models\Article.js
const mongoose = require('mongoose')

const schema = new mongoose.Schema({
    title:{type:String},
    categories:[{type:mongoose.SchemaTypes.ObjectId,ref:'Category'}]
    body:{type:String}
})

module.exports = mongoose.model('Article',schema)

2.13.6、admin端修改ArticleList.vue

// admin\src\views\ArticleList.vue
<template>
  <div class="about">
    <h1>文章列表</h1>
    <el-table :data="items">
      <el-table-column prop="_id" label="ID"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      
      <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="$router.push(`/article/create/${scope.row._id}`)" type="text" size="small">编辑</el-button>
        <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>


<script>
export default {
  data(){
    return{
      items:[]
    }
  },
  methods:{
    async fetch(){
      const res = await this.$http.get('/rest/article')
      this.items = res.data
    },
    async remove(row){
      this.$confirm(`是否要删除文章${row.title}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await this.$http.delete(`/rest/article/${row._id}`)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetch()
        })
    }
  },
  created(){
    this.fetch()
  }
}
</script>

2.14 富文本编辑器使用github上的 vue2-editor 可直接npm下载 或 vue-quill-editor

// admin 目录下安装
npm install --save vue2-editor

ps:优化富文本内 图片上传 vue2-editor 自定义上传图片函数已经改为 @image-added

<template>
    <vue-editor
        id="editor"
        useCustomImageHandler
        @image-added="handleImageAdded" 
        v-model="model.body"
    ></vue-editor>
</template>
<script>
  import { VueEditor } from 'vue2-editor'; // 解构写法
  //   import aaa from 'vue2-editor';  // 另一种写法，对象写法 ，用 aaa.VueEditor 获取
  export default {
    components: {
      VueEditor,
    },
    methods: {
      // 富文本编辑器图片处理
      async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
        console.log(111);
        const formData = new FormData();
        formData.append('file', file);
        const res = await this.$http.post('upload', formData);
        Editor.insertEmbed(cursorLocation, 'image', res.data.url);
        resetUploader();
      },
    }
  }
</script>