(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: {}
},
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页