教务管理系统实现1-账号登陆

偶尔善良 提交于 2020-02-08 18:43:20

教务管理系统-账号登陆实现

项目结构

(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中的部署就不详细说明了。

登陆页面login
如果登陆失败

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!