MENU

[笔记]Vue实现后台前端

February 29, 2020 • Read: 245 • 程序笔记

Vue实现后台前端

前言

这几天在做一个简单的CMS(内容管理系统),因为是前后端分离的,所以前端我使用Vue来写,因为我也是刚刚学习Vue所以很多知识都还不懂,刚开始的想法是直接使用网上那些现成的开源后台模板,比如:D2Admin、Vue-element-admin、vue-admin-start。但是我在实际学习的时候项目里面的很多方法都被二次封装,像我这种刚刚入门的,不知道从哪传参,还有里面的方法写死了,我后端的接口也需要改,所以为了知其然知其所以然。我决定踏踏实实的学习一下Vue还有Vue提供的Router,Vuex等。所以如果你要按照我的学习笔记来操作,请先有Vue、Vuex、Router、axios还有HTML、CSS、JavaScript等基础的网页知识储备,如果你不会后端,那么你还得学习一下Mock数据,模拟一个假数据。虽然后面我会介绍相关语句的作用,但是当你想要修改的时候,你会寸步难行。这篇文章仅仅给你一个思路。

起步

1. 创建VueCli项目

首先使用VueCli创建一个Vue项目,为了由浅入深,所以我们刚开始就选择默认的俩个组件(Babel和ESlint),很多人应该像我刚开始一样,非常讨厌这个ESlint,因为经常因为格式报错,但是当我把编译器的格式设置好之后,我发现这个工具真的挺不错的,可以让我写出更规范的代码。

2. 编写Login页面

Login页面一般由一个用户名输入框,一个密码框还有一个登录按钮组成,这里我简单写一下:

<template>
  <div id="login">
    <div id="loginCard">
      <h1>系统登录</h1>
      <input
        type="text"
        v-model="loginValue.username"
        placeholder="请输入账号"
        style="height:30px;width:90%;margin:10px;"
      />
      <input
        type="text"
        v-model="loginValue.password"
        placeholder="请输入密码"
        style="height:30px;width:90%;margin:10px;"
      />
      <input type="submit" style="height:30px;width:90%;margin:10px;" value="登录" />
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data(){
    return{
      loginValue:{
        username: "",
        password: ""
      },
    }
  },

}
</script>
<style scoped>
#loginCard {
  margin: 100px auto;
  padding-top: 30px;
  height: 300px;
  width: 400px;
  border: 3px solid black;
}
</style>

界面如图所示,非常简单的一个页面,其中v-model绑定的是登录时候提交的登录信息,待会写登录方法的时候会用到里面的参数。

Snipaste_2020-02-29_18-49-40.png

3. 编写doLogin登录函数

首先我们理一下登录思路,我们的登录系统在输入账号和密码后点击登录按钮,会把前端传的账号和密码通过Post请求提交给后端,我们的后端接受参数,对账号和密码进行校验,如果账号密码是正确的那么就返回登录成功的数据,如果账号密码不正确,那么就返回登录失败的信息。

在这里,我们向后端发送请求要用到axios这个工具,vue官方也比较推荐这种方法。在我们的Vue项目安装axios,这里我们发送一个Post请求给后端:

doLogin(){
      axios.post('/api/login',{
        data:{
          username:this.loginValue.username,
          password:this.loginValue.password,
        }
      }).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
}

这里使用前面的数据,如果请求成功,后端会返回数据res,这里我们直接打印出来,如果抛出异常,那么会打印出来异常err,这里的接口需要自己解决,我这里使用Mock数据,仅供参考:

import Mock from 'mockjs'
const users = [
  { id: 1, name: '管理员', username: 'admin', password: '123456' },
  { id: 2, name: '普通用户', username: 'user', password: '111111' }
];
Mock.mock(RegExp(/\/api\/login/), 'post', function (options) {
  var payload = JSON.parse(options.body)
  var usr = payload.data.username
  var pwd = payload.data.password
  if (users.find(e => e.username === usr && e.password === pwd)) {
    return {
      code: 200,
      msg: '登录成功',
      payload: {
        token: 'nm2nrb12012eh1021ne1rbn10rh1b'
      }
    }
  } else {
    return {
      code: 401,
      msg: '登录失败'
    }
  }
})

如果你的控制台可以打印出来相关数据,那么就差不多了。

Snipaste_2020-02-29_19-29-00.png

4. 跳转页面

登录成功输出到控制台还不够,我们想要登录成功后跳转到管理页面。这里就要编写一个新的页面admin,但是该用什么方法来管理跳转页面呢?这里就要使用Vue的路由,路由的使用这里就不多讲了,基础知识还得掌握。我们把login页面的路由和admin的路由设置好,

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/admin',
    name: 'admin',
    component: Admin
  }
]

然后在doLogin方法的登录成功后使用this.$router.replace('/admin')来跳转到admin页面。

5. 路由守卫

我们发现,可以不需要登录就可以使用/admin路径就可以访问后台,那么用什么方法来拦截未登录的请求呢?这里就要用到router里的拦截器了:

router.beforeEach((to, from, next) => {
  const WRITE_LIST = ['/login']
  const isLogin = store.state.isLogin.status;
  //判断是否登录,如果登录了验证权限
  if (isLogin) {
    //如果登录了再访问login会跳转到admin页面
    if (to.path === '/login') {
      next({ path: '/admin' });
    } else {
      //如果没有匹配到访问的路径返回404,否则直接放行
      if (to.matched.length === 0) {
        console.log("404");
      } else {
        next();
      }
    }
  } else {
    //是否在白名单里,如果是的话放行,否则返回home页面
    if (WRITE_LIST.indexOf(to.path) !== -1) {
      next();
    } else {
      next({ path: '/login' });
    }
  }
})

这里是用的是router.beforeEach方法,里面的to(目标组件)、from(源组件)、分别代表“去哪”,“从哪来”,next(进入下一个组件的钩子函数),这里我还设置里一个白名单,在白名单里的路径都可以直接访问。

我们可以看到在上面的代码中,有一个是否登录的状态,这里我调用的是Vuex里的全局变量,那么怎么设置这个全局变量呢?

6. 全局变量

说到全局变量,一般我们用来保存登录状态等一些信息,在其他的项目中我们可以用Cookie和session来进行登录状态的设置。但是在Vue中我们可使用Vuex来控制我们的全局变量,使我们的变量在所有组件里都能调用。首先安装vuex,然后定义一下全局变量:

state: {
    isLogin: {
      status: false,
      token: ''
    }
  }

这里我新建了一个isLogin的对象,里面有俩个属性status和token,也就是是否登录和登录成功后返回的token值,后期请求接口带上token就可以了。

这里有一个逻辑,在我们登录成功后跳转到admin页面,我们的路由守卫也要判断是否登录然后才能放行,所以我们得在登录成功后更改isLogin的status来改变登录状态。改变vuex里state里的值我们需要在mutation里定义一个登录成功的方法

mutations: {
    login(state, token) {
      state.isLogin = { status: true, token: token }
    }
  },

然后在doLogin方法里使用commit方法更改,至于为什么使用commit方法来改变状态,这里是vuex的一个规范,这样可以记录下每次修改的值,便于管理回溯,我们按规范来就行,我们后面还携带了一个token的参数,这里是登录成功后从后端取的值。

this.$store.commit('login',res.data.payload.token)

然后token就保存在全局变量里,后面我们调用接口的时候就可以取变量里的token了。
看到这里我相信你对登录的流程都一定的了解了,后面我们再来进一步的完善这个系统。

进阶

算了,我太懒了,哈哈哈

Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

5 Comments
  1. vue是个好东西

  2. 写的超级详细,对新手特别友好

  3. 路由守卫,可不可以换成像session控制?我写PHP不连接数据库就是这样搞的

    1. @Escher都是可以的,只不过vue提供了vuex这样的全局变量管理登录状态,路由守卫也就是个前端拦截器。小项目用vuex其实比较臃肿,组件比较多合适一点。

    2. @Focuxin那确实方便多了,vue我想学,但是现在纠结继续php还是javaweb