MVC实现前后端分离的学生信息管理系统

其他 2021-03-08 16:14:39 阅读次数: 0

一、项目概况
用纯MVC的模式实现前后端分离的“学生信息管理系统”，主要实现学生信息（姓名，学号，年龄，住址，密码）的增删改查功能，前端界面很low。下图是项目的主页面，然点击相应的按钮可以实现相应的功能。
在这里插入图片描述
二、开发环境
后端编译器：IDEA
前端的编译器：vscode
数据库：mysql
三、项目的目录结构
1.后端
在这里插入图片描述
2.前端
红线划掉的是不需要的
四、项目搭建步骤
1.创建数据库表
在这里插入图片描述
2.在Utils包下进行数据库连接测试
DBHelper.java

package com.whj.utils;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBHelper {
    static Connection conn=null;
    public static Connection getConnection() {
        String driver="com.mysql.jdbc.Driver";
        String url="jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=UTF-8";
        String username="root";
        String password="123456";
        try {
            Class.forName(driver);
            conn=(Connection)DriverManager.getConnection(url, username, password);
        }catch(Exception e) {
            e.printStackTrace();
        }
        return conn;
    }
    public static void main(String[] args) {
        if(new DBHelper().getConnection()!=null) {
            System.out.println("成功");
        }else if(new DBHelper().getConnection()==null){
            System.out.println("失败");
        }
    }
}

3.在pojo包下创建与数据库表字段对应的实体类
Stu.java

package com.whj.pojo;

public class Stu {
    private int sno;
    private String sname;
    private int sage;
    private String saddress;
    private String spwd;

    public Stu(){}

    @Override
    public String toString() {
        return "Stu{" +
                "sno=" + sno +
                ", sname='" + sname + '\'' +
                ", sage=" + sage +
                ", saddress='" + saddress + '\'' +
                ", spwd='" + spwd + '\'' +
                '}';
    }

    public int getSno() {
        return sno;
    }

    public void setSno(int sno) {
        this.sno = sno;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public int getSage() {
        return sage;
    }

    public void setSage(int sage) {
        this.sage = sage;
    }

    public String getSaddress() {
        return saddress;
    }

    public void setSaddress(String saddress) {
        this.saddress = saddress;
    }

    public String getSpwd() {
        return spwd;
    }

    public void setSpwd(String spwd) {
        this.spwd = spwd;
    }

    public Stu(int sno, String sname, int sage, String saddress, String spwd) {

        this.sno = sno;
        this.sname = sname;
        this.sage = sage;
        this.saddress = saddress;
        this.spwd = spwd;
    }
    public Stu( String sname, int sage, String saddress, String spwd) {
        this.sname = sname;
        this.sage = sage;
        this.saddress = saddress;
        this.spwd = spwd;
    }
}

4.在dao包下创建项目所需要实现的所有方法的接口
StuDao.java

package com.whj.dao;

import com.whj.pojo.Stu;

import java.util.List;

public interface StuDao {
    //登录验证
    public boolean CheckLogin(String name,String pwd);
    //学生信息展示
    public List<Stu> SearchStuInfo();
    //新增学生信息
    public boolean addStuInfo(Stu student);
    //删除学生信息
    public boolean delStuInfo(int sno);
    //更新学生信息
    public boolean updateStuInfo(int sno,Stu student);

}

5.在dao包下创建StuDaoImpl.java来实现接口tuDao.java中的方法
StuDaoImpl.java

package com.whj.dao;

import com.whj.pojo.Stu;
import com.whj.utils.DBHelper;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class StuDaoImpl implements StuDao{
    Connection conn = DBHelper.getConnection();
    //登陆验证
    public boolean CheckLogin(String name, String pwd) {
        boolean flag=false;
        String sql = "select count(*) from stu where sname=? and spwd =?; ";
        try {
            PreparedStatement pstmt = conn.prepareStatement(sql);
            pstmt.setString(1,name);
            pstmt.setString(2,pwd);
            ResultSet rs = pstmt.executeQuery();
            if(rs.next()){
                flag=true;
            }else{
                flag=false;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return flag;
    }

    //显示学生信息
    public List<Stu> SearchStuInfo() {
        ArrayList<Stu> student = new ArrayList<>();
        boolean flag=false;
        String sql="select * from stu";
        try {
            PreparedStatement pstmt = conn.prepareStatement(sql);
            ResultSet rs = pstmt.executeQuery();
            while(rs.next()){
                int sno = rs.getInt("sno");
                String sname = rs.getString("sname");
                int sage = rs.getInt("sage");
                String saddress = rs.getString("saddress");
                String spwd = rs.getString("spwd");
                Stu stu = new Stu(sno, sname, sage, saddress, spwd);
                student.add(stu);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return student;
    }

    //新增学生信息
    public boolean addStuInfo(Stu student) {
        boolean flag=false;
        String sql="insert into stu values(?,?,?,?,?)";
        try {
            PreparedStatement pstmt = conn.prepareStatement(sql);
            pstmt.setInt(1,student.getSno());
            pstmt.setString(2,student.getSname());
            pstmt.setInt(3,student.getSage());
            pstmt.setString(4,student.getSaddress());
            pstmt.setString(5,student.getSpwd());
            int i = pstmt.executeUpdate();
            if(i>0)
                flag=true;
            else
                flag=false;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return flag;
    }

    //删除学生信息
    public boolean delStuInfo(int sno) {
        boolean flag=false;
        String sql="delete from stu where sno=?";
        try {
            PreparedStatement pstmt = conn.prepareStatement(sql);
            pstmt.setInt(1,sno);
            int i = pstmt.executeUpdate();
            if(i>0)
                flag=true;
            else
                flag=false;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return flag;
    }

    //更新学生信息
    public boolean updateStuInfo(int sno, Stu student) {
        boolean flag=false;
        String sql="update stu set sname=?,sage=?,saddress=?,spwd=? where sno=?";
        try {
            PreparedStatement pstmt = conn.prepareStatement(sql);
            pstmt.setString(1,student.getSname());
            pstmt.setInt(2,student.getSage());
            pstmt.setString(3,student.getSaddress());
            pstmt.setString(4,student.getSpwd());
            pstmt.setInt(5,sno);
            int i = pstmt.executeUpdate();
            if(i>0)
                flag=true;
            else
                flag=false;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return flag;
    }
}

6.在controller包下依次创建servlet来进行逻辑实现和前后端的交互
①searchStuInfoServlet.java

package com.whj.controller;

import com.alibaba.fastjson.JSON;
import com.whj.dao.StuDao;
import com.whj.dao.StuDaoImpl;
import com.whj.pojo.Stu;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Writer;
import java.util.List;

//显示所有学生的信息
public class searchStuInfoServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        System.out.println("进入了查询所有学生信息的界面");
        /* 允许跨域的主机地址 */
        response.setHeader("Access-Control-Allow-Origin", "*");
        /* 允许跨域的请求方法GET, POST, HEAD 等 */
        response.setHeader("Access-Control-Allow-Methods", "*");
        /* 重新预检验跨域的缓存时间 (s) */
        response.setHeader("Access-Control-Max-Age", "3600");
        /* 允许跨域的请求头 */
        response.setHeader("Access-Control-Allow-Headers", "*");
        /* 是否携带cookie */
        response.setHeader("Access-Control-Allow-Credentials", "true");
        StuDao sd = new StuDaoImpl();
        List<Stu> Students = sd.SearchStuInfo();
        String Students_json_str = JSON.toJSONString(Students);
        System.out.println(Students_json_str);
        Writer out = response.getWriter();
//        out.write("servlet中的学生信息返回成功");
        out.write(Students_json_str);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        System.out.println("进入了查询所有学生信息的界面");
        /* 允许跨域的主机地址 */
        response.setHeader("Access-Control-Allow-Origin", "*");
        /* 允许跨域的请求方法GET, POST, HEAD 等 */
        response.setHeader("Access-Control-Allow-Methods", "*");
        /* 重新预检验跨域的缓存时间 (s) */
        response.setHeader("Access-Control-Max-Age", "3600");
        /* 允许跨域的请求头 */
        response.setHeader("Access-Control-Allow-Headers", "*");
        /* 是否携带cookie */
        response.setHeader("Access-Control-Allow-Credentials", "true");
        StuDao sd = new StuDaoImpl();
        List<Stu> Students = sd.SearchStuInfo();
        String Students_json_str = JSON.toJSONString(Students);
        System.out.println(Students_json_str);
        Writer out = response.getWriter();
        out.write("servlet中的学生信息返回成功");
        out.write("stuinfo:"+Students_json_str);
    }
}

②addStuInfoServlet.java

package com.whj.controller;

import com.whj.dao.StuDao;
import com.whj.dao.StuDaoImpl;
import com.whj.pojo.Stu;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Writer;
//新增学生信息
public class addStuInfoServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        System.out.println("进入了查询所有学生信息的界面");
        /* 允许跨域的主机地址 */
        response.setHeader("Access-Control-Allow-Origin", "*");
        /* 允许跨域的请求方法GET, POST, HEAD 等 */
        response.setHeader("Access-Control-Allow-Methods", "*");
        /* 重新预检验跨域的缓存时间 (s) */
        response.setHeader("Access-Control-Max-Age", "3600");
        /* 允许跨域的请求头 */
        response.setHeader("Access-Control-Allow-Headers", "*");
        /* 是否携带cookie */
        response.setHeader("Access-Control-Allow-Credentials", "true");
        int sno =Integer.parseInt(request.getParameter("sno"));
        String sname = request.getParameter("sname");
        int sage =Integer.parseInt(request.getParameter("sage"));
        String saddress = request.getParameter("saddress");
        String spwd = request.getParameter("spwd");
        Stu student=new Stu(sno,sname,sage,saddress,spwd);
        StuDao sd = new StuDaoImpl();
        boolean rs = sd.addStuInfo(student);
        if(rs){
            System.out.println("学生信息返回是true");
            response.sendRedirect("searchStuInfoServlet");//新增成功后再返回信息展示页面
            Writer out = response.getWriter();
            out.write("servlet中的新增学生信息返回成功");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

③delStuInfoServlet.java

package com.whj.controller;

import com.whj.dao.StuDao;
import com.whj.dao.StuDaoImpl;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Writer;

//删除学生信息
public class delStuInfoServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        System.out.println("进入了查询所有学生信息的界面");
        /* 允许跨域的主机地址 */
        response.setHeader("Access-Control-Allow-Origin", "*");
        /* 允许跨域的请求方法GET, POST, HEAD 等 */
        response.setHeader("Access-Control-Allow-Methods", "*");
        /* 重新预检验跨域的缓存时间 (s) */
        response.setHeader("Access-Control-Max-Age", "3600");
        /* 允许跨域的请求头 */
        response.setHeader("Access-Control-Allow-Headers", "*");
        /* 是否携带cookie */
        response.setHeader("Access-Control-Allow-Credentials", "true");
        int sno = Integer.parseInt(request.getParameter("sno"));
        StuDao sd = new StuDaoImpl();
        boolean rs = sd.delStuInfo(sno);
        if(rs){
            Writer out = response.getWriter();
            out.write("成功删除学生信息");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

④updateStuInfoServlet.java

package com.whj.controller;

import com.whj.dao.StuDao;
import com.whj.dao.StuDaoImpl;
import com.whj.pojo.Stu;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Writer;

//更新学生信息
public class updateStuInfoServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        System.out.println("进入了查询所有学生信息的界面");
        /* 允许跨域的主机地址 */
        response.setHeader("Access-Control-Allow-Origin", "*");
        /* 允许跨域的请求方法GET, POST, HEAD 等 */
        response.setHeader("Access-Control-Allow-Methods", "*");
        /* 重新预检验跨域的缓存时间 (s) */
        response.setHeader("Access-Control-Max-Age", "3600");
        /* 允许跨域的请求头 */
        response.setHeader("Access-Control-Allow-Headers", "*");
        /* 是否携带cookie */
        response.setHeader("Access-Control-Allow-Credentials", "true");
        int sno =Integer.parseInt(request.getParameter("sno"));
        String sname = request.getParameter("sname");
        int sage =Integer.parseInt(request.getParameter("sage"));
        String saddress = request.getParameter("saddress");
        String spwd = request.getParameter("spwd");
        Stu student=new Stu(sname,sage,saddress,spwd);
        StuDao sd = new StuDaoImpl();
        System.out.println(sno);
        boolean rs = sd.updateStuInfo(sno, student);
        if(rs){
            response.sendRedirect("searchStuInfoServlet");//新增成功后再返回信息展示页面
            Writer out = response.getWriter();
            out.write("servlet中的更新学生信息返回成功");
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

7.前端代码
①StuDisplay.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息展示页面</title>
    <script src="/statics/js/jquery.js"></script>
    <script src="/statics/js/jquery.min.js"></script>
</head>
<style>
    .table{
        border: 1px solid black;
    }
</style>
<body>
    <table cellspacing="1"  cellpadding="1" border="1" class="table" id="StuTable">
       <button id="add">新增</button>
    </table>
    
</body>
<script type="text/javascript">
    $(function(){
        //显示数据库中的所有学生信息
        $.ajax({
            url:"http://localhost:8080/searchStuInfoServlet",
            type:"post",
            header:{
                'content-type':'application/json',
            },
            // dataType: "JSON",
            success:function(res){
                console.log(res);
                var jsonArray=JSON.parse(res);//把json转换成json字符串
                // var jsonArray=eval(res);//第二种方法把json转换成json字符串
                console.log("结果是"+jsonArray[0].sname);//获取到的whj
                var delid="del";
                var editid="edit";
                $.each(jsonArray,function (i, item) {//遍历
                    var tr = $("<tr>名字是：<td>" + jsonArray[i].sname+ "</td>学号是：<td>"
                    + jsonArray[i].sno + "</td>年龄是：<td>"+ jsonArray[i].sage+ "</td>住址是：<td>"
                    + jsonArray[i].saddress+ "</td>密码是：<td>" + jsonArray[i].spwd+"</td><td><button id='"+jsonArray[i].sno+"' onclick="+delid+"(this.id)"+">删除</button><button id='"+jsonArray[i].sno+"' onclick="+editid+"(this.id)"+">编辑</button></td></tr>");
                    //动态生成列表
                    $("#StuTable").append(tr);
                });
            },
            error:function(res){
                alert("学生信息返回失败")
            }
        })
    }); 
     //新增的方法
    $("#add").click(function(){
        $(window).attr('location',"add.html");
    })
     //编辑的方法
    function edit(id){
        $(window).attr('location',"edit.html");
    }
    //删除的方法
    function del(id){ 
        var sno=id; 
        alert("学号是："+sno);
        $.ajax({
            url:"http://localhost:8080/delStuInfoServlet",
            type:"post",
            data:{
                sno:sno,
            },
            success:function(res){
                console.log(res)
                alert("删除成功")
                window.location.reload();
            }
        })
    } 
   
</script>
</html>

②add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增学生信息界面</title>
    <script src="/statics/js/jquery.js"></script>
    <script src="/statics/js/jquery.min.js"></script>
</head>
<body>
    <form id="form">
        姓名：<input type="text" name="sname"><br>
        学号：<input type="text" name="sno"><br>
        年龄：<input type="text" name="sage"><br>
        住址：<input type="text" name="saddress"><br>
        密码：<input type="text" name="spwd"><br>
        <input type="submit" id="save" value="新增">
        <input type="button" id="back" value="返回"><br>
    </form>
</body>
<script type="text/javascript">
    $(function(){
        $("#save").click(function(){
            var formArray =$("#form").serializeArray();
            alert(formArray[0].name+"--"+formArray[0].value+
            formArray[1].name+"--"+formArray[1].value+
            formArray[2].name+"--"+formArray[2].value+
            formArray[3].name+"--"+formArray[3].value+
            formArray[4].name+"--"+formArray[4].value);
            $.ajax({
                url:"http://localhost:8080/addStuInfoServlet",
                type:"post",
                data:{
                    sname:formArray[0].value,
                    sno:formArray[1].value,
                    sage:formArray[2].value,
                    saddress:formArray[3].value,
                    spwd:formArray[4].value
                },
                success:function(res){
                    alert("学生信息增加成功")
                },
                error:function(res){
                    alert("学生信息增加失败")
                }
            });
        }),
        $("#back").click(function(){
            $(window).attr('location',"StuDisplay.html");
        })
    })
</script>
</html>

③edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/statics/js/jquery.js"></script>
    <script src="/statics/js/jquery.min.js"></script>
</head>
<body>
    <form id="form">
        姓名：<input type="text" name="sname"><br>
        学号：<input type="text" name="sno"><br>
        年龄：<input type="text" name="sage"><br>
        住址：<input type="text" name="saddress"><br>
        密码：<input type="text" name="spwd"><br>
        <input type="submit" id="update" value="更新">
        <input type="button" id="back" value="返回"><br>
    </form>
</body>
<script>
    $(function(){
        $("#update").click(function(){
            var formArray =$("#form").serializeArray();
            alert(formArray[0].name+"--"+formArray[0].value+
            formArray[1].name+"--"+formArray[1].value+
            formArray[2].name+"--"+formArray[2].value+
            formArray[3].name+"--"+formArray[3].value+
            formArray[4].name+"--"+formArray[4].value);
            $.ajax({
                url:"http://localhost:8080/updateStuInfoServlet",
                type:"post",
                data:{
                    sname:formArray[0].value,
                    sno:formArray[1].value,
                    sage:formArray[2].value,
                    saddress:formArray[3].value,
                    spwd:formArray[4].value
                },
                success:function(res){
                    alert("学生信息更新成功")
                },
                error:function(res){
                    alert("学生信息更新失败")
                }
            });
        })
        $("#back").click(function(){
            $(window).attr('location',"StuDisplay.html");
        })
    })
</script>
</html>

五、总结和展望
前端显示太low了，还是自己技术不行，vue框架没学过，之后会把这个项目用SSM框架再做一遍，然后也会抽空去学vue框架，争取做的更好看。加油哦。

猜你喜欢

转载自blog.csdn.net/weixin_43719616/article/details/109571508
今日推荐
周排行
unity 内存管理**标记 实时更新
微信返回时页面很卡或者页面跳转有问题
正则介绍以及grep
(转)editText圆角边框
模块化物料清单
js去掉数组中重复的元素
小程序Promise不支持finally解决方案
输入一颗二叉树的根节点，求二叉树的深度
POJ 2800:垂直直方图
Firefox 71 发布，具有画中画支持及更多功能
每日归档
更多
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)
2025-01-27(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022