目录
本篇文章主要介绍学生管理系统主要界面，至于各界面中所含代码均基于Servlet(创建、使用、生命周期、http协议、http请求、http响应、过滤器)；
<!-- 一个.vue文件是一个组件,可以理解为一个页面,但是和页面不同
内容都写在一个template标签中,
template标签有且只有一个根标签
-->
<template>
<div class="login_container">
<!-- 登录盒子-->
<div class="login_box">
<!-- 头像盒子-->
<div class="img_box">
<img src="./assets/logo.png" />
</div>
<div style="padding-top: 105px;padding-right: 50px;">
<el-form ref="refform" :model="form" :rules="rules" label-width="80px">
<el-form-item label="账号" prop="account">
<el-input v-model="form.account" placeholder="请输入账号!"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" placeholder="请输入密码!" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-star-off" @click="login('refform')" style="margin-left:30px;">登录</el-button>
<el-button type="warning" icon="el-icon-circle-close" style="margin-left:60px; margin-top: 20px; ">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
/* 导出组件,并为组件定义数据,函数,生命周期函数 */
export default{
data(){
return{
form: {
account: 'admin',
password: '111'
},
rules: {
account: [
{ 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:{
login(refform){
/* 在此把前端登录表单中的数据向后java后端发送 this.form*/
this.$refs[refform].validate((valid) => {
if(valid) {
/* alert("登录成功"); */
//如果发送成功,在此向用户提示,并跳转到登录成功的组件
this.$http.post("login",jsonToString(this.form)).then((resp)=>{
//resp.data==commenResult
if(resp.data.code==200){
this.$message({message:resp.data.message,type: 'success'});
//sessionStorage浏览器提供的一个会话级别的存储空间，浏览器关闭后立刻消失
sessionStorage.setItem("account",resp.data.data.account);
sessionStorage.setItem("token",resp.data.data.token);
//localStorage.setItem("key","value");//长久保存
//处理数据
this.$router.push("/main");
}else if(resp.data.code==201){
this.$message({message:resp.data.message,type: 'warning'});
}else{
this.$message.error(resp.data.message);
}
})
}
});
}
}
}
//将json对象序列化为键=值&键=值
function jsonToString(jsonobj){
console.log(jsonobj)
var str = "";
for(var s in jsonobj){
str+=s+"="+jsonobj[s]+"&";
}
return str.substring(0,str.length-1);
}
</script>
<style>
.login_container{
height: 100vh;
margin: 0px;
padding: 0px;
background-image: url(assets/bg.jpg);
}
.login_box{
width: 450px;
height: 350px;
background-color: #fff;
border-radius: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
opacity: 0.95;
}
.img_box{
width: 130px;
height: 130px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
border-radius: 50%;
padding: 5px;
border: 1px solid #eee;
}
.img_box img{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
</style><template>
<div>
<el-container>
<!-- 顶部 -->
<el-header>
<div style="width: 500px; display: inline-block; font-size: 26px;font-weight: 400; color:black;font-family: '楷体';">
管理系统后台
</div>
<el-dropdown style="float: right;">
<i class="el-icon-setting" style="margin-right: 15px"><span>{{account}}</span></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item><span @click="logOut()">安全退出</span></el-dropdown-item>
<el-dropdown-item><span @click="test()">测试</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-container>
<!-- 左侧菜单 -->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1','3']" router>
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>功能菜单</template>
<el-menu-item-group>
<el-menu-item index="/studentList">学生管理</el-menu-item>
<el-menu-item index="/majorList">专业管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧操作区间 -->
<el-main>
<router-view></router-view><!-- 显示嵌套在main下的路由 -->
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default{
data(){
return{
account:""
}
},
methods:{
logOut(){
sessionStorage.clear();//清除浏览器中存储的用户信息
this.$confirm('确定要退出吗?', '操作提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$router.push("/login")
});
},
test(){
//向后端携带token，每次请求都需发送token,很麻烦
// var token=sessionStorage.getItem("token");
this.$http.get("back/test").then((resp)=>{
})
}
},
mounted(){
this.account=sessionStorage.getItem("account");
/*判断浏览器中用户信息是否为空，如果为空，说明登录失效，应跳转到登录界面
if(this.account==null){
this.$router.push("/login");
} */
}
}
</script>
<style>
.el-header{
background-color: lightblue;
color: #333;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
height: 100vh;
}
.el-main {
background-color: gainsboro;
color: #333;
text-align: center;
height: 100vh;
}
</style>login页面
main页面
