1 前端接口（admin）準備

• 安裝axios用于請求接口提交數(shù)據(jù)：

  npm i axios

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

  import axios from 'axios'
  

• 在http.js中創(chuàng)建實例

  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[連接數(shù)據(jù)庫]翠订、cors[允許跨域請求]）:

  npm i express@next mongoose cors

• 在server文件夾的index.js中引入剛安裝好的模塊

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

• 創(chuàng)建express的實例

  const app=express()
  

• 啟動該實例

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

• 創(chuàng)建路由文件夾routes/admin,創(chuàng)建文件index.js腰根，在這里寫具體的路由

• 在routes/admin/index.js中創(chuàng)建app的函數(shù)激才，然后在根目錄的index.js中引入這個app

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

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

3 數(shù)據(jù)庫準備

• 創(chuàng)建數(shù)據(jù)庫插件瘸恼，連接數(shù)據(jù)庫劣挫，新建文件plugins/db.js

• 引入到server/index.js中

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

• 在db.js中創(chuàng)建函數(shù)东帅，在函數(shù)中引用mongoose

  module.exports=app=>{
      //連接數(shù)據(jù)庫
      const mongoose=require("mongoose")
      mongoose.connect('mongodb://127.0.0.1:27017/node-vue-wzry',{
          useNewUrlParser:true   //連接參數(shù)
      })
      require('require-all')(__dirname + '/../models') //引用了models里所有js
  }
  

4 創(chuàng)建模型

• 在server文件夾中創(chuàng)建models压固，用于存放模型

• 模型基本格式

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

• 創(chuàng)建好后在server/admin/index.js中引入模型

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

• 在router的post接口中返回這個模型

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

5 在前端發(fā)起請求

具體的Vue組件的methods中（以保存數(shù)據(jù)為例）：

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