课程设计之学生信息管理系统，SSM框架

╰半夏微凉° 2022-12-27 14:09 121阅读 0赞

**代码已上传至github，[点击进入Github][Github]**

### 文章目录 ###

*  整体效果展示
 *  整体架构展示
 *  使用的技术栈
 *  编写过程
 *   *  一、基础环境搭建
     *  二、查询
     *  三、新增
     *  四、修改
     *  五、删除

# 整体效果展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70]

# 整体架构展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 1]

# 使用的技术栈 #

以 Maven 架构项目，使用 Spring + SpringMVC + MyBatis 框架；采用 c3p0 开源 JDBC 数据库连接池连接 MySql 数据库；发送 AJAX 请求获取 JSON 数据，并通过 Dom 动态加载页面；使用了 Spring - Test 与Junit 编写单元测试代码；使用了 Restful 设计风格，以 AJAX 发送 PUT 与 DELETE 类型请求；采用了双端校验，前端校验 JQuery，后端校验符合 JSR303 规范

# 编写过程 #

## 一、基础环境搭建 ##

1.  pom.xml中引入相关jar包

<dependency>
    			<groupId>org.springframework</groupId>
    			<artifactId>spring-webmvc</artifactId>
    			<version>4.3.7.RELEASE</version>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>org.springframework</groupId>
    			<artifactId>spring-jdbc</artifactId>
    			<version>4.3.7.RELEASE</version>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>org.springframework</groupId>
    			<artifactId>spring-aspects</artifactId>
    			<version>4.3.7.RELEASE</version>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>org.mybatis</groupId>
    			<artifactId>mybatis</artifactId>
    			<version>3.4.2</version>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>org.mybatis</groupId>
    			<artifactId>mybatis-spring</artifactId>
    			<version>1.3.1</version>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>com.mchange</groupId>
    			<artifactId>c3p0</artifactId>
    			<version>0.9.5.2</version>
    		</dependency>
    		
    		<dependency>
    			<groupId>mysql</groupId>
    			<artifactId>mysql-connector-java</artifactId>
    			<version>5.1.41</version>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>jstl</groupId>
    			<artifactId>jstl</artifactId>
    			<version>1.2</version>
    		</dependency>
    
    		<dependency>
    			<groupId>javax.servlet</groupId>
    			<artifactId>javax.servlet-api</artifactId>
    			<version>3.0.1</version>
    			<scope>provided</scope>
    		</dependency>
    
    		<dependency>
    			<groupId>junit</groupId>
    			<artifactId>junit</artifactId>
    			<version>4.12</version>
    		</dependency>
    	</dependencies>

1.  搭建Bootstrap环境

src/main/webapp目录下创建static文件夹用来保存静态文件

(1) 将Bootstrap的bootstrap-3.3.7-dist文件夹复制到static文件夹

src/main/webapp/static目录下创建js文件夹引入自己的静态文件

(2) 将jQuery引入到js文件夹

(3) webapp目录下创建index.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    	
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	
    	<title>Insert title here</title>
    	
    	<%
    		pageContext.setAttribute("APP_PATH", request.getContextPath());
    	%>
    	
    	<script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
    	<link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    	<script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    	
    </head>
    <body>
    </body>
    </html>

1.  web.xml的基本配置

(1) web.xml中编写

<context-param>
    		<param-name>contextConfigLocation</param-name>
    		<param-value>classpath:applicationContext.xml</param-value>
    	</context-param>
    
    	
    	<listener>
    		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    	</listener>
    	
    	
    	
    	<servlet>
    		<servlet-name>dispatcherServlet</servlet-name>
    		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    		
    		<load-on-startup>1</load-on-startup>
    	</servlet>
    
    	
    	<servlet-mapping>
    		<servlet-name>dispatcherServlet</servlet-name>
    		<url-pattern>/</url-pattern>
    	</servlet-mapping>
    
    	
    	<filter>
    		<filter-name>CharacterEncodingFilter</filter-name>
    		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    		<init-param>
    			
    			<param-value>utf-8</param-value>
    		</init-param>
    		<init-param>
    			<param-name>forceRequestEncoding</param-name>
    			<param-value>true</param-value>
    		</init-param>
    		<init-param>
    			<param-name>forceResponseEncoding</param-name>
    			<param-value>true</param-value>
    		</init-param>
    	</filter>
    	<filter-mapping>
    		<filter-name>CharacterEncodingFilter</filter-name>
    		<url-pattern>/*</url-pattern>
    	</filter-mapping>
    	
    	
    	
    	<filter>
    		<filter-name>HiddenHttpMethodFilter</filter-name>
    		<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    	</filter>
    	<filter-mapping>
    		<filter-name>HiddenHttpMethodFilter</filter-name>
    		<url-pattern>/*</url-pattern>
    	</filter-mapping>
    	
    	
    	<filter>
    		<filter-name>HttpPutFormContentFilter</filter-name>
    		<filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
    	</filter>
    	<filter-mapping>
    		<filter-name>HttpPutFormContentFilter</filter-name>
    		<url-pattern>/*</url-pattern>
    	</filter-mapping>

(2) 与web.xml同等级的目录下创建SpringMVC的配置文件

右键new → Spring Bean Configuration File → dispatcherServlet-servlet.xml

(3) src/main/resources目录下创建spring的容器

右键new → Spring Bean Configuration File → applicationContext.xml

1.  SpringMVC配置文件dispatcherServlet-servlet.xml的基本配置

<context:component-scan base-package="com.qizegao" use-default-filters="false">
    		<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    	</context:component-scan>
    		
    		
    	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    		<property name="prefix" value="/WEB-INF/views/"></property>
    		<property name="suffix" value=".jsp"></property>
    	</bean>
    	
    	
    	<mvc:default-servlet-handler/>
    	
    	<mvc:annotation-driven/>

1.  Spring配置文件applicationContext.xml的基本配置

<context:component-scan base-package="com.qizegao">
    		<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller" />
    	</context:component-scan>
    
    	
    	<context:property-placeholder location="classpath:dbconfig.properties" />
    	<bean id="pooledDataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
    		<property name="jdbcUrl" value="${jdbc.jdbcUrl}"></property>
    		<property name="driverClass" value="${jdbc.driverClass}"></property>
    		<property name="user" value="${jdbc.user}"></property>
    		<property name="password" value="${jdbc.password}"></property>
    	</bean>
    	
    	
    	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    		<property name="configLocation" value="classpath:mybatis-config.xml"></property>
    		<property name="dataSource" ref="pooledDataSource"></property>
    		<property name="mapperLocations" value="classpath:mapper/*.xml"></property>
    	</bean>
    
    	
    	<mybatis-spring:scan base-package="com.qizegao.dao"/>	
    	
    	
    	<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
    		<property name="dataSource" ref="pooledDataSource"></property>
    	</bean>
    	
    	
    	<aop:config>
    		<aop:pointcut expression="execution(* com.qizegao.service..*(..))" id="txPoint"/>
    		<aop:advisor advice-ref="txAdvice" pointcut-ref="txPoint"/>
    	</aop:config>
    	
    	
    	<tx:advice id="txAdvice" transaction-manager="transactionManager">
    		<tx:attributes>
    			<tx:method name="*"/>
    			<tx:method name="get*" read-only="true"/>
    		</tx:attributes>
    	</tx:advice>

1.  创建包、文件夹，将web项目构建成如下结构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 2]

1.  dbconfig.properties文件中的配置

jdbc.jdbcUrl=jdbc:mysql://localhost:3306/ssm_crud?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT
    jdbc.driverClass=com.mysql.jdbc.Driver
    jdbc.user=root
    jdbc.password=root

1.  创建两张表tbl\_stu和tbl\_dept

![在这里插入图片描述][20201211165440786.png]

对应的sql语句

CREATE TABLE `tbl_stu` (
                `stu_id` INT(11) NOT NULL AUTO_INCREMENT,
                `stu_name` VARCHAR(255) NOT NULL,
                `gender` CHAR(1) DEFAULT NULL,
                `email` VARCHAR(255) DEFAULT NULL,
                `d_id` INT(11) DEFAULT NULL,
                PRIMARY KEY (`stu_id`),
                KEY `fk_emp_dept` (`d_id`),
                CONSTRAINT `fk_emp_dept` FOREIGN KEY (`d_id`) REFERENCES `tbl_dept` (`dept_id`)
    ) ENGINE=INNODB DEFAULT CHARSET=utf8
    
    
    CREATE TABLE `tbl_dept` (
                `dept_id` INT(11) NOT NULL AUTO_INCREMENT,
                `dept_name` VARCHAR(255) NOT NULL,
                PRIMARY KEY (`dept_id`)
    ) ENGINE=INNODB DEFAULT CHARSET=utf8

1.  使用MBG逆向工程创建需要的结构

(1) pom.xml中导入依赖

<dependency>
    	<groupId>org.mybatis.generator</groupId>
    	<artifactId>mybatis-generator-core</artifactId>
    	<version>1.3.5</version>
    </dependency>

(2) 工程名右键创建一个mbg.xml文件

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
    <generatorConfiguration>
    
    	<context id="DB2Tables" targetRuntime="MyBatis3">
    		
    		
    		<commentGenerator>
    			<property name="suppressAllComments" value="true" />
    		</commentGenerator>
    		
    		
    		<jdbcConnection driverClass="com.mysql.jdbc.Driver" connectionURL="jdbc:mysql://localhost:3306/ssm_crud?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT" userId="root" password="root">
    		</jdbcConnection>
    
    		<javaTypeResolver>
    			<property name="forceBigDecimals" value="false" />
    		</javaTypeResolver>
    
    		
    		<javaModelGenerator targetPackage="com.qizegao.bean" targetProject=".\src\main\java">
    			<property name="enableSubPackages" value="true" />
    			<property name="trimStrings" value="true" />
    		</javaModelGenerator>
    
    		
    		<sqlMapGenerator targetPackage="mapper" targetProject=".\src\main\resources">
    			<property name="enableSubPackages" value="true" />
    		</sqlMapGenerator>
    
    		
    		<javaClientGenerator type="XMLMAPPER" targetPackage="com.qizegao.dao" targetProject=".\src\main\java">
    			<property name="enableSubPackages" value="true" />
    		</javaClientGenerator>
    
    		
    		<table tableName="tbl_stu" domainObjectName="Student"></table>
    		<table tableName="tbl_dept" domainObjectName="Department"></table>
    	</context>
    </generatorConfiguration>

(3) src/main/java目录下com.qizegao.test包下创建MBGTest.java完成逆向工程的工作

public class MBGTest { 
    	public static void main(String[] args) throws Exception { 
    		List<String> warnings = new ArrayList<String>();
    		boolean overwrite = true;
    		File configFile = new File("mbg.xml");
    		ConfigurationParser cp = new ConfigurationParser(warnings);
    		Configuration config = cp.parseConfiguration(configFile);
    		DefaultShellCallback callback = new DefaultShellCallback(overwrite);
    		MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config,
    				callback, warnings);
    		myBatisGenerator.generate(null);
    	}
    }

1.  mybatis-config.xml文件中编写

1.  为逆向工程创建出的结构增加功能

将两张表联合查询(同时可以查出两张表的所有列)

(1) 在StudentMapper接口中添加两个方法

List<Student> selectByExampleWithDept(StudentExample example);
    
    Student selectByPrimaryKeyWithDept(Integer stuId);

(2) 在Student类中添加

//新增的属性
        private Department department; //以及对应的getter、setter方法

(3) 在StudentMapper.xml中添加

<resultMap type="com.qizegao.bean.Student" id="WithDeptResultMap">
      	<id column="stu_id" jdbcType="INTEGER" property="stuId" />
        <result column="stu_name" jdbcType="VARCHAR" property="stuName" />
        <result column="gender" jdbcType="CHAR" property="gender" />
        <result column="email" jdbcType="VARCHAR" property="email" />
        <result column="d_id" jdbcType="INTEGER" property="dId" />
        
        <association property="department" javaType="com.qizegao.bean.Department">
        	<id column="dept_id" property="deptId"/>
        	<result column="dept_name" property="deptName"/>
        </association>
      </resultMap>
      
      <sql id="WithDept_Column_List">
      	s.stu_id, s.stu_name, s.gender, s.email, s.d_id, d.dept_id, d.dept_name
      </sql>
    	
      
      <select id="selectByExampleWithDept" resultMap="WithDeptResultMap">
    	   select
    	    <if test="distinct">
    	      distinct
    	    </if>
    	    <include refid="WithDept_Column_List" />
    		FROM tbl_stu s
    		left join tbl_dept d on s.`d_id`=d.`dept_id`
    	    <if test="_parameter != null">
    	      <include refid="Example_Where_Clause" />
    	    </if>
    	    <if test="orderByClause != null">
    	      order by ${orderByClause} 
    	    </if>
      </select>
      
      
      <select id="selectByPrimaryKeyWithDept" resultMap="WithDeptResultMap">
       	select 
        <include refid="WithDept_Column_List" />
        FROM tbl_stu s
    	left join tbl_dept d on s.`d_id`=d.`dept_id`
        where stu_id = #{stuId,jdbcType=INTEGER}
      </select>

1.  测试搭建的基础环境是否可以运行

(1) pom.xml中引入Spring单元测试的jar包

<dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-test</artifactId>
    	<version>4.3.7.RELEASE</version>
    </dependency>

(2) 为逆向工程创建出的两个Java类分别添加无参、全参构造器

(3) src/main/java目录下com.qizegao.test包中创建MapperTest类，搭建Spring单元测试环境

@RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration(locations={ "classpath:applicationContext.xml"})
    public class MapperTest { 
    
    	@Autowired
    	DepartmentMapper departmentMapper;
    	
    	@Autowired
    	StudentMapper studentMapper;
    	
    	@Test
    	public void test() { 
    		System.out.println(departmentMapper);
    		//org.apache.ibatis.binding.MapperProxy@53093491
    		
    		//插入三个部门（使用逆向工程自动生成的方法）
    		departmentMapper.insertSelective(new Department(null, "学生部"));
    		departmentMapper.insertSelective(new Department(null, "信息部"));
    		departmentMapper.insertSelective(new Department(null, "记者部"));
    		
    		//插入三个学生
    		studentMapper.insertSelective(new Student(null, "高奇泽", "M", "qizegao@163.com", 1));
    		studentMapper.insertSelective(new Student(null, "秦新宇", "M", "xinyuqin@163.com", 2));
    		studentMapper.insertSelective(new Student(null, "王洋", "M", "wang@163.com", 3));
    	    //后续会向表中插入更多的学生
    }
    }

(4) 成功在数据库表中添加以上信息

## 二、查询 ##

1.  分页后台代码完成(使用pageHelper插件)

(1) pom.xml中引入pageHelper的jar包

<groupId>com.github.pagehelper</groupId>
    	<artifactId>pagehelper</artifactId>
    	<version>5.0.0</version>

(2) mybatis-config.xml中编写

(3) src/main/java目录下service包下创建StudentService类

@Service
    public class StudentService { 
    @Autowired
    	StudentMapper studentMapper;
    	
    	//查询所有学生
    	public List<Student> getAll() { 
    		//创建Example类定义查询条件
    		StudentExample studentExample = new StudentExample();
    		studentExample.setOrderByClause("stu_id asc"); //查询结果按照学生编号升序排序
    		return studentMapper.selectByExampleWithDept(studentExample); //无查询条件传入null
    	}
    }

(4) src/main/java目录下bean包下创建Msg类，用来封装服务器回显的所有数据

public class Msg { 
    	//状态码(设定100表示成功，200表示失败)
    	private int code;
    	//提示信息
    	private String msg;
    	//用户要返回给浏览器的数据
    	private Map<String, Object> extend = new HashMap<String, Object>();
    
    	public static Msg success(){ 
    		Msg result = new Msg();
    		result.setCode(100);
    		result.setMsg("处理成功！");
    		return result;
    	}
    	
    	public static Msg fail(){ 
    		Msg result = new Msg();
    		result.setCode(200);
    		result.setMsg("处理失败！");
    		return result;
    	}
    
    	//添加用户返回给浏览器的数据
    	public Msg add(String key,Object value){ 
    		this.getExtend().put(key, value);
    		return this;
    	}
    	//以及其余的getter、setter方法
    }

(5) src/main/java目录下controller包下创建StudentController

@Controller
    public class StudentController { 
    	
    	@Autowired
    	StudentService studentService;
    	
    	//分页查询学生数据
    	@RequestMapping("/stus")
    	@ResponseBody //导入Jackson包使用
    	public Msg getStusWithJson(
    			@RequestParam(value = "pn", defaultValue = "1") Integer pn) { 
    		PageHelper.startPage(pn, 5);
    		List<Student> stus = studentService.getAll();
    		PageInfo page = new PageInfo(stus, 5); //PageInfo封装了分页的详细信息
    		return Msg.success().add("pageInfo", page);
    	}
    }

(6) 浏览器地址栏输入http://localhost:8080/my-crud/stus，浏览器回显：

![在这里插入图片描述][20201211165816537.png]

基于上述回显的JSON数据构建jsp页面

1.  index.jsp页面中编写

<div class="container">
    		
    		<div class="row">
    			<div class="col-md-12">
    				<h1>软件六班学生 - 社团信息</h1>
    			</div>
    		</div>
    		<br/>
    		
    		<div class="row">
    			<div class="col-md-4 col-md-offset-8">
    				<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
    				<button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
    			</div>
    		</div>
    		<br/>
    		
    		<div class="row">
    			<div class="col-md-12">
    				<table class="table table-bordered" id="emps_table">
    					<thead>
    						<tr>
    							<th>编号</th>
    							<th>姓名</th>
    							<th>性别</th>
    							<th>邮箱</th>
    							<th>社团</th>
    							<th>操作</th>
    						</tr>
    					</thead>
    					<tbody>
    						
    					</tbody>
    				</table>
    			</div>
    		</div>
    
    		
    		<div class="row">
    			
    			<div class="col-md-6" id="page_info_area"></div>
    			
    			<div class="col-md-6" id="page_nav_area"></div>
    		</div>
    	</div>
    	
    	<script type="text/javascript"> //页面加载完成以后，发送ajax请求，得到分页数据 $(function(){ //去首页 to_page(1); }); function to_page(pn){ $.ajax({ url:"${APP_PATH}/stus", data:"pn="+pn, type:"GET", //result获取到了返回的Msg对象(JSON数据) success:function(result){ //1、解析并显示学生数据 build_emps_table(result); //2、解析并显示分页信息 build_page_info(result); //3、解析显示分页条数据 build_page_nav(result); } }); } //1、解析并显示学生数据 function build_emps_table(result){ //每次显示一页的数据之前应该将之前的内容都清空，因为使用的都是append， //查询新的一页时会在之前的内容之上append，可能会出现两个导航条之类的错误 //清空table表格中的学生数据 $("#emps_table tbody").empty(); var emps = result.extend.pageInfo.list; //所有学生的信息 //遍历获取的所有学生的信息 $.each(emps, function(index,item){ //获取到学生信息中每项信息 var empIdTd = $("<td></td>").append(item.stuId); var empNameTd = $("<td></td>").append(item.stuName); var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女"); var emailTd = $("<td></td>").append(item.email); var deptNameTd = $("<td></td>").append(item.department.deptName); //每行中的编辑按钮 var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn") .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑"); //每行中的删除按钮 var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn") .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除"); //将两个按钮整合在一起 var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn); //将以上数据拼成一行 $("<tr></tr>").append(empIdTd) .append(empNameTd) .append(genderTd) .append(emailTd) .append(deptNameTd) .append(btnTd) .appendTo("#emps_table tbody"); }); } //2、解析并显示分页信息 function build_page_info(result){ //清空分页信息 $("#page_info_area").empty(); $("#page_info_area").append("当前第 "+result.extend.pageInfo.pageNum+" 页, 共 "+ result.extend.pageInfo.pages+" 页, 共 "+ result.extend.pageInfo.total+" 条记录"); } //3、解析显示分页条数据 function build_page_nav(result){ //清空分页条信息 $("#page_nav_area").empty(); //Bootstrap中的写法，导航条中的信息都要写在ul变量中 var ul = $("<ul></ul>").addClass("pagination"); //首页 var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#")); //前一页 var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //如果当前遍历的页码是首页(没有前一页)，让首页和上一页不可点击 if(result.extend.pageInfo.hasPreviousPage == false){ //disabled是Bootstrap中的写法 firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); } else{ //为首页和前一页添加点击翻页的事件 firstPageLi.click(function(){ to_page(1); }); prePageLi.click(function(){ to_page(result.extend.pageInfo.pageNum -1); }); } //后一页 var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); //末页 var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#")); //如果当前遍历的页码是末页(没有下一页)，让末页和下一页不可点击 if(result.extend.pageInfo.hasNextPage == false){ nextPageLi.addClass("disabled"); lastPageLi.addClass("disabled"); }else{ //为下一页和末页添加点击翻页的事件 nextPageLi.click(function(){ to_page(result.extend.pageInfo.pageNum +1); }); lastPageLi.click(function(){ to_page(result.extend.pageInfo.pages); }); } //导航条中添加首页和前一页 ul.append(firstPageLi).append(prePageLi); //遍历1，2，3之类的页码 $.each(result.extend.pageInfo.navigatepageNums, function(index,item){ //numLi / item表示遍历到的1，2，3之类的页码 var numLi = $("<li></li>").append($("<a></a>").append(item)); //如果当前遍历的页码就是当前的页码，让其高亮显示 if(result.extend.pageInfo.pageNum == item){ //active是Bootstrap中的写法 numLi.addClass("active"); } //单击事件，跳转到对应页面 numLi.click(function(){ to_page(item); }); //向导航条中添加1，2，3之类的页码 ul.append(numLi); }); //导航条中添加下一页和末页 ul.append(nextPageLi).append(lastPageLi); //把ul导航条添加到导航条在页面中的位置 var navEle = $("<nav></nav>").append(ul); navEle.appendTo("#page_nav_area"); } </script>

效果如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 3]

## 三、新增 ##

1.  index.jsp中添加点击新增按钮之后弹出如图所示新增学生模态框的代码

![在这里插入图片描述][20201211165922257.png]

大量采用Bootstrap代码(此处未展示出)，此模态框的id属性值为：empAddModal

1.  将所有部门显示在下拉框中的代码编写

(1) 创建DepartmentService类

@Service
    public class DepartmentService { 
    	
    	@Autowired
    	private DepartmentMapper departmentMapper;
    	
    	//查询所有社团
    	public List<Department> getDepts() { 
    		List<Department> list = departmentMapper.selectByExample(null);
    		return list;
    	}
    }

(2) 创建DepartmentController类

@Controller
    public class DepartmentController { 
    	
    	@Autowired
    	private DepartmentService departmentService;
    
    	//以JSON的形式返回所有的社团信息
    	@RequestMapping("/depts")
    	@ResponseBody
    	public Msg getDepts(){ 
    		//查出的所有部门信息
    		List<Department> list = departmentService.getDepts();
    		return Msg.success().add("depts", list);
    	}
    }

发送对应请求得到的JSON数据

![在这里插入图片描述][20201211165953187.png]

1.  检查学生姓名是否已经存在数据库的代码编写

(1) StudentService中编写

//校验用户名是否已经存在于数据库
    	public boolean checkUser(String stuName) { 
    		//指定条件的查询
    		StudentExample example = new StudentExample();
    		Criteria criteria = example.createCriteria();
    		criteria.andStuNameEqualTo(stuName);
    		long count = studentMapper.countByExample(example);
    		return count == 0;
    	}

(2) StudentController中编写

//检查用户名是否已经存在于数据库
    	@ResponseBody
    	@RequestMapping("/checkuser")
    	public Msg checkuser(@RequestParam("stuName")String stuName){ 
    		
    		//先判断用户名是否满足正则表达式，若不满足无需去数据库查询
    		String regx = "^[\u2E80-\u9FFF]{2,5}";
    		if(!stuName.matches(regx)){ 
    			return Msg.fail().add("va_msg", "学生姓名必须是2-5位汉字");
    		}
    		
    		//数据库用户名重复校验
    		boolean b = studentService.checkUser(stuName);
    		if(b){ 
    			return Msg.success();
    		}else{ 
    			return Msg.fail().add("va_msg", "学生姓名已存在");
    		}
    	}

1.  保存模态框填写的信息的代码编写(使用JSR303后端校验)

(1) Student类中给两个属性添加JSR303后端校验的注解

![在这里插入图片描述][20201211170025848.png]

(2) StudentService中编写

//保存学生
    	public void saveStu(Student student) { 
    		studentMapper.insertSelective(student); //MBG生成的方法
    	}

(3) StudentController中编写

//保存学生
    	@RequestMapping(value="/stu",method=RequestMethod.POST)
    	@ResponseBody
    	public Msg saveStu(@Valid Student student, BindingResult result){ 
    		
    		if (result.hasErrors()) { 
    			
    			//JSR303校验结果有错误时，将JSR303校验结果封装在map中
    			
    			Map<String, Object> map = new HashMap<String, Object>();
    			//获取所有有错误的字段
    			List<FieldError> errors = result.getFieldErrors();
    			for (FieldError fieldError : errors) { 
    				//getFiled表示错误的字段名
    				//getDefaultMessage表示JavaBean定义的错误信息
    				map.put(fieldError.getField(), fieldError.getDefaultMessage());
    			}
    			return Msg.fail().add("errorFields", map);
    		} else { 
    			//校验结果无误时
    			studentService.saveStu(student);
    			return Msg.success();
    		}
    	}

1.  index.jsp中完成新增功能的编写

//点击新增按钮弹出添加学生的模态框
    		$("#emp_add_modal_btn").click(function(){
    			
    			//调用函数清除模态框的所有数据数据，防止上一次信息残留
    			reset_form("#empAddModal form");
    			
    			//调用函数发送ajax请求，查出社团信息，显示在下拉列表(select标签)中
    			getDepts("#empAddModal select");
    			
    			//弹出添加学生的模态框(Bootstrap代码)
    			$("#empAddModal").modal({
    				backdrop:"static"
    			});
    		});
    		
    		//清空模态框样式及内容(Bootstrap代码)
    		function reset_form(ele){
    			$(ele)[0].reset();
    			$(ele).find("*").removeClass("has-error has-success");
    			$(ele).find(".help-block").text("");
    		}
    		
    		//发送ajax请求，查出社团信息，显示在下拉列表中
    		function getDepts(ele){
    			
    			//清空之前下拉列表的值
    			$(ele).empty();
    			
    			//发送AJAX请求，获取所有社团的信息
    			$.ajax({
    				url:"${APP_PATH}/depts",
    				type:"GET",
    				//result中封装了查询到的所有社团的JSON数据
    				success:function(result){
    					//遍历获取到的所有社团信息，显示在下拉列表中
    					$.each(result.extend.depts,function(){
    						var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
    						optionEle.appendTo(ele);
    					});
    				}
    			});
    		}
    		
    		//通过内容发生改变事件和ajax请求校验填写的用户名是否已经存在于数据库
    		$("#empName_add_input").change(function(){
    			
    			var stuName = this.value;
    			
    			//发送ajax请求
    			$.ajax({
    				url:"${APP_PATH}/checkuser",
    				data:"stuName="+stuName,
    				type:"POST",
    				success:function(result){
    					if(result.code==100){
    						//调用函数以指定的格式显示提示信息
    						show_validate_msg("#empName_add_input","success","学生姓名可用");
    						//如果用户名可用，才让其保存，保存按钮添加属性
    						$("#emp_save_btn").attr("ajax-va","success");
    					}else{
    						show_validate_msg("#empName_add_input","error",result.extend.va_msg);
    						//如果用户名不可用，不让其保存，保存按钮添加属性
    						$("#emp_save_btn").attr("ajax-va","error");
    					}
    				}
    			});
    		});
    		
    		//添加学生模态框的保存按钮的单击事件
    		$("#emp_save_btn").click(function(){
    			
    			//判断之前的ajax用户名是否已经存在数据库的校验是否成功
    						if($(this).attr("ajax-va")=="error"){
    				return false;
    			}
    			
    			/* //调用函数对输入的邮箱进行正则表达式校验(用户名规则已在数据库校验)
    			if(!validate_add_form()){
    				return false; //点击保存不会进行数据提交
    			};  */
    			
    			//发送ajax请求保存员工
    			$.ajax({
    				url:"${APP_PATH}/stu",
    				type:"POST",
    				//将用户填入的信息序列化成为字符串，用于AJAX请求
    				data:$("#empAddModal form").serialize(), 
    				success:function(result){
    					
    					//如果JSR303后端校验成功，保存员工
    					if(result.code == 100){
    						
    						//关闭模态框(Bootstrap代码)
    						$("#empAddModal").modal('hide');
    						
    						//来到最后一页，显示刚才保存的数据
    						to_page(999);
    					
    					}else{
    						
    						//如果JSR303后端校验失败，显示信息
    						
    						//哪个字段有错误，显示哪个字段的错误
    						if(undefined != result.extend.errorFields.email){
    							//显示邮箱的错误信息
    							show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);
    						}
    						
    						if(undefined != result.extend.errorFields.stuName){
    							//显示学生姓名的错误信息
    							show_validate_msg("#empName_add_input", "error", result.extend.errorFields.stuName);
    						}
    					}
    				}
    			});
    		});
    		
    		//使用正则表达式校验添加学生模态框的邮箱是否符合指定格式
    		function validate_add_form(){
    			
    			//用户名已在数据库中检查，此处无需再查
    						//校验邮箱信息
    			var email = $("#email_add_input").val();
    			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    			if(!regEmail.test(email)){
    				//调用函数以指定的格式显示提示信息
    				show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
    				return false;
    			}else{
    				show_validate_msg("#email_add_input", "success", "");
    			}
    			return true;
    		}
    		
    		//添加学生模态框校验结果的提示信息样式(Bootstrap代码)
    		function show_validate_msg(ele,status,msg){
    			
    			$(ele).parent().removeClass("has-success has-error");
    			$(ele).next("span").text("");
    			
    			if("success"==status){
    				$(ele).parent().addClass("has-success");
    				$(ele).next("span").text(msg);
    			}else if("error" == status){
    				$(ele).parent().addClass("has-error");
    				$(ele).next("span").text(msg);
    			}
    		}

## 四、修改 ##

1.  index.jsp中添加点击编辑按钮之后弹出如图所示修改学生信息的模态框的代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 4]

大量采用Bootstrap代码(此处未展示出)，此模态框的id属性值为：empUpdateModal

1.  根据id查询学生信息的代码编写

(1) StudentService中编写

//根据id查询学生信息
    	public Student getStu(Integer id) { 
    		Student student = studentMapper.selectByPrimaryKey(id);
    		return student;
    	}

(2) StudentController中编写

//根据id查询学生信息
    	@RequestMapping(value="/stu/{id}", method=RequestMethod.GET)
    	@ResponseBody
    	public Msg getStu(@PathVariable("id")Integer id){ 
    		
    		Student student = studentService.getStu(id);
    		return Msg.success().add("stu", student);
    	}

1.  保存更新后的学生信息的代码编写

(1) StudentService中编写

//保存更新后的学生的信息
    	public void updateStu(Student student) { 
    		studentMapper.updateByPrimaryKeySelective(student);
    	}

(2) StudentController中编写

@ResponseBody
    	@RequestMapping(value="/stu/{stuId}", method=RequestMethod.PUT)
    	public Msg saveStu(Student student){ 
    		studentService.updateStu(student);
    		return Msg.success();
    	}

1.  index.jsp中完成修改信息功能的编写

//为编辑按钮添加单击事件，弹出模态框
    		
    //不能直接使用click为编辑按钮绑定单击事件
    		//因为编辑按钮是在页面加载完成事件中添加的，单击事件早于页面加载事件被绑定
    		//相当于还没有加载出来按钮就为其绑定了事件，故使用on来绑定事件
    		$(document).on("click",".edit_btn",function(){
    			
    			//1、查出社团信息，并显示社团列表
    			getDepts("#empUpdateModal select");
    			
    			//2、查出学生信息，显示学生信息
    			getEmp($(this).attr("edit-id"));
    			
    			//3、把学生的id传递给模态框中的更新按钮，之前编辑按钮的edit-id属性已传入对应的学生id
    			$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
    			
    			//4. 弹出修改信息的模态框(Bootstrap代码)
    			$("#empUpdateModal").modal({
    				backdrop:"static"
    			});
    		});
    		//查出学生信息，在修改信息的模态框中显示学生信息
    		function getEmp(id){
    			$.ajax({
    				url:"${APP_PATH}/stu/"+id,
    				type:"GET",
    				success:function(result){
    					
    					var empData = result.extend.stu;
    					$("#empName_update_static").text(empData.stuName);
    					$("#email_update_input").val(empData.email);
    					$("#empUpdateModal input[name=gender]").val([empData.gender]);
    					$("#empUpdateModal select").val([empData.dId]);
    				}
    			});
    		}
    		
    		//点击模态框中的更新，更新学生信息
    		$("#emp_update_btn").click(function(){
    			
    			//1. 验证邮箱是否合法
    			var email = $("#email_update_input").val();
    			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    			if(!regEmail.test(email)){
    				show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
    				return false;
    			}else{
    				show_validate_msg("#email_update_input", "success", "");
    			}
    			
    			//2. 发送ajax请求保存更新的学生数据
    			$.ajax({
    				url:"${APP_PATH}/stu/"+$(this).attr("edit-id"),
    				//web.xml中已添加过滤器，可直接发送PUT请求
    				type:"PUT",
    				data:$("#empUpdateModal form").serialize(),
    				success:function(result){
    					//1、关闭对话框
    					$("#empUpdateModal").modal("hide");
    					
    					//2、回到本页面(定义变量保存了当前页面的页码号)
    					to_page(currentPage);
    				}
    			});
    		});

## 五、删除 ##

1.  StudentService中添加

//单个删除
    	public void deleteStu(Integer id) {
    		studentMapper.deleteByPrimaryKey(id);
    	}
    	
    	//批量删除
    	public void deleteBatch(List<Integer> ids) {
    		StudentExample studentExample = new StudentExample();
    		Criteria criteria = studentExample.createCriteria();
    		
    		//delete from tbl_stu where stu_id in(1,2,3...) 
    		criteria.andStuIdIn(ids);
    		
    		studentMapper.deleteByExample(studentExample);
    	}

1.  StudentController中添加

//删除学生
    	//批量删除时不同的学生通过 "-" 连接
    	@ResponseBody
    	@RequestMapping(value="/stu/{ids}",method=RequestMethod.DELETE)
    	public Msg deleteEmp(@PathVariable("ids")String ids){ 
    		//批量删除
    		if(ids.contains("-")){ 
    			List<Integer> del_ids = new ArrayList<>();
    			String[] str_ids = ids.split("-");
    			//将所有学生id组装成集合
    			for (String string : str_ids) { 
    				del_ids.add(Integer.parseInt(string));
    			}
    			studentService.deleteBatch(del_ids);
    		}else{ 
    			Integer id = Integer.parseInt(ids);
    			studentService.deleteStu(id);
    		}
    		return Msg.success();
    	}

1.  index.jsp中完成删除学生功能的编写

//为单个删除绑定单击事件
    		$(document).on("click",".delete_btn",function(){
    			//1、弹出是否确认删除对话框
    			var stuName = $(this).parents("tr").find("td:eq(2)").text();
    			var stuId = $(this).attr("del-id");
    			if(confirm("确认删除【"+stuName+"】吗？")){
    				//确认，发送ajax请求删除即可
    				$.ajax({
    					url:"${APP_PATH}/stu/"+stuId,
    					type:"DELETE",
    					success:function(result){
    						//显示处理成功
    						alert(result.msg);
    						//回到本页
    						to_page(currentPage);
    					}
    				});
    			}
    		});
    		//全选框绑定单击事件完成全选/全不选功能
    		$("#check_all").click(function(){
    			$(".check_item").prop("checked",$(this).prop("checked"));
    		});
    		
    		//为单选框绑定单击事件，全部选中以后全选框随之选中
    		$(document).on("click",".check_item",function(){
    			//选中的个数是否等于单选框个数
    			var flag = $(".check_item:checked").length==$(".check_item").length;
    			$("#check_all").prop("checked",flag);
    		});
    		
    		//批量删除按钮绑定单击事件
    		$("#emp_delete_all_btn").click(function(){
    			
    			//表示所有被选中的学生的姓名
    			var stuNames = "";
    			
    			//将学中学生的id使用"-"拼接
    			var del_idstr = "";
    			
    			//遍历每一个选中的学生
    			$.each($(".check_item:checked"),function(){
    				stuNames += $(this).parents("tr").find("td:eq(2)").text()+",";
    				del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
    			});
    			
    			//去除stuNames最后多余的逗号
    			stuNames = stuNames.substring(0, stuNames.length-1);
    			
    			//去除del_idstr最后多余的 "-"
    			del_idstr = del_idstr.substring(0, del_idstr.length-1);
    			
    			//弹出确认删除对话框
    			if(confirm("确认删除【"+stuNames+"】吗？")){
    				//发送ajax请求批量删除
    				$.ajax({
    					url:"${APP_PATH}/stu/"+del_idstr,
    					type:"DELETE",
    					success:function(result){
    						//显示处理成功
    						alert(result.msg);
    						//回到当前页面
    						to_page(currentPage);
    					}
    				});
    			}
    		});

[Github]: https://github.com/userqizegao/student_crud.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70]: /images/20221120/c753fce9030b4aac84e572bc653a62ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 1]: /images/20221120/5cbff5f0746b49d387bd41e07778b7b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 2]: /images/20221120/795efba696f5420887c41ebc76f24ffe.png
[20201211165440786.png]: /images/20221120/ee7124bf075f4c5e914ba837317cb680.png
[20201211165816537.png]: /images/20221120/3b4ebfab848e450abca5403ba3ddd9a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 3]: /images/20221120/696e24b31f354cc3bdae2679c4a0a33d.png
[20201211165922257.png]: /images/20221120/fd8efe2218f249d1bd0410df5376e04d.png
[20201211165953187.png]: /images/20221120/01abd74b1e2144ce8dc0ea32594f6f7a.png
[20201211170025848.png]: /images/20221120/def62f1caff841fb92549d5d951f45bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 4]: /images/20221120/2b12f5618b544ad284b21f7c26a1597d.png