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
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022