电商后台管理第一天复习01

1， 登录的逻辑！

1， 表单数据的搜集，校验，还有提交

用到了element-ui

2, 提交后台用到了axios 

上面都很简单！ 我们还有路由守卫的写法 

element 动态（非全局引入） 这点的话，我们用vue ui （界面形式引入！）

————————————————————————

下面给大家截图： 

路由守卫的写法 

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import CatLogin from './components/CatLogin.vue'
import Admin from './components/admin.vue'

Vue.use(Router)

const router = new Router({
    routes: [
        { path: '/', redirect: '/catLogin' },
        { path: '/login', component: Login },
        { path: '/home', component: Home },
        {
            path: '/catLogin',
            component: CatLogin
        }, {
            path: '/admin',
            component: Admin
        }
    ]
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
    // to 将要访问的路径
    // from 代表从哪个路径跳转而来
    // next 是一个函数，表示放行
    //     next()  放行    next('/login')  强制跳转

    if (to.path === '/catLogin') return next()
        // 获取token
    const tokenStr = window.sessionStorage.getItem('token')
    if (!tokenStr) return next('/catLogin')
    next()
})

export default router

这个非常简单：

axios 全局引入挂在到原型上，非常简单！

扫描二维码关注公众号，回复： 12574132 查看本文章

<template>
  <div class="login_container">

        <div class="login">
                <div class="logo">
                    <img src="../assets/logo.png" alt="">
                </div>
                  <el-form class="loginform" ref="form" :rules="rules"  :model="form">
                    <el-form-item prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                      <el-form-item prop="password" >
                        <el-input v-model ="form.password" type="password"></el-input>
                    </el-form-item>
                      <div class="wyj">
                            <el-button type="primary"  @click="submit">提交</el-button>
                            <el-button type="info" @click="reset">重置</el-button>
                    </div>
                </el-form>
        </div>

      
  </div>
</template>

<script>
export default {
    data(){
        return {
            form:{
                username:'admin',
                password:'123456'
            },
            rules:{
            username: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
          ]
            }
        }
    }
    ,
  methods: {
      reset(){
          // 清除表单选项，这个最重要！
          this.$refs.form.resetFields();
      },
      submit(){
          // 1,全局校验一下，
          // 2 真正去提交？
        //   validate 方法校验
        this.$refs.form.validate( async ret =>{
            // if(!ret) return this.$message.;
            // 1，如果全局校A成功的话 ，就走这个逻辑
            if(!ret) return this.$message.error("请输入合法的用户名和密码");
            // 2, 
            // 校验成功，真正的登录逻辑 
            //axios 操作
            const response = await this.$http.post("login",this.form);

            if(response.status!=200) return this.$message.error("login error")
            // success
            const {data} = response;
            // 1, sessionStorage
            // let token = data.token;
            window.sessionStorage.setItem("token",data.token)
            // 2 ，跳转到后台主页
            //跳转到后天主页！
            console.log(this.$router)
            this.$router.push("/admin")
    })  

      }
  }
}
</script>

<style lang="less" scoped>
.login_container {
    background: #2a4b6a;
    position: relative;
    height: 100%;
    .login{
        position: absolute;
        width: 450px;
        height: 300px;
        background: #fff;
        border-radius: 7px;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .logo{
            width:130px;
            height: 130px;
            border-radius: 50%;
            padding: 10px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
                    box-shadow: 0 0 7px #EEE;
            img {
                width: 100%;
                height: 100%;
                background: #eee;
                border-radius: 50%;
            }
        }
    }

    .loginform {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        padding:0 15px;
        margin:0;
        box-sizing: border-box;

    }


    .wyj {
        width:100%;
        display: flex;
        justify-content: space-around;
        margin-bottom: 10px;
    }
}
</style>

上面这些是很简单的！

element 这个真的是非常的好用，组件库！

大概我们去官网看下文档

https://element.eleme.cn/#/zh-CN/component/form

学的时候，不要着急！