vue3+elementPlus之后台管理系统（从0到1）(day2)

登录页面

静态页面搭建

<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) {
    // 在发送请求之前做些什么，比如可以在这里配置对应的token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

  // 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    
    //判断用户的登录状态
    //因为服务器响应的时候有两个data，所以返回reponse.data
    return response.data;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });


  //自定义各种数据请求的axios
  export 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')
    }
  }