vue个人博客开发记录--后台界面搭建&通用增删改查接口（一）

1. 初始化项目

• 工具安装和环境搭建（后台）

• npm init -y
  npm install express@next --save
  npm install mongodb --save
  npm i element-ui -S
  

2.基于Element UI的后台管理基础界面搭建

2.1 创建分类

• 1.搭建好页面，准备发送请求
• 2.连接数据库

//db.js
module.exports = app =>{
  // 引入第三方模块mongodb并创建一个客户端
  const mongoose = require('mongoose')
  //连接数据库
  const url = "mongodb://127.0.0.1:27017/douban";
  //检测是否连接成功
  mongoose.connect(url,{useUnifiedTopology: true,useNewUrlParser: true }).then(()=>console.log('数据库连接成功'))
    .catch(err=>{console.log('数据库连接失败',err)})
}

• 3.创建分类集合实例

//Category.js
const mongoose = require('mongoose')
//创建集合实例
const categorySchema = new mongoose.Schema({
  name:{type:String}
})
//创建集合并应用规则
const Category = mongoose.model('Category',categorySchema)
module.exports = Category

• 4.提供post接口

//admin.js
module.exports = app =>{
  const express = require('express')
  const router = express.Router()
  const Category = require('../../models/Category')
  router.post('/categories',async (req,res)=>{
    //创建数据
    //req.query 获取get请求传递过来的参数
    //req.body 获取post请求传递过来的参数
    const model = await Category.create(req.body)
    res.send(model)
  })
  app.use('/admin/api',router)
}

• 5.解决跨域和post请求中的JSON

//解决跨域和post请求
const cors = require('cors')
app.use(cors())
// 处理post请求中的json
app.use(express.json())

2.2 查询分类

router.get('/categories',async(req,res)=>{
    const model = await Category.find().populate('parent')
    res.send(model)
  })

2.3 修改分类

//GET请求 （修改数据时提供的数据）
  //如果你有route/user/：name，那么“name”属性可作为req.params.name
  router.get('/categories/:id',async (req,res)=>{
    const model = await Category.findById(req.params.id)
    res.send(model)
  })
  //PUT请求 （修改数据）
  router.put('/categories/:id',async (req,res)=>{
    const model = await Category.findByIdAndUpdate(req.params.id,req.body)
    res.send(model)
  })

2.4 删除分类

//DELETE请求 （删除数据）
  router.delete('/categories/:id',async (req,res)=>{
    const model = await Category.findByIdAndDelete(req.params.id)
    res.send(model)
  })

2.5 创建子分类

• 1.修改集合实例

const categorySchema = new mongoose.Schema({
  name:{type:String},
  parent:{type:mongoose.SchemaTypes.ObjectId,ref:'Category'}
})

• 2.查询分类时添加populate()方法

router.get('/categories',async(req,res)=>{
    const model = await Category.find().populate('parent')
    res.send(model)
  })

2.6 通用接口

• 其实后台的管理所对应的接口大致相同，除了类名，因此我们可以使用inflection包，可以把复数形式转化为类名形式，转完以后，利用这个拼接处模型的路径

module.exports= options =>{
  return (req,res,next)=>{
    //1.取出资源的名称 inflection转换类名，复数变单数
    const modelName = require('inflection').classify(req.params.resource)
    req.Model = require(`../models/${modelName}`)
    // req.Model = require('../../models/Article')
    next()
  }
}

• 通用接口如下：

module.exports = app => {
  const express = require('express')
  //引用数据库，增加数据
  // const Category = require('../../models/Category')
  //顶级express对象具有Router()创建新router对象的功能。
  const router = express.Router({
    mergeParams: true
  })

  //增加post方法:创建分类
  router.post('/', async (req, res) => {
    const model = await req.Model.create(req.body)
    res.send(model)
  })
  //增加get方法：获取分类列表
  router.get('/', async (req, res) => {
    const items = await req.Model.find().limit(10).populate('parent')
    res.send(items)
  })
  //增加get方法：获取分类列表中的某条数据的接口
  router.get('/:id', async (req, res) => {
    const model = await req.Model.findById(req.params.id)
    res.send(model)
  })
  //增加put方法：编辑分类数据提交接口
  router.put('/:id', async (req, res) => {
    const model = await req.Model.findByIdAndUpdate(req.params.id, req.body)
    res.send(model)
  })
  //删除分类
  router.delete('/:id', async (req, res) => {
    const model = await req.Model.findByIdAndDelete(req.params.id)
    res.send(model)
  })
  //加个前缀rest表示：通用的CRUD接口 :resource匹配 /categories/:id（即路径）
  app.use('/admin/api/rest/:resource', async (req, res, next) => {
    // classify 转为类名
    const modelName = require('inflection').classify(req.params.resource)
    console.log(modelName);
    //表示给请求对象上挂载一个Model属性
    req.Model = require(`../../models/${modelName}`)
    next()
  }, router)
}