Springboot+Jpa+Ajax完成异步用户添加删除修改功能（超详细）

最新推荐文章于 2023-07-31 14:35:13 发布

庸人自扰61

最新推荐文章于 2023-07-31 14:35:13 发布

阅读量3.1k

点赞数 2

分类专栏： Spring JPA JavaWeb Security 文章标签： Springboot Ajax Jpa

本文链接：https://blog.csdn.net/woshilishu/article/details/89351894

版权

Spring 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaWeb

4 篇文章 0 订阅

订阅专栏

JPA

2 篇文章 0 订阅

订阅专栏

#说实话，我前端真的很一般，所以做这个要用js，css,我算是跌跌撞撞过来的...不过总算完成了

#实体类:

Client:

package com.example.main.classs;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name="client")
public class Client {
	
	@GeneratedValue(strategy=GenerationType.TABLE)
	@Id
	private int id;   //id

    
	private String role="ROLE_CLIENT";
	
	public String getRole() {
		return role;
	}

	public void setRole(String role) {
		this.role = role;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}
	private String username;
	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}
	private String password;
	@Column(nullable=true)
	private String name;     //客户名字
	@Column(nullable=true)
	private int age;        //客户年龄
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	public String getPhone_number() {
		return phone_number;
	}

	public void setPhone_number(String phone_number) {
		this.phone_number = phone_number;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}

	@Override
	public String toString() {
		return "Client [name=" + name + ", age=" + age + ", address=" + address + ", phone_number=" + phone_number
				+ ", sex=" + sex + "]";
	}

	@Column(nullable=true)
	private String address;       //住址
	
	private String phone_number;    //手机号码
	
	private String sex;           //年龄
	
	public boolean isEmpty() {
		if(this.address!=null && this.name!=null& this.phone_number!=null && this.sex!=null) return false;
		return true;
	}
}

#Dao层:

package com.example.main.dao;

import javax.transaction.Transactional;

import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;

import org.springframework.data.repository.Repository;

import com.example.main.classs.Client;

public interface ajaxRepository extends Repository<Client, Integer> {
	@Transactional
	@Modifying
	@Query(value="delete from Client where id =?1",nativeQuery = true)
	void aadelete(int id);
	
	@Transactional
	@Modifying
	@Query(value="update client set address=?5,name=?2,password=?3,sex=?4,age=?7,phone_number=?6 where id=?1",nativeQuery = true)
	void ajaxedit(int id,String name,String password,String sex,String address,String phonenumber,int age);
	
}

用的是Jpa，所以只需要创建一个接口类，实现Repository类就可以了。

我写了两个函数，aadelte(int id):这个函数是根据id删除用户，前端点击按钮，按钮的value值是id值，然后再从前端传过来。

ajaxedit(int id,String name,String password,String sex,String address,String phonenumber,int age):传回来要修改的id值，及要修改的数据。

#Service层:

package com.example.main.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.DigestUtils;

import com.example.main.dao.ajaxRepository;

@Service
public class ajaxservice {
	@Autowired
	private ajaxRepository ajaxrepository;
	
	public String ajaxedit(String name,String address,String age,String phone_number,String sex,String id,String password) {
		int idd=Integer.parseInt(id);
		int agee=Integer.parseInt(age);
		String temp=DigestUtils.md5DigestAsHex(password.getBytes());
		ajaxrepository.ajaxedit(idd, name, temp, sex, address, phone_number, agee);
		return "success";
	}
	
}

呃..service层偷懒了，按理说，应该有删除，修改和添加。但是删除的话我是直接在controller调了dao层。。大家别学我。

然后添加的话，我使用了注册用户的那个接口。只有修改是重新写了一个service。

#Controller层

package com.example.main.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.main.dao.UserRepository;
import com.example.main.dao.ajaxRepository;
import com.example.main.service.Loginservice;
import com.example.main.service.ajaxservice;


@Controller
@RequestMapping("/")
public class indexController {
	private static Logger logger=LoggerFactory.getLogger(indexController.class);
	
	
	@Autowired
	private ajaxservice Ajaxservice;
	@Autowired
	private Loginservice loginservice;
	
	@Autowired
	private ajaxRepository ajax;
	
	@Autowired
	private UserRepository userRepository;
	@RequestMapping("/index")
	public String geiindex() {
		return "jiemian/index";
	}
	
	@RequestMapping("/index2")
	public String edituser(Model model) {
		model.addAttribute("info", userRepository.findAll());
		
		return "jiemian/index2";
	}
	@RequestMapping("/index3")
	public String deleteuser(Model model) {
		model.addAttribute("info", userRepository.findAll());
		return "jiemian/index3";
	}
	
	@RequestMapping("/ceshi")     //测试
	public String ceshi(Model model) {
		model.addAttribute("info",userRepository.findAll() );
		return "jiemian/ceshi";
		
	}
	@GetMapping("/ajax")   //删除
	@ResponseBody
	public String ajax(@RequestParam("username") String id) {
		System.out.println("调用了ajax:"+id);
		int temp=Integer.parseInt(id);
		ajax.aadelete(temp);
		return "heihei";
	}
	@PostMapping("/ajax1")   //测试
	@ResponseBody
	public String ajax1(@RequestParam("username") String id) {
		System.out.println("调用了ajax1"+id);
		return "ajxa1";
	}
	@PostMapping("/ajaxadd")  //添加
	@ResponseBody
	public String ajaxadd(@RequestParam("name") String name,@RequestParam("username") String username,
			@RequestParam("password") String password,@RequestParam("age") String age,@RequestParam("sex") String sex,
			@RequestParam("address") String address,@RequestParam("phonenumber") String phonenumber) {
		loginservice.add(name, address, age, phonenumber, sex,username,password);
		return "success";
	}
	@PostMapping("/ajaxedit")  //修改
	@ResponseBody
	public String ajaxedit(@RequestParam("name") String name,@RequestParam("id") String id,
			@RequestParam("password") String password,@RequestParam("age") String age,@RequestParam("sex") String sex,
			@RequestParam("address") String address,@RequestParam("phonenumber") String phonenumber) {
		logger.info("id:"+id);
		Ajaxservice.ajaxedit(name, address, age, phonenumber, sex, id, password);
		return "success";
		
	}

}

每个controller我都写了注释，应该不难理解。我这里没写判断的，实际中最好写上判断，也就是数据库是否真的操作成功。

#然后就是Ajax部分

#添加用户的ajax的js代码:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			function sumbit(){
				var name=document.getElementById("name");
				var username=document.getElementById("username");
				var password=document.getElementById("password");
				var age=document.getElementById("age");
				var address=document.getElementById("address");
				var sex=document.getElementById("sex");
				var phonenumber=document.getElementById("phonenumber");
				$.ajax({
					type:"POST",
					url:"/test/ajaxadd",
					data:{name:name.value,username:username.value,password:password.value,age:age.value,address:address.value,sex:sex.value,phonenumber:phonenumber.value},
					dataType:'text',
					success:function(data){
						alert("添加:"+data);
						name.value="";
						username.value="";
						password.value="";
						age.value="";
						address.value="";
						sex.value="";
						phonenumber.value="";
					}
				});
			}
		
		</script>

html代码:

<table class="table table-bordered text-nowrap mb-0">
												<thead>
													<tr>
														
														<th>Client Name</th>
														<th>Client Username</th>
														<th>Client age</th>
														<th>Client sex</th>
														<th>Client Address</th>
														<th>Client Phone number</th>
														<th>Client Password</th>
														
													</tr>
												</thead>
												<tbody>
							                       <tr>
							                       		<td><input type="text" id="name"/></td>
							                       		<td><input type="text" id="username"/></td>
							                       		<td><input type="text" id="age"/></td>
							                       		<td><input type="text" id="sex"/></td>
							                       		<td><input type="text" id="address"/></td>
							                       		<td><input type="text" id="phonenumber"/></td>
							                       		<td><input type="password" id="password"/></td>
							                       		<td ><button type="button" class="btn btn-action btn-primary" id="buttonid" onclick="sumbit()">添加</button></td>
							                       		
							                       </tr>
												</tbody>
											</table>

修改部分的ajax的js代码:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			function show(){
				var oDiv=document.getElementById("shuru");
				
				document.getElementById("edit").disabled = true;
				oDiv.style.display="block";
			}
			function sumbit(id){
				var name=document.getElementById("name");
				var password=document.getElementById("password");
				var age=document.getElementById("age");
				var address=document.getElementById("address");
				var sex=document.getElementById("sex");
				var phonenumber=document.getElementById("phonenumber");
				$.ajax({
					type:"POST",
					dataType:'text',
					url:"/test/ajaxedit",
					data:{id:id.value,name:name.value,password:password.value,age:age.value,address:address.value,sex:sex.value,phonenumber:phonenumber.value},
					success:function(status){
						alert("修改:"+status);
						name.value="";
						password.value="";
						age.value="";
						address.value="";
						sex.value="";
						phonenumber.value="";
						document.getElementById("shuru").style.display="none";
						document.getElementById("edit").disabled = false;
						window.location.reload();
						
					}
				});
			}
			
		</script>

html代码:

<div class="card-body">
										<div class="table-responsive">
											<table class="table table-bordered text-nowrap mb-0">
												<thead>
													<tr>
														<th>Id</th>
														<th>Client Name</th>
														<th>Client Username</th>
														<th>Client age</th>
														<th>Client sex</th>
														<th>Client Address</th>
														<th>Client Phone number</th>
														<th><div id="shu" style='display:none;'>输入:<input type="text"></div> </th>
													</tr>
												</thead>
												<tbody>
													<tr th:each ="i:${info}">
							                           <td th:text = "${i.id}"></td>
							                           <td th:text = "${i.name}"></td>
							                           <td th:text = "${i.username}"></td>
							                           <td th:text = "${i.age}"></td>
							                           <td th:text = "${i.sex}"></td>
							                           <td th:text = "${i.address}"></td>
							                           <td th:text = "${i.phone_number}"></td>
							                           <td ><button type="button" class="btn btn-action btn-primary" id="edit" onclick="show()"  th:value="${i.id}">编辑</button>
							                           <button type="button" class="btn btn-action btn-primary" id="sumbit" onclick="sumbit(this)"  th:value="${i.id}">确定</button></td>
							                       </tr>
												</tbody>
											</table>
											<div id="shuru" style='display:none;'>
													<table class="table table-bordered text-nowrap mb-0">
													<tr>
														<td><input type="text" id="name" placeholder="姓名" ></td>
														<td><input type="text" id="age" placeholder="年龄" ></td>
														<td><input type="text" id="address" placeholder="地址" ></td>
														<td><input type="text" id="phonenumber" placeholder="手机号" ></td>
														<td><input type="text" id="sex" placeholder="性别" ></td>
														<td><input type="password" id="password" placeholder="密码 " ></td>
													</tr>
													</table>
												</div>
										</div>
									</div>

这个要说一下，编辑那一行先是隐藏的，只有点击编辑按钮才会显示，点击完编辑按钮以后，编辑按钮自动变灰色不可用。点击确定之后修改生效，编辑那一行自动隐藏，编辑按钮重新可用。页面刷新。要做到这个效果我可真是百度了巨久。。

删除的ajax的js代码：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
		function loadXMLDoc(field)
		{
			var xmlhttp;
			
			if (window.XMLHttpRequest)
			{
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp=new XMLHttpRequest();
			}
			else
			{
				// IE6, IE5 浏览器执行代码
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function()
			{
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
				
					alert("删除成功");
					window.location.reload();
					
				}
			}
			var url="/test/ajax?username=";
			url=encodeURI(url);
			
			xmlhttp.open("GET",url+encodeURIComponent(field.value),true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.send();
		}
		</script>

呃。。之前的两个是用JQuery写的，这个不是，就将就看吧，正好如果看不懂JQuery还能看这个，毕竟之前的我就是看不懂JQuery。。

Html代码:

<div class="row">
							<div class="col-12 col-sm-12">
								<div class="card">
									<div class="card-header">
										<h4>Product Summary</h4>
									</div>
									<div class="card-body">
										<div class="table-responsive">
											<table class="table table-bordered text-nowrap mb-0">
												<thead>
													<tr>
														<th>Id</th>
														<th>Client Name</th>
														<th>Client Username</th>
														<th>Client age</th>
														<th>Client sex</th>
														<th>Client Address</th>
														<th>Client Phone number</th>
													</tr>
												</thead>
												<tbody>
													<tr th:each ="i:${info}">
							                           <td th:text = "${i.id}"></td>
							                           <td th:text = "${i.name}"></td>
							                           <td th:text = "${i.username}"></td>
							                           <td th:text = "${i.age}"></td>
							                           <td th:text = "${i.sex}"></td>
							                           <td th:text = "${i.address}"></td>
							                           <td th:text = "${i.phone_number}"></td>
							                           <td ><button type="button" class="btn btn-action btn-primary" id="buttonid" onclick="loadXMLDoc(this)"  th:value="${i.id}">删除</button></td>
							                       </tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>

效果图：登录: