SSM整合实现增删改查

使用技术

前端：bootstrap、ajax/json;

后端：SpringMVC、Spring、Mybatis；

数据库：MySQL；

开发环境：eclipse4.7、Tomcat8.5、jdk1.8、maven；

项目结构

SSM整合实现增删改查

项目搭建

创建数据库表

student

CREATE DATABASE /*!32312 IF NOT EXISTS*/`ssm_example` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `ssm_example`;

/*Table structure for table `student` */

DROP TABLE IF EXISTS `student`;

CREATE TABLE `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `gender` varchar(255) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `tel` varchar(255) DEFAULT NULL,
  `cla` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT;

/*Data for the table `student` */

insert  into `student`(`id`,`name`,`gender`,`email`,`tel`,`cla`) values (1,'学良','男','[email protected]','15147369874','软件工程'),(2,'囡囡','女','[email protected]','18945678456','软件工程'),(3,'阿福','男','[email protected]','13657898762','数学专业'),(4,'阿霞','女','[email protected]','12378645987','英语专业'),(19,'yb','男','[email protected]','147896','应用技术');

/*!40101 SET [email protected]_SQL_MODE */;
/*!40014 SET [email protected]_FOREIGN_KEY_CHECKS */;
/*!40014 SET [email protected]_UNIQUE_CHECKS */;
/*!40111 SET SQL[email protected]_SQL_NOTES */;

整合SpringMVC+Spring+Mybatis框架

/ssm_1002_1/pom.xml

<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 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.qst</groupId>
  <artifactId>ssm_1002_1</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>ssm_1002_1 Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>4.3.6.RELEASE</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.9.5</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator -->
		<dependency>
			<groupId>org.hibernate.validator</groupId>
			<artifactId>hibernate-validator</artifactId>
			<version>6.0.7.Final</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.1.0</version>
			<scope>provided</scope>
		</dependency>
		<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>3.4.5</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis-spring</artifactId>
			<version>1.3.1</version>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.38</version>
		</dependency>
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.17</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>4.3.6.RELEASE</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-core -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-core</artifactId>
			<version>4.3.6.RELEASE</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-beans -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
			<version>4.3.6.RELEASE</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/commons-logging/commons-logging -->
		<dependency>
			<groupId>commons-logging</groupId>
			<artifactId>commons-logging</artifactId>
			<version>1.2</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-aop -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aop</artifactId>
			<version>4.3.6.RELEASE</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aspects</artifactId>
			<version>4.3.6.RELEASE</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-expression -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-expression</artifactId>
			<version>4.3.6.RELEASE</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjweaver</artifactId>
			<version>1.8.9</version>
		</dependency>
		<dependency>
			<groupId>aopalliance</groupId>
			<artifactId>aopalliance</artifactId>
			<version>1.0</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
			<version>4.3.6.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.0</version>
			<scope>test</scope>
		</dependency>
		
	</dependencies>
  <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>
</project>

/ssm_1002_1/src/main/java/com/ssm/example/entity/Student.java

package com.ssm.example.entity;

public class Student {
    
    private int id;
    private String name;
    private String gender;
    private String email;
    private String tel;
    private String cla;
    
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getTel() {
        return tel;
    }
    public void setTel(String tel) {
        this.tel = tel;
    }
    public String getCla() {
        return cla;
    }
    public void setCla(String cla) {
        this.cla = cla;
    }
    
}

/ssm_1002_1/src/main/java/com/ssm/example/dao/StudentDAO.java

package com.ssm.example.dao;

import java.util.List;


import com.ssm.example.entity.Student;

public interface StudentDAO {
    public List<Student> findAll();
    
    public int addStudent(Student student);
    
    public int updateStudentById(Student student);
    
    public Student selectUsersById(Student student);
    
    public int deleteStudentById(Integer sid);
}

/ssm_1002_1/src/main/java/com/ssm/example/dao/StudentDAO.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.ssm.example.dao.StudentDAO">

	<resultMap type="Student" id="studentMap">
		<id property="id" column="id" />
		<result property="name" column="name" />
		<result property="gender" column="gender" />
		<result property="email" column="email" />
		<result property="tel" column="tel" />
		<result property="cla" column="cla" />
	</resultMap>

	<select id="findAll" resultMap="studentMap">
		select * from student
	</select>
	
	<!-- 添加用户信息 -->
	<insert id="addStudent">
		insert into student(name,gender,email,tel,cla)
		values(#{name},#{gender},#{email},#{tel},#{cla})
	</insert>
	
	<!-- 根据主键修改用户信息 -->
	<update id="updateStudentById" parameterType="com.ssm.example.entity.Student">
		update student set 
			name=#{name},
			gender=#{gender},
			email=#{email},
			tel=#{tel},
			cla=#{cla} 
		where id=#{id}
	</update>
	
	<!-- 根据主键查询用户信息 -->
	<select id="selectUsersById" 
		parameterType="Integer" 
		resultType="com.ssm.example.entity.Student">
		select * from student where id = #{id}
	</select>
	
	<!-- 删除用户 -->
	<delete id="deleteStudentById" parameterType="Integer">
		DELETE FROM student WHERE id = #{id}
	</delete>

</mapper>

/ssm_1002_1/src/main/resources/applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<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:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xsi:schemaLocation="http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
    
    <!-- 配置数据库 -->
		<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
			<property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
			<property name="url" value="jdbc:mysql://39.105.54.45:3306/ssm_example?characterEncoding=utf8"></property>
			<property name="username" value="root"></property>
			<property name="password" value="123"></property>
		</bean>
    
    <!-- 配置 MyBatis SqlSessionFactory -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 指定 MyBatis 数据源 -->
        <property name="dataSource" ref="dataSource"/>
        <!-- 指定 MyBatis mapper 映射文件位置 -->
        <property name="mapperLocations" value="classpath:com/ssm/example/dao/*.xml"/>
        <!-- 指定 MyBatis 全局配置文件的位置 -->
        <property name="configLocation" value="classpath:mybatis-config.xml"></property>
    </bean>
    
    <!-- 扫描 MyBatis 的 mapper 接口 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--扫描所有 dao 接口，加入到 IOC 容器中 -->
        <property name="basePackage" value="com.ssm.example.dao"/>
    </bean>
    
    <!-- 配置事务管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 指定数据源 -->
        <property name="dataSource" ref="dataSource"></property>
    </bean>
    
    <!-- 配置事务增强  -->
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
        <tx:attributes>
            <!-- 配置所有方法都是事务方法 -->
            <tx:method name="*"/>
            <tx:method name="get*" read-only="true"/>
        </tx:attributes>
    </tx:advice>
    
    <!-- 开启基于注解的事务  -->
    <aop:config>
        <!-- 切入点表达式 -->
        <aop:pointcut expression="execution(* com.ssm.example.service.impl.*.*(..))" id="txPoint"/>
        <!-- 配置事务增强 -->
        <aop:advisor advice-ref="txAdvice" pointcut-ref="txPoint"/>
    </aop:config>
</beans>

/ssm_1002_1/src/main/resources/mybatis-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <settings>
        <!-- 打印SQL-->
        <setting name="logImpl" value="STDOUT_LOGGING" />
    </settings>
    
    <typeAliases>
        <!-- 指定一个包名，MyBatis会在包名下搜索需要的JavaBean-->
        <package name="com.ssm.example.entity"/>
    </typeAliases>
    
</configuration>

/ssm_1002_1/src/main/resources/springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<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/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">
    
    <!-- 启用 SpringMVC 注解驱动 -->
    <mvc:annotation-driven />
    
    <!-- 扫描业务代码 -->
    <context:component-scan base-package="com.ssm.example"></context:component-scan>
    
    <!-- 配置视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    
</beans>

/ssm_1002_1/WebContent/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
  <display-name>ssm_1002_1</display-name>
  <display-name>Archetype Created Web Application</display-name>
  
  <!-- 启动Spring的容器  -->
  <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>
  
  <!-- SpringMVC的前端控制器，拦截所有请求  -->
  <servlet>
    <servlet-name>mvc-dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springmvc.xml</param-value>
    </init-param>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>mvc-dispatcher</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-name>encoding</param-name>
          <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>
  
  <!-- 加载静态资源 -->
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
  </servlet-mapping>
  
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
  </servlet-mapping>
  
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

/ssm_1002_1/src/main/java/com/ssm/example/service/StudentService.java

package com.ssm.example.service;

import java.util.List;

import com.ssm.example.entity.Student;

public interface StudentService {
    public List<Student> findAll();
    
    public int addStudent(Student student);
    
    public int updateStudentById(Student student);
    
    public Student selectUsersById(Student student);
    
    public int deleteStudentById(Integer sid);
}

/ssm_1002_1/src/main/java/com/ssm/example/service/impl/StudentServiceImpl.java

package com.ssm.example.service.impl;

import java.util.List;

import com.ssm.example.dao.StudentDAO;
import com.ssm.example.entity.Student;
import com.ssm.example.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentDAO studentDAO;
    
    public List<Student> findAll() {
        // TODO Auto-generated method stub
        return studentDAO.findAll();
    }

	@Override
	public int addStudent(Student student) {
		// TODO Auto-generated method stub
		return studentDAO.addStudent(student);
	}

	@Override
	public int updateStudentById(Student student) {
		return studentDAO.updateStudentById(student);
	}

	@Override
	public Student selectUsersById(Student student) {
		// TODO Auto-generated method stub
		return studentDAO.selectUsersById(student);
	}

	@Override
	public int deleteStudentById(Integer sid) {
		// TODO Auto-generated method stub
		return studentDAO.deleteStudentById(sid);
	}
    
}

/ssm_1002_1/src/main/java/com/ssm/example/controller/StudentController.java

package com.ssm.example.controller;

import java.util.List;

import com.ssm.example.entity.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ssm.example.service.StudentService;

@Controller
public class StudentController {

    @Autowired
    private StudentService studentService;
    
    /**
     * 查找所有学生
     * @return
     */
    @RequestMapping(value="/list")
    @ResponseBody
    public List<Student> list(){
        List<Student> list = studentService.findAll();
        return list;
    }
    
    @RequestMapping(value="/add")
    @ResponseBody
    public int add(Student student){
        return studentService.addStudent(student);
    }
    
    @RequestMapping(value="/update")
    @ResponseBody
    public int update(Student student){
        return studentService.updateStudentById(student);
    }
    
    @RequestMapping(value="/read")
    @ResponseBody
    public Student read(Student student){
        return studentService.selectUsersById(student);
    }
    
    @RequestMapping(value="/delete")
    @ResponseBody
    public int delete(Integer id){
        System.out.println("i came");
        return studentService.deleteStudentById(id);
    }
}

编写前端页面

/ssm_1002_1/WebContent/index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表</title>
<script type="text/javascript" src="bootstrap-3.3.7/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script type="text/javascript">
	function showStudent() {
		$.ajax({
			url : 'list',
			type : 'POST',
			dataType : 'json',
			/* data : params, */
			success : function(data) {
				var code = "";
    			for (var i=0; i<data.length; i++) {
				code += "		<tr>\r\n" + 
				"					<th>"+data[i].id+"</th>\r\n" + 
				"					<th>"+data[i].name+"</th>\r\n" + 
				"					<th>"+data[i].gender+"</th>\r\n" + 
				"					<th>"+data[i].email+"</th>\r\n" + 
				"					<th>"+data[i].tel+"</th>\r\n" + 
				"					<th>"+data[i].cla+"</th>\r\n" + 
				"					<td>\r\n" + 
				"						<button type=\"button\" class=\"btn btn-primary btn-xs\"\r\n" + 
				"							onclick=\"readStudent("+data[i].id+")\" data-toggle=\"modal\" data-target=\"#uModal\">修改</button>\r\n" + 
				"						<button type=\"button\" class=\"btn btn btn-danger btn-xs\"\r\n" +
				" 							onclick=\"deleteStudent("+data[i].id+")\">删除</button>\r\n" + 
				"					</td>\r\n" + 
				"				</tr>";
    			}
    			$("#tableBody").html(code);
			},
			error : function() {
				alert("show出错了！");
			}
		});
	}
	function addStudent() {
		$.ajax({
			url : 'add',
			type : 'POST',
			dataType : 'json',
			data : {
				"name":$("#name").val(), 
				"gender":$("input[name='userSex']:checked").val(),
				"email":$("#email").val(),
				"tel":$("#tel").val(),
				"cla":$("#cla").val()
			},
			success :function() {
				showStudent();
			},
			error : function(data) {
				alert("add出错了！");
			}
		});
	}
	function readStudent(id) {
		$.ajax({
			url : 'read',
			type : 'POST',
			dataType : 'json',
			data : {"id":id},
			success :function(data) {
				$("#number").val(data.id),
				$("#uname").val(data.name), 
				$("#uemail").val(data.email),
				$("#utel").val(data.tel),
				$("#ucla").val(data.cla)
			},
			error : function(data) {
				alert("read出错了！");
			}
		});
	}
	function updateStudent() {
		$.ajax({
			url : 'update',
			type : 'POST',
			dataType : 'json',
			data : {
				"id":$("#number").val(),
				"name":$("#uname").val(), 
				"gender":$("input[name='userSex2']:checked").val(),
				"email":$("#uemail").val(), 
				"tel":$("#utel").val(), 
				"cla":$("#ucla").val()
			},
			success :function() {
				showStudent();
			},
			error : function(data) {
				alert("update出错了！");
			}
		});
	}
	function deleteStudent(sid) {
		$.ajax({
			url : 'delete',
			type : 'POST',
			dataType : 'json',
			data : {"id":sid},
			success :function() {
				showStudent();
			},
			error : function(data) {
				alert("delete出错了！");
			}
		});
	}
</script>
</head>
<body onload="showStudent()">
		
	<div class="container">
		<div class="row">
			<div class="col-md-12" align="center">
				<h1>学生列表</h1>
			</div>
		</div>
		<button type="button" class="btn btn-primary btn-xs text-right"
			data-toggle="modal" data-target="#myModal">添加学生</button>
		<div class="table-responsive">
			<table class="table table-bordered table-striped table-hover">
				<thead>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>性别</th>
						<th>电子邮箱</th>
						<th>联系电话</th>
						<th>班级</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tableBody">
				
				</tbody>
			</table>
		</div>

		<!-- myModal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-body">

						<form class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-10">
									<input type="email" class="form-control" id="name"
										placeholder="name">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">性别</label>
								<div class="col-sm-10">
									<label class="checkbox-inline">
										<input type="radio"
										name="userSex" id="uSex1" value="男" checked>男
									</label> <label class="checkbox-inline"> 
										<input type="radio" name="userSex" 
										id="gender" value="女">女
									</label> 
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">电子邮箱</label>
								<div class="col-sm-10">
									<input type="email" class="form-control" id="email"
										placeholder="email">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">联系电话</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="tel"
										placeholder="tel">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">班级</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="cla"
										placeholder="cla">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<button type="button" class="btn btn-primary btn-sm"
										data-dismiss="modal">（取消更新）Reset Table</button>
									<button type="button" class="btn btn-default btn-sm"
										onclick="addStudent()"
										data-dismiss="modal">（更新表格数据）Update Table</button>
								</div>
							</div>
						</form>

					</div>
				</div>
			</div>
		</div>
		
		<!-- uModal -->
		<div class="modal fade" id="uModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-body">

						<form class="form-horizontal">
							<input type="hidden" id="number" />
							<div class="form-group">
								<label class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-10">
									<input type="email" class="form-control" id="uname"
										placeholder="name">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">性别</label>
								<div class="col-sm-10">
									<label class="checkbox-inline">
										<input type="radio" name="userSex2"
										 value="男" checked>男
									</label> <label class="checkbox-inline"> 
										<input type="radio" name="userSex2"
										id="gender" value="女">女
									</label> 
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">电子邮箱</label>
								<div class="col-sm-10">
									<input type="email" class="form-control" id="uemail"
										placeholder="email">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">联系电话</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="utel"
										placeholder="tel">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">班级</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="ucla"
										placeholder="cla">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<button type="button" class="btn btn-primary btn-sm"
										data-dismiss="modal">（取消更新）Reset Table</button>
									<button type="button" class="btn btn-default btn-sm"
										onclick="updateStudent()"
										data-dismiss="modal">（更新表格数据）Update Table</button>
								</div>
							</div>
						</form>

					</div>
				</div>
			</div>
		</div>

	</div>
</body>
</html>

实现效果

SSM整合实现增删改查

 

SSM整合实现增删改查

 

SSM整合实现增删改查

源码下载

地址：https://download.csdn.net/download/jianyuwuyi/10701440

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode