Vue实战笔记01 - 简易网站后台的搭建之分类功能的实现

简易网站后台的搭建 — 分类功能的实现

本文章是学习B站全栈之巅系列课程的学习笔记，利用笔记来吸收升华学到的知识。

学习感受是，如果有一定的nodejs+mongoDB+vue的基础，加做过一两个相关的练手项目，再学习这个课程，你会发现原来搭建一个完整有基础功能的网站，是如此的简单，会有很大的收获。
参考源码：https://github.com/morningClock/herohoner
视频学习地址：点击这里

1.项目目录

完整的网站项目中，一般会拥有前台网站，后台管理网站，以及服务器端处理程序。

前台网站：提供给用户访问的网站。

后台管理网站：对网站数据进行可视化管理的网站。

服务端处理程序：处理网站请求。

所以我们在项目下，建立三个子目录为

• /web

  使用vue搭建的前台网站。

• /admin

  使用vue搭建的后台网站

• /server

  提供接口处理。

根据开发的简易程度，进行开发顺序的确认。首先网站的前台项目是项目中最复杂的部分，因为一开始没有数据难以呈现效果，而且涉及到大量细节问题，所以要到最后开发。

我们在开发网站时需要拥有数据，那么我们就需要从后台管理系统，以及后端接口处理，进行着手开发。

2.快速搭建后台基础界面

项目中，使用了Element的UI库，没接触过UI库，其实也不影响使用，因为UI库是为了简化开发的，所以基本上可以拿来就用。而且后端是面向管理员的，所以对界面的细节要求不高。

Element安装有两种方法：

• 使用vue add element

• 使用npm install element-ui

  需要手动在main.js中引入Element。

  // 引入element-ui
  import ElementUI from 'element-ui'
  // 引入样式库
  import 'element-ui/lib/theme-chalk/index.css'
  // 挂载Element
  Vue.use(ElementUI)
  

  当然，ElementUI还提供了局部组件引用的功能，详细见Element 按需引入。

我们还需要用到vue-router，进行组件路由。

我们直接使用vue add router,进行默认的配置。项目中会生成views目录，并且拥有三个组件，此时，我们只需要简单的配置。

• 配置router.js

  import Vue from 'vue'
  import Router from 'vue-router'
  import Main from './views/Main.vue'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'main',
        component: Main,
      }
      
    ]
  })
  
  

• 配置App.vue

• 主页面Main.vue

  简单的配置并应用Element的布局容器章节中的示例：实例

  其中需要修改的是，将组件的高度，设置为100vh，撑开容器的高度。

此时，就已经完成了最简单的后台界面了。接下来就是按照需求，进行对应的修改。

3.分类功能的实现

项目网站中，分类是最基础的功能，比如网站的新闻，活动。这些都是分类。当然分类中，还会有许多子分类。我们要实现一个分类的管理，那么我们要对分类进行增删改查操作，我们先从新增开始。

新增分类

现在我们的后台网站，只有一个主页面，并且显示的内容还是模板中的内容。我们先初始化后台的基础页面，保留一些我们需要展示的内容。

• 后台管理页面的前端修改

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zvxm29HX-1573006263218)(F:\Github\myrepositories\learning-notes\全栈之巅学习笔记\lesson1\assets\image-20191104143432627.png)]

  我们需要这样的列表，那么我们把其他清空了，只保留一项菜单，新增选项分类列表与新建分类。

  1. 由于我们需要点击选项时，进行路由。使用element提供的router选项，就可以点击跳转到index属性所指向的组件了，可配置选项点击这里查看。

  2. 中，现在是写死的表格，我们需要点击选项切换，所以我们要抽离成两个组件(CategoryList.vue 与 CategoryEdit.vue)，并配置子路由。

     CategoryList展示分类列表、CategoryEdit用于分类的新建与编辑。

     我们预设路由是/categories/list与/categories/create。

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Wb3jzmv-1573006263220)(F:\Github\myrepositories\learning-notes\全栈之巅学习笔记\lesson1\assets\image-20191104145518009.png)]

     Main.vue的tempalte部分

     CategoryList.vue 新建分类页面

     
     export default {
       data () {
         return {
           model: {}
         }
       },
       methods: {
         save () {
           // 保存新建的分类
         }
       }
     }
     

     router.js路由配置

     import Vue from 'vue'
     import Router from 'vue-router'
     import Main from './views/Main.vue'
     import CategoryEdit from './views/CategoryEdit.vue'
     
     Vue.use(Router)
     
     export default new Router({
       routes: [
         {
           path: '/',
           name: 'main',
           component: Main,
           children: [
             { path: '/categories/create', component: CategoryEdit },
           ]
         }
         
       ]
     })
     

• 新建分类后端接口的实现

  后端接口的实现其实非常简单，此时我们进入server目录，进行后端接口的实现。

  此项目中我们使用了express、mongoose以及跨域处理插件cors。

  npm install express mongoose cors
  

  开启监听端口服务index.js。

  const express = require('express')
  
  const app = express()
  
  // 解决跨域问题
  app.use(require('cors')())
  
  app.listen(3000, () => {
    console.log('http://localhost:3000')
  })
  

  此时我们就可以run起来，看见提示语句。

  为了让层次更分明，我们需要将接口写入admin/api，方便管理。

  const express = require('express')
  const app = express()
  app.use(require('cors')())
  app.use(express.json())
  
  // 引入admin接口,传入express对象
  require('./routes/admin')(app)
  
  app.listen(3000, () => {
    console.log('http://localhost:3000')
  })
  

  然后在admin/api新建一个index.js`的接口处理文件，管理admin中相关的接口。

  module.exports = app => {
    const express = require('express')  
    const router = express.Router()
    // 接口
    router.post('/categories', async(req, res) => {
      res.send(‘請求成功’)
    })
  
    // 输出router对象，挂载在全局express上
    app.use('/admin/api', router)
  }
  

  此时我们可以配合前端界面，进行接口的测试。

  前端安装axios插件，并单独新建一个http.js进行请求方法的管理。

  import axios from 'axios'
  
  const http = axios.create({
    baseURL: 'http://localhost:3000/admin/api'
  })
  
  export default http
  

  main.js中引用该配置文件，并挂载到Vue对象上

  // 引入axios
  import http from './http'
  Vue.prototype.$http = http
  

  修改CategoryEdit.vue中的save方法，发起请求，测试是否成功

  async save () {
      // 保存新建的分类
      res = await this.$http.post('categories', this.model)
      // 输出`请求成功`
  	console.log(res.data)
  }
  

  此时我们的接口已经正常运作，我们需要配置我们的数据库，用作数据的存储。

  当然数据库，我们也是希望用单独的文件来管理，防止index.js中内容过多，不容易后期的管理。

  新建plugins文件夹，并创建db.js

  module.exports = app => {
    // 连接mongoDB
    const mongoose = require('mongoose')
    // herohoner，可以自定义
    mongoose.connect('mongodb://127.0.0.1:27017/herohoner', {
      useNewUrlParser: true
    })
  }
  

  然后再index.js入口文件中，引用配置

  // 引入db
  require('./plugins/db')(app)
  

  接入数据库的操作就完成，接下来就是将数据写入数据库中，mongoDB中，我们要写入数据，必需要对数据进行规范，写Schema约束，然后使用Schema创建model模型，最后再将数据写入model模型中。

  每一个表都有自己的Schema，所以我们可以单独管理各个Schema创建的model模型。

  新建文件夹models用于存放不同的模型，在下面创建我们要使用的model管理文件Category.js。

  const mongoose = require('mongoose')
  // 创建约束
  const schema = new mongoose.Schema({
    name: { type: String }
  })
  // 输出具备约束的model模型
  module.exports = mongoose.model('Category', schema)
  

  万事俱备，只欠东风，我们的数据就可以写入数据库了。回到/routes/admin/api/index.js中

  写入接口

    // 引入model模型
    const Category = require('../../models/Category')
    /**
     * 新建分类
     */
    router.post('/categories', async(req, res) => {
      // 创建该模型，并填入post中传递过来的数据。
      const model = await Category.create(req.body)
      // 将创建后的模型数据返回到前端
      res.send(model)
    })
  
  

  前端接受到后端的响应，进行对应的处理

  async save () {
      let res
      if (this.id) {
          // 编辑
          res = await this.$http.put(`categories/${this.id}`, this.model)
      } else {
          // 新建
          res = await this.$http.post('categories', this.model)
      }
      this.$router.push('/categories/list')
      this.$message({
          type: 'success',
          message: '保存成功'
      })
  },
  

查询分类列表

不要害怕，完成新增分类完成后，基本上已经完成了大部分的后端接口功能了，接下来操作都几乎差不多。

CategoryList.vue

我们照样从官网，搬一些基础的模板过来，查询时，我们只需要在页面初始化阶段，发送一个GET请求，请求查询接口就可以完成查询了。

后端接口的修改非常简单，只需要在admin/api/index.js中新增接口处理

/**
* 获取分类列表
*/
router.get('/categories', async(req, res) => {
    // 这里限制了10条，后期可以使用limit做分页处理
    const items = await Category.find().limit(10)
    res.send(items)
})

查询也完成了，是不是十分简单，只需要熟悉一下mongoose中的数据操作方法就可以了。

编辑分类

编辑分类也完全是一样的套路，修改前端，请求接口，新增接口处理，编辑数据库中对应的数据。

当然这次不一样的是，我们需要知道我们在编辑哪个数据，这时候我们要使用到唯一标识_id。

在前端请求编辑接口时，在url上添加查询出来的_id就可以了。非常简单。

其中scope.row代表了表格中，当前行的数据。

    编辑

当然编辑页我们也需要，但是编辑页和新建页可以复用，所以我们可以修改成如下

还需要新增一个路由。

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from './views/Main.vue'
import CategoryEdit from './views/CategoryEdit.vue'
import CategoryList from './views/CategoryList.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'main',
      component: Main,
      children: [
        { path: '/categories/create', component: CategoryEdit },
        // 技巧：注入url参数进入该组件，
        // 组件使用路由参数需要使用this.$router.params可实现同样效果
        { path: '/categories/edit/:id', component: CategoryEdit, props: true },
        { path: '/categories/list', component: CategoryList }
      ]
    }
    
  ]
})

前端大功告成，到后端新增一个获取详情接口以及更新分类的接口就完事了。

   /**
   * 编辑分类
   */
  router.put('/categories/:id', async(req, res) => {
    const model = await Category.findByIdAndUpdate(req.params.id, req.body)
    res.send(model)
  })
  /**
  * 获取分类详情
  */
  router.get('/categories/:id', async(req, res) => {
    const model = await Category.findById(req.params.id)
    res.send(model)
  })

删除分类

同样的套路，不过我们要保证体验，需要提供一个提示确认窗口

categoryList.vue中添加

删除

async remove (row) {
    this.$confirm(`是否确定删除分类${row.name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        const res = await this.$http.delete(`categories/${row._id}`)
        this.fetch();
        this.$message({
            type: 'success',
            message: '删除成功!'
        });
    })
}

后端接口新增删除接口

  /**
   * 删除分类
   */
  router.delete('/categories/:id', async(req, res) => {
    await Category.findByIdAndDelete(req.params.id, req.body)
    res.send({
      success: true
    })
  })

增加上级分类

分类通常会有一定的关联，所以我们增加在每一个分类中添加上级分类的字段，通过该字段可以查询到上级分类的相关数据。

前端List页和Edit页面增加上级分类的信息。

CategoryList.vue在table中新增一列，展示获取到分类的parent选项对应的name名称。

CategoryEdit.vue增加一个下拉选项框，选择已有的分类作为父级分类。

    // 默认选择已有的parent
    
    // 分类列表
    
    

我们还需要获取到所有列表的信息。

async fetchParents () {
    const res = await this.$http.get(`categories`)
    this.parents = res.data
}

这样前端部分就完成了。

后端相对简单，只需要在模型中增加一个字段，并用moongoose.SchemaTypes.Object，并用ref属性关联模型。然后在查询时，使用populate('字段名称')方法查询出关联模型的数据，就可以了。

Category.js

const mongoose = require('mongoose')

const schema = new mongoose.Schema({
  name: { type: String },
  // type为mongoose的唯一id标识mongoose.SchemaTypes.ObjectId
  // ref为需要关联的model
  parent: { type: mongoose.SchemaTypes.ObjectId, ref: 'Category'}
})

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

index.js

/**
 * 获取分类列表
*/
router.get('/categories', async(req, res) => {
  // populate关联字段
  // populate指定的字段会继续找到指定的字段它的model对象
  const items = await Category.find().populate('parent').limit(10)
  res.send(items)
})

修复侧边栏状态不同步bug

眼尖的你，可能已经发现了，此时，新建后，跳转回列表页，发现侧边栏的高亮，竟然还是新建列表。一阵苦恼怎么做。查看一下ElementUI的文档最下面选项配置，或者百度一下，都可以轻松解决这个问题。

解决方法：使用default-active,每次更新组件页面时，动态改变其值。说白了，就是让它值跟随你的url的$router.path来变化。

    
        
        
            
            分类列表
            新建分类
        
    

到此你就完成了一个拥有简单分类功能的后台了，接下来我们把接口做成通用的增删改查接口。