Springboot+Jpa+Ajax完成异步用户添加删除修改功能（超详细）
#说实话，我前端真的很一般，所以做这个要用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 {
@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代码:
html代码:
Client Name
Client Username
Client age
Client sex
Client Address
Client Phone number
Client Password
修改部分的ajax的js代码:
html代码:
Id
Client Name
Client Username
Client age
Client sex
Client Address
Client Phone number
这个要说一下，编辑那一行先是隐藏的，只有点击编辑按钮才会显示，点击完编辑按钮以后，编辑按钮自动变灰色不可用。点击确定之后修改生效，编辑那一行自动隐藏，编辑按钮重新可用。页面刷新。 要做到这个效果我可真是百度了巨久。。
删除的ajax的js代码：
呃。。之前的两个是用JQuery写的，这个不是，就将就看吧，正好如果看不懂JQuery还能看这个，毕竟之前的我就是看不懂JQuery。。
Html代码:
Product Summary
Id
Client Name
Client Username
Client age
Client sex
Client Address
Client Phone number
效果图：登录:
界面图：
右上角显示登录用户名，当然，左边也有。
修改用户:
源码下载传送门