login.vue
<template>
<!-- 登录框区域 -->
<div class="login">
<!-- 登录框中的标题文字 -->
<h1 class="login-title">学生成绩管理系统</h1>
<!-- 登录表单, -->
<!-- model是绑定数据，rules是校验规则，ref是表单名称, -->
<el-form
:model="loginForm"
:rules="rules"
ref="loginForm"
label-position="left"
class="login-form">
<!-- prop是校验项的名称 -->
<el-form-item prop="userName">
<!-- v-model是数据双向绑定，
placeholder是文字占位，
size是控件尺寸,
clearable是控件右侧有清除叉按钮 -->
<el-input
v-model="loginForm.userName"
placeholder="用户名"
size="medium"
clearable>
<!-- 控件插槽，在输入框前部加入图标 -->
<template slot="prepend"><i class="el-icon-user-solid"></i></template>
</el-input>
</el-form-item>
<!-- type password表示密码框，show-password表示小眼睛，可显示密码 -->
<el-form-item prop="pwd">
<el-input
v-model="loginForm.pwd"
type="password"
placeholder="密码"
size="medium"
show-password
clearable>
<template slot="prepend"><i class="el-icon-lock"></i></template>
</el-input>
</el-form-item>
<!-- 登录按钮，clike是单击事件， -->
<el-button type="primary" @click="loginSubmit('loginForm')" class="login-btn">登 录</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return {
//表单数据
loginForm:{
userName:'', //用户名
pwd:'' //密码
},
//校验规则
rules: {
// required 必填，message 提示，trigger 触发规则，blur 失去焦点
userName: [{ required: true, message: '请输入用户名', trigger: 'blur'}],
pwd: [{ required: true, message: '请输入密码', trigger: 'blur'}]
}
}
},
methods: {
//登录提交
loginSubmit(formName){
//先校验是否输入
this.$refs[formName].validate((valid)=>{
if(valid){
//校验通过
//调用axios post，提交数据至后台接口
this.$appJsonPost({
//接口路径
url:'/user/login',
//提交数据
data: this.loginForm
}).then(res => {
//提交动作完成后，回调函数
//console.log("login res",res);
//将回传的用户信息存本地vuex中
this.$store.dispatch("setUserInfo",res.data);
//提示
this.$message.success("登录成功");
//路由跳转
this.$router.replace('/index');
}).catch(error=>{})
//捕获异常
}
})
}
}
}
</script>
<style lang="scss" scoped>
/* lang scss 可以层叠嵌套方式，编写css样式 */
.login{
width: 450px;
border: 1px solid green;
border-radius: 15px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-75%);
.login-title{
text-align: center;
margin-top: 20px;
color: blueviolet;
}
.login-form{
width: 80%;
padding: 15px;
margin: 10px auto;
}
.login-btn{
width: 100%;
height: 35px;
margin: 35px auto 1px;
display: block;
}
}
</style>
main.vue
<template>
<div class="main">
<el-container class="outer-container">
<el-header>
<!-- 顶部区域 -->
<my-header></my-header>
</el-header>
<el-container>
<!-- 左边栏区域 -->
<!-- asideWidth控制左边栏折叠的宽度 -->
<el-aside :width="asideWidth">
<!-- 菜单组件 -->
<side-bar @changeWidth="changeWidth"></side-bar>
</el-aside>
<el-main>
<!-- 页签组件 -->
<tab-view :opened-tabs="openedTabs"></tab-view>
<!-- 菜单项，路由出口 -->
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import MyHeader from "@/components/MyHeader"; //导入顶部栏组件
import SideBar from "@/components/SideBar"; //导入侧边栏组件
import TabView from "@/components/TabView"; // 导入页签组件
import {mapGetters} from 'vuex'; //导入vuex函数
export default {
name: "Main",
components: {
//局部注册组件，同名简写方式
MyHeader,
SideBar,
TabView
},
data(){
return {
//侧边栏宽度
asideWidth: '200px',
}
},
computed:{
//vuex中，已打开的页签数组
...mapGetters(['openedTabs'])
},
methods: {
//修改侧边栏菜单宽度
changeWidth(val){
this.asideWidth = val;
}
}
}
</script>
<style lang="scss" scoped>
.main{
height: 100%;
/*
让el-container充满屏幕，需要配合app中的height 100%
*/
.outer-container{
height: 100%;
}
.el-header{
background-color: #0a366b;
color: white;
}
.el-aside{
background-color: #003c7f;
};
.el-main{
padding: 10px;
}
}
</style>
app.vue
<template>
<div id="app">
<!-- 路由出口 -->
<router-view/>
</div>
</template>
<script>
import { mapGetters} from 'vuex' //引入vuex的函数
import { BASE_URL,USER_INFO_KEY } from '@/config/Constants' //引入常量
import { saveItem } from '@/storage' //引入本地存储的常用方法
export default {
name:'App',
computed: {
// 获取用户信息的常规写法，
// userInfo(){
// return this.$store.getters.userInfo;
// }
//简化写法，
...mapGetters(['userInfo'])
},
methods:{
//保存登录用户的信息到本地存储
saveUserInfo(){
saveItem(USER_INFO_KEY,this.userInfo)
}
},
mounted(){
//测试，输出配置的项
console.log("baseUrl",process.env.VUE_APP_BASE_URL);
console.log("baseUrl2",BASE_URL);
//页面销毁（比如刷新）之前调用
window.addEventListener("unload",this.saveUserInfo);
}
}
</script>
<style lang="scss">
/* 重置全部样式的内边距和外边距 */
* {
margin: 0;
padding: 0;
}
/* app的高度充满整个屏幕 */
html,body,#app{
height: 100%;
}
</style>
