(node+mongoose)服务端编写

• npm i axios

• 新建http文件：

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

  去main.js中导入http

  import http from './http'
  Vue.prototype.$http = http
  

  之后就可以在任何页面使用this.$http访问这个接口

• 写服务端代码 server:

  npm i express@next mongoose cors

  由于 页面很多，会有很多不同的接口 ，所以新建routes文件夹>admin(表示后端路由)

mongoose的模块化

• 连接数据库(绑定监听) plugins文件夹->db.js(mongoose连接监听)
• 创建模型对象 models文件夹->xx.js
• 操作数据库 routes->xx->index.js

1.index.js

const express = require("express")
const app = express()
app.use(require('cors')())
app.use(express.json()) //req.body使用必须加上这个中间件
//是以函数的形式导出 参数使用app接收 这样方便调用 所以使用()执行
require('./plugins/db')(app)
require('./routes/admin')(app)

app.listen(3000, () => {
  console.log('http://localhost:3000');
});

2.连接数据库 plugins->db.js

module.exports = app => {
  const mongoose = require('mongoose')
  mongoose.connect('mongodb://127.0.0.1/node-vue-moba',{
    useNewUrlParser:true
  })

  //使用require-all将模型全部引用一遍以免报错
  require('require-all')(__dirname + '/../models')
}

3.创建模型对象 models->xx.js

const mongoose = require('mongoose')

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

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

4.操作数据库 routes->web->index.js

module.exports = app => {
  const express = require('express')
  const router = express.Router()
  const Category = require('../../models/Category')
  router.post('/categories', async (req, res) => {
    const model = await Category.create(req.body)
    res.send(model)
  })
  app.use('/admin/api', router)
}

小结

1. req.body使用必须加上中间件app.use(express.json())
2. 增加一个特殊参数props，表示把这边任何的url参数，比如id都注入到CategoriesEdit页面里面。在CategoriesEdit就可以直接使用变量id。记得在CategoriesEdit页面接收数据。效果同this.$route.params.id

{
    path:'/categories/edit:id',
    component:CategoriesEdit,
    props:true
},

CategoriesEdit.vue

props: {
    id: {}
},