Springboot+Sqlite+Jpa—完成数据库数据在前端页面增删改
·
根据项目需要设计相应实体类
本项目想利用管理员信息管理为例,实现Springboot、Sqlite、Jpa三者结合。所以本项目创建管理员类,以后会增加其他类练习!
import org.springframework.boot.autoconfigure.data.jpa.JpaRepositoriesAutoConfiguration;
import javax.persistence.*;
@Entity
@Table(name = "admin")
public class Admin extends JpaRepositoriesAutoConfiguration {
@Id
@GeneratedValue
@Column(name = "id")
public Integer id;
public String name;
public String password;
public Admin() {
}
public Admin(Integer id, String name, String password) {
this.id = id;
this.name = name;
this.password = password;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "admin{" +
"id=" + id +
", name='" + name + '\'' +
", password='" + password + '\'' +
'}';
}
}
自定义Repository创建方法
本项目想要使用JPA,必须有Repository方法来集成。由于JPA抛弃了Sqlite数据库的相关方法,所以方法都需要自己设定。
import com.shop.sma.entity.Admin;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;
import javax.transaction.Transactional;
@Repository
@Transactional
public interface AdminRepository extends JpaRepository<Admin, Integer> {
@Query(value = "select * from admin where name=?1 and password=?2", nativeQuery = true)
public Admin findAdminByName(String name, String password);
@Query(value = "insert into admin(name,password) values(?1, ?2)", nativeQuery = true)
@Modifying
public int adminInsert(String name, String password);
@Query(value = "update admin set password=?1 where name=?2", nativeQuery = true)
@Modifying
public int adminUpdate(String password, String name);
@Query(value = "update admin set name=?1,password=?2 where id=?3", nativeQuery = true)
@Modifying
public int adminEditById(String name, String password, Integer id);
}
Controller层数据处理
本次小项目的Controller层负责Sqlite数据库与前端页面数据交互,并将数据段放入某个特定方法进行应有的处理。
import com.shop.sma.entity.Admin;
import com.shop.sma.mapper.AdminRepository;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@Controller
@RequestMapping("/admin")
public class AdminController {
@Autowired
AdminRepository adminRepository;
private Logger logger = LoggerFactory.getLogger(AdminController.class);
@RequestMapping("/forgetPwd")
public String edPage() {
return "/admin/edit";
}
@RequestMapping("/edit2")
public String edPage2() {
return "/admin/edit2";
}
@RequestMapping("/todolist")
@ResponseBody
public void getAdminList(HttpServletResponse response) throws IOException {
List<Admin> adminlist = adminRepository.findAll();
PrintWriter out = response.getWriter(); //向客户端发送字符数据
response.setContentType("text/text"); //设置请求以及响应的内容类型以及编码方式
response.setCharacterEncoding("UTF-8");
JSONArray json = JSONArray.fromObject(adminlist); //将newsList对象转换为json对象
String str = json.toString(); //将json对象转换为字符串
out.write(str); //将str字符传输到前台
}
@PostMapping(value = "/toed")
@ResponseBody
public String toed(@RequestBody Admin temp) {
logger.info(temp.getPassword() + " " + temp.getName());
int num = adminRepository.adminUpdate(temp.getPassword(), temp.getName());
logger.info(num + "");
JSONObject jsonObject = new JSONObject();
if (num != 0) {
logger.info("运行到result==1");
jsonObject.put("result", 1);
} else {
logger.info("运行到result==0");
jsonObject.put("result", 0);
}
return jsonObject.toString();
}
@RequestMapping(value = "/del", method = RequestMethod.POST)
@ResponseBody
public void del(@RequestBody Admin temp) {
logger.info(temp.getName() + " " + temp.getPassword());
adminRepository.delete(temp);
}
@RequestMapping(value = "/toed2", method = RequestMethod.POST)
@ResponseBody
public String edit2(@RequestBody Admin admin, HttpServletResponse response) throws IOException {
logger.info(admin.getId() + " " + admin.getPassword() + " " + admin.getName());
int num = adminRepository.adminEditById(admin.getName(), admin.getPassword(), admin.getId());
logger.info(num + "");
JSONObject jsonObject = new JSONObject();
if (num != 0) {
logger.info("运行到result==1");
jsonObject.put("result", 1);
} else {
logger.info("运行到result==0");
jsonObject.put("result", 0);
}
return jsonObject.toString();
}
}
前端页面处理
前端页面主要是让使用者通过页面环节完成数据操控,本项目就节约。一行数据后,带着添加、删除、修改按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员信息管理界面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="/reg">添加管理员</a>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tables">
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "/admin/todolist",//请求地址
dataType: "json",//数据格式
type: "post",//请求方式
async: false,//是否异步请求
success: function (data) { //如何发送成功
$(data).each(function (i, ls) { //遍历data数组
var idTd=$("<td></td>").append(ls.id);
var nameTd=$("<td></td>").append(ls.name);
var passwordTd=$("<td></td>").append(ls.password);
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
delBtn.attr("del-id",ls.id);
var editBtn = $("<button></button>").addClass("btn btn-danger btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("编辑");
editBtn.attr("edit-id",ls.id);
var btnTd = $("<td></td>").append(delBtn).append(editBtn);
$("<tr></tr>").append(idTd).append(nameTd).append(passwordTd).append(btnTd).appendTo("#tables")
})
},
})
})
$(document).on("click",".edit_btn",function(){
var id = $(this).attr("edit-id");
window.location.href="/admin/edit2?id="+id;
});
$(document).on("click",".delete_btn",function(){
var id = $(this).attr("del-id");
var name = $(this).parents("tr").find("td:eq(1)").text();
var password = $(this).parents("tr").find("td:eq(2)").text();
var jsonStr = {id:id,name: name, password: password}
var temp=JSON.stringify(jsonStr);
if(confirm("确认删除【"+name+"】吗?")){
//点击确认发送ajax请求
$.ajax({
url:"/admin/del",
type:"post",
dataType:"json",
data:temp,
contentType:'application/json;charset=UTF-8',
success:function(){
alert("删除成功");
}
});
}
});
</script>
</body>
</html>
本项目编辑按钮,会跳转到新页面完成编辑。代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<script type="text/javascript">
function edit() {
var url=window.location.search;
var oltid=url.substr(url.indexOf("=")+1);
alert(oltid);
var name = $("#name").val();
var password = $("#password").val();
var json = {id:oltid,password: password,name: name};
$.ajax({
type: "post",
dataType: "json",
url: "/admin/toed2",
async: true,
data:JSON.stringify(json),
contentType : "application/json",
error: function () {
alert("系统错误");
},
success: function (data) {
if (data.result== "1") {
alert("修改成功");
window.location.href="/admin/list";
} else if (data.result == "0") {
alert("修改错误");
}
}
})
}
</script>
<body>
<form enctype="multipart/form-data">
<label>姓名</label> <input id="name" name="name" type="text">
<label>密码</label> <input id="password" name="password" type="password">
<button onclick="edit()" type="button">修改</button>
</form>
</body>
</html>
结语
不是所有的数据库操作都可以用JPA代替,比如说本文说的Sqlite。在使用JPA时,一定视情况使用。
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)