1、安装JDK、安装MAVEN、安装MTSQL、安装tomcat、建表、创建项目,导入依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 配置devtools开启热部署 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<!-- 配置tomcat启动器(tomcat我们自己提供) -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<!-- 在就容器上借助工具运行spring boot -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-legacy</artifactId>
<version>1.1.0.RELEASE</version>
</dependency>
<!-- 配置MyBatis启动器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.0</version>
</dependency>
<!-- 配置mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- 配置c3p0连接池 -->
<dependency>
<groupId>com.mchange</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.5.2</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.18</version>
<scope>provided</scope>
</dependency>
<!-- 单元测试 -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
</dependency>
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
2、配置文件
server:
port: 8080
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://114.115.200.204:3306/test
username: root
password: Mysql@123
#thymeleaf
thymeleaf:
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
servlet:
content-type: text/html
#mybatis
mybatis:
typeAliasesPackage: com.example.demo.domain
mapper-locations: classpath:/sqlmap/*Mapper.xml
#showSql
logging:
level:
com:
example:
mapper : debug
3、实体类创建
package com.example.demo.domain;
public class UserInfo {
/** pk **/
private Integer userId;
/** 用户名 **/
private String userName;
/** 真实姓名 **/
private String realName;
/** 电话 **/
private String phone;
/** 备注 **/
private String remark;
public Integer getUserId() {
return userId;
}
public void setUserId(Integer userId) {
this.userId = userId;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getRealName() {
return realName;
}
public void setRealName(String realName) {
this.realName = realName;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
}
4、mybatis的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.example.demo.mapper.UserInfoMapper" >
<resultMap id="BaseResultMap" type="com.example.demo.domain.UserInfo" >
<id column="user_id" property="userId" jdbcType="INTEGER" />
<result column="user_name" property="userName" jdbcType="VARCHAR" />
<result column="real_name" property="realName" jdbcType="VARCHAR" />
<result column="phone" property="phone" jdbcType="VARCHAR" />
<result column="remark" property="remark" jdbcType="VARCHAR" />
</resultMap>
<select id="selectList" resultMap="BaseResultMap" parameterType="java.lang.String">
select * from user_info
<where>
<if test="realName != null and realName != ''">
real_name = #{realName}
</if>
</where>
</select>
<insert id="insertUserInfo" parameterType="com.example.demo.domain.UserInfo">
insert into user_info(user_id, user_name, real_name, phone, remark)
values(#{userId}, #{userName}, #{realName}, #{phone}, #{remark})
</insert>
<update id="updateUserInfoBtId" parameterType="com.example.demo.domain.UserInfo">
update user_info
set user_name = #{userName}, real_name = #{realName}, phone = #{phone}, remark = #{remark}
where user_id = #{userId}
</update>
<delete id="deleteUserInfoById" parameterType="java.lang.Integer">
delete from user_info where user_id = #{userId}
</delete>
<select id="getUserInfoById" parameterType="java.lang.Integer" resultMap="BaseResultMap">
select * from user_info where user_id = #{userId}
</select>
</mapper>
5、mybatis的xml的映射接口
package com.example.demo.mapper;
import java.util.List;
import com.example.demo.domain.UserInfo;
import org.apache.ibatis.annotations.*;
@Mapper
public interface UserInfoMapper {
/**
* 获取所有的学生
* @return
*/
List<UserInfo> selectList(@Param("realName") String realName);
/**
* 添加学生
* @param userInfo 用户信息
*/
void insertUserInfo(UserInfo userInfo);
/**
* 根据ID查询
* @param userId pk
*/
UserInfo getUserInfoById(@Param("userId") Integer userId);
/**
* 修改学生
* @param userInfo 用户信息
*/
void updateUserInfoBtId(UserInfo userInfo);
/**
* 删除学生
* @param userId pk
*/
void deleteUserInfoById(@Param("userId") Integer userId);
}
6、创建service层,编写controller
package com.example.demo.controller;
import com.example.demo.domain.UserInfo;
import com.example.demo.service.UserInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserInfoController {
@Autowired private UserInfoService userInfoService;
@RequestMapping("/index")
public ModelAndView index(String name) {
ModelAndView view = new ModelAndView("/user/list");
List<UserInfo> userInfoList = userInfoService.selectList(name);
view.addObject("userList", userInfoList);
return view;
}
@RequestMapping("/modify")
public ModelAndView update(@RequestParam(value = "userId", required = false) Integer userId) {
ModelAndView view = new ModelAndView("/user/insert");
if (userId != null) {
view = new ModelAndView("/user/modify");
UserInfo userInfo = userInfoService.getUserInfoById(userId);
view.addObject("userInfo", userInfo);
}
return view;
}
@RequestMapping("/save")
public void save(UserInfo userInfo, HttpServletRequest request, HttpServletResponse response) {
if (userInfo.getUserId() != null) {
userInfoService.updateUserInfoBtId(userInfo);
} else {
userInfoService.insertUserInfo(userInfo);
}
try {
request.getRequestDispatcher("/user/index").forward(request, response);
} catch (ServletException | IOException e) {
e.printStackTrace();
}
}
@RequestMapping("/delete")
public void delete(Integer userId, HttpServletRequest request, HttpServletResponse response) {
userInfoService.deleteUserInfoById(userId);
try {
request.getRequestDispatcher("/user/index").forward(request, response);
} catch (ServletException | IOException e) {
e.printStackTrace();
}
}
}
7、页面
列表页
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS实现的清爽、漂亮的表格样式 - jb5t1.net</title>
<style type="text/css">
/* CSS Document */
body {
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size: 11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html > body td {
font-size: 11px;
}
</style>
</head>
<body>
<div>
<form action="/user/index" method="post">
<input type="text" name="name" />
<input type="submit" value="搜索" />
<input type="button" value="添加" onclick="add()" />
</form>
</div>
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption></caption>
<tr>
<th scope="col" abbr="Configurations">序号</th>
<th scope="col" abbr="Dual 1.8">用户名</th>
<th scope="col" abbr="Dual 2">真实姓名</th>
<th scope="col" abbr="Dual 2.5">联系方式</th>
<th scope="col" abbr="Dual 2.5">备注</th>
<th scope="col" abbr="Dual 2.5">操作</th>
</tr>
<tr th:each="item : ${userList}">
<th scope="row" abbr="Model" class="spec" th:text="${item.userId}"></th>
<td th:text="${item.userName}"></td>
<td th:text="${item.realName}"></td>
<td th:text="${item.phone}"></td>
<td th:text="${item.remark}"></td>
<td>
<a th:href="'/user/modify?userId=' + ${item.userId}">修改</a>
<a th:href="'/user/delete?userId=' + ${item.userId}">删除</a>
</td>
</tr>
</table>
</body>
<script>
function add() {
window.location.href = "/user/modify";
}
</script>
</html>
增加页:
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS实现的清爽、漂亮的表格样式 - jb5t1.net</title>
<style type="text/css">
/* CSS Document */
body {
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size: 11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html > body td {
font-size: 11px;
}
</style>
</head>
<body>
<form action="/user/save" method="post">
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption></caption>
<tr>
<th colspan="6" scope="col" abbr="Configurations">序号</th>
</tr>
<tr>
<td>用户名</td>
<td colspan="2"><input name="userName" type="text" maxlength="6" /></td>
<td>真实姓名</td>
<td colspan="2"><input name="realName" type="text" maxlength="6" /></td>
</tr>
<tr>
<td>联系方式</td>
<td colspan="2"><input name="phone" type="text" maxlength="20" /></td>
<td>备注</td>
<td colspan="2"><input name="remark" type="text" maxlength="40" /></td>
</tr>
<tr>
<td colspan="6" style="text-align: center;"><input type="submit" value="保存" /></td>
</tr>
</table>
</form>
</body>
</html>
修改页
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS实现的清爽、漂亮的表格样式 - jb5t1.net</title>
<style type="text/css">
/* CSS Document */
body {
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size: 11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html > body td {
font-size: 11px;
}
</style>
</head>
<body>
<form action="/user/save" method="post">
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption></caption>
<tr>
<th colspan="6" scope="col" abbr="Configurations">序号</th>
</tr>
<tr>
<input type="hidden" name="userId" th:value="${userInfo.userId}" />
<td>用户名</td>
<td colspan="2"><input type="text" name="userName" maxlength="6" th:value="${userInfo.userName}" /></td>
<td>真实姓名</td>
<td colspan="2"><input type="text" name="realName" maxlength="6" th:value="${userInfo.realName}" /></td>
</tr>
<tr>
<td>联系方式</td>
<td colspan="2"><input type="text" name="phone" maxlength="20" th:value="${userInfo.phone}" /></td>
<td>备注</td>
<td colspan="2"><input type="text" name="remark" maxlength="40" th:value="${userInfo.remark}" /></td>
</tr>
<tr>
<td colspan="6" style="text-align: center;"><input type="submit" value="保存" /></td>
</tr>
</table>
</form>
</body>
</html>
完成,启动项目,访问http://localhost:8080/user/index