学生管理系统主要界面

目录

1.登录界面(login)

2.信息管理界面(main)

3.页面展示

---

本篇文章主要介绍学生管理系统主要界面，至于各界面中所含代码均基于Servlet(创建、使用、生命周期、http协议、http请求、http响应、过滤器)；

Ajax 异步提交(XMLHttpRequest对象，GET方式、axios框架，json)；

前后端分离（axios发送数据请求，路由导航守卫，web会话跟踪，token）；

1.登录界面(login)

<!-- 一个.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>

2.信息管理界面(main)

<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>

3.页面展示

login页面

main页面