导语:
刚学springboot几天,做了个小例子,感觉springboot很好用。相比ssm,springboot除去了很多的繁杂的配置,使用起来非常方便。而且springboot内置了tomcat、jetty这两个web服务器,也不需要你再去配置web服务器,方便刚学springboot或者想学springboot的朋友,下面就带你一步一步做成一个小例子
项目开发环境
开发工具:IDEA 2019.2
框架:springboot、mybatis、bootstrap
模板引擎:thymeleaf
数据库:MySQL
构建工具:Maven
可视化工具:Navicat for MySQL
项目搭建
项目的创建这里就不详细写了,不会的朋友可以看这里
一、数据库设计
CREATE TABLE `stus` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) DEFAULT NULL,
`password` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=42 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
创建好数据库之后随便插入几条数据就可以了
在resource中创建application.yml配置文件,有两种文件,一种是properties的一种是yml的,这里使用的是yml的,yml的编写格式很重要,就是冒号后面一定要给一个空格,而且不能按tab键缩进,必须手动缩进,下面是对数据库连接的配置
spring:
#数据库配置
datasource:
url: jdbc:mysql://localhost:3306/数据库名?useSSL=false
driver-class-name: com.mysql.jdbc.Driver
username: 用户名
password: 密码
initial-size: 10
max-active: 20
max-idle: 8
min-idle: 8
二、导入项目所需的依赖
pom.xml依赖
注意
- 在pom.xml文件这里有几点需要注意的,就是导入springboot和mybatis的整合包的时候不需要再导入mybatis包,会冲突
- 添加junit测试包的时候不用添加scope,不然无法在controller中使用测试
<?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.java.springboot</groupId>
<artifactId>springboot-demo</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<!-- Spingboot相关jar包版本 -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.5.RELEASE</version>
</parent>
<dependencies>
<!-- Springboot核心jar包 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<!-- web开发包:包含Tomcat和Springmvc -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--mysql驱动包-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!--springboot与JDBC整合包-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!--springboot与mybatis的整合包-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.0</version>
</dependency>
<!--junit测试包-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
</dependency>
</dependencies>
</project>
三、项目目录结构
- com.java.springboot
- controller(包)
- UserController.java
- bean(包)
- User.java
- mapper(包)
- UserMapper.java
- service(包)
- UserService.java
- App.java
四、前端代码实现
个人不是很会前端哈,如果写的丑希望大佬们不轻点喷,多给建议
在resource目录下新建两=个文件夹,分别是templates、static
templates用于存放html页面
static用于存放静态资源文件,如(js、img、css)
在application.yml配置对应的信息,接着数据库后面添加就行
#静态资源配置
resources:
static-locations: classpath:static/
#thymeleaf模板引擎配置
thymeleaf:
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
content-type: text/html
cache: false
在templates文件夹中新建一个html页面,命名为userList.html,如果需要使用样式框架的话加在static里面的文件夹就可以了
注意
- 在html中导入bootstrap样式的时候路径要注意,就是如果你在application.yml配置了访问的是static目录下的资源的时候,在html导入的静态资源是不需要在前面加static了
- 比如这里的bootstrap.css样式是放在static/css目录下的,在html中就直接写css/bootstrap.css就可以了,如果在前面加了static就无法访问样式了,这里踩了很多坑,要注意
- 使用thymeleaf模板引擎的时候一定添加 xmlns:th="http://www.thymeleaf.org"在html标签中
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<style>
a{
color:#fff;
}
</style>
<body>
<button class="btn btn-primary form-control" style="height:50px"><a th:href="@{'/insertPage'}">添加用户</a></button>
<table class="table table-striped table-bordered table-hover text-center">
<thead>
<tr style="text-align:center">
<th>Id</th>
<th>Username</th>
<th>Password</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="users:${users}">
<td th:text="${users.id}"></td>
<td th:text="${users.username}"></td>
<td th:text="${users.password}"></td>
<td>
<a class="btn btn-primary" th:href="@{'/updatePage/'+${users.id}}">更改</a>
<a class="btn btn-danger" th:href="@{'/delete/'+${users.id}}">删除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果预览
在templates文件中新建 insertPage.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div style="width:800px;height:100%;margin-left:270px;">
<form action="/insert" method="post">
用户名:<input class="form-control" type="text" th:value="${username}" name="username"><br>
密 码:<input class="form-control" type="text" th:value="${password}" name="password"><br>
<button class="btn btn-primary btn-lg btn-block">保存</button>
</form>
</div>
</body>
</html>
页面效果预览
在templates文件中新建 updatePage.html 文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>修改用户</title>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div style="width:800px;height:100%;margin-left:270px;">
<form action="/update" method="post">
ID:<input class="form-control" name="id" type="text" th:value="${user.id}" readonly="readonly"><br>
用户名:<input class="form-control" type="text" th:value="${user.username}" name="username"><br>
密 码:<input class="form-control" type="text" th:value="${user.password}" name="password"><br>
<button class="btn btn-primary btn-lg btn-block" type="submit">提交</button>
</form>
</div>
</body>
</html>
页面效果预览
五、后端代码实现
有了前端代码之后我们就可以实现前端页面的功能了,这里主要是实现用户的增删改查,而且这里没有使用到ajax交互,纯后端
在com.java.springboot.bean包中新建一个类,命名为User.java(实体类)
package com.java.springboot.bean;
/**
* @author Woo_home
* @create by 2019/8/12
*/
public class User {
private int id;
private String username;
private String password;
//此处省略setter、getter、toString方法,自行添加即可
}
在com.java.springboot.mapper包中新建一个类,编写mapper接口(UserMapper.java)
package com.java.springboot.mapper;
import com.java.springboot.bean.User;
import org.springframework.stereotype.Repository;
import java.util.List;
/**
* @author Woo_home
* @create by 2019/8/12
*/
@Repository
public interface UserMapper {
/*
* 根据id查询用户
*/
User select(int id);
/*
* 查询所有用户
*/
List<User> userList();
/*
* 增加保存用户
*/
void save(User user);
/*
* 根据id删除用户
*/
int delete(Integer id);
/*
* 根据id查找用户
*/
User findUserById(int id);
/*
* 更改用户信息
*/
int update(User user);
}
写了接口之后在resource下新建一个mapping文件夹,用于存放映射文件新建usermapper.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.java.springboot.mapper.UserMapper">
<!--查询所有用户-->
<select id="userList" resultType="com.java.springboot.bean.User">
select * from stus
</select>
<!--添加用户-->
<insert id="save" parameterType="string">
INSERT INTO stus VALUES(null,#{username},#{password})
</insert>
<!--删除用户-->
<delete id="delete" parameterType="int">
delete from stus where id = #{id}
</delete>
<!--根据id查询用户-->
<select id="findUserById" resultType="com.java.springboot.bean.User">
select * from stus where id = #{id}
</select>
<!--更改用户信息-->
<update id="update" parameterType="user">
update stus set username=#{username},password=#{password} where id=#{id}
</update>
</mapper>
还要在application.yml中添加配置扫描映射文件和实体类
mybatis:
mapper-locations: classpath:mapping/*.xml
type-aliases-package: com.java.springboot.bean
在com.java.springboot.service包中新建一个UserService类,接下来就是编写业务层了(UserService.java)
这里为了快速实现一个增删改查,就不新建UserServiceImpl类来实现UserService接口了,直接在新建UserService类来写业务了
package com.java.springboot.server;
import com.java.springboot.bean.User;
import com.java.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @author Woo_home
* @create by 2019/8/12
*/
@Service
public class UserService {
@Autowired
private UserMapper userMapper;
/*
* 根据id查询用户
*/
public User select(int id){
return userMapper.select(id);
}
/*
* 查询所有用户
*/
public List<User> userList(){
return userMapper.userList();
}
/*
* 增加保存用户
*/
public void save(User user){
userMapper.save(user);
}
/*
* 根据id删除用户
*/
public int delete(Integer id){
return userMapper.delete(id);
}
/*
* 根据id查找用户
*/
public User findUserById(int id){
return userMapper.findUserById(id);
}
/*
* 更改用户信息
*/
public int update(User user){
return userMapper.update(user);
}
}
编写完业务之后就是编写控制器了
在com.java.springboot.controller包中新建一个UserController.java
package com.java.springboot.controller;
import com.java.springboot.bean.User;
import com.java.springboot.server.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
/**
* @author Woo_home
* @create by 2019/8/12
*/
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/insertPage")
public String index(){
return "insertPage";
}
@RequestMapping("select/{id}")
@ResponseBody
public String save(@PathVariable int id){
return userService.select(id).toString();
}
@RequestMapping("/userList")
public String userList(Model model){
List<User> users = userService.userList();
model.addAttribute("users",users);
return "userList";
}
@RequestMapping("/insert")
public String save(User user){
userService.save(user);
return "redirect:/userList";
}
@GetMapping("/delete/{id}")
public String delete(@PathVariable Integer id){
userService.delete(id);
return "redirect:/userList";
}
@GetMapping("/updatePage/{id}")
public String updatePage(Model model,@PathVariable int id){
User user = userService.findUserById(id);
model.addAttribute("user",user);
return "updatePage";
}
@PostMapping("/update")
public String updateUser(User user){
userService.update(user);
System.out.println("修改的用户为 : " + user.getUserName());
return "redirect:/userList";
}
}
App.java 项目启动类
需要在启动类中添加mapper接口的扫描
@MapperScan(basePackages = “com.java.springboot.mapper”)
package com.java.springboot;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan(basePackages = "com.java.springboot.mapper")
public class App {
public static void main(String[] args) {
SpringApplication.run(App.class, args);
}
}
application.yml全部配置,再强调一次,一定要注意yml的编写格式,不然会出各种错
server:
port: 8080
spring:
datasource:
url: jdbc:mysql://localhost:3306/数据库名?useSSL=false
driver-class-name: com.mysql.jdbc.Driver
username: 用户名
password: 密码
initial-size: 10
max-active: 20
max-idle: 8
min-idle: 8
resources:
static-locations: classpath:static/
thymeleaf:
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
content-type: text/html
cache: false
mybatis:
mapper-locations: classpath:mapping/*.xml
type-aliases-package: com.java.springboot.bean
logging:
level:
com:
example:
mapper : debug
到这里就可以运行我们的项目了,可以看到spring的字样
这个是我们项目的进程
这些是可以访问的路径
我们依次在浏览器输入这些路径看看是否正确
这是添加用户页面
这是删除页面,即用户列表页面,因为没涉及到 ajax 和 jQuery 那些
这是更改用户信息页面