教务管理系统-账号登陆实现
项目结构
(1)登陆界面
输入用户名和密码,并选择身份,登陆到相应的学生界面和教师界面。
(2)系统学生界面
在界面上显示学生的姓名和学号。
显示学生基本信息。
查询课程信息:输入课程号和教师号。显示课程信息。课程号和教师号可以为空。
选课界面:输入课程号和教师号。选相应的课程。要显示错误信息(不如课程号错误或者教师号错误)。
退课界面:显示该学生的上课列表,并且学生可以选择相应的内容进行退课提交。
显示学生的成绩报告单:选择相应的学期,显示最终的成绩报告单。
课程表:显示学期,并且显示课程表内容。
退出:退出当前的账号。回到登陆界面。
(3)系统教师界面
在界面上显示教师的姓名和学号
显示教师基本信息
查看班上的学生成绩。选择学期,跳出课程表,点击课程号,弹出模态框,显示学生班上的学生成绩。
学生成绩总体分布。选择学期,课程下拉菜单会自动变化成当前学期的课程,选择课程。根据课程和学期来看学生的成绩总体分布情况。
学生成绩登入。显示当前学期的课程,根据教师选择的学期显示学生表,并且最终提交成绩。
课程信息。选择学期和课程,显示课程的表,上面有课程的详细信息。点击课程号,有学生表,显示学生的详细信息。
不同的功能实现
1.登陆界面
前端:bootstrap+jquery
使用表单进行提交。表单的设计:
<!--输入框输入用户名和密码,选择身份。-->
<!--required表示必须输入。-->
<div class="container"><br>
<form id="login_form" name="login_form" onsubmit="return false" action="##" method="get">
<div class="form-group">
<lable for="username">用户:</lable>
<input type="text" class="form-control" id="username" placeholder="请输入用户名" name="id" required>
</div>
<div class="form-group">
<lable for="password">密码:</lable>
<input type="password" class="form-control" id="password" placeholder="请输入密码" name="pwd" required>
</div>
<div class="radio">
<lable><input type="radio" name="identity" value="student" required>学生</lable>
<lable><input type="radio" name="identity" value="teacher" required>教师</lable>
</div>
<input id="login" type="button" class="btn btn-primary" value="登陆" onclick="login_check()">
<p id="success"></p>
</form>
</div>
数据通过ajax传送:
function login_check() {//登陆
var check_res;
var is_send;
//表单中返回的数据
var id = $("input[name=id]").val();
var pwd = $("input[name=pwd]").val();
var identity = $("input[name=identity]:checked").val();
console.log(id);
console.log(pwd);
console.log(identity);
$.ajax({
type: "get",
//服务器响应的数据类型
dataType: "text",
url: "http://localhost:8080/login",
//发送json类型的数据
data: {
"id": id,//用户名
"pwd": pwd,//密码
"identity": identity
},//身份
async:false,//同步
//发送到服务器默认的数据类型
//允许跨域请求
xhrFields:{
withCredentials:true
},
// crossDomain:true,
//规定从服务器中返回字符串型的数据
// contentType: 'application/json',
success: function (result) {
console.log("sending");
check_res = result;
is_send = true;
console.log(result);
if (check_res == "true_student") {
console.log("logging!")
$("#success").text("登陆成功");
//跳转到学生界面
$(window).attr('location','./studentPage/studentHomePage.html');
} else if(check_res=="true_teacher"){
console.log("logging!");
$("#success").text("登陆成功");
//跳转到教师界面
$(window).attr('location','./teacherPage/teacherHomePage.html');
} else if(check_res=="false"){
console.log("logging error!");
$("#success").text("用户名或密码错误!");
} else{
console.log("haven't receive data");
}
},
error: function (XMLHttpRequest,textStatus) {
$("#success").text("出错了");
alert(XMLHttpRequest.readyState);//调试状态码
alert(textStatus);
alert(XMLHttpRequest.status);
is_send = false;
console.log("error!");
},
});
}
后端:servelt
1.学生类:
public class student {
String id;
String name;
String sex;
String college;
String hometown;
String phone_number;
String birthday;
public student(String id,String name,String sex,String college,
String hometown,String phone_number,String birthday){
this.id = id;
this.name = name;
this.sex = sex;
this.college = college;
this.hometown = hometown;
this.phone_number = phone_number;
this.birthday = birthday;
}
public void setId(String id){
this.id = id;
}
public String getId(){
return id;
}
public void setName(String name){
this.name=name;
}
public String getName(){
return name;
}
public void setSex(String sex){
this.sex=sex;
}
public String getSex(){
return sex;
}
public void setCollege(String college){
this.college=college;
}
public String getCollege(){
return college;
}
public void setHometown(String hometown){
this.hometown=hometown;
}
public String getHometown(){
return hometown;
}
public void setPhone_number(String phone_number){
this.phone_number=phone_number;
}
public String getPhone_number(){
return phone_number;
}
public void setBirthday(String birthday){
this.birthday = birthday;
}
public String getBirthday(){
return birthday;
}
}
2.教师类:
public class teacher {
String id;//工号
String name;//姓名
String gender;//性别
String birthday;//出生日期
String level;//级别
double wages;//工资
String department;//院系
public void setId(String id){
this.id=id;
}
public String getId(){
return id;
}
public void setName(String name){
this.name=name;
}
public String getName(){
return name;
}
public void setGender(String gender){
this.gender=gender;
}
public String getGender(){
return gender;
}
public void setBirthday(String birthday){
this.birthday = birthday;
}
public String getBirthday(){
return birthday;
}
public void setLevel(String level){
this.level=level;
}
public String getLevel(){
return level;
}
public void setWages(double wages){
this.wages=wages;
}
public double getWages(){
return wages;
}
public void setDepartment(String department){
this.department=department;
}
public String getDepartment(){
return department;
}
}
3.登陆:servlet类
private static final long serialVersionUID = 1L;
static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
static final String DB_URL = "jdbc:mysql://localhost:3306/school";
static final String USER = "root";
static final String PASS = "ammy990427";
JsonArray json = null;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Connection conn = null;
Statement stmt = null;
System.out.println("登陆接口:get");
//获取表单信息
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String identity = request.getParameter("identity");
String userName = request.getParameter("id");
String password = request.getParameter("pwd");
System.out.printf("%s %s %s\n",identity,userName,password);
response.setContentType("text/html;charset=UTF-8");
try{
//数据库连接
student s = new student("null","null","null","null","null",
"null","null");
teacher t = new teacher();
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(DB_URL,USER,PASS);
stmt = conn.createStatement();
String sql;
PrintWriter out = response.getWriter();
if(identity.equals("student")){
System.out.println("当前登陆身份:学生");
sql="select stid,passwd from stuid where stid="+userName+";";
}else{
System.out.println("当前登陆身份:教师");
sql="select gh,passwd from teacherid where gh="+userName+";";
}
ResultSet rs = stmt.executeQuery(sql);
//将当前的记录写入session
HttpSession session = request.getSession();
if(!rs.next()){//如果在数据库中找不到该用户
//返回字符串
out.print("false");
System.out.println("1");
}else if(!rs.getString(2).equals(password)) {//如果密码不匹配
//返回字符串
out.print("false");
System.out.println("2");
}else{//如果用户匹配
// response.setStatus(302);
if(identity.equals("student")){
//返回字符串
out.print("true_student");
s.setId(userName);
session.setAttribute("stu_id",userName);
System.out.println((String) session.getAttribute("stu_id"));
System.out.println(session.getId());
System.out.println("student login");
}else if(identity.equals("teacher")){
//返回字符串
out.print("true_teacher");
t.setId(userName);
session.setAttribute("tea_id",userName);
System.out.println("teacher login");
}
}
out.flush();
out.close();
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
}
代码逻辑:
1.获取表单内容,用户名、密码、身份
2.连接数据库(jdbc),根据身份和用户名验证密码:
有两种情况:
(1)用户名不存在
(2)密码错误
(3)验证通过
3.如果是前两种情况将返回字符串false
4.通过将返回字符串true,并且将学生的信息记录在session中。
5.前端根据返回的字符串信息,做出不同的响应。如果是false,将显示用户名或密码错误字段,如果是true,将进入学生或者教师界面。
tips:
1.存储登陆的信息用的是session,所以在前端的ajax上加上了:
xhrFields:{withCredentials:true},
2.在servlet中要有filter,常常会因为CORS协议进行拦截(不明白为什么):
public class Filter implements javax.servlet.Filter {
public void destroy() {
}
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
// chain.doFilter(req, resp);
HttpServletResponse response = (HttpServletResponse) resp;
HttpServletRequest request = (HttpServletRequest) req;
String origin = request.getHeader("Origin");
String[] allowDomain = {"http://localhost:63343","http://localhost:63342"};
Set<String> allowOrigin = new HashSet<String>(Arrays.asList(allowDomain));
if(allowOrigin.contains(origin)){
response.setHeader("Access-Control","no-cache");
response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
// response.setHeader("Access-Control-Max-Age", "3600");
// response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
}
response.setCharacterEncoding("UTF-8");
System.out.println("filter执行");
chain.doFilter(request,response);
}
public void init(FilterConfig config) throws ServletException {
}
}
allowDomain中是允许通过的http头(也不太明白 不知道怎么说),在部署中的url-pattern中范围是所有的servlet,为“/*”。
3.web.xml中的部署就不详细说明了。
来源:CSDN
作者:Ammy�
链接:https://blog.csdn.net/zyyyyyy17122921/article/details/104224823