Vue制作一个登录界面（javaEE大作业实战)
项目基本目录结构：
- global.css ,设置 html,body,以及 #app区域所有的高度占比都是 100%
/* 全局样式表 */
html,
body,
#app {
height: 100%;
margin: 0;
padding: 0;
}
- router 的配置
import Vue from 'vue'
import Router from 'vue-router'
import LoginView from "@/views/login/LoginView";
import NavLeft from "@/views/tabbar/NavLeft";
import NavExample from "@/views/tabbar/NavExample";
import LoginPage from "@/views/login/LoginPage";
import Home from "../views/home/Home";
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'LoginPage',
component: LoginPage
},
{
path: '/login',
component: LoginPage
},
{
path:'/home',
component: Home
},
{
path: '/nav',
name: 'NavLeft',
component: NavLeft
},
{
path: '/nav2',
name: 'NavExample',
component: NavExample
}
]
})
router.beforeEach((to,from,next) => {
//to: 将要访问的路径
//next 放行函数，强制跳转路径 next(url)
if(to.path=='/login') return next()
let token = window.sessionStorage.getItem('token')
if(!token) {
return next('/login')
}
next()
})
export default router
- main.js的配置
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//需要再 main这里引入全局样式表 ，并且注册
import '@/assets/css/global.css'
import 'element-ui/lib/theme-chalk/index.css';
import {
Button,Form,FormItem,Input,Message,Container,Header,Aside,Footer,Main
} from "element-ui";
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Footer)
Vue.use(Main)
Vue.prototype.$message = Message
import axios from 'axios'
import el from "element-ui/src/locale/lang/el";
axios.defaults.baseURL='localhost:8080/api/';
Vue.prototype.$http = axios;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App },
template: '- 登录界面：
<template>
<div class="login_container">
<div class="login_box">
<div class="avater_box">
<img src="@/assets/logo.png" alt="">
</div>
<!-- 登录组件 -->
<el-form label-width="0px" class="login_form"
comment="这个是登录框，:model 用来双向绑定数据"
:model="loginInfo"
:rules="inputRules"
ref="loginFormRef"
>
<el-form-item comment="用户名" prop="username">
<!-- 如果没有提供的话，就去阿里图标库下载 -->
<el-input prefix-icon="el-icon-user" v-model="loginInfo.username"></el-input>
</el-form-item>
<el-form-item comment="密码" prop="password">
<el-input prefix-icon="el-icon-warning-outline" v-model="loginInfo.password" type="password"></el-input>
</el-form-item>
<el-form-item class="btn-line">
<el-button type="success" @click="doPost">登录</el-button>
<el-button type="info" @click="resetFields" >重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "LoginPage",
data() {
return {
//用户输入信息校验
loginInfo: {
username: '',
password: ''
},
// 用户输入校验
inputRules:{
username:[
{
required:true,message:'请输入登录账号',trigger:'blur'},
{
min:3,max:20,message: "长度在3到20个字符",trigger: 'blur'}
],
password: [
{
required:true,message:'请输入登录密码',trigger:'blur'},
{
min:5,max:20,message: "长度在5到20个字符",trigger: 'blur'}
]
}
}
},
methods:{
doPost() {
this.$refs.loginFormRef.validate(async valid => {
// console.log(123)
console.log(valid);
if(!valid) return;
try{
const {
data:result} = await this.$http.post("login",this.loginInfo);
console.log(result)
}catch (e) {
console.log('异常')
// this.$message.error("网络有问题")
this.$message.success("登录成功")
let token = '123'
window.sessionStorage.setItem('token',token)
this.$router.push('/home')
}
//将 result.data 拿出来，并且打印
})
},
resetFields() {
this.$refs.loginFormRef.resetFields();
}
}
}
</script>
<style scoped lang="less">
.login_container {
background-color: #111821;
height: 100%;
width: 100%;
.login_box {
width: 450px;
height: 300px;
background-color: white;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.avater_box {
height: 130px;
width: 133px;
border: 1px solid #eeeeee;
border-radius: 50%; /* 父节点圆角 */
box-shadow: 0 0 10px #ddd; /* 设置同心圆阴影 */
left: 50%;
right: 50%;
position: absolute;
transform: translate(-50%, -50%); /* 使用绝对定位，所有根据该盒子的高度移动*/
background-color: #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%; /* 图片圆角 */
background-color: #eeeeee;
}
}
.btn-line {
display: flex;
justify-content: flex-end;
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 10px;
box-sizing: border-box; /* form 不设置border-sizing 会撑开父元素 */
}
}
}
</style>
界面如图所示：
