Revisión del primer día de la gestión de antecedentes de comercio electrónico 01

1. ¡Inicie sesión en lógica!

1. Recopilación, verificación y envío de datos del formulario

Se utiliza element-ui

2, Axios se utiliza en la presentación de antecedentes 

¡Lo anterior es muy simple! También tenemos una forma de escribir guardias de enrutamiento 

Elemento dinámico (no introducido globalmente) En este punto, usamos vue ui (¡introducido en forma de interfaz!)

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

A continuación se muestra una captura de pantalla para todos: 

Cómo escribir guardias de enrutamiento 

 

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

Esto es muy simple:

La introducción global de Axios depende del prototipo, ¡muy simple!

<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>

¡Los anteriores son muy simples!

element es realmente muy fácil de usar, ¡biblioteca de componentes!

 

Probablemente vayamos a la web oficial para consultar el documento.

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

Al aprender, ¡no te preocupes!