1.1.1. 第一部分：搭建项目环境
1.1.1.1. 第一步：创建数据库
注意事项：使用utf8mb4-general 编码。不要使用utf8-general。
因为如果需要支持一些不规则的符号，如：表情符号！！utf8-general不支持。
1.1.1.2. 第二步：将页面修改成JSP页面
注意事项，先在页面里面加入
再修改页面后缀。
1.1.1.3. 第三步：将页面的超链接修改好
1.1.2. 第二部分：SpringMVC的配置
1.1.2.1. 配置步骤
- 导入包
- 编写一个请求
- 配置web.xml的核心控制器
- 编写一个业务控制器
- 编写一个配置类（或配置文件）
1.1.2.2. 第一步：导入包
|
<properties> <spring.version>4.3.7.RELEASE</spring.version> <jsp.version>2.2.1</jsp.version> <servlet-api.version>3.0.1</servlet-api.version> </properties>
<!-- 依赖 --> <dependencies> <!-- jsp --> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>${jsp.version}</version> </dependency> <!-- servlet api --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>${servlet-api.version}</version> </dependency>
<!-- spring mvc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency>
</dependencies> |
1.1.2.3. 第二步：编写请求页面
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <a href="${pageContext.request.contextPath }/admin/addAdmin.do" >add admin</a> </body> </html> |
1.1.2.4. 第三步：编写web.xml配置文件
|
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_0.xsd ">
<!-- 配置核心控制器 --> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 指定配置类的位置 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>cn.gzsxt.edu.config</param-value> </init-param> <!-- 修改容器加载类 --> <init-param> <param-name>contextClass</param-name> <param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value> </init-param> </servlet>
<servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>
</web-app> |
1.1.2.5. 第四步：编写Controller
|
package cn.gzsxt.edu.controller;
import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;
@Controller @Scope(value="request") @RequestMapping(value="/admin") public class AdminController {
@RequestMapping(value="/addAdmin") public void addAdmin() { System.out.println("增加管理员"); }
} |
1.1.2.6. 第五步：编写配置类
|
package cn.gzsxt.edu.config;
import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration;
@Configuration @ComponentScan(basePackages="cn.gzsxt.edu") public class MvcConfig {
} |
1.1.2.7. 第六步：增加编码处理过滤器
--在web.xml配置
|
<!-- 配置编码处理过滤器 --> <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> </filter> <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> |
1.1.2.8. 第七步：配置请求不需要后缀
--配置类的配置
|
@Configuration @ComponentScan(basePackages="cn.gzsxt.edu") @EnableWebMvc //注意事项：SpringMVC注解是通过WebMvcConfigurerAdapter适配器来配置<mvc:xxxx>组件 public class MvcConfig extends WebMvcConfigurerAdapter {
//<mvc:default-servlet-hanlder> @Override public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) { configurer.enable(); } } |
--web.xml的配置
|
<servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> |
1.1.3. 第三部分：Mybatis配置
--Mybatis整合Spring框架
1.1.3.1. 配置步骤
- 导入包
- 创建一个Mapper
- 配置Mybatis与Spring的整合
- 单元测试，插入数据
- 配置事务代理
1.1.3.2. 第一步：导入包
|
<!-- spring jdbc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${spring.version}</version> </dependency> <!-- dbcp2 --> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-dbcp2</artifactId> <version>${dbcp2.version}</version> </dependency> <!-- mybatis --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>${mybatis.version}</version> </dependency> <!-- mybatis-spring --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>${mybatis-spring.version}</version> </dependency> <!-- mysql driver --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql-driver.version}</version> </dependency> |
1.1.3.3. 第二步：创建一个Mapper映射接口
|
package cn.gzsxt.edu.mapper;
import java.util.Map;
import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Options;
/** * 管理员表，映射操作接口 * @author ranger */ @Mapper public interface AdminMapper {
/** * 插入管理员记录 * @param entity 数据实体 * @return 插入影响行号 */ @Insert(value="INSERT INTO tb_admin (admin_name, admin_account, admin_pwd, admin_status, role_id) VALUES (#{admin_name}, #{admin_account}, #{admin_pwd}, #{admin_status}, #{role_id})") @Options(useGeneratedKeys=true,keyProperty="admin_id",keyColumn="admin_id") int insert(Map<String, Object> entity);
} |
1.1.3.4. 第三步：整合Mybatis与Spring
|
package cn.gzsxt.edu.config;
import javax.sql.DataSource;
import org.apache.commons.dbcp2.BasicDataSource; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.session.SqlSessionFactory; import org.mybatis.spring.SqlSessionFactoryBean; import org.mybatis.spring.mapper.MapperScannerConfigurer; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.jdbc.datasource.DataSourceTransactionManager; import org.springframework.transaction.annotation.EnableTransactionManagement;
@Configuration @EnableTransactionManagement public class DataConfig {
//1.获得数据源 @Bean(name="dataSource") public DataSource getDataSource() { BasicDataSource dataSource=new BasicDataSource(); dataSource.setDriverClassName("org.gjt.mm.mysql.Driver"); dataSource.setUrl("jdbc:mysql://localhost:3306/edu-system"); dataSource.setUsername("root"); dataSource.setPassword("123456"); return dataSource; }
//2.获得会话工厂 @Bean(name="sqlSessionFactory") public SqlSessionFactory getSqlSessionFactory() { SqlSessionFactoryBean factoryBean=new SqlSessionFactoryBean(); factoryBean.setDataSource(this.getDataSource()); try { //设置参数后，必须要填充 factoryBean.afterPropertiesSet(); return factoryBean.getObject(); } catch (Exception e) { e.printStackTrace(); } return null; }
//3.创建Mapper的动态对象，并且注入到容器里面 @Bean public static MapperScannerConfigurer getMapperScannerConfigurer() { MapperScannerConfigurer configurer=new MapperScannerConfigurer(); //指定会话工厂 configurer.setSqlSessionFactoryBeanName("sqlSessionFactory"); //指定映射接口 configurer.setBasePackage("cn.gzsxt.edu.mapper"); //指定扫描的注解 configurer.setAnnotationClass(Mapper.class); return configurer; }
//4.事务代理类 @Bean public DataSourceTransactionManager getTransactionManager() { DataSourceTransactionManager dstm=new DataSourceTransactionManager(); dstm.setDataSource(this.getDataSource()); return dstm; } } |
1.1.3.5. 第四步：单元测试插入
|
package cn.gzsxt.edu.service.test;
import java.util.HashMap; import java.util.Map;
import org.junit.Test; import org.springframework.beans.BeansException; import org.springframework.context.annotation.AnnotationConfigApplicationContext;
import cn.gzsxt.edu.config.DataConfig; import cn.gzsxt.edu.mapper.AdminMapper;
public class AdminMapperTest {
@Test public void insert() { try { AnnotationConfigApplicationContext context=new AnnotationConfigApplicationContext(DataConfig.class); AdminMapper adminMapper = context.getBean(AdminMapper.class); Map<String, Object> entity=new HashMap<String, Object>(); entity.put("admin_name", "zhangsan"); adminMapper.insert(entity); context.close(); } catch (BeansException e) { e.printStackTrace(); } } } |
1.1.4. 第四部分：基础公共配置
1.1.4.1. 配置说明
- 请求编码的支持
- 配置数据库信息支持Properties配置文件
- 配置Log4j的支持
- 视图解释器的配置
- 编写所需要公共类
- 实现一条流程从页面到时数据库-插入
1.1.4.2. 第一步：实现从表单到数据库-插入(测试)
--页面测试代码
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <img src="${pageContext.request.contextPath }/lib/ace-admin/images/avatars/avatar.png"> <form action="${pageContext.request.contextPath }/admin/addAdmin.do" method="post" > 管理员名： <input name="admin_name" type="text"> <input type="submit" value="增加学生"> </form> </body> </html> |
--Controller代码
|
@RequestMapping(value="/addAdmin") public void addAdmin(@RequestParam Map<String,Object> entity) { System.out.println("增加管理员"); Map<String, Object> admin = adminService.addAdmin(entity); if(admin!=null) { System.out.println("-增加成功-"); } } |
1.1.4.3. 第二步：数据库的信息放在Properties文件里面
--sys.properties配置文件
|
#数据库信息 db.driver=org.gjt.mm.mysql.Driver db.url=jdbc:mysql://localhost:3306/edu-system db.username=root db.password=123456 |
--DataConfig配置类如下：
|
@Value(value="${db.driver}") private String driver; @Value(value="${db.url}") private String url; @Value(value="${db.username}") private String username; @Value(value="${db.password}") private String password;
//1.获得数据源 @Bean(name="dataSource") public DataSource getDataSource() { BasicDataSource dataSource=new BasicDataSource(); dataSource.setDriverClassName(driver); dataSource.setUrl(url); dataSource.setUsername(username); dataSource.setPassword(password); return dataSource; } |
注意事项：ContextConfig已经配置了@PropertySource
1.1.4.4. 第三步：Log4j日志的支持
--导入Log1.2的jar包
|
<!-- log4j --> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> |
--编写log4.property。注意放在classpath根目录，文件名必须为log4j.properties
|
log4j.rootLogger=DEBUG, A1 log4j.appender.A1=org.apache.log4j.ConsoleAppender log4j.appender.A1.layout=org.apache.log4j.PatternLayout log4j.appender.A1.layout.ConversionPattern=%-4r %-5p [%t] %37c %3x - %m%n |
1.1.4.5. 第四步：配置视图解释器
--导入jstl的包
|
<!-- jstl --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> |
--增加MvcConfig配置类的代码
|
//视图解释器的配置 @Bean public InternalResourceViewResolver getViewResolver() { InternalResourceViewResolver viewResolver=new InternalResourceViewResolver(); //1.支持JSTL视图 viewResolver.setViewClass(JstlView.class); //2.设置前缀 viewResolver.setPrefix("/WEB-INF/views/"); //3.设置后缀 viewResolver.setSuffix(".jsp");
return viewResolver; } |
1.1.4.6. 第五步：公共类文件以及接口文件的编写
1.1.5. 第五部分：将HTML视图页面修改为JSP
《将HTML修改为JSP，忽略》
1.1.5.1. 第一步：将页面公共代码抽象
--header.jsp
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <title>后台系统-后台用户管理-列表</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <!-- bootstrap & fontawesome --> <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/ace-admin/css/bootstrap.min.css" /> <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/ace-admin/font-awesome/4.5.0/css/font-awesome.min.css" /> <!-- page specific plugin styles -->
<!-- text fonts --> <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/ace-admin/css/fonts.googleapis.com.css" />
<!-- ace styles --> <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/ace-admin/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" /> <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/ace-admin/css/ace-skins.min.css" /> <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/ace-admin/css/ace-rtl.min.css" /> <script src="${pageContext.request.contextPath}/lib/ace-admin/js/ace-extra.min.js"></script> |
--navbar.jsp
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div id="navbar" class="navbar navbar-default ace-save-state"> <div class="navbar-container ace-save-state" id="navbar-container"> <div class="navbar-header pull-left"> <a href="index.html" class="navbar-brand"> <small> <!-- 系统Logo <i class="fa fa-leaf"></i> --> 后台系统 </small> </a> </div>
<div class="navbar-buttons navbar-header pull-right" role="navigation"> <ul class="nav ace-nav">
<li class="light-blue dropdown-modal"> <a data-toggle="dropdown" href="#" class="dropdown-toggle"> <img class="nav-user-photo" src="${pageContext.request.contextPath}/lib/ace-admin/images/avatars/user.jpg" alt="Jason's Photo" /> <span class="user-info"> <!--系统角色--> <small>超级管理员,</small> <!--管理员名称--> admin </span>
<i class="ace-icon fa fa-caret-down"></i> </a>
<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"> <li> <a href="setting.html"> <i class="ace-icon fa fa-cog"></i> 修改密码 </a> </li> <li class="divider"></li>
<li> <a href="#"> <i class="ace-icon fa fa-power-off"></i> 注销 </a> </li> </ul> </li> </ul> </div> </div><!-- /.navbar-container --> </div> |
--sidebar.jsp，菜单列表
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div id="sidebar" class="sidebar responsive ace-save-state"> <script type="text/javascript"> try{ace.settings.loadState('sidebar')}catch(e){} </script> <ul class="nav nav-list"> <li class=""> <a href="index.html"> <i class="menu-icon fa fa-tachometer"></i> <span class="menu-text"> 系统首页 </span> </a>
<b class="arrow"></b> </li>
<!-- open:表示菜单打开 active：表示菜单选中 --> <li class="open "> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-desktop"></i> <span class="menu-text"> 系统管理模块 </span>
<b class="arrow fa fa-angle-down"></b> </a>
<b class="arrow"></b>
<ul class="submenu"> <li class="active"> <a href="elements.html"> <i class="menu-icon fa fa-caret-right"></i> 后台用户管理 </a>
<b class="arrow"></b> </li> <li class=""> <a href="elements.html"> <i class="menu-icon fa fa-caret-right"></i> 角色管理 </a>
<b class="arrow"></b> </li> <li class=""> <a href="elements.html"> <i class="menu-icon fa fa-caret-right"></i> 权限管理 </a>
<b class="arrow"></b> </li> <li class=""> <a href="elements.html"> <i class="menu-icon fa fa-caret-right"></i> 模块管理管理 </a>
<b class="arrow"></b> </li> <li class=""> <a href="elements.html"> <i class="menu-icon fa fa-caret-right"></i> 修改密码 </a>
<b class="arrow"></b> </li>
</ul> </li>
</ul><!-- /.nav-list -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> </div> </div> |
--footer.jsp页尾
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div class="footer"> <div class="footer-inner"> <div class="footer-content"> <span class="bigger-80"> <span class="blue bolder">Ace</span> Application © 2013-2014 </span>
</div> </div> </div> |
1.1.5.2. 第二步：将所有页面嵌入公共代码
将所有页面，嵌入公共代码。页面太多，格式是一样的。所以以一个index.jsp页面为例
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html> <html lang="en"> <head> <jsp:include page="../commons/header.jsp"></jsp:include> </head>
<body class="no-skin"> <!-- 导航栏 start --> <jsp:include page="../commons/navbar.jsp"></jsp:include> <!-- 导航栏 end -->
<div class="main-container ace-save-state" id="main-container"> <script type="text/javascript"> try{ace.settings.loadState('main-container')}catch(e){} </script> <!--- 左边栏-菜单 start --> <jsp:include page="../commons/sidebar.jsp"></jsp:include> <!--- 左边栏-菜单 end -->
<!--- 内容主体 start --> <div class="main-content"> <div class="main-content-inner"> <!-- 向导栏 start--> .....(忽略代码) <!-- 向导栏 end-->
<!-- 内容页 start --> <div class="page-content"> 你好世界！！！ </div><!-- /.page-content --> <!-- 内容页 end --> </div> </div><!-- /.main-content --> <!--- 内容主体 end -->
<!--页尾 start --> <jsp:include page="../commons/footer.jsp"></jsp:include> <!--页尾 end --> </div><!-- /.main-container --> <!-- basic scripts --> .....(忽略代码) </body> </html> |