登录页面

静态页面搭建

<template><div class="login-container"><div class="form-wrap"><h2 class="header">后台管理系统</h2><el-input v-model="adminName" placeholder="请输入管理员账号" /><el-input class="psw" v-model="password" placeholder="请输入密码" /><el-button type="success">登录</el-button></div></div>
</template><script>
export default{name:'LoginView',//data是函数，每个组件有自身独立的数据data(){return{adminName:'',password:''}}
}
</script>
<style lang="scss" scoped>
.login-container{height: 100%;background-color: rgb(249, 217, 202);
}.form-wrap{position: absolute;width: 360px;left:50%;top:50%;transform: translate(-50%,-50%);background-color: beige;border-radius: 15px;padding: 32px 32px 20px;.header{text-align: center;margin-bottom: 32px;}.psw{margin-top: 10px;}.el-button{width: 100%;margin-top: 20px;}
}
</style>

表单验证

安装插件 铁皮饭盒 any-role 正则表达式，在搜索框直接输入>+验证名，如>密码

if(this.adminName.length<5){ElMessage.error("账号长度要大于5")//让代码不再执行return}if(/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/.test(this.password)){ElMessage.error("密码需要包含大写、小写字母和数字")}

md5加密

md5 - npm

安装md5

npm install md5

导入包使用

import md5 from 'md5';
md5(this.password)

发送网络请求

起步 | Axios中文文档 | Axios中文网

安装axios

npm install axios

导入axios使用

import axios from 'axios';
axios.get('http://121.89.205.189:3000/api/pro/list').then(res=>{console.log(res)}).catch(err=>console.log(err))

封装axios

1、配置baseURL

2、请求拦截器，就是请求之前还需要做什么配置

3、响应拦截器，就是服务器给出响应后，返回到前端前需要做什么操作，reponse.data

4、封装各种请求方法，如get，post，put等

import axios from "axios";//封装baseURL//开发环境   生产环境   测试环境
//获取当前环境是否为开发环境，
const isDev = process.env.NODE_ENV=='development'const request = axios.create({//baseURL:isDev?开发环境：生产环境baseURL:isDev?'http://121.89.205.189:3000/admin':'http://121.89.205.189:3000/admin',timeout:60000    //1分钟})// 添加请求拦截器
request.interceptors.request.use(function (config) {// 在发送请求之前做些什么，比如可以在这里配置对应的tokenreturn config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
request.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么//判断用户的登录状态//因为服务器响应的时候有两个data，所以返回reponse.datareturn response.data;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});//自定义各种数据请求的axiosexport default function ajax(config){//数据请求的时候需要什么参数//1、获取请求的一些必要参数const {url='',method='',data={},headers={}} = config;//2、判断请求的类型switch(method.toUpperCase()){case 'GET':return request.get(url,{params:data})case 'POST'://表单数据提交if(headers['content-type']=='application/x-www-form-url-encoded'){//转换参数类型，格式化数据const obj = new URLSearchParams();for(const key in data){if(Object.hasOwnProperty.call(Object,key)){obj.append(key,Object[key])}}return request.post(url,obj,{headers});}//文件数据提交if(headers['content-type']=='multipart/form-data'){//处理文件的对象const obj = new FormData;for(const key in data){obj.append(key,Object[key])}return request.post(url,obj,{headers});}//json数据提交return request.post(url,data);case 'PUT'://修改或更新数据return request.put(url,data);case 'DELETE':return request.put(url,{data});case 'PATCH'://更新局部资源return request.patch(url,data);default:return request.request(config);}}

登录功能的实现

创建一个api/user.js

封装请求接口loginFn

//导入封装的axios
import ajax from "@/utils/axios";//管理系统登录接口的封装
export function loginFn(params){return ajax({method:'POST',url:'/admin/login',data:params})
}

在login页面中导入api/user.js，然后发送数据

loginFn({adminname:this.adminname,password:this.password}).then(res=>{if(res.code==='10005'){//未注册ElMessage.error(res.message)return}else if(res.code==='10003'){//密码错误ElMessage.error(res.message)return}else{//this.$router路由对象，.push() 需要进入的路由this.$router.push("/")}})

vuex 状态管理模式

Vuex 是什么？ | Vuex

• 状态，驱动应用的数据源；

• 视图，以声明方式将状态映射到视图；

• 操作，响应在视图上的用户输入导致的状态变化。

安装vuex

npm install vuex@next --save

在src中创建store/index.js

import { createStore } from 'vuex'// 创建全局状态 store 实例
const store = createStore({//全局状态state () {return {//存放用户信息的对象userInfo:{}}},//唯一修改数据的方法mutations: {//保存用户登录数据updateUserInfo(state, value){state.userInfo=value}},//异步修改数据的方法actions:{},//vuex中的计算属性getters:{},//状态模块modules:{}
})//导出实例
export default store

在main.js中挂载store实例

import store from '@/store';
//将全局状态store挂载到实例中
app.use(store)

在组件中使用

1、在模板中直接$store.state.属性即可

{{ $store.state.userInfo.adminname }}

2、通过映射 mapState

import { mapState, mapMutations } from 'vuex';computed:{...mapState(['userInfo'])},//组件中使用{{userInfo}}

组件中修改全局状态

1、在全局状态中定义方法

mutations：vuex中唯一修改状态的地方

actions：异步操作的地方

1、通过this.$store.commit('') 触发mutations;  通过this.$store.dispatch('') 触发actions
2、通过mapMutations映射import { mapState, mapMutations } from 'vuex';
methods:{...mapMutations(['updateUserInfo'])}//第一种修改数据的方法
this.$store.commit('updateUserInfo',res.data)
//第二种修改数据的方法
this.updateUserInfo(res.data)

登录成功后

1、在全局状态定义一个用户信息和修改用户信息的方法

2、在登录成功后将数据更新到全局状态即可

vuex中的数据持久化

解决vuex中状态刷新页面后会恢复初始值

1、通过自己手动存储需要持久化的数据

//将token存储到本地
localStorage.setItem('token',res.data.token)

2、通过插件来进行自动持久化

安装插件

npm install --save vuex-plugin-persistedstate

在store/index.js中使用

import createPersistedState from "vuex-plugin-persistedstate";// 创建全局状态 store 实例
const store = createStore({...//vuex的配置插件plugins:[//创建持久化对象createPersistedState({//配置需要持久化的数据reducer: state=>{return {userInfo: state.userInfo}}})]
})

在首页验证用户是否登录

由于添加了持久化插件，刷新页面后数据依然存在

mounted(){if(!this.$store.state.userInfo.adminname){//用户没有登录this.$router.push('/login')}},

退出登录

添加退出登录按钮

<button @click="logout">退出</button>

 退出登录方法

methods:{logout(){localStorage.clear();this.$store.commit('updateUserInfo',{})this.$router.push('/login')}}