使用IDEA2020搭建SSM项目
一、打开 idea 新建 Maven 项目
-
创建新项目
-
选择 Maven 不用骨架创建,直接下一步
-
设置项目名并设置 Groupid,然后点击 Finish
-
项目基本搭建完成,完成后的效果
二、 添加依赖和新建 xml 文件
-
在pom中添加依赖(这里整合的是 Thymeleaf 模板引擎,如果需要使用jsp,可以自行修改一下)
<?xml version="1.0" encoding="UTF-8"?> <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/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.genyou</groupId> <artifactId>web_ssm</artifactId> <version>1.0-SNAPSHOT</version> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <!-- spring版本号 --> <spring.version>5.3.1</spring.version> <!-- mybatis版本号 --> <mybatis.version>3.5.6</mybatis.version> <!-- jdk版本 --> <java.version>1.8</java.version> <skipTests>true</skipTests> </properties> <!-- 依赖 --> <dependencies> <!-- 测试 junit --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> <scope>test</scope> </dependency> <!--(使用Thymeleaf模板引擎) --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> <version>3.0.11.RELEASE</version> </dependency> <!--spring相关--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <!--mybatis相关--> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>${mybatis.version}</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.5</version> </dependency> <!-- 分页插件 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.2.0</version> </dependency> <!-- druid连接池 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.23</version> </dependency> <!-- 数据库连接 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.22</version> </dependency> <!--日志相关--> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>1.7.25</version> </dependency> </dependencies> <!-- 插件 --> <build> <!-- 项目名 --> <finalName>web_ssm</finalName> <plugins> <!-- tomcat 7版本插件 --> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> <configuration> <!--端口控制--> <port>80</port> <!--项目路径控制意味着http://localhost:80/--> <path>/</path> <!--编码--> <uriEncoding>UTF-8</uriEncoding> <ignorePackaging>true</ignorePackaging> </configuration> </plugin> <!-- JDK1.8版本 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.1</version> <configuration> <source>1.8</source> <target>1.8</target> <encoding>UTF-8</encoding> </configuration> </plugin> <!-- 打war包插件,并制定格式为UTF-8 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>3.2.3</version> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <version>3.1.0</version> <configuration> <encoding>UTF-8</encoding> </configuration> </plugin> <!-- 清理构建生成的目录和文件 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-clean-plugin</artifactId> <version>3.1.0</version> </plugin> <!-- jar包打包插件 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-plugin</artifactId> <version>3.2.0</version> </plugin> <!-- 单元测试插件 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-surefire-plugin</artifactId> <version>2.22.2</version> </plugin> </plugins> </build> </project>
-
创建
webapp
与WEB-INF
文件夹在状态栏找到 file -----> Project Structure -----> Project Settings -----> Modules 选择 + 号,选择 web
设置 webapp 和 xml的文件位置 webapp 在
src/main
文件夹下基本目录以经搭建完成了!
-
在 resources 下添加 spring-mvc.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.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!--组件扫描--> <context:component-scan base-package="com.genyou"/> <!--开启注解驱动--> <mvc:annotation-driven/> <!-- 视图解析器 --> <bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver"> <!-- html文件存放的路径位置 --> <property name="prefix" value="/WEB-INF/templates/"/> <property name="suffix" value=".html"/> <property name="characterEncoding" value="UTF-8"/> <property name="templateMode" value="HTML5"/> </bean> <!-- thymeleaf的视图解析器 会与冲突 ContentNegotiatingViewResolver --> <bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver"> <property name="characterEncoding" value="UTF-8"/> <property name="templateEngine" ref="templateEngine"/> </bean> <!-- 模板引擎 --> <bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine"> <property name="templateResolver" ref="templateResolver"/> </bean> </beans>
-
在 resources 下添加 database.properties 数据源文件
# 连接数据库 # 如果 mysql 是 8.0 之前的版本,使用 com.mysql.jdbc.Driver jdbc.driver=com.mysql.cj.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/web_ssm jdbc.username=root jdbc.password=123456 #定义初始连接数 initialSize=0 #定义最大连接数 maxActive=20 #定义最大空闲 maxIdle=20 #定义最小空闲 minIdle=1 #定义最长等待时间 maxWait=60000
-
在 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:tx="http://www.springframework.org/schema/tx" 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/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd"> <!--加载外部资源文件--> <context:property-placeholder location="classpath:database.properties"/> <!-- 数据源 使用 Druid 连接池 --> <bean class="com.alibaba.druid.pool.DruidDataSource" id="dataSource"> <property name="driverClassName" value="${jdbc.driver}"/> <property name="url" value="${jdbc.url}"/> <property name="username" value="${jdbc.username}"/> <property name="password" value="${jdbc.password}"/> </bean> <!--开启注解驱动--> <tx:annotation-driven transaction-manager="transactionManager"/> <!--事务管理器--> <bean class="org.springframework.jdbc.datasource.DataSourceTransactionManager" id="transactionManager"> <property name="dataSource" ref="dataSource"/> </bean> <!--sqlSessionFactory--> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> <property name="configuration"> <bean class="org.apache.ibatis.session.Configuration"> <property name="mapUnderscoreToCamelCase" value="true"/> </bean> </property> <property name="plugins"> <set> <!--配置pageHelper 分页插件--> <bean class="com.github.pagehelper.PageInterceptor"> <property name="properties"> <props> <!--方言:--> <prop key="helperDialect">mysql</prop> </props> </property> </bean> </set> </property> </bean> <!-- 配置MapperScannerConfigurer --> <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <!-- 注入需要扫描的包,它会自动扫描这个包下的接口,然后实现这些接口,并且会实例化这些接口的实现类。 --> <property name="basePackage" value="com.genyou.mapper"/> </bean> </beans>
-
配置 WEB-INF 下的 web.xml 文件
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <!--spring监听器--> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <!--spring-mvc--> <servlet> <servlet-name>spring-mvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>spring-mvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!--post乱码处理--> <filter> <filter-name>encodingFilter</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> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
-
在 resources 下添加 log4j.properties 配置文件
log4j.rootCategory=INFO, stdout # com.genyou是自己的包 log4j.logger.com.genyou=TRACE ### 输出信息到控制抬 ### log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appender.stdout.layout.ConversionPattern=%d{yy-MM-dd HH:mm:ss,SSS} %t %-5p %c{1}[%LL] - %m%n
三、测试是否搭建成功
-
新建 IndexController ,测试,是否能够跳转到 index.html
@Controller @RequestMapping public class IndexController { @RequestMapping public String index(){ return "index"; } }
-
在 templates 文件夹下新建 index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>数据查询</title> </head> <body> <div> <h1>WEB-SSM</h1> </div> </body> </html>
基础目录:
-
配置 Maven 中的 Tomcat 7 插件启动项目
项目已经搭建成功,现在使用 mybatis 搭建一个简单的分页查询
四、 进行分页查询数据
-
数据库数据准备
CREATE TABLE `users` ( `id` int NOT NULL AUTO_INCREMENT COMMENT 'id', `name` varchar(120) DEFAULT NULL COMMENT '姓名', `sex` char(2) DEFAULT NULL COMMENT '性别', `phone` varchar(11) DEFAULT NULL COMMENT '手机号', PRIMARY KEY (`id`) ) INSERT INTO `users` VALUES (1, 'tom', '男', '12345678901'); INSERT INTO `users` VALUES (2, '张三', '男', '13312345678'); INSERT INTO `users` VALUES (3, '李四', '女', '15512345678'); INSERT INTO `users` VALUES (4, 'jack', '男', '17712345678'); INSERT INTO `users` VALUES (5, '王五', '女', '18887654321'); INSERT INTO `users` VALUES (6, '小明', '男', '12345678920'); INSERT INTO `users` VALUES (7, 'tom', '男', '12345678901'); INSERT INTO `users` VALUES (8, '张三', '男', '13312345678'); INSERT INTO `users` VALUES (9, '李四', '女', '15512345678'); INSERT INTO `users` VALUES (10, 'jack', '男', '17712345678'); INSERT INTO `users` VALUES (11, '王五', '女', '18887654321'); INSERT INTO `users` VALUES (12, '小明', '男', '12345678920'); INSERT INTO `users` VALUES (13, 'tom', '男', '12345678901'); INSERT INTO `users` VALUES (14, '张三', '男', '13312345678'); INSERT INTO `users` VALUES (15, '李四', '女', '15512345678'); INSERT INTO `users` VALUES (16, 'jack', '男', '17712345678'); INSERT INTO `users` VALUES (17, '王五', '女', '18887654321'); INSERT INTO `users` VALUES (18, '小明', '男', '12345678920'); INSERT INTO `users` VALUES (19, 'tom', '男', '12345678901'); INSERT INTO `users` VALUES (20, '张三', '男', '13312345678'); INSERT INTO `users` VALUES (21, '李四', '女', '15512345678'); INSERT INTO `users` VALUES (22, 'jack', '男', '17712345678'); INSERT INTO `users` VALUES (23, '王五', '女', '18887654321'); INSERT INTO `users` VALUES (24, '小明', '男', '12345678920'); INSERT INTO `users` VALUES (25, 'tom', '男', '12345678901'); INSERT INTO `users` VALUES (26, '张三', '男', '13312345678'); INSERT INTO `users` VALUES (27, '李四', '女', '15512345678'); INSERT INTO `users` VALUES (28, 'jack', '男', '17712345678'); INSERT INTO `users` VALUES (29, '王五', '女', '18887654321'); INSERT INTO `users` VALUES (30, '小明', '男', '12345678920'); INSERT INTO `users` VALUES (31, 'tom', '男', '12345678901'); INSERT INTO `users` VALUES (32, '张三', '男', '13312345678'); INSERT INTO `users` VALUES (33, '李四', '女', '15512345678'); INSERT INTO `users` VALUES (34, 'jack', '男', '17712345678'); INSERT INTO `users` VALUES (35, '王五', '女', '18887654321'); INSERT INTO `users` VALUES (36, '小明', '男', '12345678920'); INSERT INTO `users` VALUES (37, 'tom', '男', '12345678901'); INSERT INTO `users` VALUES (38, '张三', '男', '13312345678'); INSERT INTO `users` VALUES (39, '李四', '女', '15512345678'); INSERT INTO `users` VALUES (40, 'jack', '男', '17712345678'); INSERT INTO `users` VALUES (41, '王五', '女', '18887654321'); INSERT INTO `users` VALUES (42, '小明', '男', '12345678920'); COMMIT;
-
在 pojo 下新建 Users 实体类
public class Users implements Serializable { private int id; //id private String name; //姓名 private char sex; //性别 private String phone; //手机号 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 char getSex() { return sex; } public void setSex(char sex) { this.sex = sex; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } }
-
新建 UserMapper ,我们这里使用注解,就不配置 xml 文件了
@Mapper public interface UserMapper { @Select("SELECT * FROM users") List<Users> findAll(); }
-
新建 service 接口和 serviceImpl 实现类
public interface UserService { /** * 分页查询用户信息数据 * @param pageNum:当前页 * @param size:每页显示的数据 * @return */ PageInfo<Users> findAll(int pageNum, int size); }
@Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; /** * 分页查询用户信息数据 * @param pageNum:当前页 * @param size:每页显示的数据 * @return */ @Override public PageInfo<Users> findAll(int pageNum, int size) { PageHelper.startPage(pageNum,size); List<Users> userList = userMapper.findAll(); return new PageInfo<Users>(userList); } }
-
在刚才写的 controller 中添加 findAll 分页查询的方法
@Controller @RequestMapping public class IndexController { @Autowired private UserService userService; /** * 页面跳转,输入localhost后可以直接跳转到分页查询数据 * @return */ @RequestMapping public String index() { return "redirect:/findAll/1/10"; } /** * 分页查询数据 * @param page * @param size * @param model * @return */ @GetMapping("findAll/{page}/{size}") public String findAll(@PathVariable(required = false) int page, @PathVariable(required = false) int size, Model model) { if (page <= 0) { page = 1; } if (size <= 0) { size = 10; } // 我们这里使用的是分页插件,需要的数据,我们可以直接取出来 PageInfo<Users> pageInfo = userService.findAll(page, size); // 储存查询出来的分页数据 model.addAttribute("users", pageInfo.getList()); // 储存总共多少页 model.addAttribute("pages", pageInfo.getPages()); // 储存当前页数 model.addAttribute("pageNum", pageInfo.getPageNum()); // 储存上一页的页码数 model.addAttribute("prePage", pageInfo.getPrePage()); // 储存下一页的页码数 model.addAttribute("nextPage", pageInfo.getNextPage()); return "index"; } }
OK!后端写完了,下面简单写一个前端页面进行效果测试
五、编写前端页面,并进行数据测试
-
改造我们刚在前面建的 index.html ,由于使用的 Thymeleaf 模板引擎,所以我们就直接使用模板引擎进行渲染
下面只是简单的写了一个分页效果,只是为了能够展示实现!!!
<!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>数据查询</title> </head> <body> <div align="center"> <h1>WEB-SSM</h1> <table border="1" cellspacing="0" cellpadding="0"> <tr> <th width="60px">id</th> <th width="100px">姓名</th> <th width="60px">性别</th> <th width="120px">手机号</th> </tr> <tr th:each="user : ${users}"> <td align="center" th:text="${user.id}">1</td> <td align="center" th:text="${user.name}">123</td> <td align="center" th:text="${user.sex}">男</td> <td align="center" th:text="${user.phone}">12345678901</td> </tr> </table> <div style="margin-top: 10px"> 当前第 <span th:text="${pageNum}" style="color: deepskyblue">0</span> 页    总共 <span th:text="${pages}" style="color: deepskyblue">0</span> 页    <input type="button" value="上一页" onclick="prePage()"> <input type="button" value="下一页" onclick="nextPage()"> <input type="hidden" th:value="${prePage}" id="prePage"> <input type="hidden" th:value="${nextPage}" id="nextPage"> </div> </div> <script> function prePage(){ let prePage = document.getElementById('prePage').value; location.href = "/findAll/" + prePage + "/10"; } function nextPage(){ let nextPage = document.getElementById('nextPage').value; location.href = "/findAll/" + nextPage + "/10"; } </script> </body> </html>
-
启动项目,进行测试,在浏览器地址栏输入 http://localhost 看能不能正常分页
已经正常访问了,地址栏的地址也实现了自动跳转,日志也成功的打印了出来,上下一页也可以正常使用了。