Vue 的火熱程度不用多說，學習曲線較為平緩，社群活躍度高，新手入門很快。從個人部落格的程式碼中抽出註冊登入邏輯來寫了一份入坑指南，方便之後對比。
誰適合閱讀此文章：
- vue的入門者
- 想了解前後端連通中常見問題的解決方案
- 想了解session、cookie
如果你已經是vue的忠實粉，那麼此文章不必閱讀，純粹浪費你的時間。
下面給大家介紹一下如何用Vue來實現註冊登入功能
技術棧：
Vue elment-UI Node.js + Express MongoDB
前提： 已安裝Vue-cli、MongoDB
前端實現
一、初始化專案：
MacBook-Pro:sign wangyu$ vue init webpack sign
按提示安裝完畢，注意安裝vue-router、ESlint
隨後進入安裝的資料夾： npm run dev
看到瀏覽器 localhost:8080出現歡迎頁面，說明初始化成功
因為我們需要element-UI 來簡化我們的頁面設計，所以要把它加進來。
npm install element-ui
隨後：
// main.js
import Vue from 'vue'
import Element from 'element-ui' //載入element-ui
import VueResource from 'vue-resource'
import App from './App'
import router from './router'
import 'element-ui/lib/theme-chalk/index.css' //樣式表需要單獨載入
Vue.use(Element) //使用element
Vue.use(VueResource)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<app/>',
components: { App }
})
複製程式碼二、 編寫登入頁面： 由於篇幅不想太長（主要是懶），以登陸的js程式碼為例，其餘的可在github上檢視，道理類似，不難。
<script>
import env from '../../config/dev.env.js'
let IP = env.SERVER_IP
export default {
data () {
return {
signUpShow: false,
signInShow: true,
signInForm,
signUpForm,
signUpRule: {
pass: {validator: validatePass, trigger: 'blur'},
checkPass: {validator: validateCheckPass, trigger: 'blur'}
}
}
},
methods: {
cancel: function () {
this.$router.push({name: 'mainPage'})
},
signIn: function () {
let data = {
username: this.signInForm.username,
password: this.signInForm.pass
}
return this.$http.post(IP + '/api/signIn', data, {
withCredentials: true
}).then(response => {
return response.data
}).catch(err => {
throw new Error(err.message)
})
}
}
}
</script>
複製程式碼注意： 以上程式碼並不完全，因為把校驗部分的程式碼給刪除了。
1、
data () {return {...}}
新手很容易把 data 寫成物件，其他是規定是函式，可以參照官網說明。
2、 signIn() 函式中，我們用到了 this.$http.post() 。首先，這個是vue-resource的功能， 在main.js中以及載入，這裡可以直接使用，可以簡單理解為 Ajax 。其次，這裡我沒有使用 callback，而是使用 Promise，這也是ES7、8中加入的功能（其實以前我們就可以用了，只不過要第三方庫），它相對callback的有點是：1)邏輯簡單容易控制；2)程式碼風格簡潔，避免麵條式的if else .
入門可以參照 javascript promise 入門書
3、
{
withCredentials: true
}
複製程式碼這個物件是用來告訴瀏覽器傳送post請求時帶上cookie，因為我們需要跨域傳送請求。
三、請求傳送後路由跳轉。 vue 中的路由跳轉有以下幾種方式： 1、
<router-link :to="{ name: 'user', params: { userId: 123 }}"></router-link>
複製程式碼2、
this.$router.push({name:"", params:{a: 'aa'}})
複製程式碼其中params 是引數，在目標路由中，可以通過以下方式來獲取
this.$route.params
複製程式碼後端實現
邏輯程式碼很簡單，無非是連線資料庫，寫好業務邏輯，暴露API。詳情見程式碼，屬於一看就懂的那種，坑比較少。
下面重點講以下 後臺的狀態保持。也就是涉及到Session（會話），Cookie。兩者的區別簡單的來講，cookie是一個真實存在的東西，瀏覽器根據伺服器返回的header中的 set-cookie 欄位來儲存cookie，又根據http請求報文傳送給伺服器。而session則是人們設計出來的一種方式，用來記錄訪問者狀態，因為HTTP是無狀態的，我們無法記錄訪問者的資訊，但有些資訊需要記錄，比如使用者狀態。
Node中的session可以使用express-session來實現，需要注意的是，
const expressSession = require('express-session')
const MongoStore = require('connect-mongo')(expressSession)
app.use(expressSession({name:'blog',store: new MongoStore({mongooseConnection: db.openDB()}), secret:'allen',resave: true, saveUninitialized: true,cookie: ('name', 'value', { path: '/', httpOnly: false,secure: false, maxAge: 50000})}));
複製程式碼session的使用要在路由之前，或者準確的講：是在用應用session的路由之前，不然就會發現req.session == undefined,而一些靜態檔案訪問可以放在session前面，根據需要而定。
貼上主要業務邏輯程式碼：
let signUp = function (req, res) {
detectInfo(req).then(response => {
const user = new modelUser(response)
user.save(()=>{
req.session.user = user
req.session.save()
res.jsonp({
data: user
})
}, err => {
res.status(400).send({
error: error
})
})
}, error => {
res.status(400).send({
error: error.message
})
})
}
let signIn = function (req, res) {
if(req.session.user) {
res.status(200).send({
data: req.session.user
});
}else{
modelUser.find({username: req.body.username, password: req.body.password}).then(data => {
if(data.length == 0){
res.status(400).send({
message: '使用者不存在'
})
}else{
req.session.user = data[0]
req.session.save()
res.jsonp({
username: data[0].username
})
}
}, err => {
res.status(400).send({
message: err.message
})
})
}
}
let signOut =function (req, res) {
req.session.user = null
req.session.save()
res.status(200).send()
}
複製程式碼零零碎碎，貼上程式碼傳送門，歡迎指教！
前端程式碼:sign
後端程式碼:blog-server