全栈开发学习(Node+Vue+Mongodb)(三)——后台接口与数据库准备

1 前端接口（admin）准备

• 安装axios用于请求接口提交数据：

  npm i axios

• 在admin根目录新建http.js文件，在文件中引入axios

  import axios from 'axios'

• 在http.js中创建实例

  const http=axios.create({
     baseURL:'http://localhost:3000/admin/api'
     //baseURL:process.env.VUE_APP_API_URL || '/admin/api',
  })

• 导出http变量

  export default http

• 在main.js中引入变量，并绑定到原型上

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

2 服务端接口（server）准备

• 安装3个必要的模块（express5.0、mongoose[连接数据库]、cors[允许跨域请求]）:

  npm i express@next mongoose cors

• 在server文件夹的index.js中引入刚安装好的模块

  const express=require("express")
  app.use(express.json())
  app.use(require('cors')())

• 创建express的实例

  const app=express()

• 启动该实例

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

• 创建路由文件夹routes/admin,创建文件index.js，在这里写具体的路由

• 在routes/admin/index.js中创建app的函数，然后在根目录的index.js中引入这个app

  module.exports=app=>{
      const express=require('express')
      const router=express.Router({mergeParams:true})// 创建express的子路由，再挂在router到app上
      }

  require('./routes/admin')(app)

3 数据库准备

• 创建数据库插件，连接数据库，新建文件plugins/db.js

• 引入到server/index.js中

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

• 在db.js中创建函数，在函数中引用mongoose

  module.exports=app=>{
      //连接数据库
      const mongoose=require("mongoose")
      mongoose.connect('mongodb://127.0.0.1:27017/node-vue-wzry',{
          useNewUrlParser:true   //连接参数
      })
      require('require-all')(__dirname + '/../models') //引用了models里所有js
  }

4 创建模型

• 在server文件夹中创建models，用于存放模型

• 模型基本格式

  const mongoose=require('mongoose')
  //新建模型
  const schema=new mongoose.Schema({
      **字段以及字段类型**
  })
  module.exports=mongoose.model('Category',schema) //导出模型

• 创建好后在server/admin/index.js中引入模型

  const xxx(模型名)=require（'../../models/模型名')

• 在router的post接口中返回这个模型

   router.post('/xxxxxx',async(req,res)=>{
          const model=await xxxxx(模型名).create(req.body)
          res.send(model)
      })
  

5 在前端发起请求

具体的Vue组件的methods中（以保存数据为例）：

async save(){
   const res=await this.$http.post('xxxxx(接口名)',this.model)
 }