Java学习记录,仅供参考
使用到的技术如下
前端:HTML,JavaScript,CSS,JQuery,AJAX
后端:SpringBoot
后端,首先在IDEA中建立一个Springboot项目,新建一个Book实体类
package com.test.bookmanage.Entity;
public class Book {
private Integer id;
private String name;
private String author;
public void setId(Integer id) {
this.id = id;
}
public Integer getId() {
return id;
}
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setAuthor(String author) {
this.author = author;
}
public String getAuthor() {
return author;
}
@Override
public String toString() {
return "Book{" +
"id=" + id +
", name='" + name + '\'' +
", author='" + author + '\'' +
'}';
}
}
创建BookService层,用于编写业务逻辑
import com.test.bookmanage.Entity.Book;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
import java.util.Map;
@Service
public class BookService {
@Resource
JdbcTemplate jdbcTemplate; //使用JdbcTemplate实现对数据库增删查改
//图书列表
public List<Map<String, Object>> bookList() {
String sql = "select * from book1";
List<Map<String, Object>> list = jdbcTemplate.queryForList(sql);
return list;
}
//增
public void create(Book book) {
String sql = "insert into book1(name,author) values('" + book.getName() + "','" + book.getAuthor() + "')";
jdbcTemplate.update(sql);
}
//删
public void deleteById(int id) {
String sql = "delete from book1 where id=?";
this.jdbcTemplate.update(sql, id);
}
//查
public Map<String, Object> queryById(int id) {
try { //捕获查询id在数据库中不存在时map对象为空的异常
String sql = "select * from book1 where id =?";
Map<String, Object> map = jdbcTemplate.queryForMap(sql, id);
return map;
} catch (Exception e) {
return null;
}
}
//改
public void update(Book book) {
this.jdbcTemplate.update("update book1 set name='" + book.getName() + "',author='" + book.getAuthor() + "' where id=" + book.getId() + "");
}
}
创建BookController层,用于调用BookService方法,并与前端连接
package com.test.bookmanage.controller;
import com.test.bookmanage.Entity.Book;
import com.test.bookmanage.service.BookService;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/book")
public class BookController {
@Resource
private BookService bookService;
//图书列表
@GetMapping("/list")
public List<Map<String, Object>> list() {
return bookService.bookList();
}
//增
@PostMapping("/create")
public String createBook(@RequestBody Book book) {
bookService.create(book);
return "create success";
}
//删
@DeleteMapping("/delete/{id}")
public String deleteBook(@PathVariable int id) {
bookService.deleteById(id);
return "delete success";
}
//查
@GetMapping("/query/{id}")
public Map<String, Object> queryBook(@PathVariable int id) {
return bookService.queryById(id);
}
//改
@PostMapping("/update")
public String updateBook(@RequestBody Book book) {
bookService.update(book);
return "update success";
}
}
前端,在资源模板下新建一个index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>主界面</title>
<style>
body {
background-color: #D9DADF;
color: black;
}
table {
text-align: center;
}
</style>
</head>
<body>
<h1 align="center">图书管理</h1>
<div id="div1">
<form id="form" align="center">
<p id="p">查询图书:<input type="text" id="id" placeholder="请输入图书编号">
<input type="button" value="提交" id="queryBook">
</p>
</form>
</div>
<div id="div2">
<form align="center">
<p>添加图书:<input type="text" id="name" placeholder="请输入书名">
<input type="text" id="author" placeholder="请输入作者">
<input type="button" value="添加" id="createBook">
</p>
</form>
</div>
<div id="div3">
<form align="center">
<p>修改图书:<input type="text" id="name2" placeholder="请输入书名">
<input type="text" id="author2" placeholder="请输入作者">
<input type="button" value="确定" id="updateBook">
</p>
</form>
</div>
<div id="div4">
<table id="table" border="2" width="30%" cellspacing="0" align="center">
<tr>
<th>编号</th>
<th>图书名称</th>
<th>作者</th>
<th>操作</th>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//图书列表界面
$.get("http://localhost:8082/book/list", function (data) {
console.log(data)
for (var i = 0; i < data.length; i++) {
$("table").append(
"<tr class='trtd'><td>" + data[i].id +
"</td><td>" + data[i].name +
"</td><td>" + data[i].author +
"</td><td>" + "<a href='#' onclick='UpdateBook(this)'>修改</a>|<a href='#' onclick=DeleteBook(this)>删除</a></td></tr>"
)
}
});
//增加图书
$("#createBook").click(function () {
var Book = {
"name": $("#name").val(),
"author": $("#author").val()
}
console.log(Book)
//判断输入的值是否为空或者空字符串
if ($("#name").val() == null || $("#name").val() === "" && $("#author").val() == null || $("#author").val() === "") {
alert("书名和作者不能为空")
} else {
$.ajax({
type: "POST",
url: "/book/create",
data: JSON.stringify(Book), //将JavaScript对象转换为字符串
contentType: "application/json", //发送给服务器的数据格式
success: function (data) {
console.log(data);
location.reload(); //location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。reload()方法用于刷新当前文档。
}
})
}
});
//删除图书
function DeleteBook(BookID) {
var id = $(BookID).parent().parent().children(":first").text();
console.log(id);
$.ajax({
type: "DELETE",
url: "/book/delete/" + id,
success: function (data) {
console.log(data);
location.reload();
}
}
)
}
//查询图书
$("#queryBook").click(function () {
var id = $("#id").val()
console.log(id);
$.get("/book/query/" + id, function (data) {
console.log(data);
$("tr").remove(".trtd"); //清空图书列表,查询图书时只展示对应查询记录
if (data === '') {
alert("对应编号的图书不存在!");
} else {
$("#table").append(
"<tr><td>" + data.id +
"</td><td>" + data.name +
"</td><td>" + data.author +
"</td><td>" + "<a href='#' onclick='UpdateBook(this)'>修改</a>|<a href='#' onclick='DeleteBook(this)'>删除</a></td></tr>")
}
}
)
});
//修改图书
function UpdateBook(BookID) {
var id = $(BookID).parent().parent().children(":first").text();
var name = $(BookID).parent().parent().children(":first").next().text();
var author = $(BookID).parent().parent().children(":first").next().next().text();
$('#name2').val(name);
$('#author2').val(author);
console.log(name + " " + author);
$("#updateBook").click(function () {
var updateBook = {
"id": id,
"name": $("#name2").val(),
"author": $("#author2").val()
}
if ($("#name2").val() == null || $("#name2").val() === "" && $("#author2").val() == null || $("#author2").val() === "") {
alert("书名和作者不能为空")
} else {
$.ajax({
type: 'POST',
url: "/book/update",
data: JSON.stringify(updateBook),
contentType: 'application/json',
success: function (data) {
console.log(data);
location.reload();
}
})
}
})
}
</script>
</body>
</html>
效果展示,在浏览器输入localhost加端口号就可以访问了
水平有限,页面过于简陋哈
新手学习记录,不足之处肯定蛮多,请谅解指正!