Vue.js + element-ui + express + mongoDB 實現註冊登陸功能

Vue 的火熱程度不用多說，學習曲線較爲平緩，社區活躍度高，新手入門很快。從我的博客的代碼中抽出註冊登陸邏輯來寫了一份入坑指南，方便以後對比。

誰適合閱讀此文章：

• vue的入門者
• 想了解先後端連通中常見問題的解決方案
• 想了解session、cookie

若是你已是vue的忠實粉，那麼此文章沒必要閱讀，純粹浪費你的時間。

下面給你們介紹一下如何用Vue來實現註冊登陸功能

技術棧：

Vue elment-UI Node.js + Express MongoDB

前提： 已安裝Vue-cli、MongoDB

前端實現

1、初始化項目：

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 }
})
複製代碼

2、 編寫登陸頁面： 因爲篇幅不想太長（主要是懶），以登錄的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>
	
複製代碼

注意： 以上代碼並不徹底，由於把校驗部分的代碼給刪除了。

一、 data () {return {...}} 新手很容易把 data 寫成對象，其餘是規定是函數，能夠參照官網說明。

二、 signIn() 函數中，咱們用到了 this.$http.post() 。首先，這個是vue-resource的功能， 在main.js中以及加載，這裏能夠直接使用，能夠簡單理解爲 Ajax 。其次，這裏我沒有使用 callback，而是使用 Promise，這也是ES七、8中加入的功能（其實之前咱們就能夠用了，只不過要第三方庫），它相對callback的有點是：1)邏輯簡單容易控制；2)代碼風格簡潔，避免麪條式的if else . 入門能夠參照 javascript promise 入門書

三、

{
    withCredentials: true
}
複製代碼

這個對象是用來告訴瀏覽器發送post請求時帶上cookie，由於咱們須要跨域發送請求。

3、請求發送後路由跳轉。 vue 中的路由跳轉有如下幾種方式： 一、

<router-link :to="{ name: 'user', params: { userId: 123 }}"></router-link>
複製代碼

二、

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