spring boot 使用vue技术，实现增删改查的功能
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
//显示界面
<div id="root">
<table border="1">
<button v-on:click="insert()">添加</button>
<tr>
<td>
姓名 <input type="text" name="name" v-model="like.name">
班级：
<select v-model="like.sid">
<option v-for="(v,index) in classes":value="v.cid">{{v.cname}}</option>
</select>
电话：<input type="text" name="telephone" v-model="like.telephone">
<button v-on:click="findName()">查询</button>
</td>
</tr>
<tr>
<td>
序列号码
<button @click="checkAll" v-model="checked">全选</button>
</td>
<td>客户姓名</td>
<td>客户性别</td>
<td>身份证号</td>
<td>开户时间</td>
<td>客户电话</td>
<td>客户单位</td>
<td>数据操作</td>
</tr>
<tr v-for="(item,index) in list">
<td>
<input type="checkbox" v-model="checkModel" :value="item.id">
</td>
<td>{{item.name}}</td>
<td>
<div v-if="item.sex==1">
男
</div>
<div v-else>
女
</div>
</td>
<td>{{item.card}}</td>
<td>{{item.birthday}}</td>
<td>{{item.telephone}}</td>
<td>{{item.classes.cname}}</td>
<td>
<button v-on:click="del(item.id,index)">删除</button>
<button v-on:click="update(item.id)">修改</button>
</td>
</tr>
</table>
//添加&修改界面
<div id="append" >
<table border="1" v-show="show">
<tr><td>开户姓名：<input type="text" name="name" v-model="add.name"></td></tr>
<tr>
<td>客户性别：
<select v-model="add.sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
</td>
</tr>
<tr><td>身份证号：<input type="text" name="card" v-model="add.card"></td></tr>
<tr><td>用户电话：<input type="text" name="telephone" v-model="add.telephone"></td></tr>
<tr><td>开户时间：<input type="Date" name="birthday" v-model="add.birthday"></td></tr>
<tr>
<td>
客户单位：
<select v-model="add.sid">
<option v-for="(v,index) in classes":value="v.cid">{{v.cname}}</option>
</select>
</td>
</tr>
<tr><td><button v-on:click="save()">提交</button></td></tr>
</table>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#root",
data: {
list: [],//显示
like:{},//模糊查询
add: {},//添加
classes: [],
message:[],
show:false, //隐藏
checked:false, //是否全选
checkModel:[] //双向数据绑定的数组，我是用的id
},
watch:{
checkModel(){
if(this.checkModel.length==this.list.length){
this.checked=true;
}else{
this.checked=false;
}
}
},
mounted() {
this.getClasses();
this.getStudentDate();
},
methods: {
checkAll(){
if(this.checked){
this.checkModel=[];
}else{
this.list.forEach((item)=>{
if(this.checkModel.indexOf(item.id)==-1){
this.checkModel.push(item.id)
}
})
}
},
getStudentDate:function(){
$.ajax({
url: "http://localhost:8080/student/Index",
type: 'post',
data: "",
dataType: "json",
success: function (result) {
// alert(JSON.stringify(result));
if (result.code == 0) {
vm.list = [];
var len = result.data.length;
for (var i = 0; i < len; i++) {
vm.list.push(result.data[i]);
}
} else {
vm.message = result.msg;
}
}
})
},
//删除数据
del: (function (id, index) {
// alert("222");
//提供给后端的路径，通过后端的代码删除数据库中的内容 id的是获取删除项的主键
$.post("http://localhost:8080/student/doDel", {id: id}, function (data) {
if (data.code == 0) {
vm.list.splice(id, 1); //splice():删除和隐藏index的下表值，1：代表的是每次删除或隐藏一个
vm.getStudentDate();
} else {
alert("操作失误");
}
})
}),
//点击添加按钮，添加框出现
insert:(function () {
vm.show=true;
this.getClasses();
}),
//模糊查询
findName:(function () {
$.ajax({
url:"http://localhost:8080/student/index",
data:this.like,
success:function (result) {
if (result.code == 0) {
vm.list = [];
var len = result.data.length;
for (var i = 0; i < len; i++) {
vm.list.push(result.data[i]);
}
} else {
vm.message = result.msg;
}
}
})
}),
//修改
update:function (id) {
$.post("http://localhost:8080/student/toUpdate",{id:id},function (result) {
vm.show=true;
// alert(JSON.stringify(result));
// 给输入框中赋值
vm.add=result.data;
// 删除classes元素
delete vm.add.classes;
vm.getClasses();
})
},
//保存
save: (function () { //添加数据
$.ajax({
url: "http://localhost:8080/student/doAdd",
data: vm.add,
type: 'post',
success: function (data) {
// alert(data);
// 成功之后重新循环
vm.getStudentDate();
// 成功之后将输入框中的内容清空
vm.add={};
// 成功之后添加输入框隐藏
vm.show=false;
}
})
}),
//循环classes表中的内容
getClasses: function () {
$.post("http://localhost:8080/student/Add", {}, function (result) {
vm.message = result.msg;
if (result.code == 0) {
var len = result.data.length;
vm.classes = [];
for (var i = 0; i < len; i++) {
vm.classes.push(result.data[i]);
}
} else {
vm.message = result.msg;
}
})
}
}
})
</script>
</body>
</html>
后端
package com.sdbairui.demo.Controller;
import com.sdbairui.UTIL.JsonResult;
import com.sdbairui.demo.Entity.Classes;
import com.sdbairui.demo.Entity.Student;
import com.sdbairui.demo.Service.ServiceClasses;
import com.sdbairui.demo.Service.ServiceStudent;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.CollectionUtils;
import org.springframework.web.bind.annotation.*;
import javax.mail.internet.MimeMessage;
import javax.servlet.http.HttpServletRequest;
import java.text.ParseException;
import java.util.List;
import java.util.Map;
//@RestController
@Controller/*@Controller：用于定义控制器类，在spring项目中由控制器负责将用户发来的URL请求转发到对应的服务接口（service层）*/
@RequestMapping("/student")/*@RequestMapping：提供路由信息，负责URL到Controller中的具体函数的映射。*/
/*@RestController：用于标注控制层组件(如struts中的action)，@ResponseBody和@Controller的合集。 返回信息*/
public class StudentController {
@Autowired /*Autowired：自动导入依赖的bean*/
ServiceStudent serviceStudent;
@Autowired
ServiceClasses serviceClasses;
// 查询全部
@RequestMapping("/toIndex")
// @ResponseBody
public String toIndex(Model model) {
List<Map<String, Object>> list = serviceStudent.findCname();
model.addAttribute("student", list);
return "index";
}
@RequestMapping("/123")
// @ResponseBody
public String ndex(Model model) {
List<Student> list = serviceStudent.findAll();
model.addAttribute("student", list);
return "index";
}
@RequestMapping("/Index")
@ResponseBody
public JsonResult Index() {
List<Student> data = serviceStudent.findAll();
if(!CollectionUtils.isEmpty(data)){
return new JsonResult(data,"获取数据成功");
}else {
return new JsonResult("-1","获取数据为空");
}
}
// 添加
@RequestMapping("/toAdd")
public String toAdd(Model model) {
List<Classes> list = serviceClasses.finAll();
model.addAttribute("classes", list);
return "Student_Add";
}
@RequestMapping("/Add")
@ResponseBody
public JsonResult Add() {
List<Classes> data = serviceClasses.finAll();
if(!CollectionUtils.isEmpty(data)){
return new JsonResult(data,"获取数据成功");
}else {
return new JsonResult("-1","获取数据为空");
}
}
// 添加——接收添加的数据
@RequestMapping("/doAdd")
@ResponseBody
public JsonResult doAdd(HttpServletRequest request,Student student) throws Exception {
serviceStudent.doCreate(student);
return new JsonResult("0","添加成功");
}
// 删除
@RequestMapping("/doDelete")
public String doDelete(HttpServletRequest request) {
int id = Integer.parseInt(request.getParameter("id"));
serviceStudent.doDelete(id);
return "redirect:/student/toIndex";
}
@RequestMapping("/doDel")
@ResponseBody
public JsonResult doDel(HttpServletRequest request) {
int id = Integer.parseInt(request.getParameter("id"));
serviceStudent.doDelete(id);
return new JsonResult<>("0","删除成功");
}
// 修改界面
@RequestMapping("/toUpdate")
@ResponseBody
public JsonResult toUpdate(HttpServletRequest request, Model model) {
int id = Integer.parseInt(request.getParameter("id"));
// HttpSession session = request.getSession();
// session.setAttribute("id", id);
Student student=serviceStudent.getOne(id);
// List<Map<String, Object>> list = serviceStudent.findById(id);
// List<Classes> list1 = serviceClasses.finAll();
// model.addAttribute("classes", list1);
// model.addAttribute("student", list);
return new JsonResult(student,"获取"+id+"成功");
}
// 修改
@RequestMapping("/doUpdate")
public String doUpdate(HttpServletRequest request,Student student) throws ParseException {
int id = (int) request.getSession().getAttribute("id");
serviceStudent.doCreate(student);
return "redirect:/student/toIndex";
}
// 模糊查询
@RequestMapping("/findName")
@ResponseBody
public JsonResult findName(HttpServletRequest request, Model model) {
System.out.println(request.getParameter("name"));
String name = request.getParameter("name");
List<Student> data =serviceStudent.findName(name);
List<Classes> list=serviceClasses.finAll();
return new JsonResult(data,"获取"+name+"成功");
}
@RequestMapping("/index")
@ResponseBody
public JsonResult index(Student student, HttpServletRequest request){
//List<Student> data= studentService.findAll(Sort.by("sid"));
System.out.print(request.getParameter("name"));
System.out.print(request.getParameter("sid"));
System.out.print(request.getParameter("telephone"));
List<Student> data= serviceStudent.queryFlows(1,5,student);
return new JsonResult<>(data, "获取学生列表成功");
}
@RequestMapping("/vue_add")
public String vue_add(){
return "vue_add";
}
@RequestMapping("/vue_select")
public String vue_select(){
return "vue_select";
}
@Autowired
JavaMailSender mailSender;//注入QQ发送邮件的bean
//定义发送的内容 我这里发送一张图片 需要html标签
public static String body="<img src='https://images.cnblogs.com/cnblogs_com/joker-dj/1691556/t_20040706414135.png' alt=''>";
@RequestMapping("/qqemail")
public Object qqemail(@RequestParam String qq,String title) {
try {
MimeMessage mimeMessage = this.mailSender.createMimeMessage();
MimeMessageHelper message = new MimeMessageHelper(mimeMessage);
message.setFrom("2097531820@qq.com");//设置发件qq邮箱
qq += "2097531820@qq.com"; //补全地址
message.setTo(qq); //设置收件人
message.setSubject(title); //设置标题
message.setText(body, true); //第二个参数true表示使用HTML语言来编写邮件
// FileSystemResource file = new FileSystemResource(
// File file = new File("图片路径");
// helper.addAttachment("图片.jpg", file);//添加带附件的邮件
// helper.addInline("picture",file);//添加带静态资源的邮件
this.mailSender.send(mimeMessage);
return "发送成功";
} catch (Exception ex) {
ex.printStackTrace();
return "发送成功";
}
}
}
Service包下的ServiceStudent.java
package com.sdbairui.demo.Service;
import com.sdbairui.demo.Dao.IStudent;
import com.sdbairui.demo.Entity.Student;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import javax.persistence.criteria.CriteriaBuilder;
import javax.persistence.criteria.CriteriaQuery;
import javax.persistence.criteria.Predicate;
import javax.persistence.criteria.Root;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@Service
public class ServiceStudent {
@Resource
IStudent studentDao;
// 查询全部
public List<Map<String ,Object>> findCname(){
return studentDao.findCname();
}
public List<Student> findAll(){
return studentDao.findAll();
}
// 根据条件查询
public List<Map<String,Object>> findById(int id){
return studentDao.findById(id);
}
// 模糊查询
public List<Student> findName(String name){
return studentDao.findName(name);
}
// public List<Student> findPerson(String name){
// return studentDao.findPerson(name);
// }
// 删除
public void doDelete(int id) {
studentDao.deleteById(id);
}
public void Delete(Student student){
studentDao.delete(student);
}
// 添加
public void doCreate(Student student){
studentDao.save(student);
}
public Student getOne(int id){
return studentDao.getOne(id);
}
// 分页查询表连接
// public Page<List<Map>> findPage(Pageable pageable){
// return studentDao.findPage(pageable);
// }
public Page<Student> queryFlows(int pageNo, int pageSize, Student student) {
Page<Student> result = null;
// 构造自定义查询条件
Specification<Student> queryCondition = new Specification<Student>() {
@Override
public Predicate toPredicate(Root<Student> root, CriteriaQuery<?> criteriaQuery, CriteriaBuilder criteriaBuilder) {
List<Predicate> predicateList = new ArrayList<>();
if (student.getName() != null) {
predicateList.add(criteriaBuilder.like(root.get("name"), "%" +student.getName()+ "%"));
}
if (student.getSid()!=0) {
predicateList.add(criteriaBuilder.equal(root.get("sid"),student.getSid()));
}
// if (student.getTelephone()!= null) {
// predicateList.add(criteriaBuilder.equal(root.get("telephone"),student.getTelephone()));
// }
// if (status != null) {
// predicateList.add(criteriaBuilder.equal(root.get("status"), status));
// }
// if (createTimeStart != null && createTimeEnd != null) {
// predicateList.add(criteriaBuilder.between(root.get("createTime"), createTimeStart, createTimeEnd));
// }
return criteriaBuilder.and(predicateList.toArray(new Predicate[predicateList.size()]));
}
};
// 分页和不分页，这里按起始页和每页展示条数为0时默认为不分页，分页的话按创建时间降序
try {
if (pageNo == 0 && pageSize == 0) {
// result = (List<Student>) studentDao.findAll(queryCondition);
} else {
result = studentDao.findAll(queryCondition, PageRequest.of(pageNo - 1, pageSize, Sort.by(Sort.Direction.DESC, "id")));
}
} catch (Exception e) {
// LOGGER.error("--queryFlowByCondition-- error : ", e);
}
return result;
}
}
ServiceClasses.java
package com.sdbairui.demo.Service;
import com.sdbairui.demo.Dao.IClasses;
import com.sdbairui.demo.Entity.Classes;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
@Service /*指明咱们这个文件是业务层，是服务层指明咱们这个文件是业务层，是服务层*/
public class ServiceClasses {
@Resource /*@Resource：自动注入的注解：就相当给Dao层实例化。*/
IClasses classes;
public List<Classes> finAll(){
return classes.findAll();
}
}
Dao层的IStudent.java
package com.sdbairui.demo.Dao;
import com.sdbairui.demo.Entity.Student;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;
import java.util.List;
import java.util.Map;
@Repository
public interface IStudent extends JpaRepository<Student,Integer> {
// 查询全部
@Query(value="SELECT * FROM person INNER JOIN classes ON person.sid=classes.cid",nativeQuery=true)
/*
* @Query:注解sql语句的
* */
List<Map<String,Object>> findCname();
// 根据条件（id）查询
@Query(value="SELECT * FROM person INNER JOIN classes ON person.sid=classes.cid where id=?1 ",nativeQuery=true)
List<Map<String,Object>> findById(int id);
// （name）模糊查询
@Query(value="select * from person inner join classes on person.sid=classes.cid where name like concat('%',:name,'%') ",nativeQuery=true)
List<Student> findName(String name);
/* @Param注解单一属性，便于取值*/
// Specification构建动态查询
Page<Student> findAll(Specification<Student> specification);
Long count(Specification<Student> specification);
Page<Student> findAll(Specification<Student> specification, Pageable pageable);
}
IClasses.java
package com.sdbairui.demo.Dao;
import com.sdbairui.demo.Entity.Classes;
import org.springframework.data.jpa.repository.JpaRepository;
public interface IClasses extends JpaRepository<Classes,Integer> {
}
Entity包
Student.java
package com.sdbairui.demo.Entity;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import org.hibernate.validator.constraints.Length;
import org.springframework.format.annotation.DateTimeFormat;
import javax.persistence.*;
import javax.validation.constraints.Max;
import javax.validation.constraints.Min;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotEmpty;
import java.io.Serializable;
import java.util.Date;
import java.util.List;
@Table
@Entity(name="person") // 这是一个标记注释，表明这个类是一个实体。这个注释必须放在类名称上。
@JsonIgnoreProperties(value="hibernateLazyInitializer")
public class Student implements Serializable {
@Id // 此注释位于持有持久标识属性的特定字段上。该字段被视为数据库中的主键。
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int id;
//后端设置名字限制
// @Column标记表示所持久化属性所映射表中的字段
// unique属性表示该字段是否为唯一标识
// nullable属性表示该字段是否可以为null值
@Column(unique = true,nullable = false)
// 可以为String数据类型的属性判断是否为空
@NotBlank(message="名字不为空")
// 限制字符长度区间
@Length(message = "名字长度在1-10之间",min = 1,max = 10)
private String name;
//后端设置性别限制
private int sex;
@NotBlank(message = "电话不能为空")
@Length(message = "电话号码长度为4-8",min = 4,max = 11)
private String telephone;
@NotBlank(message = "身份证不能为空")
@Length(message = "电话号码长度为17-18",min = 17,max = 18)
private String card;
@JsonFormat(pattern ="yyyy-MM-dd",timezone = "GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date birthday;
private int sid;
private String file;
private int pgid;
// 这个是多对一
@ManyToOne
// name="sid": 这个是(学生)Person表中的sid,cid是(班级)classes表的
@JoinColumn(name = "sid",referencedColumnName = "cid",insertable = false,updatable = false)
// @OneToOne
// @JoinColumn(name = "sid",referencedColumnName = "cid",insertable = false,updatable = false)
private Classes classes;
public Classes getClasses() {
return classes;
}
public void setClasses(Classes classes) {
this.classes = classes;
}
public String getTelephone() {
return telephone;
}
public void setTelephone(String telephone) {
this.telephone = telephone;
}
public int getSid() {
return sid;
}
public void setSid(int sid) {
this.sid = sid;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getSex() {
return sex;
}
public void setSex(int sex) {
this.sex = sex;
}
public String getCard() {
return card;
}
public void setCard(String card) {
this.card = card;
}
// @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getFile() {
return file;
}
public void setFile(String file) {
this.file = file;
}
public int getPgid() {
return pgid;
}
public void setPgid(int pgid) {
this.pgid = pgid;
}
}
Classes.java
package com.sdbairui.demo.Entity;
import javax.persistence.*;
@Table
@Entity(name="classes")
public class Classes {
@Id
@GeneratedValue(strategy= GenerationType.IDENTITY)
private int cid;
private String cname;
public int getCid() {
return cid;
}
public void setCid(int cid) {
this.cid = cid;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
}
785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
