https://www.jianshu.com/p/d76316b48e3e
添加按钮弹出模态框
编辑按钮弹出模态框
删除
生成后的样子
如果发现没有自动生成,在下图maven Project点击刷新按钮
在main下新建一个java文件夹,并且右键make as source root
springMVC
打开http://mvnrepository.com/
搜索Spring Web MVC
选择了4.3.12.RELEASE
复制里面的内容到pom.xml
jdbc
选择同样的版本
-Spring面向切面
同样的版本
mybtatis
任意一个版本
mybatis整合spring的适配包
数据库连接池,驱动包
c3p0要注意不能选错
mysql驱动
jstl
注意要选对
servlet API
整个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.crud</groupId> <artifactId>crud</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>crud Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!--引入项目依赖的jar包 --> <!--SpringMVC、Spring --> <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.3.12.RELEASE</version> </dependency> <!--spring jdbc --> <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.12.RELEASE</version> </dependency> <!--spring面向切面 spring aspect --> <!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>4.3.12.RELEASE</version> </dependency> <!--Mybatis --> <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.4.5</version> </dependency> <!--mybatis和spring整合包 --> <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.0</version> </dependency> <!--c3p0数据库连接池--> <!-- https://mvnrepository.com/artifact/c3p0/c3p0 --> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1.2</version> </dependency> <!--mysql驱动 --> <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>6.0.6</version> </dependency> <!--JSTL --> <!-- https://mvnrepository.com/artifact/jstl/jstl --> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- https://mvnrepository.com/artifact/javax.servlet/servlet-api --> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> </dependencies> <build> <finalName>crud</finalName> </build> </project>
http://v3.bootcss.com/getting-started/#download
选择最左边的如图所示下载
将下载的内容复制到项目中:
图片.png
将jquery引入项目
在index.html文件中引入样式
<html><head> <!--引入jquery --> <script src="static/js/jquery-3.2.1.min.js"></script> <!-- 引入样式--> <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <h2>Hello World!</h2> </body> </html>
项目架构
1)mybatis
sqlMapConfig.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> <!-- 全局setting,根据配置添加--> <!--配置别名--> <typeAliases> <!-- 批量扫描的别名--> <package name="com.chinglee.ssm.pojo"/> </typeAliases> </configuration>
2)spring
applicationContext-dao.xml
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" 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/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!-- 加载db.properties文件中的内容,db.properties文件中key命名要有一定的特殊规则 --> <context:property-placeholder location="classpath:db.properties" /> <!-- 配置数据源 ,dhcp--> <!-- <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close"> <property name="driverClassName" value="${jdbc.driver}" /> <property name="url" value="${jdbc.url}" /> <property name="username" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" /> <property name="maxActive" value="30" /> <property name="maxIdle" value="5" /> </bean> --> <!-- 这里使用c3p0数据源--> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource" destroy-method="close"> <property name="driverClass" value="${jdbc.driver}" /> <property name="jdbcUrl" value="${jdbc.url}" /> <property name="user" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" /> </bean> <!-- sqlSessionFactory --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 数据库连接池 --> <property name="dataSource" ref="dataSource" /> <!-- 加载mybatis的全局配置文件 --> <property name="configLocation" value="classpath:mybatis/sqlMapConfig.xml" /> </bean> <!-- mapper扫描器 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <!-- 扫描包路径,如果需要扫描多个包,中间使用半角逗号隔开 --> <property name="basePackage" value="com.chinglee.ssm.mapper"></property> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" /> </bean> </beans>
applicationContext-service.xml
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" 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/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!-- 用户的service--> <!--<bean id="userService" class="com.chinglee.ssm.serviceImpl.UserServiceImpl"/>--> </beans>
applicationContext-transaction.xml
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" 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/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!-- 事务管理器 对mybatis操作数据库控制,spring使用jdbc的事务控制类 --> <bean id="TransactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <!-- 数据源--> <property name="dataSource" ref="dataSource"/> </bean> <!-- 通知--> <tx:advice id="txAdvice" transaction-manager="TransactionManager"> <tx:attributes> <tx:method name="save" propagation="REQUIRED"/> <tx:method name="delete" propagation="REQUIRED"/> <tx:method name="insert" propagation="REQUIRED"/> <tx:method name="update" propagation="REQUIRED"/> <tx:method name="find" propagation="SUPPORTS" read-only="true"/> </tx:attributes> </tx:advice> <!--aop配置 --> <aop:config> <aop:advisor advice-ref="txAdvice" pointcut="execution(* com.changqing.ssm.serviceImpl.*.*(..) )"/> </aop:config> </beans>
springmvc.xml
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" 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/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!--组件扫描 --> <context:component-scan base-package="com.changqing.ssm.controller"/> <!-- mvc注解驱动--> <mvc:annotation-driven></mvc:annotation-driven> <!--视图解析器 解析jsp,默认使用jstl标签,classpath下的需要有jstl包 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!--配置jsp路径的前缀 --> <property name="prefix" value="/WEB-INF/jsp/"/> <!--配置jsp路径的后缀 --> <property name="suffix" value=".jsp"/> </bean> <!--将springMVC不能处理的请求交给tomcat --> <mvc:default-servlet-handler/> </beans>
db.properties
jdbc.driver=com.mysql.jdbc.Driver//换成自己的数据库 jdbc.url=jdbc:mysql://localhost:3306/new_schema jdbc.username=root jdbc.password=19940905
log4j.properties
# Global logging configuration#\u5728\u5f00\u53d1\u73af\u5883\u4e0b\u65e5\u5fd7\u7ea7\u522b\u8981\u8bbe\u7f6e\u6210DEBUG\uff0c\u751f\u4ea7\u73af\u5883\u8bbe\u7f6e\u6210info\u6216errorlog4j.rootLogger=DEBUG, stdout # Console output... log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n
web.xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app 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_3_1.xsd" version="3.1"> <display-name>Archetype Created Web Application</display-name> <!-- 加载spring容器 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/classes/spring/applicationContext-*.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!--springmvc配置前端控制器--> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!--contextConfigLocation配置springmvc 配置springmvc加载的配置文件(配置处理器映射器、适配器等等) --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/springmvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <!-- 第一种:*.action访问以action结尾由DispatcherServlet进行解析 第二种:/,所有访问由DispatcherServlet进行解析,对于静态文件的解析需要配置不让DispatcherServlet进行解析 --> <url-pattern>*.action</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> <!-- 使用REST风格的URI,将页面普通的post请求转为指定的delete或者put请求--> <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> </web-app>
数据库可以直接导入项目中的user.sql脚本。
user.sql脚本
new_schema数据库
user数据表
1)访问index.html页面
2)页面加载完成后执行js脚本,js脚本发起异步请求获取用户数据。
3)UserController接受请求,调用service查出员工数据,然后使用PageHelp插件,将数据分页。将得到的PageInfo对象作为ResponseBody返回。
4)js将获得的数据解析显示到页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户管理</title> <!--引入jquery --> <script src="./static/js/jquery-3.2.1.js"></script> <!-- 引入样式--> <link rel="stylesheet" href="./static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="./static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="./static/js/index.js"></script> <!--web.xml中如果你用的jsp1.2版本的DTD,默认EL是关闭的,必须开启 --> <!--@ page isELIgnored="false"%--> </head> <body> <!--使用bootstrap搭建页面 --> <div class="container"> <!--标题 --> <div class="row"> <div class="col-md-12"> <h1>用户管理</h1> </div> </div> <!--按钮 --> <div class="row"> <div class="col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8"> <button class="btn btn-primary" id="user_add_modal_btn">新增</button> <button class="btn btn-danger" id="user_delete_all_btn">删除</button> </div> </div> <br> <!--显示表格数据 --> <div class="row"> <div class="table-responsive col-md-12"> <table class="table table-hover" id="users_table"> <thead> <tr> <th> <input type="checkbox" id="check_all"/> </th> <th>流水号</th> <th>姓名</th> <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 col-sm-6" id="page_info_area"> 当前第页,总共页,总共条记录 </div> <!--分页导航条信息 --> <div class="col-md-6 col-sm-6" id="page_nav_area"> </div> </div> </div> <!-- 添加用户弹出的模态框 --> <div class="modal fade" id="userAddModal" 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=