阅读 203

Vue加element-ui 后台框架搭建

下面给大家介绍一下如何用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()
}
复制代码
文章分类
阅读
文章标签