（九）優化登入頁面
阿新 • • 發佈：2020-12-14
使用的是vue-element
需要安裝element這個元件
全域性配置：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
Login.vue頁面修改：
<template> <body id="poster"> <el-form class="login-container" label-position="left" label-width="0px"> <h3 class="login_title">系統登入</h3> <el-form-item> <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="賬號"></el-input> </el-form-item> <el-form-item> <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密碼"></el-input> </el-form-item> <el-form-item style="width: 100%"> <el-button type="primary" style="width: 100%;background: #505458;border: none"v-on:click="login">登入 </el-button> </el-form-item> </el-form> </body> </template> <script> export default { name: 'Login', data () { return { loginForm: { username: 'admin', password: '123' }, responseResult: [] } }, methods: { login () { this.$axios .post('/login', { username: this.loginForm.username, password: this.loginForm.password }) .then(successResponse => { if (successResponse.data.message === 'success') { this.$router.replace({path: '/index'}) } }) .catch(failResponse => { }) } } } </script> <style> #poster { background: url("../assets/svg.jpg") no-repeat; background-position: center; height: 100%; width: 100%; background-size: cover; position: fixed; } body { margin: 0px; } .login-container { border-radius: 15px; background-clip: padding-box; margin: 90px auto; width: 350px; padding: 35px 35px 15px 35px; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6; } .login_title { margin: 0px auto 40px auto; text-align: center; color: #505458; } </style>
路由的優化：
由於之說訪問專案時，路徑上有個#，在這裡給優化一下去掉
修改router\index.js，加入mode: 'history這句話。