创建一个Springboot项目
1. 导入依赖
选择依赖,点击左下角的Dependencies
-
Web
我们这次开发的是web应用所以选择web -
Thymeleaf
一款模板引擎,能够比较方便的展现后台传来的数据 -
MySQL
我们这次使用Mysql数据库 -
JDBC
Java 数据库连接 Java Database Connectivity,简称JDBC -
MyBatis
打开mysql数据库创建一个叫test的数据库之后创建person表
2. 配置文件
在application.yml文件中配置文件,如下
server:
port: 8888
# 配置数据源
spring:
datasource:
password: a15237168735
url: jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true&serverTimezone=UTC
username: root
driver-class-name: com.mysql.cj.jdbc.Driver
freemarker:
check-template-location: false
# mybatis
mybatis:
type-aliases-package: com.example.demchen
创建bean类
@Configuration
public class User {
private String id;
private String name;
private String gender;
private int age;
private String address;
private String qq;
private String email;
给主启动类添加注解–@MapperScan(“com.example.demchen.dao”)让主启动类扫描指定路径的Mapper类
@MapperScan("com.example.demchen.dao")
@SpringBootApplication
public class DemchenApplication {
public static void main(String[] args) {
SpringApplication.run(DemchenApplication.class, args);
}
}
或者在接口中添加@Mapper注解,编写sql语句
@Mapper
@Component
public interface UserDao{
@Select("select * from user")
public List<User> getAll();
@Insert("insert into user(name,gender,age,address,qq,email) values(#{name},#{gender},#{age},#{address},#{qq},#{email})")
public void insert(User user);
@Select("select * from user where id = #{id}")
public User getId(int id);
@Select("delete from user where id = #{id}")
public void delete(int id);
}
在service层中新建一个类,调用Mapper的方法
@Service
@Repository
public class UserDaoService {
@Autowired
UserDao userDao;
//查询所有
public List<User> select(){return userDao.getAll();}
//根据id查询
public User selectOne(int id){return userDao.getId(id);}
//增加
public void insert(User user){userDao.insert(user);}
//根据id删除
public void delete(int id){userDao.delete(id);}}
然后在controller层接受get/post请求(有可能有参数)
@Controller
public class IndexController {
@Autowired
UserDaoService userDaoService;
@Autowired
User user;
ModelAndView mav;
//首页,显示数据信息
@RequestMapping("/hello")
public ModelAndView index(){
mav = new ModelAndView("index");
List<User> list = userDaoService.select();
mav.addObject("list",list);
return mav;
}
//对增加数据页面进行访问
@RequestMapping("/index02")
public String index02(){return "index02";}
//对id查询进行访问
@RequestMapping("/selectOne")
public ModelAndView selectOne(HttpServletRequest request){
mav = new ModelAndView("index03"); mav.addObject("user",userDaoService.selectOne(Integer.parseInt(request.getParameter("id"))));
return mav;
}
//增加一条数据,然后重定向到首页显示数据
@RequestMapping("/insert")
//name=a&age=1&address=a&qq=a&email=a%40qq.com&inlineRadioOptions=option2
public String insert(HttpServletRequest request){
//调用util包中的Tool方法,向数据库添加数据
Tool.insert(request,user,userDaoService);
return "redirect:hello";
}
@RequestMapping("/delete")
public String delete(HttpServletRequest request){
System.out.println(request.getParameter("id"));
userDaoService.delete(Integer.parseInt(request.getParameter("id")));
return "redirect:hello";
}
}
下面是一个工具类,用于封装方法
public class Tool {
//对用户发出的请求进行处理,提取请求中的数据,注入到user中
public static void insert(HttpServletRequest request,User user,UserDaoService userDaoService){
try {
request.setCharacterEncoding("utf-8");
//提取request中的请求数据
String gender;
if("option1".equals(request.getParameter("inlineRadioOptions"))){
gender = "男";
}else{
gender = "女";
}
user.setName(request.getParameter("name"));
user.setAge(Integer.parseInt(request.getParameter("age")));
user.setAddress(request.getParameter("address"));
user.setGender(gender);
user.setQq(request.getParameter("qq"));
user.setEmail(request.getParameter("email"));
userDaoService.insert(user);
System.out.println(user);
} catch (UnsupportedEncodingException e) {
System.out.println("添加失败");
}
}
}
下面是前端首页,使用thymeleaf循环显示list中的user类的数据,使用了bootstrap框架
<!DOCTYPE html>
<html lang="en">
<!-- 使用thymeleaf需引入 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数据管理</title>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<caption>用户信息表格</caption>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>gender</th>
<th>age</th>
<th>address</th>
<th>qq</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr th:each="item:${list}">
</script>
<td th:text="${{item.id}}">还没有用户id呢</td>
<td th:text="${{item.name}}">还没有人员name呢</td>
<td th:text="${{item.gender}}">还没有人员</td>
<td th:text="${{item.age}}">还没有任何人员信息哦</td>
<td th:text="${{item.address}}">还没有任何人员信息哦</td>
<td th:text="${{item.qq}}">还没有任何人员信息哦</td>
<td th:text="${{item.email}}">还没有任何人员信息哦</td>
<td>
<button class="btn btn-default" type="button" >修改</button>
</td>
<td>
<form action="/delete" method="get">
<div class="form-group" >
<label for="exampleInputEmail1111"></label>
<!-- <input type="button" class="form-control" id="exampleInputEmail1111" placeholder="请输入编号或姓名" name="id">-->
<button class="btn btn-default" type="submit" id="exampleInputEmail1111" name="id" value="6">删除</button>
</div>
</form>
</td>
</tr>
</tbody>
</table>
<form action="/selectOne" method="get">
<div class="form-group" >
<label for="exampleInputEmail11">id</label>
<input type="text" class="form-control" id="exampleInputEmail11" placeholder="请输入编号或姓名" name="id">
<button class="btn btn-default" type="submit">查询</button>
</div>
</form>
<button class="btn btn-default" type="button" onclick="window.location.href='index02'">添加</button>
</body>
</html>
下面是添加数据的页面,其实应该在首页添加的,不想改动了
<!DOCTYPE html>
<html lang="en">
<!-- 使用thymeleaf需引入 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数据更改</title>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<form action="/insert" method="get">
<div class="form-group">
<label for="exampleInputEmail1">name</label>
<input type="text" class="form-control" id="exampleInputEmail1" name="name" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">age</label>
<input type="text" class="form-control" id="exampleInputPassword1" name="age">
</div>
<div class="form-group">
<label for="exampleInputPassword2">address</label>
<input type="text" class="form-control" id="exampleInputPassword2" name="address">
</div>
<div class="form-group">
<label for="exampleInputPassword3">qq</label>
<input type="text" class="form-control" id="exampleInputPassword3" name="qq">
</div>
<div class="form-group">
<label for="exampleInputEmail111">email</label>
<input type="email" class="form-control" id="exampleInputEmail111" placeholder="Email" name="email">
</div>
<div class="checkbox" data-toggle="buttons">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">男
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">女
</label>
</div>
<button type="submit" class="btn btn-default" >summit</button>
</form>
</table>
</body>
</html>
查询页面
<!DOCTYPE html>
<html lang="en">
<!-- 使用thymeleaf需引入 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<caption>用户信息表格</caption>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>gender</th>
<th>age</th>
<th>address</th>
<th>qq</th>
<th>email</th>
</tr>
</thead>
<tbody>
<th th:text="${user.id}">还没有用户id呢</th>
<td th:text="${user.name}">还没有人员name呢</td>
<td th:text="${user.gender}">还没有人员</td>
<td th:text="${user.age}">还没有任何人员信息哦</td>
<td th:text="${user.address}">还没有任何人员信息哦</td>
<td th:text="${user.qq}">还没有任何人员信息哦</td>
<td th:text="${user.email}">还没有任何人员信息哦</td>
</tbody>
</table>
</body>
</html>
随便写了一下记录一下,勿喷