Vue實戰項目：電商管理系統（Element-UI） （1-20）記錄第一天 （一）登錄頁面繪製

目錄

 

一.頁面目錄結構

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

三.路由信息 router/index.js

四..自定義樣式信息assest/css/global.css

五,登錄頁面components/Login.vue

六.引入組件 plugins/element.js

七，頁面效果

---

一.頁面目錄結構

二，項目入口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

 

七，頁面效果