文件结构
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
<style scoped lang="sass">
$blue : #1875e7
.hello
.num
color: $blue
</style>
