Vue全家桶复习：Vue-cli + Vue-Router + Vuex + Axios + express + mongoose + element-ui 超级新手向

文件结构

1.mongoose 连接数据库

var mongoose = require("mongoose")

var db = mongoose.connect("mongodb://127.0.0.1:27017/runoob")

db.connection.on("error", (error) => {
    console.log('数据库连接失败：' + error)
})

db.connection.on("open", () => {
    console.log('数据库mongodb://127.0.0.1:27017/runoob连接成功')
})

在项目启动的时候连接数据库

...
"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  }
...

由这一段代码可以看出，npm run dev 的入口文件在 build/dev-server.js
所以在这个文件引入数据库连接的启动

require('./mongoose/connect')

2.express 路由处理

在启动了数据库，先别急着走，往下翻，你可以看到 app.use。这不用多说了吧。express，在服务这边，我们用express做路由处理，为了方便管理，我们将需要写的中间件提取到一个文件 server/router,并用bodyParser做数据处理。

var bodyParser = require('body-parser')
var signIn = require('../controllers/signIn')

module.exports = (app) => {
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());
}

在dev-server引入文件

//router
let router = require('../server/router')
router(app)

3.存取数据

篇幅有限，只做取数据的代码展示。在这里我是将server 分成controllers 和models，在models获取数据。这一部分看mongoose的案例就可以了。就不多做解释了。

var mongoose = require('mongoose')

var UserSchema = new mongoose.Schema({
  name:{
    type: String,
    required: true
  }, 
  username: {// 真实姓名
      type: String,
      required: true
  },
  password: {
      type: String,
      required: true
  }
})

var UserModel = mongoose.model('load', UserSchema)

let signInModel = {
  _read (req) {
    var obj = {
      username: req.body.username,
      password: req.body.password
    }

    var res = UserModel.findOne(obj, (err, doc) => {
      if (err) {
        console.log('read error:' + err);
      }
      console.log('read sucess \n' + doc);
    })

    if(res){
      return true
    }
  }
}

module.exports = signInModel

4.axios 数据交互

    signIn () {
        console.log('sign in ')
        this.axios.post('/signIn', this.user, {headers: {'Content-Type': 'application/json'}})
        .then( (res) => {
            console.log("res",res)
        }).catch( (error) => {
            this.$notify.error({
                title: '错误',
                message: '这是一条错误的提示消息'
            });
        })
      }

这里需要注意一点的是post

5.Vuex

小测试
引入vuex

...
import Vuex from 'vuex'
import store from './store/store'
...

./store/store

//state render ==> component
const state = {
    num: 12
}
//component dispatch ==> actions
const actions = {
    addPlus (context) {
      context.commit('add')
    }
}
//commit the change
//actions ==> mutations
const mutations = {
    add(state){
      state.num++
    }
}
//change the state 
//component get state
const getters = {
    num: function (state) {
      return state.num
    }
}
export default new Vuex.Store({
    modules: {
      ...
    }
})

use it

import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
...
methods: {
    ...mapMutations([
      'add'
    ]),
    ...mapActions([
       'addPlus',
     ]),
  }
...

Vue-Router

router/index.js

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
})

sass

$ npm install sass-loader node-sass vue-style-loader --D