Vue.js + element-ui + express + mongoDB 实现注册登录功能-CSDN博客

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()
}
复制代码