JPA官方文档：https://docs.spring.io/spring-data/jpa/docs/2.2.6.RELEASE/reference/html/
Spring Data JPA/MongoDB 基于方法名的查询
官方文档：https://docs.spring.io/spring-data/jpa/docs/2.2.6.RELEASE/reference/html/#repository-query-keywords
interface PersonRepository extends CrudRepository<Person, Long> {
// 约定优于配置
// 方法名就是查询的过滤条件或排序规则
List<Person> findByEmailAddressAndLastname(EmailAddress emailAddress, String lastname);
// Enables the distinct flag for the query
List<Person> findDistinctPeopleByLastnameOrFirstname(String lastname, String firstname);
List<Person> findPeopleDistinctByLastnameOrFirstname(String lastname, String firstname);
// Enabling ignoring case for an individual property
List<Person> findByLastnameIgnoreCase(String lastname);
// Enabling ignoring case for all suitable properties
List<Person> findByLastnameAndFirstnameAllIgnoreCase(String lastname, String firstname);
// Enabling static ORDER BY for a query
List<Person> findByLastnameOrderByFirstnameAsc(String lastname);
List<Person> findByLastnameOrderByFirstnameDesc(String lastname);
}属性表达式
// 方案一
List<Person> findByAddressZipCode(ZipCode zipCode);
// 方案二
List<Person> findByAddress_ZipCode(ZipCode zipCode);为了让小伙伴对JPA更快的理解，上代码！！！
选择程序所需要的依赖：
工程目录：
application.properties（配置文件）
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/jpa?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.http.log-request-details=true
logging.level.web=debug
#JPA
#根据实体（POJO）的注解自动生成 SQL DDL 创建表结构
spring.jpa.generate-ddl=true
#显示底层执行的 SQL 语句
spring.jpa.show-sql=true
这些配置文件会根据实体类自动创建表结构，因为这是JAP的特性之一，想了解JPA的特性的小伙伴，可以去https://blog.csdn.net/weixin_44364444/article/details/105515793，里面有详细讲到。
Dept.java
package com.newer.jpa2.pojo;
/**
* 部门
*/
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 = "dept")
public class Dept {
/**
* 主键字段，数据库中生成的值，策略IDENTITY（MySQL自动增长）
*/
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "title")
private String title;
@Column(name = "loc")
private String loc;
public Dept() {
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getLoc() {
return loc;
}
public void setLoc(String loc) {
this.loc = loc;
}
@Override
public String toString() {
return "Dept [id=" + id + ", title=" + title + ", loc=" + loc + "]";
}
}
Job.java
package com.newer.jpa2.pojo;
/**
* 职位
*/
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 = "job")
public class Job {
/**
* 主键字段，数据库中生成的值，策略IDENTITY（MySQL自动增长）
*/
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "title")
private String title;
@Column(name = "info")
private String info;
public Job() {
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getInfo() {
return info;
}
public void setInfo(String info) {
this.info = info;
}
@Override
public String toString() {
return "Job [id=" + id + ", title=" + title + ", info=" + info + "]";
}
}
Staff.java
package com.newer.jpa2.pojo;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.OneToOne;
/**
* 实体（JPA)
* @author Admin
*
*/
@Entity
public class Staff {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
Long id;
String name;
String phone;
@OneToOne
@JoinColumn(referencedColumnName = "id")
Dept dept;
@OneToOne
@JoinColumn(referencedColumnName = "id")
Job job;
public Staff() {
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public Dept getDept() {
return dept;
}
public void setDept(Dept dept) {
this.dept = dept;
}
public Job getJob() {
return job;
}
public void setJob(Job job) {
this.job = job;
}
@Override
public String toString() {
return "Staff [id=" + id + ", name=" + name + ", phone=" + phone + ", dept=" + dept + ", job=" + job + "]";
}
}
Repository里面的是数据访问。
DeptRepository.java
package com.newer.jpa2.repository;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.newer.jpa2.pojo.Dept;
@Repository
public interface DeptRepository extends JpaRepository<Dept, Long> {
// CRUD,分页，排序基本操作已实现了
// 遵守了Spring Data定义的一套方法命名的约定，在底层基于反射技术生成SQL语句
/**
* 自定义的条件查询
* @param loc 办公地点
* @return 位于某个地点的部门
*/
List<Dept> findByLoc(String loc);
}
JobRepository.java
package com.newer.jpa2.repository;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.newer.jpa2.pojo.Job;
@Repository
public interface JobRepository extends JpaRepository<Job, Long>{
}
StaffRepository.java（重点）
package com.newer.jpa2.repository;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.newer.jpa2.pojo.Dept;
import com.newer.jpa2.pojo.Job;
import com.newer.jpa2.pojo.Staff;
@Repository
public interface StaffRepository extends JpaRepository<Staff, Long> {
/**
* 自定义的根据名字查询
* @param name
* @return
*/
List<Staff> findByNameLikeAndPhoneLikeAndDept_LocLikeAndDept_TitleLikeAndJob_TitleLike(String name,String phone,String loc,String title1,String title);
}
下面的是数据持久化储存。
DeptController.java
package com.newer.jpa2.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.newer.jpa2.pojo.Dept;
import com.newer.jpa2.repository.DeptRepository;
@RestController
@RequestMapping("/api/dept")
public class DeptController {
@Autowired
DeptRepository deptRepository;
@GetMapping("/")
public List<Dept> find(@RequestParam(name = "loc",required =true )String loc){
return deptRepository.findByLoc(loc);
}
@GetMapping
public List<Dept> findAll(){
return deptRepository.findAll();
}
@PostMapping
public Dept save(@RequestBody Dept dept) {
return deptRepository.save(dept);
}
@GetMapping("/{id}")
public Dept load(@PathVariable Long id) {
return deptRepository.findById(id).get();
}
@DeleteMapping("{id}")
public void remove(@PathVariable Long id) {
deptRepository.deleteById(id);
}
@PutMapping("{id}")
public Dept updata(@PathVariable Long id,@RequestBody Dept dept) {
// 设置id
dept.setId(id);
return deptRepository.saveAndFlush(dept);
}
}
JobController.java
package com.newer.jpa2.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.newer.jpa2.pojo.Job;
import com.newer.jpa2.repository.JobRepository;
@RestController
@RequestMapping("/api/job")
public class JobController {
@Autowired
JobRepository jobRepository;
@GetMapping
public List<Job> findAll(){
return jobRepository.findAll();
}
@PostMapping
public Job create(@RequestBody Job job) {
return jobRepository.save(job);
}
@GetMapping("/{id}")
public Job load(@PathVariable Long id) {
return jobRepository.findById(id).get();
}
@DeleteMapping("/{id}")
public void remove(@PathVariable Long id) {
jobRepository.deleteById(id);
}
@PutMapping("/{id}")
public Job update(@PathVariable Long id,@RequestBody Job job) {
job.setId(id);
return jobRepository.saveAndFlush(job);
}
}
StaffController.java（重点）
package com.newer.jpa2.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.newer.jpa2.pojo.Dept;
import com.newer.jpa2.pojo.Job;
import com.newer.jpa2.pojo.Staff;
import com.newer.jpa2.repository.StaffRepository;
@RestController
@RequestMapping("/api/staff")
public class StaffController {
@Autowired
StaffRepository staffRepository;
@GetMapping("/")
public List<Staff> find(
@RequestParam(name = "name",defaultValue = "%",required = true) String name,
@RequestParam(name="phone",defaultValue = "%",required = true) String phone,
@RequestParam(name="loc",defaultValue = "%",required = true) String loc,
@RequestParam(name="title1",defaultValue = "%",required = true) String title1,
@RequestParam(name="title",defaultValue = "%",required = true) String title
){
// name做模糊查询
if(!name.equals("%")) {
name="%"+name+"%";
}
return staffRepository.findByNameLikeAndPhoneLikeAndDept_LocLikeAndDept_TitleLikeAndJob_TitleLike(name, phone, loc, title1, title);
}
@GetMapping
public List<Staff> findAll(){
return staffRepository.findAll();
}
@PostMapping
public Staff create (@RequestBody Staff staff) {
return staffRepository.save(staff);
}
@GetMapping("/{id}")
public Staff load(@PathVariable Long id) {
return staffRepository.findById(id).get();
}
@DeleteMapping("/{id}")
public void remove(@PathVariable Long id) {
staffRepository.deleteById(id);
}
@PutMapping("{id}")
public Staff update(@PathVariable Long id,@RequestBody Staff staff) {
staff.setId(id);
return staffRepository.saveAndFlush(staff);
}
}
HomeController.java（返回视图名，下面代码都是关于前端部分）
package com.newer.jpa2.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
/**
* SPA 前后端分离(Vue Cli,Angular,JS,React)，这个就不需要
*
* SSR 没有前后端分离(模板引擎，ajax,Vue)，此处在进行视图的路由
* @author Admin
*
*/
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "index.html";
}
@GetMapping("/dept")
public String dept() {
return "dept.html";
}
@GetMapping("/staff")
public String staff() {
return "staff.html";
}
@GetMapping("/job")
public String job() {
return "job.html";
}
}
index.html
<!doctype html>
<html lang="en">
<head>
<title>JPA</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">JPA</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="dept">部门</a>
</li>
<li class="nav-item">
<a class="nav-link" href="staff">员工</a>
</li>
<li class="nav-item">
<a class="nav-link" href="job">职位</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>dept.html
<!doctype html>
<html lang="en">
<head>
<title>员工</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid py-3 mb-0">
<div class="container">
<h1 class="display-3">部门管理</h1>
</div>
</div>
<nav class="breadcrumb mt-0">
<a class="breadcrumb-item" href="/">首页</a>
<span class="breadcrumb-item active">部门</span>
</nav>
<div id="app" class="container-fluid">
<div class="row">
<div class="col-lg-4">
<!-- 表单 -->
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="">部门名称</label>
<input
v-model="title"
type="text" class="form-control" name="" id="" aria-describedby="helpId"
placeholder="部门名称">
</div>
<div class="form-group">
<label for="">办公地点</label>
<input
v-model="loc"
type="text" class="form-control" name="" id="" aria-describedby="helpId"
placeholder="办公地点">
</div>
<button
@click="create"
type="button" class="btn btn-primary btn-lg btn-block">添加</button>
</div>
</div>
</div>
<div class="col-lg-8">
<!-- 表格 -->
<table class="table">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>编号</th>
<th>名称</th>
<th>工作地点</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(dept, index) in deptList" :key="index">
<td><input type="checkbox" ></td>
<td >{{dept.id}}</td>
<td>{{dept.title}}</td>
<td>{{dept.loc}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
title:'',
loc:'',
// 员工列表
deptList:[]
},
methods: {
// 创建部门的方法
create:function(){
let url='/api/dept';
params={
title:this.title,
loc:this.loc
};
axios.post(url,params)
.then(res => {
// console.log(res)
this.deptList.push(res.data);
})
.catch(err => {
console.error(err);
})
}
},
created() {
// Get /api/dept
axios.get('/api/dept')
.then(res => {
console.log(res)
this.deptList=res.data;
})
.catch(err => {
console.error(err);
})
},
})
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>job.html
<!doctype html>
<html lang="en">
<head>
<title>职位</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid py-3 mb-0">
<div class="container">
<h1 class="display-3">职位管理</h1>
</div>
</div>
<nav class="breadcrumb mt-0">
<a class="breadcrumb-item" href="/">首页</a>
<span class="breadcrumb-item active">职位</span>
</nav>
<div id="app" class="container-fluid">
<div class="row">
<div class="col-lg-4">
<!-- 表单 -->
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="">职位名称</label>
<input
v-model="title"
type="text" class="form-control" name="" id="" aria-describedby="helpId"
placeholder="职位名称">
</div>
<div class="form-group">
<label for="">职位信息</label>
<input
v-model="info"
type="text" class="form-control" name="" id="" aria-describedby="helpId"
placeholder="职位信息">
</div>
<button
@click="create"
type="button" class="btn btn-primary btn-lg btn-block">添加</button>
</div>
</div>
</div>
<div class="col-lg-8">
<!-- 表格 -->
<table class="table">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>编号</th>
<th>名称</th>
<th>职位信息</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(job, index) in jobList" :key="index">
<td><input type="checkbox" ></td>
<td >{{job.id}}</td>
<td>{{job.title}}</td>
<td>{{job.info}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
title:'',
info:'',
// 部门列表
jobList:[]
},
methods: {
// 创建职位的方法
create:function(){
let url='/api/job';
let params={
title:this.title,
info:this.info
}
axios.post(url,params)
.then(res => {
console.log(res)
this.jobList.push(res.data);
})
.catch(err => {
console.error(err);
})
}
},
created() {
axios.get('/api/job')
.then(res => {
console.log(res)
this.jobList=res.data;
})
.catch(err => {
console.error(err);
})
},
})
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>staff.html
<!doctype html>
<html lang="en">
<head>
<title>员工</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid py-3">
<div class="container">
<h1 class="display-3">员工管理</h1>
</div>
</div>
<nav class="breadcrumb mt-0">
<a class="breadcrumb-item" href="/">首页</a>
<span class="breadcrumb-item active">部门管理</span>
</nav>
<div id="app" class="container-fluid">
<div class="row">
<div class="col-lg-4">
<!-- 表单 -->
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="">姓名</label>
<input v-model="name" type="text" class="form-control" name="" id=""
aria-describedby="helpId" placeholder="姓名">
</div>
<div class="form-group">
<label for="">联系方式</label>
<input v-model="phone" type="text" class="form-control" name="" id=""
aria-describedby="helpId" placeholder="联系方式">
</div>
<div class="form-group">
<label for="">职位</label>
<select v-model="jobId" class="form-control">
<option v-for="(job, index) in jobList" :key="index" :value="job.id">
{{job.title}}
</option>
</select>
</div>
<div class="form-group">
<label for="">部门</label>
<select v-model="deptId" class="form-control">
<option v-for="(dept, index) in deptList" :key="index" :value="dept.id">
{{dept.title}}
</option>
</select>
</div>
<button @click="create" type="button" class="btn btn-primary btn-lg btn-block">添加</button>
</div>
</div>
</div>
<div class="col-lg-8">
<!-- 查询 -->
<div class="row">
<div class="card my-3">
<div class="card-body">
<div>
<label for="">姓名</label>
<input type="text" v-model="sname" class="mr-3">
<label for="">联系方式</label>
<input type="text" v-model="sphone" class="mr-3">
<label for="">职位</label>
<select v-model="sjobTitle" class="mr-3">
<option value="java工程师">java工程师</option>
<option value="c++工程师">c++工程师</option>
<option value="产品经理">产品经理</option>
</select>
</div>
<label for="">部门</label>
<select v-model="sdeptTitle" class="mr-5">
<option value="测试">测试</option>
<option value="开发">开发</option>
<option value="实施">实施</option>
</select>
<label for="">办公地点</label>
<select v-model="sdeptloc" class="mr-3">
<option value="长沙">长沙</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
<button @click="search" type="button" class="btn btn-outline-danger float-right ml-3">搜索</button>
</div>
</div>
</div>
<!-- 表格 -->
<table class="table">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>编号</th>
<th>姓名</th>
<th>联系方式</th>
<th>职位</th>
<th>部门</th>
<th>工作地点</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(staff, index) in staffList" :key="index">
<td><input type="checkbox"></td>
<td>{{staff.id}}</td>
<td>{{staff.name}}</td>
<td>{{staff.phone}}</td>
<td>{{staff.job.title}}</td>
<td>{{staff.dept.title}}</td>
<td>{{staff.dept.loc}}</td>
<td>
<button @click="edit(index)" type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modelId">编辑</button>
<!-- Modal -->
<div class="modal fade" id="modelId" tabindex="-1" role="dialog"
aria-labelledby="modelTitleId" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">修改员工的信息：</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- 表单 -->
<div class="form-group">
<label for="">姓名</label>
<input v-model="editItem.name" type="text" class="form-control"
name="" id="" aria-describedby="helpId" placeholder="姓名">
</div>
<div class="form-group">
<label for="">联系方式</label>
<input v-model=" editItem.phone" type="text" class="form-control"
name="" id="" aria-describedby="helpId" placeholder="联系方式">
</div>
<div class="form-group">
<label for="">职位</label>
<select v-model="editItem.job_id" class="form-control">
<option v-for="(job, index) in jobList" :key="index"
:value="job.id">
{{job.title}}
</option>
</select>
</div>
<div class="form-group">
<label for="">部门</label>
<select v-model="editItem.dept_id" class="form-control">
<option v-for="(dept, index) in deptList" :key="index"
:value="dept.id">
{{dept.title}}
</option>
</select>
</div>
<div class="form-group">
<label for="">工作地点</label>
<select v-model="editItem.dept_id" class="form-control">
<option v-for="(dept, index) in deptList" :key="index"
:value="dept.id">
{{dept.loc}}
</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">取消</button>
<button @click="update" type="button" class="btn btn-primary"
data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<button @click="del(staff.id)" type="button" class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
// 部门列表
deptList: [],
// 职位列表
jobList: [],
name: '',
phone: '',
deptId: '',
jobId: '',
// 员工列表
staffList: [],
// 更新
editIndex: 0,
editItem: {},
// 搜索
sname: '',
sphone: '',
sdeptTitle: '',
sjobTitle: '',
sdeptloc:''
},
methods: {
// 搜索
search:function(){
let url='http://127.0.0.1:8080/api/staff/';
let queryParams ={
name:this.sname,
phone:this.sphone,
loc:this.sdeptloc,
title1:this.sdeptTitle,
title:this.sjobTitle
}
axios.get(url, {
params: queryParams
})
.then(res => {
console.log(res);
this.staffList=res.data;
})
},
// 创建员工
create: function () {
let url = '/api/staff';
let params = {
name: this.name,
phone: this.phone,
job: {
id: this.jobId
},
dept: {
id: this.deptId
}
};
axios.post(url, params)
.then(res => {
// console.log(res)
// this.staffList.push(res.data)
// 再次加载
axios.get('/api/staff')
.then(res => {
// console.log(res)
this.staffList = res.data;
})
.catch(err => {
console.error(err);
})
})
.catch(err => {
console.error(err);
})
},
// 删除员工
del: function (id) {
let url = `/api/staff/${id}`;
axios.delete(url)
.then(res => {
// console.log(res)
// 再次加载
axios.get('/api/staff')
.then(res => {
// console.log(res)
this.staffList = res.data;
})
.catch(err => {
console.error(err);
})
})
.catch(err => {
console.error(err);
})
},
// 编辑员工的方法
edit: function (i) {
// 获得更新的内容
this.editIndex = i;
this.editItem = {},
// console.log(this.staffList);
// staffList的内容赋给editItem
this.editItem.id = this.staffList[i].id;
this.editItem.name = this.staffList[i].name;
this.editItem.phone = this.staffList[i].phone;
this.editItem.dept_id = this.staffList[i].dept.id;
this.editItem.job_id = this.staffList[i].job.id;
// console.log(this.editItem);
console.log(this.staffList[i].dept.id);
console.log(this.staffList[i].job.id);
console.log(this.editItem);
},
// 更新员工
update: function () {
let url = `/api/staff/${this.editItem.id}`;
let params = {
name: this.editItem.name,
phone: this.editItem.phone,
dept: {
id: this.editItem.dept_id
},
job: {
id: this.editItem.job_id
}
}
axios.put(url, params)
.then(res => {
// console.log(res)
// 再次加载
axios.get(`/api/staff`)
.then(res => {
// console.log(res)
this.staffList = res.data;
})
.catch(err => {
console.error(err);
})
})
.catch(err => {
console.error(err);
})
}
},
created() {
// 加载部门信息
axios.get('/api/dept')
.then(res => {
// console.log(res)
this.deptList = res.data;
// 获得·默认的部门
this.deptId = this.deptList[0].id;
})
.catch(err => {
console.error(err);
}),
// 加载职位信息
axios.get('/api/job')
.then(res => {
// console.log(res)
this.jobList = res.data;
// 获得·默认的职位
this.jobId = this.jobList[0].id;
})
.catch(err => {
console.error(err);
}),
axios.get('/api/staff')
.then(res => {
// console.log(res)
this.staffList = res.data;
})
.catch(err => {
console.error(err);
})
},
})
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.5.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.newer</groupId>
<artifactId>jpa2</artifactId>
<version>0.1</version>
<name>jpa2</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>11</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
运行程序，打开浏览器看下效果
图为staff表，dept表和job表功能差不多，在此就不截图了。
通过查询可以获取相应的数据（其中姓名为模糊查询）
基于 JPA 定义方法名的条件查询就到这里结束了，有问题的小伙伴欢迎留言！！！
