这个项目是一个springboot的简单实用demo,主要包括了springboot中静态资源的配置和控制器的实现。
项目结构
使用的工具是idea,并且用maven构建项目
静态资源配置
在springboot中静态资源一般都放在resources中。resources中有几个文件夹,我来给大家讲解一下他们的区别。
首先public文件夹是用来存放你的css和js文件的,就是html或者jsp中会引用的css与js资源,如果不放在这个文件夹的话会出现404的错误。在public文件夹中存放的文件是可以直接在url中访问到的。
然后是static文件夹,这个文件夹放主页index.html,如果主页不放在这个文件夹里面的话会找不到主页。
最后就是templates文件夹,这个文件夹翻译过来就是模板,实际上存放的就是控制器跳转过来的页面,如果不放在这里控制器跳转的时候会找不到页面的。这也是我在两个文件夹中都有index.html文件的原因。一个用来当主页,一个用来给控制器跳转使用。
前端页面
我定义了两个前端页面,一个用来添加数据,一个用来显示所有数据,css使用了bootstrap,你可以在bootstrap官网中下载,或者直接用在线的资源 bootstrap下载,不用也没事,用了会让你的页面好看一点。下面我来介绍前端页面代码,其中模板引擎使用的是theamleaf
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书本管理系统</title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="modules/css/bootstrap.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="modules/jquery-3.2.1.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="modules/js/bootstrap.bundle.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="modules/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1>springboot demo</h1>
<h4><a href="selectAll">查询所有图书</a></h4>
<div class="row">
<div class="col-md-8" >
<form class="form-horizontal" action="/add" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">书名</label>
<div class="col-sm-10">
<input name="name" class="form-control" id="inputEmail3" placeholder="请输入书名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">价格</label>
<div class="col-sm-10">
<input name="prize" class="form-control" id="inputPassword3" placeholder="请输入价格">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">添加</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
show.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书本管理系统</title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="modules/css/bootstrap.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="modules/jquery-3.2.1.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="modules/js/bootstrap.bundle.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="modules/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1>springboot demo</h1>
<h4><a href="selectAll">查询所有图书</a></h4>
<div class="row">
<div class="col-md-8" >
<form class="form-horizontal" action="/add" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">书名</label>
<div class="col-sm-10">
<input name="name" class="form-control" id="inputEmail3" placeholder="请输入书名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">价格</label>
<div class="col-sm-10">
<input name="prize" class="form-control" id="inputPassword3" placeholder="请输入价格">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">添加</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
实体类
实体类放在 com.learn.pojo 包下自己定义就好了,一般要和数据库做映射,在这个demo中我没有使用数据库。
我定义的实体类如下,其实就是一个普通的bean
public class Book {
private Integer Id_b;
private String BookName;
private Integer Prize;
public Book(Integer id_b, String bookName, Integer prize) {
Id_b = id_b;
BookName = bookName;
Prize = prize;
}
public Integer getId_b() {
return Id_b;
}
public String getBookName() {
return BookName;
}
public Integer getPrize() {
return Prize;
}
public void setId_b(Integer id_b) {
Id_b = id_b;
}
public void setBookName(String bookName) {
BookName = bookName;
}
public void setPrize(Integer prize) {
Prize = prize;
}
@Override
public String toString() {
return "Book{" +
"Id_b=" + Id_b +
", BookName='" + BookName + '\'' +
", Prize=" + Prize +
'}';
}
}
控制器
控制器的写法是我们这个demo的重点。我们一共写三个控制器映射,分别对应 添加图书, 显示所有图书 和 删除图书 三个功能
下面我们来看代码
@Controller
public class BookController {
//用于记录图书编号
public static int count = 1;
//用于记录图书信息
public static List<Book> list = new ArrayList<>();
//添加图书信息
@RequestMapping(value="/add", method= RequestMethod.POST)
public String addBook(@RequestParam("name") String BookName,
@RequestParam("prize") Integer Prize){
Book book = new Book(count++, BookName, Prize);
list.add(book);
return "index"; //返回到图书添加页面
}
//查询所有图书
@RequestMapping("/selectAll")
public String selectAll(Model model){
model.addAttribute("books", this.list);
return "show";
}
//删除图书信息
@RequestMapping(value = "delete/{id}", method = RequestMethod.GET)
public String deleteById(@PathVariable("id") int id, Model model){
for (Book li : list){
if(li.getId_b()==id){
list.remove(li);
break;
}
}
return "redirect:/selectAll";
}
}
由于没有使用数据库,所以我们使用类的成员变量来存储数据。
添加图书使用的是POST方法接收数据,删除图书使用的是GET方法接收数据。
我认为这三个控制器映射可以当做模板使用,以后在项目中就这么写控制器就完事了。
成果展示
首先是我们添加图书的页面
然后是现实所有图书的页面
当我们点击删除按钮的时候会将相应数据删除并且重新返回这个页面
至此,这个demo就结束啦,希望对你有所帮助