尚硅谷SSM框架——SSM实战演练学习笔记

一、搭建maven工程

尚硅谷SSM框架——SSM实战演练学习笔记_第1张图片

1.1、补齐目录

先项目上右键,选择属性
先去掉,然后再勾上下图选项
尚硅谷SSM框架——SSM实战演练学习笔记_第2张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第3张图片

1.2、配置生成的web.xml的位置

尚硅谷SSM框架——SSM实战演练学习笔记_第4张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第5张图片

二、 通过pom.xml引进相关jar依赖

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0modelVersion>
  <groupId>com.atguigugroupId>
  <artifactId>ssm-crudartifactId>
  <version>0.0.1-SNAPSHOTversion>
  <packaging>warpackaging>
  
  <dependencies>
  
  	
    
	<dependency>
	    <groupId>org.springframeworkgroupId>
	    <artifactId>spring-webmvcartifactId>
	    <version>5.3.13version>
	dependency>


	
    
	<dependency>
	    <groupId>org.springframeworkgroupId>
	    <artifactId>spring-jdbcartifactId>
	    <version>5.3.13version>
	dependency>
    
    
    
	<dependency>
	    <groupId>org.springframeworkgroupId>
	    <artifactId>spring-aspectsartifactId>
	    <version>5.3.13version>
	dependency>
	
	
    
	<dependency>
	    <groupId>org.mybatisgroupId>
	    <artifactId>mybatisartifactId>
	    <version>3.4.2version>
	dependency>
	
	
	
	<dependency>
	    <groupId>org.mybatisgroupId>
	    <artifactId>mybatis-springartifactId>
	    <version>1.3.1version>
	dependency>
	
	
    
	<dependency>
	    <groupId>c3p0groupId>
	    <artifactId>c3p0artifactId>
	    <version>0.9.1.2version>
	dependency>
	
    
    
    <dependency>
      <groupId>mysqlgroupId>
      <artifactId>mysql-connector-javaartifactId>
      <version>8.0.26version>
    dependency>
    
    
    
    <dependency>
      <groupId>jstlgroupId>
      <artifactId>jstlartifactId>
      <version>1.2version>
    dependency>

	
    
	<dependency>
	    <groupId>javax.servletgroupId>
	    <artifactId>javax.servlet-apiartifactId>
	    <version>3.1.0version>
	    <scope>providedscope>
	dependency>


	
    
    <dependency>
      <groupId>junitgroupId>
      <artifactId>junitartifactId>
      <version>4.12version>
      <scope>testscope>
    dependency>
    
  dependencies>
project>

三、 引进bootstrap和jQuery

https://v3.bootcss.com/
尚硅谷SSM框架——SSM实战演练学习笔记_第6张图片

3.1、使用bootstrap

尚硅谷SSM框架——SSM实战演练学习笔记_第7张图片

尚硅谷SSM框架——SSM实战演练学习笔记_第8张图片
引入基本样式css和JavaScript和jQuery
尚硅谷SSM框架——SSM实战演练学习笔记_第9张图片
使用
尚硅谷SSM框架——SSM实战演练学习笔记_第10张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第11张图片

四、配置相关xml文件

4.1、配置web.xml


<web-app id="WebApp_ID" version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://JAVA.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	
    
    <context-param>
        <param-name>contextConfigLocationparam-name>
        <param-value>classpath:applicationContext.xmlparam-value>
    context-param>
     
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
    listener>
    
    
    <servlet>
        <servlet-name>springDispatcherServletservlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
        <init-param>
            <param-name>contextConfigLocationparam-name>
            <param-value>classpath:springmvc.xmlparam-value>
        init-param>
        <load-on-startup>1load-on-startup>
    servlet>

    
    <servlet-mapping>
        <servlet-name>springDispatcherServletservlet-name>
        <url-pattern>/url-pattern>
    servlet-mapping>

    
    <filter>
        <filter-name>characterEncodingFilterfilter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
        <init-param>
            <param-name>encodingparam-name>
            <param-value>UTF-8param-value>
        init-param>
        <init-param>
            <param-name>forceResponseEncodingparam-name>
            <param-value>trueparam-value>
        init-param>
        <init-param>
            <param-name>forceRequestEncodingparam-name>
            <param-value>trueparam-value>
        init-param>
    filter>
    <filter-mapping>
        <filter-name>characterEncodingFilterfilter-name>
        <url-pattern>/*url-pattern>
    filter-mapping>

    
    <filter>
        <filter-name>hiddenHttpMethodFilterfilter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilterfilter-class>
    filter>
    <filter-mapping>
        <filter-name>hiddenHttpMethodFilterfilter-name>
        <url-pattern>/*url-pattern>
    filter-mapping>
web-app>

附:
servlet-name标签出错的解决方案
在这里插入图片描述
尚硅谷SSM框架——SSM实战演练学习笔记_第12张图片

4.2、配置spring的配置文件applicationContext.xml


<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">

	
	
	
	<context:component-scan base-package="com.atguigu" >
		
		<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
	context:component-scan>
	
	
	<context:property-placeholder location="classpath:db.properties"/>
	
	<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
		<property name="driverClass" value="${jdbc.driver}">property>
		<property name="jdbcUrl" value="${jdbc.url}">property>
		<property name="user" value="${jdbc.username}">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="dataSource">property>
		
		<property name="mapperLocations" value="classpath:mapper/*.xml">property>
	bean>

	
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		
		<property name="basePackage" value="com.atguigu.crud.dao">property>
	bean>
    
	
	<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		
		<property name="dataSource" ref="dataSource">property>
	bean>
	
	
	<aop:config>
		
		<aop:pointcut expression="execution(* com.atguigu.crud.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>
	
beans>

4.3、配置springmvc的配置文件springmvc.xml


<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">

	
	
	
	<context:component-scan base-package="com.atguigu" use-default-filters="false">
		
		<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
	context:component-scan>
	
	
	<bean id="internalResourceViewResolver" 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>mvc:annotation-driven>

beans>

4.4、配置数据库连接文件db.properties

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssm_crud?serverTimezone=Hongkong
jdbc.username=root
jdbc.password=75688

4.5、mybatis-config.xml配置



 
	<configuration>
	
		 <settings>
		 	
		 	<setting name="mapUnderscoreToCamelCase" value="true"/>
		 settings>
		 
		 
		 <typeAliases>
		 	<package name="com.atguigu.crud.bean">package>
		 typeAliases>
		 
	configuration>

五、创建数据库表

尚硅谷SSM框架——SSM实战演练学习笔记_第13张图片

六、mybatis逆向工程

6.1、引入mabatis逆向工程所需依赖

尚硅谷SSM框架——SSM实战演练学习笔记_第14张图片

6.2、mbg.xml

参考http://mybatis.org/generator/
尚硅谷SSM框架——SSM实战演练学习笔记_第15张图片




<generatorConfiguration>
  <context id="DB2Tables" targetRuntime="MyBatis3">
  	
  	<commentGenerator>
  		<property name="suppressAllComments" value="true"/>
  	commentGenerator>
  	
  	
    <jdbcConnection 
    	driverClass="com.mysql.cj.jdbc.Driver"
        connectionURL="jdbc:mysql://localhost:3306/ssm_crud?serverTimezone=Hongkong"
        userId="root"
        password="75688">
    jdbcConnection>

    <javaTypeResolver >
      <property name="forceBigDecimals" value="false" />
    javaTypeResolver>

	
    <javaModelGenerator 
    	targetProject=".\src\main\java"
    	targetPackage="com.atguigu.crud.bean" >
      <property name="enableSubPackages" value="true" />
      <property name="trimStrings" value="true" />
    javaModelGenerator>
	
	
    <sqlMapGenerator 
    	targetProject=".\src\main\resources"
    	targetPackage="mapper">
      <property name="enableSubPackages" value="true" />
    sqlMapGenerator>

	
    <javaClientGenerator type="XMLMAPPER" 
    	targetProject=".\src\main\java"
	    targetPackage="com.atguigu.crud.dao">
      <property name="enableSubPackages" value="true" />
    javaClientGenerator>

    
	<table tableName="tbl_emp" domainObjectName="Employee">table>
	<table tableName="tbl_dept" domainObjectName="Department">table>
  context>
generatorConfiguration>

尚硅谷SSM框架——SSM实战演练学习笔记_第16张图片

6.3、使用逆向工程生成代码

参考官方文档
尚硅谷SSM框架——SSM实战演练学习笔记_第17张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第18张图片

6.3.1、MBGTest.java

package com.atguigu.crud.test;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.exception.XMLParserException;
import org.mybatis.generator.internal.DefaultShellCallback;

public class MBGTest {
	public static void main(String[] args) throws Exception, XMLParserException {
		System.out.println("============开始执行逆向工程============");
		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);
		System.out.println("============执行逆向工程结束============");
	}
}

运行上面代码将自动生成逆向工程
尚硅谷SSM框架——SSM实战演练学习笔记_第19张图片

七、自定义SQL查询

尚硅谷SSM框架——SSM实战演练学习笔记_第20张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第21张图片

7.1、新增查询1

查询结果封装
尚硅谷SSM框架——SSM实战演练学习笔记_第22张图片
在这里插入图片描述

7.2、新增查询2

尚硅谷SSM框架——SSM实战演练学习笔记_第23张图片

尚硅谷SSM框架——SSM实战演练学习笔记_第24张图片

八、使用spring单元测试

尚硅谷SSM框架——SSM实战演练学习笔记_第25张图片

8.1、简单插入

@RunWith(SpringJUnit4ClassRunner.class)//使用Springtest测试框架
@ContextConfiguration(locations= {"classpath:applicationContext.xml"})
public class MapperTest {
	@Autowired
	DepartmentMapper departmentMapper ;
	
	@Autowired
	EmployeeMapper employeeMapper;
	
	@Test
	public void testCRUD() {
		//1、部门插入测试
		//departmentMapper.insertSelective(new Department(null,"销售部"));
		
		//2、员工插入测试
		employeeMapper.insertSelective(new Employee(null,"苗丹","M","[email protected]",1));
	}
}

8.2、批量插入

尚硅谷SSM框架——SSM实战演练学习笔记_第26张图片

@RunWith(SpringJUnit4ClassRunner.class)//使用Springtest测试框架
@ContextConfiguration(locations= {"classpath:applicationContext.xml"})
public class MapperTest {
	@Autowired
	EmployeeMapper employeeMapper;
	
	@Autowired
	SqlSession sqlSession;
	
	@Test
	public void testCRUD() {
		//批量插入员工数据
		EmployeeMapper mapper = sqlSession.getMapper(EmployeeMapper.class);
		for(int i=0;i<968;i++){
			String uid= UUID.randomUUID().toString().toString().substring(0,5)+i;
			mapper.insertSelective(new Employee(null, uid, "M", uid+"@qq.com", 1));
		}
		System.out.println("============批量插入员工数据完成============");
	}
}

九、PageHelper分页插件的使用

9.1、引进PageHelper maven依赖

尚硅谷SSM框架——SSM实战演练学习笔记_第27张图片

9.2、在mybatis-config.xml注册PageHelper分页插件

尚硅谷SSM框架——SSM实战演练学习笔记_第28张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第29张图片

十、查询功能

尚硅谷SSM框架——SSM实战演练学习笔记_第30张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第31张图片
controller处理请求
尚硅谷SSM框架——SSM实战演练学习笔记_第32张图片

Service执行业务逻辑
尚硅谷SSM框架——SSM实战演练学习笔记_第33张图片
分页查询的单元测试

//使用Spring测试模块提供的测试请求功能,测试curd请求的正确性
@RunWith(SpringJUnit4ClassRunner.class)//使用Springtest测i试框架
@ContextConfiguration(locations = {"classpath:applicationContext.xml","classpath:springmvc.xml"})
@WebAppConfiguration
public class MvcTest {
	
	//传入Springmvc的ioc 
	 @Autowired
	 WebApplicationContext context;
	
	//虚拟mvc请求,获取到处理结果。
	MockMvc mockMvc ;
	
	@Before
	public void initMokcMvc(){
		mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
	}
	
	@Test
	public void testPage() throws Exception {
		//模拟发送请求,获取第5页数据,得到返回值
        MvcResult mvcResult = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn","5"))
                .andReturn();
 
        //请求成功以后  请求域中有pageINfo;我们可以取出来pageInfo进行验证
        MockHttpServletRequest request = mvcResult.getRequest();
        PageInfo pageInfo = (PageInfo) request.getAttribute("pageInfo");
        //进行输出
        System.out.println("当前页码:"+pageInfo.getPageNum());
        System.out.println("总页码:"+pageInfo.getPages());
        System.out.println("总记录数:"+pageInfo.getTotal());
       
        int[] nums = pageInfo.getNavigatepageNums();
        System.out.println("在页面需要连续显示的页码:");
		
		for (int i:nums ) {
			System. out.print(" "+i);
		}
		System. out.println("");
		//也获取员工数据
		List<Employee> list = pageInfo.getList();
		for (Employee employee : list) {
			System.out.println("ID: "+employee.getEmpId( )+"== >Name:"+employee.getEmpName());
		}
	}
}

尚硅谷SSM框架——SSM实战演练学习笔记_第34张图片

10.1、前端页面设计

尚硅谷SSM框架——SSM实战演练学习笔记_第35张图片

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
	<head>
		<meta charset="UTF-8">
		<title>员工列表title>
		<%
			pageContext.setAttribute("APP_PATH", request.getContextPath());
		%>
		

		
		<link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
		
		<script src="${APP_PATH}/static/js/jquery-3.6.0.min.js">script>
		
		<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js">script>
		
	head>
	
	<body>
		
		<div class="container">
			
			
			
			<div class="row">
				<div class="col-md-12">
					<h1>SSM-CRUDh1>
				div>
			div>
			
			<div class="row">
				<div class="col-md-4 col-md-offset-8">
					<button class="btn btn-primary">新增button>
					<button class="btn btn-danger">删除button>
				div>
			div>
			
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover">
						
						<tr>
							<th>#th>
							<th>empNameth>
							<th>genderth>
							<th>emailth>
							<th>deptNameth>
							<th>operatorth>
						tr>
						
						<c:forEach items="${pageInfo.list}" var="emp">
							<tr>
								<td >${emp.empId}td>
								<td >${emp.empName}td >
								<td >${emp.gender=="M"?"male":"female"}td >
								<td >${emp.email}td >
								<td >${emp.department.deptName}td >
								<td >
									<button class="btn btn-primary btn-sm">
										<span class="glyphicon glyphicon-pencil" aria-hidden="true">span>
										编辑
									button>
									<button class="btn btn-danger btn-sm">
										<span class="glyphicon glyphicon-trash" aria-hidden="true">span>
										删除
									button>
								td >
							tr>
						c:forEach>
					table>
				div>
			div>
			
			<div class="row">
				
				<div class="col-md-6">
					<span>当前${pageInfo.pageNum}页,总${pageInfo.pages}页,共${pageInfo.total}条记录span>
				div>
				
				<div class="col-md-6">
					<nav aria-label="Page navigation">
						<ul class="pagination">
							<li>
								<a href="${APP_PATH}/emps?pn=1">首页a>
							li>
							
							<c:if test="${pageInfo.hasPreviousPage }">
								<li>
									<a href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous"> 
										<span aria-hidden="true">«span>
									a>
								li>
							c:if>
							
							<c:forEach items="${pageInfo.navigatepageNums}" var="pageNumber">
								<c:if test="${pageNumber == pageInfo.pageNum}">
									<li class="active">
										<a href="#">${pageNumber}a>
									li>
								c:if>
								<c:if test="${pageNumber != pageInfo.pageNum}">
									<li>
										<a href="${APP_PATH}/emps?pn=${pageNumber}">${pageNumber}a>
									li>
								c:if>
							c:forEach>
							
							<c:if test="${pageInfo.hasNextPage }">
								<li>
									<a href="${APP_PATH}/emps?pn=${pageInfo.pageNum+1}" aria-label="Next"> 
										<span aria-hidden="true">»span>
									a>
								li>
							c:if>
							
							<li>
								<a href="${APP_PATH}/emps?pn=${pageInfo.pages}">末页a>
							li>
						ul>
					nav>
				div>
			div>
		div>
	body>
html>

尚硅谷SSM框架——SSM实战演练学习笔记_第36张图片

10.2、返回json数据

尚硅谷SSM框架——SSM实战演练学习笔记_第37张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第38张图片

准备通用的返回类

package com.atguigu.crud.bean;

import java.util.HashMap;
import java.util.Map;

/**
 * 通用的返回类
 */
public class Msg {
	//状态码 100-success 200-fail
	private int code;
	
	//提示信息
	private String msg;
	
	//用户返回给浏览器的数据
	private Map<String, Object> extend = new HashMap<String, Object>();
	
	/*================自定义方法开始=======================*/
	public static Msg success() {
		Msg msg = new Msg();
		msg.setCode(100);
		msg.setMsg("处理成功!");
		return  msg;
	}
	
	public static Msg fail() {
		Msg msg = new Msg();
		msg.setCode(200);
		msg.setMsg("处理失败!");
		return  msg;
	}
	
	public Msg add(String key,Object value) {
		this.getExtend().put(key, value);
		return this;
	}
	/*================自定义方法结束=======================*/
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public Map<String, Object> getExtend() {
		return extend;
	}
	public void setExtend(Map<String, Object> extend) {
		this.extend = extend;
	}
	
}

尚硅谷SSM框架——SSM实战演练学习笔记_第39张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第40张图片

10.3、使用ajax

10.3.1、使用ajax发起请求

尚硅谷SSM框架——SSM实战演练学习笔记_第41张图片

10.3.2、jQuery遍历语法

尚硅谷SSM框架——SSM实战演练学习笔记_第42张图片

10.3.3、jQuery添加样式和标签属性

尚硅谷SSM框架——SSM实战演练学习笔记_第43张图片

10.3.4、jQuery将新增控件添加到页面语法

尚硅谷SSM框架——SSM实战演练学习笔记_第44张图片

10.3.5、jQuery点击事件

尚硅谷SSM框架——SSM实战演练学习笔记_第45张图片

10.3.6、jQuery清空表格数据

尚硅谷SSM框架——SSM实战演练学习笔记_第46张图片

十一、新增功能

尚硅谷SSM框架——SSM实战演练学习笔记_第47张图片

尚硅谷SSM框架——SSM实战演练学习笔记_第48张图片

11.1、前端校验

11.1.1、jQuery获取表单的值

在这里插入图片描述

11.1.2、jQuery正则表达式使用

尚硅谷SSM框架——SSM实战演练学习笔记_第49张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第50张图片

11.2、后端数据校验

前后端都要进行数据校验
尚硅谷SSM框架——SSM实战演练学习笔记_第51张图片

11.2.1、后端优化校验JSR303和Hibernate Validator

使用Hibernate Validator
尚硅谷SSM框架——SSM实战演练学习笔记_第52张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第53张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第54张图片

十二、编辑功能

尚硅谷SSM框架——SSM实战演练学习笔记_第55张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第56张图片
尚硅谷SSM框架——SSM实战演练学习笔记_第57张图片

jQuery按钮点击事件

尚硅谷SSM框架——SSM实战演练学习笔记_第58张图片

十三、删除功能

十四、jsp完整代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
	<head>
		<meta charset="UTF-8">
		<title>employees listtitle>
		
		<%
			pageContext.setAttribute("APP_PATH", request.getContextPath());
		%>
		
		
		<link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
		
		<script src="${APP_PATH}/static/js/jquery-3.6.0.min.js">script>
		
		<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js">script>
	head>
	<body>
		
		<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×span>
						button>
						<h4 class="modal-title">员工修改h4>
					div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="empName_add_input" class="col-sm-2 control-label">empNamelabel>
								<div class="col-sm-10">
									<p class="form-control-static" id="empName_update_static">p>
								div>
							div>
							<div class="form-group">
								<label for="email_add_input" class="col-sm-2 control-label">emaillabel>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="email" id="email_update_input" placeholder="[email protected]"> <span
									 class="help-block">span>
								div>
							div>
							<div class="form-group">
								<label class="col-sm-2 control-label">genderlabel>
								<div class="col-sm-10">
									<label class="radio-inline"> <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked">label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_update_input" value="W">label>
								div>
							div>
							<div class="form-group">
								<label class="col-sm-2 control-label">deptNamelabel>
								<div class="col-sm-4">
									<select class="form-control" name="dId" id="dept_update_select">

									select>
								div>
							div>


						form>
					div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
						<button type="button" class="btn btn-primary" id="emp_update_btn">更新button>
					div>
				div>
			div>
		div>

		
		<div class="modal fade" id=empAddModal tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×span>
						button>
						<h4 class="modal-title" id="myModalLabel">员工添加h4>
					div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="empName_add_input" class="col-sm-2 control-label">empNamelabel>
								<div class="col-sm-10">
									<input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName"> 
									<span id="helpBlock2" class="help-block">span>
								div>
							div>
							<div class="form-group">
								<label for="email_add_input" class="col-sm-2 control-label">emaillabel>
								<div class="col-sm-10">
									<input type="email" class="form-control" name="email" id="email_add_input" placeholder="[email protected]"> <span
									 class="help-block">span> <span id="helpBlock2" class="help-block">span>
								div>
							div>
							<div class="form-group">
								<label class="col-sm-2 control-label">性别label>
								<div class="col-sm-10">
									<label class="radio-inline"> <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked">label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_add_input" value="W">label>
								div>
							div>
							<div class="form-group">
								<label class="col-sm-2 control-label">部门名称label>
								<div class="col-sm-4">
									<select class="form-control" name="dId" id="dept_add_select">

									select>
								div>
							div>
						form>
					div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
						<button type="button" class="btn btn-primary" id="emp_save_btn">保存button>
					div>
				div>
			div>
		div>

		
		<div class="container">
			
			<div class="row">
				<div class="col-md-12">
					<h1>SSM-CRUDh1>
				div>
			div>
			
			
			
			<div class="row">
				<div class="col-md-4 col-md-offset-8">
					<button id="emp_add_modal_btn" class="btn btn-primary">添加button>
					<button id="emp_delete_all_btn" class="btn btn-danger">删除button>
				div>
			div>
			
			
			
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover" id="emps-table">
						
						<thead>
							<tr>
								<th><input type="checkbox" id="check_all">th>
								<th>员工Idth>
								<th>员工姓名th>
								<th>性别th>
								<th>emailth>
								<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">
			/*===================全局变量=================*/
			var totalRecord;//总记录数
			var currentPage;//当前页码
			
			/*========页面加载完成以后,直接发送ajax请求,要到分页数据=========*/
			$(function() {
				to_page(1);//默认显示第一页
			})

			/*===================查询所有信息=================*/
			function to_page(pageNumber) {
				$.ajax({
					url: "${APP_PATH}/emps/",
					data: "pn=" + pageNumber,
					type: "GET",
					success: function(result) {
						//console.log(result);
						//1、解释并显示员工数据
						bulid_emps_table(result);
						//2、解释并显示分页文字信息
						bulid_page_info(result);
						//3、解释并显示分页导航信息
						bulid_page_nav(result);
					}
				});
			}
			
			/*=================解释并显示员工数据===============*/
			function bulid_emps_table(result) {
				//先清空表体数据
				$("#emps-table tbody").empty();
				var emps = result.extend.pageInfo.list;
				$.each(emps, function(index, item) {
					var checkBoxTd = $("").append("");
					var empIdTd = $("").append(item.empId);
					var empNameTd = $("").append(item.empName);
					var empGenderTd = $("").append(item.gender == "M" ? 'male' : "female");
					var empEmailTd = $("").append(item.email);
					var deptNameTd = $("").append(item.department.deptName);
					
					var editBtn = $("")//添加button,并返回button对象
						.addClass("btn btn-primary btn-sm edit_btn")//给button添加样式
						.append($("").addClass("glyphicon glyphicon-pencil"))//给span添加样式
						.append("编辑");//给span添加内容
					//为编辑按钮添加一个自定义的属性,来表示当前员工id
					editBtn.attr("edit_id", item.empId);
					
					var delBtn = $("")
						.addClass("btn btn-danger btn-sm delete_btn")
						.append($("").addClass("glyphicon glyphicon-trash"))
						.append("删除");
					//为删除按钮添加属性表示id
					delBtn.attr("del_id", item.empId);
					
					//将编辑按钮和删除按钮放在同一个单元格中
					var btnTd = $("")
						.append(editBtn)
						.append(" ")
						.append(delBtn);
					
					//将单元格添加到行显示
					$("").append(checkBoxTd)
								  .append(empIdTd)
								  .append(empNameTd)
								  .append(empGenderTd)
								  .append(empEmailTd)
								  .append(deptNameTd)
								  .append(btnTd)
								  .appendTo("#emps-table tbody");
				})
			}

			/*=================解释并显示分页文字信息===============*/
			function bulid_page_info(result) {
				$("#page-info-area").empty()//先清空
					.append("当前" + result.extend.pageInfo.pageNum + "页,总" +
					result.extend.pageInfo.pages + "页,共" +
					result.extend.pageInfo.total + "条记录");
				
				//记录当前总记录数
				totalRecord = result.extend.pageInfo.total;
				//记录当前页吗,更新员工信息后,需返回显示当前页
				currentPage = result.extend.pageInfo.pageNum;
			}

			/*=================解释并显示分页导航信息===============*/
			function bulid_page_nav(result) {
				$("#page_nav_area").empty();//先清空
				
				var ul = $("
    "
    ).addClass("pagination"); //构建元素 var firstPageLi = $("
  • "
    ) .append($("").append("首页").attr("href", "#")); var prePageLi = $("
  • "
    ) .append($("").append("«")); //如果请求结果没有前一页,则首页和前一页按钮不能点击 if (result.extend.pageInfo.hasPreviousPage == false) { 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 = $("
  • "
    ) .append($("").append("»")); var lastPageLi = $("
  • "
    ) .append($("").append("末页").attr("href", "#")); //如果请求结果没有有后一页,则末页和后一页按钮不能点击 if (!result.extend.pageInfo.hasNextPage) { 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); }); } //页码1,2,3,4 ul.append(firstPageLi).append(prePageLi); $.each(result.extend.pageInfo.navigatepageNums, function(index,item) { var numLi = $("
  • "
    ).append($("").append(item)); if (result.extend.pageInfo.pageNum == item) { numLi.addClass("active"); } numLi.click(function() { to_page(item); }); ul.append(numLi); }); ul.append(nextPageLi).append(lastPageLi); //把ul加入到nav var navEle = $("").append(ul); navEle.appendTo("#page_nav_area"); } /*=================重置表格信息===============*/ function reset_form(ele) { //清空表单内容 $(ele)[0].reset(); //清空表单样式 $(ele).find("*").removeClass("has-error has-success"); //清空校验信息 $(ele).find(".help-block").text(""); } /*=================添加功能:点击新增按钮弹出模态框===============*/ $("#emp_add_modal_btn").click(function() { //清除表单数据(表单重置) reset_form("#empAddModal form"); //发送ajax请求,查出部门信息,显示在下拉列表中 getDepts("#empAddModal select"); //弹出模态框 $("#empAddModal").modal({ backdrop: "static" }); }); /*=============查出所有部门信息,显示在下拉列表中=============*/ function getDepts(selectName) { $.ajax({ url: "${APP_PATH}/depts", type: "GET", success: function(result) { $(selectName).empty();//清空 //使用each循环显示所有部门到下拉列表中 $.each(result.extend.depts, function() { var optionEle = $("") .append(this.deptName) //添加一个自定义的属性,来表示当前部门id .attr("value", this.deptId); optionEle.appendTo(selectName); }); } }); } /*=================校验用户名是否可用===============*/ $("#empName_add_input").change( function() { //发送ajax请求校验用户名是否可用 var empName = this.value; $.ajax({ url: "${APP_PATH}/checkuser/", data: "empName=" + empName, 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() { //1、模态框中填写的数据提交到服务器进行保存 //2、先对提交给服务器的数据进行校验 if (!validate_add_form()) { return false; } //1、判断之前的ajax用户名校验是否成功 if ($(this).attr("ajax-va") == "error") { return false; } //保存新增数据 $.ajax({ url: "${APP_PATH}/emp/", type: "POST", data: $("#empAddModal form").serialize(), success: function(result) { if (result.code == 100) { //员工保存成功 //1、关闭模态框 $("#empAddModal").modal('hide'); //2、来到最后一页,显示刚才保存的数据 //发送ajax请求显示最后一页数据即可 to_page(totalRecord); } else { // 显示失败信息 if (undefined != result.extend.errorFields.email) { //显示邮箱的错误信息 show_validate_msg( "#email_add_input", "error", result.extend.errorFields.email); } if (undefined != result.extend.errorFields.empName) { //员工的错误信息 show_validate_msg( "#empName_add_input", "error", result.extend.errorFields.empName); } } } }); }) /*=============先对提交给服务器的数据进行校验=============*/ function validate_add_form() { //1、校验员工姓名信息 var empName = $("#empName_add_input").val();//员工姓名获取输入框的输入值 //a-z0-9_-六到十六位,或二到五位中文 var regName = /(^[a-z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;//校验规则 //使用test()进行校验,员工姓名不符合校验规则 if (!regName.test(empName)) { show_validate_msg( "#empName_add_input", "error", "用户名为2-5中文或4-16英文数字组合" ); return false; } //2、校验邮箱信息 var empEmail = $("#email_add_input").val(); var regEmail = /^([a-zA-Z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ //邮箱不符合校验规则 if (!regEmail.test(empEmail)) { show_validate_msg( "#email_add_input", "error", "邮箱格式错误" ); return false; } else { show_validate_msg( "#email_add_input", "success", "" ); } return true; } /*===============回显校验信息===============*/ 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"); } else if ("error" == status) { $(ele).parent().addClass("has-error"); } $(ele).next("span").text(msg); } /*=============编辑功能:=============*/ //1)、我们是按钮创建之前就绑定了click,所以绑不上 //2)、可以在创建按钮的时候绑定事件 //3)、绑定点击.live() //jquery新版没有live,使用on方法进行替代 $(document).on("click", ".edit_btn", function() { //清除表单数据(表单重置) reset_form("#empUpdateModal form"); //1、查出部门信息,显示部门列表 getDepts("#empUpdateModal select"); //2、查出员工信息,显示员工信息 getEmp($(this).attr("edit_id")); //3、把员工的id传递给模态框的更新按钮 $("#emp_update_btn").attr("edit_id", $(this).attr("edit_id")); $("#empUpdateModal").modal({ backdrop: "static" }); }) /*=============根据id获取部门信息=============*/ function getEmp(id) { $.ajax({ url: "${APP_PATH}/emp/" + id, type: "GET", success: function(result) { var empData = result.extend.emp; $("#empName_update_static").text(empData.empName); $("#email_update_input").val(empData.email); $("#empUpdateModal input[name=empGender]").val([empData.gender]); $("#empUpdateModal select").val([empData.dId]); } }) } /*=============点击更新,更新员工信息=============*/ $("#emp_update_btn").click(function() { //验证邮箱是否合法 //1、校验邮箱信息 var empEmail = $("#email_update_input").val(); var regEmail = /^([a-zA-Z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if (!regEmail.test(empEmail)) { show_validate_msg( "#email_update_input", "error", "邮箱格式错误" ); return false; } else { show_validate_msg( "#email_update_input", "success", "" ); } //2、发送ajax请求,保存更新员工信息 $.ajax({ url: "${APP_PATH}/emp/" + $(this).attr("edit_id"), type: "PUT", data: $("#empUpdateModal form").serialize(), success: function() { $("#empUpdateModal").modal("hide"); to_page(currentPage); } }); }); /*=============单个删除=============*/ $(document).on("click", ".delete_btn", function() { //1、弹出确认删除对话框 var empName = $(this).parents("tr").find("td:eq(2)").text(); var empId = $(this).attr("del_id"); if (confirm("确认删除【" + empName + "】吗?")) { //发送ajax请求删除 $.ajax({ url: "${APP_PATH}/emp/" + empId, type: "DELETE", success: function(result) { alert(result.msg); //回到本页 to_page(currentPage); } }); } }); /*=============完成全选/全不选功能=============*/ $("#check_all").click(function() { var is_All_Check = $(this).prop("checked"); $(".check_item").prop("checked", is_All_Check); }); /*=============check_item,复选框选择操作=============*/ $(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 empNames = ""; var del_idstr = ""; $.each($(".check_item:checked"), function() { //组装员工字符串 empNames += $(this).parents("tr").find("td:eq(2)").text() + ","; //组织员工id字符串 del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-"; }); //去除empnames多余的“,” empNames = empNames.substring(0, empNames.length - 1); //去除员工删除id多余的“-” del_idstr = del_idstr.substring(0, del_idstr.length - 1); if (confirm("确认删除【" + empNames + "】吗?")) { //发送ajax请求 $.ajax({ url: "${APP_PATH}/emp/" + del_idstr, type: "DELETE", success: function(result) { alert(result.msg); //回到当前页面 to_page(currentPage); $("#check_all").prop("checked", false); } }) } });
    script> body> html>

    你可能感兴趣的:(#,SSM,maven,intellij-idea,java)