express搭建純后臺，前臺使用vue-cli腳手架

注意：后臺服務更改之后需要重啟服務；前端配置文件更改之后也需要重新跑命令npm run dev
一、使用express提供后臺服務，輸出接口
后臺目錄結構：

main.js

var express = require('express');
var app = express();
app.get('/', function (req, res) {
    res.send('Hello World');
})
app.get('/getUserInfo', function(req, res, next){  //用于前臺調用的接口，地址：http://127.0.0.1:8888/getUserInfo
    console.log('get用戶請求數據為：');
    console.log(req.query);
    res.json({
        code:200,
        data:{
            message:'你好'
        },
        message:'success'
    });
});
var server = app.listen(8888, function () {
    var host = server.address().address
    var port = server.address().port
    console.log(host,port)
    console.log("your application is running on http://localhost:8888")
})

---解釋---：

(1)、app.get()表示接收所有前端來的get請求方式，同理，app.post(),app.delete()分別表示接受前端發來的post請求與delete請求方式。

(2)、app.get(path, callback [, callback ...])：傳參，第一個參數是路徑，后面的參數都是是回調函數，可以放1個或者多個回調函數，一般只用到1個回調，本例也只用了1個回調。官方對這個方法的解釋是：Routes HTTP GET requests to the specified path with the specified callback functions，意即‘用指定回調方法向指定路徑發送http get請求’，通俗講就是對path參數表示的接口執行一些操作，這些操作寫在第二個參數即回調函數內。

(3) app.get()中的第二個參數---回調函數：該回調函數接受3個參數,按照大多數人的不成文的書寫慣例，這三個傳參寫作req, res, next。第一個參數表示http請求對象（request），第二個參數表示response對象，第三個參數是next函數，表示將控制權交給下一個中間件。next有點復雜不詳說，只要記住一個請求結束后，不要后面寫next()，常見的res.send(),res.json()都屬于請求結束，后面不要再寫next()了.

(4)res.json(obj) 表示返回一個json對象，該對象的詳細數據就是括號里的東西啦。

二、前端使用vue-cli腳手架
前端目錄結構：

1、先解決跨域問題
在config/index.js文件里面的module.exports對象里面的proxyTable里面加上以下代理：

proxyTable: {
    '/gsafetyapi': {
        target: 'http://127.0.0.1:8888/', //要代理的服務地址，要加http
        changeOrigin: true,  //是否跨域
        secure: false, //如果是https接口，需要配置這個參數
        timeout: 480000,
        pathRewrite: {
            '^/gsafetyapi': ''  //這里理解成用gsafetyapi代替target里面的地址
        }
    },
},

2、封裝axios和接口地址集合
新建文件夾plugins

http.js

import axios from 'axios';
import apiConfig from "./api.js"
import qs from 'qs'

axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'gsafetyapi' : '';  //開發的時候加代理，生產環境不用加代理
// 請求攔截
axios.interceptors.request.use(config => {
  // 1. 這個位置就請求前最后的配置
  // 2. 當然你也可以在這個位置 加入你的后端需要的用戶授權信息
  return config
}, error => {
  return Promise.reject(error)
})
// 響應攔截
axios.interceptors.response.use(response => {
  // 請求成功
  // 1. 根據自己項目需求定制自己的攔截
  // 2. 然后返回數據
  return response;
}, error => {
  // 請求失敗
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        // 對400錯誤您的處理\
        break
      case 401:
        // 對 401 錯誤進行處理
        break
      default:
        // 如果以上都不是的處理
        return Promise.reject(error);
    }
  }
})
export default {
  /**
   * get 請求
   * @param api_name 接口路由
   * @param params 接口參數
   * @param time 如果請求話費了超過 `time` 的時間，請求將被中斷
   * @returns {AxiosPromise<any>}
   */
  // get(apiKey, data) {
  //   return axios.get(apiConfig[apiKey], data);
  // },
  get(api_name, params, time) {
    let url = apiConfig[api_name];
    return axios({
      method: 'get',
      url: url,
      params: params,
      timeout: time || 60000,
    })
  },
  /**
   * post 請求
   *
   * @param api_name 接口路由
   * @param params 接口參數
   * @param time 如果請求話費了超過 `time` 的時間，請求將被中斷
   * @returns {AxiosPromise<any>}
   */
  post(api_name, params, time) {

    let url = apiConfig[api_name];
    return axios({
      method: 'post',
      url: url,
      params: qs.stringify(params),
      timeout: time || 60000,
    })
  },
}

封裝api的文件
api.js

export default {
  getCompanyDepartmentTree: "/api/v1/user-center-service/companyDepartment/getCompanyDepartmentTree", //獲取組織架構數據
  getUserInfo:"/getUserInfo"
}

3、全局注冊封裝好的axios

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// 已在webpack.base.conf中使用別名設置了要使用import命令加載的Vue構建版本（僅運行時或獨立運行）
import Vue from 'vue'
import App from './App'
import router from './router'
import http from '../plugins/http'
Vue.config.productionTip = false
Vue.prototype.$http = http;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4、調接口：http://127.0.0.1:8888/getUserInfo

created () {
    this.$http
        .get("getUserInfo",{name:'kate'}).then(res => {
            console.log(res)
        });
  }

三、數據庫使用mongodb
1、安裝，直接安裝在c盤下
2、配置環境變量
3、創建數據庫文件的存放位置
在D盤下新建mongodb文件夾，
mongodb文件夾里面新建data文件夾，data文件夾里面新建db和log文件夾
mongodb文件夾里面新建mongo.config配置文件，文件內容：

##數據文件  此處=后對應到數據所存放的目錄
dbpath=d:\mongodb\data\db
##日志文件  此處=后對應到日志文件所在路徑
logpath=d:\mongodb\data\log\mongodb.log
##錯誤日志采用追加模式，配置這個選項后mongodb的日志會追加到現有的日志文件，而不是從新創建一個新文件
logappend=true 
#啟用日志文件，默認啟用
journal=true 
#這個選項可以過濾掉一些無用的日志信息，若需要調試使用請設置為false
quiet=true 
#端口號 默認為27017
port=27017

4、
net start MongoDB 開啟服務
net stop MongoDB 關閉服務
5、現在搭建的是本地數據庫，數據庫地址：http://localhost:27017/

6、mongoose 數據模型
直接用 node.js 也可以連接數據庫進行讀寫，但mongoose 這個插件除了封裝這個基本功能之外，還提供了很多其他的服務。

安裝：npm install mongoose --save
var mongoose = require('mongoose');
//鏈接數據庫
mongoose.connect('mongodb://localhost:27017/db',function(err){
    if(err){
        console.log('數據庫連接失敗')
    }else{
        console.log('數據庫連接成功')
        var server = app.listen(8888, function(){
            console.log("Server is running on http://localhost:8888");
        });
    }
});

7、建立schema，類似于一個collection集合的概念，類似于mysql的一張表，定義schema，就是定義這張表的表結構，要存什么格式的數據，每一條數據都是這張表的一行，
注意：這種schema不具備操作數據庫的能力

let mongoose = require('mongoose');
let userScheam = new mongoose.Schema({
    //賬戶名
    account:String,
    pass:String,
    checkPass:String,
    age:Number
})
module.exports = userScheam;

8、定義好了Schema，接下就是生成Model。
model是由schema生成的模型，可以對數據庫進行操作

//表有了，下面需要借助model，來對數據庫的表進行操作
let mongoose = require('mongoose');
let userSchema = require('../schemas/userSchema');
module.exports = new mongoose.model('User',userSchema); //User是給這個模型起的名字，后面是要操作的那個表的表名
//User才具有了對表進行增刪改查的api

9、在路由文件前面，引入該model，然后就可以使用
var User = require('./models/userModel');
User.save(); User.find();等等增刪改查方法