使用element-ui创建文章后台管理系统(一)

后台管理创建—登录页面

今日目标 利用element-ui框架，完成登录页面
效果：
输入框能使用正则验证，用户输入，正确边框为绿色，错误为红色，input框底部有提示
需求点击登录能

使用工具：
vue.js
element-ui
axios
router
less
等等…

一、创建页面结构

使用脚手架创建出页面结构(下图是**成品**结构 ,**不是创建就能下面结构**)

1. 在assets里面引入静态资源，如图片，字体图标库
2. 在styles里面放静态的样式，之后我们可以引入到main.js里面
3. 在utils里面生成我们的axios文件的设置
4. 在router里面设置我们路由文件
5. 在apis里面封装我们的api接口
6. 在views里面生成我们单页组件
7. 在components生成我们的复用组件

二、在main.js 引入

//main.js文件
import Vue from 'vue'
import App from './App.vue'
//引入基础样式
import '@/styles/index.less'
//引入路由
import '@/router/index.js'
Vue.config.productionTip = false
//注入路由
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

element-ui 完整引入

//main.js element-ui 完整引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

------------------------分割---------------------------------------------

element-ui 按需引入（新手使用不推荐）

//main.js element-ui 按需引入
import { Button as btn, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(btn)

npm安装 babel-plugin-component

npm install babel-plugin-component -D

在babel.config.js 输入

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',

  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

使用element-ui的from表单实现错误提示

**注意点**

1. prop:表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的，值应该对应data数据里面的rules的对象名
2. rules：rules 表单验证规则 值为通常对象，

 数组对象如
 rules:{[username{条件:'值',message:'显示的字符串',trigger:'触发的事件'}]}

3. 条件 mix最小输入， max最大输入 ，requires:true 必填，pattern:/^\b$/ 正则
   
4. :model=“user” 整个表单数据

---

login页面结构

      <el-form
        :model="user"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            v-model="user.username"
            @focus="clearprams('username')"
            placeholder="请输入用户名"
          >
            <i slot="prefix" class="el-input__icon el-icon-user-solid"></i
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
        <!--使用获得焦点，清除之前判断结果 -->
          <el-input
            v-model="user.password"
            type="password"
            @focus="clearprams('password')"
            placeholder="请输入密码"
          >
            <i slot="prefix" class="el-input__icon el-icon-key"></i
          ></el-input>
        </el-form-item>
      </el-form>

import { login } from "@/apis/user";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^1\d{4}$|(^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$)/,
            message: "请输入5位或13位电话号码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 希望用户在输入的时候，把之前监测判断的输入清掉(用户体验)
    // 必须要传入参数，不然会把所有其他校检清除
    clearprams(prop) {
      this.$refs.ruleForm.clearValidate(prpo);
    },
    login() {
      //validate函数里面使用一个回调函数是一个布尔值，表示input框里面的参数是否正确
      this.$refs.ruleForm.validate(async (success) => {
        if (success) {
          // console.log(success, "我去登录了");
          // 发送axios请求
          let res = await login(this.user);
          console.log(res);
          console.log(res.data.message);
          if (res.data.message === "登录成功") {
            this.$message.success(res.data.message);
            // 成功登陆验证，把token，user信息存到本地
            window.localStorage.setItem(
              "toutiao_houtai_token_user",
              JSON.stringify(res.data.data)
            );
            // 登录成功跳转登录页面
            this.$router.push({ name: "index" });
          } else {
            this.$message.error(res.data.message);
          }
        } else {
          this.$message.error("输入的用户名或密码不合法");
          // console.log(success, "验证错误");
        }
      });
    },
  },
};

三、配置路由，设置路由守卫

//   @router/index.js
// 工程化
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//配置路由
const router = new VueRouter({
    routes: [
        {
            name: 'index',
            path: '/inedx',
            component: () => import('../views/index.vue')
        },
        {
            name: 'login',
            path: '/login',
            component: () => import('../views/login.vue')
        }
    ]
})
// 暴露
export default router
//后面就会再main.js里面注入路由，返回上面有main.js代码

导航守卫思路：

判断befromEach的回调函数参数to.name是否为login 是的话直接跳转，不是的要验证用户本地存储是否有token数据，没有直接跳转登录页登录。
后台除了登录页面不需要权限，其他页面都需要权限

// 导航守卫
//引入message
import { Message } from 'element-ui';

//在js里面使用element-ui
router.beforeEach((to, from, next) => {
    if (to.name === 'login') {
        // 后台只有登录页不需要token，登录权限，可以直接跳转
        next()
    } else {
        // 其他页面就需要权限验证，就是看下本地有没有token 
        let token = (JSON.parse(window.localStorage.getItem('toutiao_houtai_token_user')) || {}).token
        //这里没有本地存储的话null.token 就会报错，
        //这里加一个短路运算   (null || {}).token  就不会报错
        if (token) {
            next()
        } else {
            // 跳转到登录页
            //给一个用户提示
            Message({ message: '请先登陆', type: 'warning' })
            next({ name: 'login' })
        }
    }
})

---

四、配置axios 基准路径，封装登录请求api

设置axios

//'@/utils/myaxios.js'
// 引入axios文件
import axios from 'axios'
// 设置基准路径
axios.defaults.baseURL = 'http://localhost:3000'
// 拦截器

// 暴露
export default axios

封装axios请求的api

// 引入axios
import axios from '@/utils/myaxios'
// 封装登录api
export const login = (data) => {
    return axios({
        method: 'post',
        url: '/login',
        data
    })
}

登陆页面就完成了