Vue实战项目：电商管理系统（Element-UI）（1-20）记录第一天（一）登录页面绘制

墨蓝 2023-07-03 04:35 8阅读 0赞

**目录**

一.页面目录结构

二，项目入口main.js, 主要引入全局样式，配置路由axios

三.路由信息 router/index.js

四..自定义样式信息assest/css/global.css

五,登录页面components/Login.vue

六.引入组件 plugins/element.js

七，页面效果

--------------------

### 一.页面目录结构 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnpsMQ_size_16_color_FFFFFF_t_70][]

### 二，项目入口main.js, 主要引入全局样式，配置路由axios ###

/* eslint-disable */
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import './plugins/element.js'
    // 导入全局样式
    import './assets/css/global.css'
    // 导入axios
    import axios from 'axios'
    axios.defaults.baseURL="http://localhost:8083/"
    Vue.prototype.$http=axios
    Vue.config.productionTip = false
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')

### 三.路由信息 router/index.js ###

/* eslint-disable */
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../components/Login'
    import Home from '../components/Home'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        redirect: '/login'
      },
      {
        path: '/login',
        component: Login
      },
      {
        path: '/home',
        component: Home
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    //路由导航控制权限
    router.beforeEach((to,from,next)=>{
      //如果用户访问登录页面，直接放行
      if(to.path==='/login') return next();
      //从session中获取保存的token值
      const tokenStr=window.sessionStorage.getItem('token')
      if(!tokenStr) return next("/login")
      next()
    })
    
    
    export default router

### 四..自定义样式信息assest/css/global.css ###

html, body, #app{
    height: 100%;
    margin: 0;
    padding: 0;
    
    }

### 五,登录页面components/Login.vue ###

<template>
      <div class="login_container">
        <div class="login_box">
          <div class="avator_box">
            <img src="../assets/logo.png" />
          </div>
          
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="rules"
            label-width="0px"
            class="loginForm"
          >
            
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            
            <el-form-item class="btns">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    /* eslint-disable */
    export default {
      name: "Login",
      data() {
        return {
          loginForm: {
            username: "admin",
            password: "123"
          },
          rules: {
            username: [
              { required: true, message: "请输入用户名", trigger: "blur" },
              { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
            ],
            password: [
              { required: true, message: "请输入密码", trigger: "blur" },
              { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
            ]
          }
        };
      },
      methods: {
        resetLoginForm() {
          console.log(this);
          this.$refs.loginFormRef.resetFields();
        },
        login() {
          this.$refs.loginFormRef.validate(async valid=>{
            if(!valid) return;
            const {data:res}=await this.$http.post('login',this.loginForm);
            this.$message.success('登陆成功');
            window.sessionStorage.setItem('token',res.token)
            console.log(res.password)
            //跳转页面
            this.$router.push("home")
          });
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    .login_container {
      background-color: gray;
      height: 100%;
    }
    .login_box {
      width: 450px;
      height: 300px;
      background-color: aliceblue;
      border-radius: 3px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .avator_box {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #eee;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    
    .btns {
      display: flex;
      justify-content: flex-end;
    }
    .loginForm {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
    </style>

### 六.引入组件 plugins/element.js ###

/* eslint-disable */
    import Vue from 'vue'
    import { Button } from 'element-ui'
    import { Form, FormItem} from 'element-ui'
    import {Input} from 'element-ui'
    //导入消息提示
    import { Message } from 'element-ui'
    Vue.use(Button)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Input)
    Vue.prototype.$message=Message

### 七，页面效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnpsMQ_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnpsMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200202202333495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnpsMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnpsMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200202203415554.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnpsMQ==,size_16,color_FFFFFF,t_70