devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：盐析白兔 | 2024-05-31 11:56:54

赞

踩

springboot jpa ajax

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

 

#实体类:

Client:

  1. package com.example.main.classs;
  2.  
  3. import javax.persistence.Column;
  4. import javax.persistence.Entity;
  5. import javax.persistence.GeneratedValue;
  6. import javax.persistence.GenerationType;
  7. import javax.persistence.Id;
  8. import javax.persistence.Table;
  9. @Entity
  10. @Table(name="client")
  11. public class Client {
  12. 	
  13. 	@GeneratedValue(strategy=GenerationType.TABLE)
  14. 	@Id
  15. 	private int id;   //id
  16.  
  17.     
  18. 	private String role="ROLE_CLIENT";
  19. 	
  20. 	public String getRole() {
  21. 		return role;
  22. 	}
  23.  
  24. 	public void setRole(String role) {
  25. 		this.role = role;
  26. 	}
  27.  
  28. 	public int getId() {
  29. 		return id;
  30. 	}
  31.  
  32. 	public void setId(int id) {
  33. 		this.id = id;
  34. 	}
  35. 	private String username;
  36. 	public String getUsername() {
  37. 		return username;
  38. 	}
  39.  
  40. 	public void setUsername(String username) {
  41. 		this.username = username;
  42. 	}
  43.  
  44. 	public String getPassword() {
  45. 		return password;
  46. 	}
  47.  
  48. 	public void setPassword(String password) {
  49. 		this.password = password;
  50. 	}
  51. 	private String password;
  52. 	@Column(nullable=true)
  53. 	private String name;     //客户名字
  54. 	@Column(nullable=true)
  55. 	private int age;        //客户年龄
  56. 	public String getName() {
  57. 		return name;
  58. 	}
  59.  
  60. 	public void setName(String name) {
  61. 		this.name = name;
  62. 	}
  63.  
  64. 	public int getAge() {
  65. 		return age;
  66. 	}
  67.  
  68. 	public void setAge(int age) {
  69. 		this.age = age;
  70. 	}
  71.  
  72. 	public String getAddress() {
  73. 		return address;
  74. 	}
  75.  
  76. 	public void setAddress(String address) {
  77. 		this.address = address;
  78. 	}
  79.  
  80. 	public String getPhone_number() {
  81. 		return phone_number;
  82. 	}
  83.  
  84. 	public void setPhone_number(String phone_number) {
  85. 		this.phone_number = phone_number;
  86. 	}
  87.  
  88. 	public String getSex() {
  89. 		return sex;
  90. 	}
  91.  
  92. 	public void setSex(String sex) {
  93. 		this.sex = sex;
  94. 	}
  95.  
  96. 	@Override
  97. 	public String toString() {
  98. 		return "Client [name=" + name + ", age=" + age + ", address=" + address + ", phone_number=" + phone_number
  99. 				+ ", sex=" + sex + "]";
  100. 	}
  101.  
  102. 	@Column(nullable=true)
  103. 	private String address;       //住址
  104. 	
  105. 	private String phone_number;    //手机号码
  106. 	
  107. 	private String sex;           //年龄
  108. 	
  109. 	public boolean isEmpty() {
  110. 		if(this.address!=null && this.name!=null& this.phone_number!=null && this.sex!=null) return false;
  111. 		return true;
  112. 	}
  113. }

#Dao层:

  1. package com.example.main.dao;
  2.  
  3. import javax.transaction.Transactional;
  4.  
  5. import org.springframework.data.jpa.repository.Modifying;
  6. import org.springframework.data.jpa.repository.Query;
  7.  
  8. import org.springframework.data.repository.Repository;
  9.  
  10. import com.example.main.classs.Client;
  11.  
  12. public interface ajaxRepository extends Repository<Client, Integer> {
  13. 	@Transactional
  14. 	@Modifying
  15. 	@Query(value="delete from Client where id =?1",nativeQuery = true)
  16. 	void aadelete(int id);
  17. 	
  18. 	@Transactional
  19. 	@Modifying
  20. 	@Query(value="update client set address=?5,name=?2,password=?3,sex=?4,age=?7,phone_number=?6 where id=?1",nativeQuery = true)
  21. 	void ajaxedit(int id,String name,String password,String sex,String address,String phonenumber,int age);
  22. 	
  23. }

用的是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层:

  1. package com.example.main.service;
  2.  
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.stereotype.Service;
  5. import org.springframework.util.DigestUtils;
  6.  
  7. import com.example.main.dao.ajaxRepository;
  8.  
  9. @Service
  10. public class ajaxservice {
  11. 	@Autowired
  12. 	private ajaxRepository ajaxrepository;
  13. 	
  14. 	public String ajaxedit(String name,String address,String age,String phone_number,String sex,String id,String password) {
  15. 		int idd=Integer.parseInt(id);
  16. 		int agee=Integer.parseInt(age);
  17. 		String temp=DigestUtils.md5DigestAsHex(password.getBytes());
  18. 		ajaxrepository.ajaxedit(idd, name, temp, sex, address, phone_number, agee);
  19. 		return "success";
  20. 	}
  21. 	
  22. }

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

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

 

#Controller层

  1. package com.example.main.controller;
  2.  
  3. import org.slf4j.Logger;
  4. import org.slf4j.LoggerFactory;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.ui.Model;
  8. import org.springframework.web.bind.annotation.GetMapping;
  9. import org.springframework.web.bind.annotation.PostMapping;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RequestParam;
  12. import org.springframework.web.bind.annotation.ResponseBody;
  13.  
  14. import com.example.main.dao.UserRepository;
  15. import com.example.main.dao.ajaxRepository;
  16. import com.example.main.service.Loginservice;
  17. import com.example.main.service.ajaxservice;
  18.  
  19.  
  20. @Controller
  21. @RequestMapping("/")
  22. public class indexController {
  23. 	private static Logger logger=LoggerFactory.getLogger(indexController.class);
  24. 	
  25. 	
  26. 	@Autowired
  27. 	private ajaxservice Ajaxservice;
  28. 	@Autowired
  29. 	private Loginservice loginservice;
  30. 	
  31. 	@Autowired
  32. 	private ajaxRepository ajax;
  33. 	
  34. 	@Autowired
  35. 	private UserRepository userRepository;
  36. 	@RequestMapping("/index")
  37. 	public String geiindex() {
  38. 		return "jiemian/index";
  39. 	}
  40. 	
  41. 	@RequestMapping("/index2")
  42. 	public String edituser(Model model) {
  43. 		model.addAttribute("info", userRepository.findAll());
  44. 		
  45. 		return "jiemian/index2";
  46. 	}
  47. 	@RequestMapping("/index3")
  48. 	public String deleteuser(Model model) {
  49. 		model.addAttribute("info", userRepository.findAll());
  50. 		return "jiemian/index3";
  51. 	}
  52. 	
  53. 	@RequestMapping("/ceshi")     //测试
  54. 	public String ceshi(Model model) {
  55. 		model.addAttribute("info",userRepository.findAll() );
  56. 		return "jiemian/ceshi";
  57. 		
  58. 	}
  59. 	@GetMapping("/ajax")   //删除
  60. 	@ResponseBody
  61. 	public String ajax(@RequestParam("username") String id) {
  62. 		System.out.println("调用了ajax:"+id);
  63. 		int temp=Integer.parseInt(id);
  64. 		ajax.aadelete(temp);
  65. 		return "heihei";
  66. 	}
  67. 	@PostMapping("/ajax1")   //测试
  68. 	@ResponseBody
  69. 	public String ajax1(@RequestParam("username") String id) {
  70. 		System.out.println("调用了ajax1"+id);
  71. 		return "ajxa1";
  72. 	}
  73. 	@PostMapping("/ajaxadd")  //添加
  74. 	@ResponseBody
  75. 	public String ajaxadd(@RequestParam("name") String name,@RequestParam("username") String username,
  76. 			@RequestParam("password") String password,@RequestParam("age") String age,@RequestParam("sex") String sex,
  77. 			@RequestParam("address") String address,@RequestParam("phonenumber") String phonenumber) {
  78. 		loginservice.add(name, address, age, phonenumber, sex,username,password);
  79. 		return "success";
  80. 	}
  81. 	@PostMapping("/ajaxedit")  //修改
  82. 	@ResponseBody
  83. 	public String ajaxedit(@RequestParam("name") String name,@RequestParam("id") String id,
  84. 			@RequestParam("password") String password,@RequestParam("age") String age,@RequestParam("sex") String sex,
  85. 			@RequestParam("address") String address,@RequestParam("phonenumber") String phonenumber) {
  86. 		logger.info("id:"+id);
  87. 		Ajaxservice.ajaxedit(name, address, age, phonenumber, sex, id, password);
  88. 		return "success";
  89. 		
  90. 	}
  91.  
  92. }

 

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

 

#然后就是Ajax部分

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

  1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2. 		<script>
  3. 			function sumbit(){
  4. 				var name=document.getElementById("name");
  5. 				var username=document.getElementById("username");
  6. 				var password=document.getElementById("password");
  7. 				var age=document.getElementById("age");
  8. 				var address=document.getElementById("address");
  9. 				var sex=document.getElementById("sex");
  10. 				var phonenumber=document.getElementById("phonenumber");
  11. 				$.ajax({
  12. 					type:"POST",
  13. 					url:"/test/ajaxadd",
  14. 					data:{name:name.value,username:username.value,password:password.value,age:age.value,address:address.value,sex:sex.value,phonenumber:phonenumber.value},
  15. 					dataType:'text',
  16. 					success:function(data){
  17. 						alert("添加:"+data);
  18. 						name.value="";
  19. 						username.value="";
  20. 						password.value="";
  21. 						age.value="";
  22. 						address.value="";
  23. 						sex.value="";
  24. 						phonenumber.value="";
  25. 					}
  26. 				});
  27. 			}
  28. 		
  29. 		</script>

html代码:

  1. <table class="table table-bordered text-nowrap mb-0">
  2. 												<thead>
  3. 													<tr>
  4. 														
  5. 														<th>Client Name</th>
  6. 														<th>Client Username</th>
  7. 														<th>Client age</th>
  8. 														<th>Client sex</th>
  9. 														<th>Client Address</th>
  10. 														<th>Client Phone number</th>
  11. 														<th>Client Password</th>
  12. 														
  13. 													</tr>
  14. 												</thead>
  15. 												<tbody>
  16. 							                       <tr>
  17. 							                       		<td><input type="text" id="name"/></td>
  18. 							                       		<td><input type="text" id="username"/></td>
  19. 							                       		<td><input type="text" id="age"/></td>
  20. 							                       		<td><input type="text" id="sex"/></td>
  21. 							                       		<td><input type="text" id="address"/></td>
  22. 							                       		<td><input type="text" id="phonenumber"/></td>
  23. 							                       		<td><input type="password" id="password"/></td>
  24. 							                       		<td ><button type="button" class="btn btn-action btn-primary" id="buttonid" onclick="sumbit()">添加</button></td>
  25. 							                       		
  26. 							                       </tr>
  27. 												</tbody>
  28. 											</table>

 

修改部分的ajax的js代码:

  1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2. 		<script>
  3. 			function show(){
  4. 				var oDiv=document.getElementById("shuru");
  5. 				
  6. 				document.getElementById("edit").disabled = true;
  7. 				oDiv.style.display="block";
  8. 			}
  9. 			function sumbit(id){
  10. 				var name=document.getElementById("name");
  11. 				var password=document.getElementById("password");
  12. 				var age=document.getElementById("age");
  13. 				var address=document.getElementById("address");
  14. 				var sex=document.getElementById("sex");
  15. 				var phonenumber=document.getElementById("phonenumber");
  16. 				$.ajax({
  17. 					type:"POST",
  18. 					dataType:'text',
  19. 					url:"/test/ajaxedit",
  20. 					data:{id:id.value,name:name.value,password:password.value,age:age.value,address:address.value,sex:sex.value,phonenumber:phonenumber.value},
  21. 					success:function(status){
  22. 						alert("修改:"+status);
  23. 						name.value="";
  24. 						password.value="";
  25. 						age.value="";
  26. 						address.value="";
  27. 						sex.value="";
  28. 						phonenumber.value="";
  29. 						document.getElementById("shuru").style.display="none";
  30. 						document.getElementById("edit").disabled = false;
  31. 						window.location.reload();
  32. 						
  33. 					}
  34. 				});
  35. 			}
  36. 			
  37. 		</script>

html代码:

  1. <div class="card-body">
  2. 										<div class="table-responsive">
  3. 											<table class="table table-bordered text-nowrap mb-0">
  4. 												<thead>
  5. 													<tr>
  6. 														<th>Id</th>
  7. 														<th>Client Name</th>
  8. 														<th>Client Username</th>
  9. 														<th>Client age</th>
  10. 														<th>Client sex</th>
  11. 														<th>Client Address</th>
  12. 														<th>Client Phone number</th>
  13. 														<th><div id="shu" style='display:none;'>输入:<input type="text"></div> </th>
  14. 													</tr>
  15. 												</thead>
  16. 												<tbody>
  17. 													<tr th:each ="i:${info}">
  18. 							                           <td th:text = "${i.id}"></td>
  19. 							                           <td th:text = "${i.name}"></td>
  20. 							                           <td th:text = "${i.username}"></td>
  21. 							                           <td th:text = "${i.age}"></td>
  22. 							                           <td th:text = "${i.sex}"></td>
  23. 							                           <td th:text = "${i.address}"></td>
  24. 							                           <td th:text = "${i.phone_number}"></td>
  25. 							                           <td ><button type="button" class="btn btn-action btn-primary" id="edit" onclick="show()"  th:value="${i.id}">编辑</button>
  26. 							                           <button type="button" class="btn btn-action btn-primary" id="sumbit" onclick="sumbit(this)"  th:value="${i.id}">确定</button></td>
  27. 							                       </tr>
  28. 												</tbody>
  29. 											</table>
  30. 											<div id="shuru" style='display:none;'>
  31. 													<table class="table table-bordered text-nowrap mb-0">
  32. 													<tr>
  33. 														<td><input type="text" id="name" placeholder="姓名" ></td>
  34. 														<td><input type="text" id="age" placeholder="年龄" ></td>
  35. 														<td><input type="text" id="address" placeholder="地址" ></td>
  36. 														<td><input type="text" id="phonenumber" placeholder="手机号" ></td>
  37. 														<td><input type="text" id="sex" placeholder="性别" ></td>
  38. 														<td><input type="password" id="password" placeholder="密码 " ></td>
  39. 													</tr>
  40. 													</table>
  41. 												</div>
  42. 										</div>
  43. 									</div>

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

 

删除的ajax的js代码：

  1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2. 		<script>
  3. 		function loadXMLDoc(field)
  4. 		{
  5. 			var xmlhttp;
  6. 			
  7. 			if (window.XMLHttpRequest)
  8. 			{
  9. 				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  10. 				xmlhttp=new XMLHttpRequest();
  11. 			}
  12. 			else
  13. 			{
  14. 				// IE6, IE5 浏览器执行代码
  15. 				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  16. 			}
  17. 			xmlhttp.onreadystatechange=function()
  18. 			{
  19. 				if (xmlhttp.readyState==4 && xmlhttp.status==200)
  20. 				{
  21. 				
  22. 					alert("删除成功");
  23. 					window.location.reload();
  24. 					
  25. 				}
  26. 			}
  27. 			var url="/test/ajax?username=";
  28. 			url=encodeURI(url);
  29. 			
  30. 			xmlhttp.open("GET",url+encodeURIComponent(field.value),true);
  31. 			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  32. 			xmlhttp.send();
  33. 		}
  34. 		</script>

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

Html代码:

  1. <div class="row">
  2. 							<div class="col-12 col-sm-12">
  3. 								<div class="card">
  4. 									<div class="card-header">
  5. 										<h4>Product Summary</h4>
  6. 									</div>
  7. 									<div class="card-body">
  8. 										<div class="table-responsive">
  9. 											<table class="table table-bordered text-nowrap mb-0">
  10. 												<thead>
  11. 													<tr>
  12. 														<th>Id</th>
  13. 														<th>Client Name</th>
  14. 														<th>Client Username</th>
  15. 														<th>Client age</th>
  16. 														<th>Client sex</th>
  17. 														<th>Client Address</th>
  18. 														<th>Client Phone number</th>
  19. 													</tr>
  20. 												</thead>
  21. 												<tbody>
  22. 													<tr th:each ="i:${info}">
  23. 							                           <td th:text = "${i.id}"></td>
  24. 							                           <td th:text = "${i.name}"></td>
  25. 							                           <td th:text = "${i.username}"></td>
  26. 							                           <td th:text = "${i.age}"></td>
  27. 							                           <td th:text = "${i.sex}"></td>
  28. 							                           <td th:text = "${i.address}"></td>
  29. 							                           <td th:text = "${i.phone_number}"></td>
  30. 							                           <td ><button type="button" class="btn btn-action btn-primary" id="buttonid" onclick="loadXMLDoc(this)"  th:value="${i.id}">删除</button></td>
  31. 							                       </tr>
  32. 												</tbody>
  33. 											</table>
  34. 										</div>
  35. 									</div>
  36. 								</div>
  37. 							</div>
  38. 						</div>

 

效果图：登录:

界面图：

右上角显示登录用户名，当然，左边也有。

修改用户:

源码下载传送门

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/652183
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号