一个vue页面实现Mysql数据表（三表）的增删改查、分页、表连接

实体类

Student.java

package com.sdbairui.demo.Entity;


import com.fasterxml.jackson.annotation.JsonFormat;
import org.springframework.format.annotation.DateTimeFormat;

import javax.persistence.*;
import java.util.Date;
import java.util.Set;


@Table
@Entity(name="student")
public class Student {
    
    
    @Id            //主键
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int sid;
    private String sname;
    private int sex;
    @DateTimeFormat(pattern="yyyy-MM-dd")     //转换日期格式   将前台日期字符串转换成Date格式
    @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8")    //将服务器端Date日期转换成指定字符串格式
    private Date birth;
    private String classes;

    @OneToMany                       //一对多关系
    @JoinColumn(name="sid",referencedColumnName = "sid",insertable = false,updatable = false)
    private Set<Score> score;

    public Set<Score> getScore(){
    
    
        return score;
    }

    public void setScore(Set<Score> score){
    
    
        this.score=score;
    }

    public void setSid(int sid){
    
    
        this.sid=sid;
    }
    public int getSid(){
    
    
        return this.sid;
    }
    public void setSname(String sname){
    
    
        this.sname=sname;
    }
    public String getSname(){
    
    
        return this.sname;
    }
    public void setSex(int sex){
    
    
        this.sex=sex;
    }
    public int getSex(){
    
    
        return this.sex;
    }
    public void setBirth(Date birth) {
    
    
        this.birth = birth;
    }
    public Date getBirth(){
    
    
        return this.birth;
    }
    public void setClasses(String classes){
    
    
        this.classes=classes;
    }
    public String getClasses(){
    
    
        return this.classes;
    }

}

Score.java

package com.sdbairui.demo.Entity;

import javax.persistence.*;
import javax.persistence.Table;

@Table
@Entity(name="Score")
public class Score {
    
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int scid;
    private int sid;
    private int coid;
    private float grade;

    @OneToOne               //一对一关系
    @JoinColumn(name="coid",referencedColumnName = "coid",insertable = false,updatable = false)
    private Course course;

    public Course getCourse() {
    
    
        return course;
    }

    public void setCourse(Course course) {
    
    
        this.course = course;
    }

    public void setScid(int scid){
    
    
        this.scid=scid;
    }
    public int getScid(){
    
    
        return this.scid;
    }
    public void setSid(int sid){
    
    
        this.sid=sid;
    }
    public int getSid(){
    
    
        return this.sid;
    }
    public void setCoid(int coid){
    
    
        this.coid=coid;
    }
    public int getCoid(){
    
    
        return this.coid;
    }
    public void setGrade(float grade){
    
    
        this.grade=grade;
    }
    public float getGrade(){
    
    
        return this.grade;
    }
}

Course.java

package com.sdbairui.demo.Entity;

import javax.persistence.*;
import javax.persistence.Table;

@Table
@Entity(name="Score")
public class Score {
    
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int scid;
    private int sid;
    private int coid;
    private float grade;

    @OneToOne
    @JoinColumn(name="coid",referencedColumnName = "coid",insertable = false,updatable = false)
    private Course course;

    public Course getCourse() {
    
    
        return course;
    }

    public void setCourse(Course course) {
    
    
        this.course = course;
    }

    public void setScid(int scid){
    
    
        this.scid=scid;
    }
    public int getScid(){
    
    
        return this.scid;
    }
    public void setSid(int sid){
    
    
        this.sid=sid;
    }
    public int getSid(){
    
    
        return this.sid;
    }
    public void setCoid(int coid){
    
    
        this.coid=coid;
    }
    public int getCoid(){
    
    
        return this.coid;
    }
    public void setGrade(float grade){
    
    
        this.grade=grade;
    }
    public float getGrade(){
    
    
        return this.grade;
    }
}

Controller 控制器层 StudentController.java

package com.sdbairui.demo.Controller;

import com.sdbairui.demo.Dao.StudentDao;
import com.sdbairui.demo.Entity.Student;
import com.sdbairui.demo.Service.StudentService;
import com.sdbairui.demo.Utils.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

//控制器
@Controller    //解析为路径
@RequestMapping("/stu")
public class StudentController {
    
    
    @Autowired //自动注解功能
    StudentService studentService;
    @Autowired //自动注解功能
    StudentDao studentDao;

    @RequestMapping(value = "/vue")     //vue页面
    public String vue(Model model) {
    
    
        return "index";
    }

    @RequestMapping("/toto")
    @ResponseBody
    public JsonResult toindex() {
    
    //查询全部
        List<Map<String, Object>> data = studentService.findAllDa();
        return new JsonResult(data,"获取列表成功");
    }


    @RequestMapping("/doDel")                       //vue 删除数据
    public String doDel(HttpServletRequest request) {
    
    
        int sid = Integer.parseInt(request.getParameter("sid"));
        Student student = new Student();
        student.setSid(sid);
        studentService.doDelete(student);
        return "redirect:/stu/vue";
    }

    @RequestMapping("/totoadd")               //跳转添加
    public String totoAdd(Model model) {
    
    
        List<Student> list= studentService.findAllData();
        model.addAttribute("student",list);
        return "vue_add";
    }

    @RequestMapping("/dodoadd")                        //vue  添加数据
    @ResponseBody
    public String add(@Validated Student student, BindingResult error) {
    
    
        if (error.hasErrors()) {
    
    
            return error.getFieldError().getDefaultMessage();
        }
        studentService.doCreate(student);
        return "保存成功";
    }

    @RequestMapping("/edit")                        //vue  获取数据
    @ResponseBody
    public JsonResult edit(HttpServletRequest request){
    
    
        int sid = Integer.parseInt(request.getParameter("sid"));
        Student student = studentService.findBySid(sid);
        return new JsonResult<>(student,"获取学生编号"+sid+"数据成功");
    }

    @RequestMapping("/index")                                 //自定义搜索+分页
    @ResponseBody
    public JsonResult index(Student student, HttpServletRequest request){
    
    
        //List<Student> data= studentService.findAll(Sort.by("sid"));
//        System.out.print(request.getParameter("page"));
        int page=Integer.parseInt(request.getParameter("page"));
        // System.out.print(people.getSid());

        Page<Student> data=  studentService.queryFlows(page,4,student);
        return new JsonResult<>(data, "获取学生列表成功");
    }

    @RequestMapping("/ECharts")                         //饼状图
    public String pieChart(Model model){
    
    //跳转主页
        return "demo1";
    }

    @RequestMapping("getpieChart")
    @ResponseBody
    public JsonResult getpieChart(){
    
                      //取值
        Integer[] idList = {
    
    1,2,3,4,5,6};
        List<Integer> sid = new ArrayList<Integer>();
        for (int i=0;i<idList.length;i++){
    
                //for循环赋值
            sid.add(idList[i]);
        }
        List<Student> students = studentDao.findAllById(sid);
        return new JsonResult<>(students,"获取列表成功");
    }

}

Dao层 StudentDao.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.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;

import javax.transaction.Transactional;
import java.util.Date;
import java.util.List;
import java.util.Map;

public interface StudentDao extends JpaRepository<Student,Integer> {
    
    
    @Query(value = "select * from Student ",nativeQuery = true)   //查询全部
    List<Map<String,Object>> findAllDa();

    @Query(value = "select * from Student",nativeQuery = true)   //查询全部
    List<Student> findAllData();

    @Query(value = "select * from Student where sname like CONCAT ('%',:sname,'%')",nativeQuery = true)
    List<Student> findAllBySnameLike(String sname);               //模糊查询

    @Query(value = "select * from Student where sid= :sid",nativeQuery = true)
    Student findBySid(@Param("sid")int sid);                    //根据sid获取

    @Transactional
    @Modifying
    @Query(value="update student set sname=?1,sex=?2,scard=?3,stelephone=?4,sbirthday=?5,scid=?6 where sid=?7",nativeQuery = true)
    int doUpdate(String sname, String sex, String scard, String stelephone, Date sbirthday, int scid, int sid);

//    @Query(value = "select * from People",nativeQuery = true)   //查询全部

    List<Student> findAll(Specification<Student> specification);
    Long count(Specification<Student> specification);
    Page<Student> findAll(Specification<Student> specification, Pageable pageable);


}

Service 服务层 StudentService.java

package com.sdbairui.demo.Service;

import com.sdbairui.demo.Dao.StudentDao;
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 StudentService {
    
    
    @Resource
    StudentDao studentDao;

    public List<Map<String,Object>> findAllDa(){
    
    
        return studentDao.findAllDa();
    }

    public List<Student> findAllData(){
    
    
        return studentDao.findAllData();
    }                 //查询全部

    public void doCreate(Student student){
    
    
        studentDao.save(student);
    }                       //添加方法

    public void doDelete(Student student){
    
    
        studentDao.delete(student);
    }                     //删除方法

    public List<Student> findAllBySnameLike(String sname){
    
    
        return studentDao.findAllBySnameLike(sname);
    }                     //模糊查询

    public Student findBySid(int sid){
    
    
        return studentDao.findBySid(sid);
    }                     //获取id

    /*public int doUpdate(String sname, String sex, String scard, String stelephone, Date sbirthday, int scid,int sid){     //修改
        return peopleDao.doUpdate(sname,sex,scard,stelephone,sbirthday,scid,sid);
    }*/
    public void doUpdate(Student student){
    
            //简化修改操作方法
        studentDao.save(student);                 //调用Dao层封装好的 save方法
    }

    public void save(Student student) {
    
                //简化添加方法
        studentDao.save(student);
    }


    /**
     * 获取结果集
     *
     * @param pageNo
     * @param pageSize
     * @param student student
     * @return
     */
    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.getSname() != null) {
    
    
                    predicateList.add(criteriaBuilder.like(root.get("sname"),"%" + student.getSname() + "%"));//模糊查询  通过名字
                }
                if (student.getClasses() != null) {
    
    
                    predicateList.add(criteriaBuilder.equal(root.get("classes"),student.getClasses()));
                }
           /* 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 = peopleDao.findAll(queryCondition);
            } else {
    
    
                result = studentDao.findAll(queryCondition, PageRequest.of(pageNo - 1, pageSize, Sort.by(Sort.Direction.DESC, "sid")));
            }
        } catch (Exception e) {
    
    
            //  LOGGER.error("--queryFlowByCondition-- error : ", e);
        }

        return result;
    }

}

Html 主页面 index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>一个页面实现增删改查</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style type="text/css">
        /*分页*/
        .page-bar{
    
    
            margin:40px auto;
            margin-top: 50px;

        }
        ul,li{
    
    
            margin: 0px;
            padding: 0px;
        }
        li{
    
    
            list-style: none
        }
        .page-bar li:first-child>a {
    
    
            margin-left: 450px
        }
        .page-bar a{
    
    
            border: 1px solid #ddd;
            text-decoration: none;
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #5D6062;
            cursor: pointer;
            margin-right: 20px;
        }
        .page-bar a:hover{
    
    
            background-color: #eee;
        }
        .page-bar a.banclick{
    
    
            cursor:not-allowed;
        }
        .page-bar .active a{
    
    
            color: #fff;
            cursor: default;
            background-color: #E96463;
            border-color: #E96463;
        }
        .page-bar i{
    
    
            font-style:normal;
            color: #d44950;
            margin: 0px 4px;
            font-size: 12px;
        }

    </style>

</head>
<body>
<div id="app">       <!-- 视图-->
    {
    
    {
    
    message}}
    <input name="button" type="button" value="点我获取数据" v-on:click="getData()">

    <table border="2" width="80%" align="center">
        <tr>
            <th colspan="8"><b>学生信息展示</b></th>
        </tr>
        <tr>
            <th><a v-on:click="addstu()">添加</a></th>
        </tr>
        <tr>
            <th colspan="8">
                姓名<input type="text" name="sname" v-model="like.sname">
                班级<input type="text" name="classes" v-model="like.classes">
                <input type="submit" value="搜索" v-on:click="getData()">
            </th>
        </tr>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>生日</td>
            <td>班级</td>
            <td>成绩--科目</td>
            <td>操作</td>
        </tr>
        <tr v-for="(v,index) in object">       <!-- index是数组的下标-->
            <td><input type="checkbox">{
    
    {
    
    v.sid}}</td>
            <td>{
    
    {
    
    v.sname}}</td>
            <td>         <!--如果sex是tinyint字段类型-->
            <div v-if="v.sex == 1">男</div>
            <div v-else>女</div>
            </td>
            <td>{
    
    {
    
    v.birth}}</td>
            <td>{
    
    {
    
    v.classes}}</td>
            <td>
                <ul>
                    <li v-for="v in v.score">{
    
    {
    
    v.grade}}---{
    
    {
    
    v.course.cname}}</li>
                </ul>
            </td>
            <td>
                <a v-on:click="editStu(v.sid,index)">修改</a>
                <a v-on:click="del(v.sid,index)">删除</a>
            </td>
        </tr>
    </table>
    <div class="page-bar">
        <ul>
            <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
            <li v-if="cur==1"><a class="banclick">上一页</a></li>
            <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
                <a v-on:click="btnClick(index)">{
    
    {
    
     index }}</a>
            </li>
            <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
            <li v-if="cur == all"><a class="banclick">下一页</a></li>
            <li><a>共<i>{
    
    {
    
    all}}</i>页</a></li>
        </ul>
    </div>



    <div v-show="status" id="add" style="margin-top:30px">
        <center>
            <form action="/stu/dodoAdd">
                <table border="2" width="80%" align="center">
                    <tr>
                        <td>姓名：</td>
                        <td><input type="text" name="sname" v-model="add.sname"></td>
                    </tr>
                    <tr>
                        <td>性别：</td>
                        <td><input type="text" name="sex" v-model="add.sex"></td>
                    </tr>
                    <tr>
                        <td>日期：</td>
                        <td><input type="date" name="birth" v-model="add.birth"></td>
                    </tr>
                    <tr>
                        <td>班级：</td>
                        <td><input type="text" name="classes" v-model="add.classes"></td>
                    </tr>
                    <tr><td><input type="button" value="提交" v-on:click="check()"></td></tr>
                </table>
            </form>
        </center>
    </div>



</div>



<script>          /* 脚本*/
var Vm=new Vue({
    
    
    el:"#app",                  //id选择器
    data:{
    
    
        status:false,
        message:"",
        like:{
    
    },
        loves: [],     //一维数组
        object:[],
        add:{
    
    },           //初始化表单数据  学生信息添加
        classes:{
    
    },      //初始化班级信息
        all: 3,       //总页数
        cur: 1,       //当前页码
        totalPage: 0,//当前条数
    },
    mounted() {
    
    
        this.getData();
        this.getClasses();
    },
    methods:{
    
                      //点击触发事件
        getData:function(page){
    
              //获取学生信息
            if (page== null || page== ""){
    
    
                page = 1;
            }
            $.ajax({
    
    
                type:'post',
                url:'http://localhost:8080/stu/index?page='+page,        //请求目标
                data: this.like,
                dataType:"json",               //返回数据格式类型
                success: function (result) {
    
    
                    //  alert(JSON.stringify(result));    //JSON解析为字符串
                    if(result.code==0){
    
       //0是无错误正常
                        var  a=result.data.content.length;
                        Vm.object=[];   //赋值为空，避免追加-
                        for(var i=0;i<a;i++){
    
    
                            Vm.object.push(result.data.content[i]);  //push往数组中追加元素
                        }
                    }
                    // else{
    
    
                    //     //alert("获取数据失败，网络异常")
                    //     Vm.message=result.msg;
                    // }

                    //    window.location.href="/people/topeople";   //返回首页
                }
            });
        },
        addstu:function(){
    
          //添加学生信息
            Vm.status=true;                  //点击添加  弹出添加页面
            Vm.getClasses();                 //获取班级列表   （班级下拉框）
        },
        check:function(){
    
          //自定义check方法   添加学生数据
            /*  if(vm.people.sname==null || vm.people.sname==""){
               alert("姓名不能为空");
               return false;
           }*/
            $.ajax({
    
    
                url: "http://localhost:8080/stu/dodoadd",
                data: Vm.add,         //JSON数据
                success: function (data) {
    
    
                    Vm.add={
    
    };
                    Vm.getData();   //添加完内容  添加页面表格清空

                    alert(JSON.stringify(data));    //字符串转化
                }
            })
        },
        del:function(sid,index){
    
       //删除学生信息
            //1.当前行隐藏
            //2.数据表删除
            $.post("http://localhost:8080/stu/doDel",{
    
    sid:sid},function(data){
    
    
                if(data.code==0){
    
    
                    Vm.object.splice(index,1);
                }else{
    
    
                    alert("操作异常");
                }
            });
        },
        getClasses:function () {
    
                  //获取班级信息
            $.post('http://localhost:8080/stu/toto',{
    
    },function (result) {
    
    
                // alert(JSON.stringify(result))
                if(result.code==0){
    
       //0是无错误正常
                    var  a=result.data.length;
                    Vm.classes=[];   //赋值为空，避免追加-
                    for(var i=0;i<a;i++){
    
    
                        Vm.classes.push(result.data[i]);  //push往数组中追加元素
                    }
                }else{
    
    
                    //alert("获取数据失败，网络异常")
                    Vm.message=result.msg;
                };
            })
        },
        editStu:function(sid){
    
                 //获取sid的内容
            $.post("http://localhost:8080/stu/edit",{
    
    sid},function(result){
    
    
                Vm.status=true;
                alert(JSON.stringify(result));
                Vm.add=result.data;
               // delete Vm.add.classes;
               // Vm.getClasses();
            });
        },


        //分页
        btnClick: function(data){
    
    //页码点击事件
            if(data != this.cur){
    
    
                this.cur = data
            }
//根据点击页数请求数据
            this.getData(this.cur.toString());
        },
        pageClick: function(){
    
    
//根据点击页数请求数据
            this.getData(this.cur.toString());
        }


    },
    computed: {
    
    
        //分页
        indexs: function(){
    
    
            var left = 1;
            var right = this.all;
            var ar = [];
            if(this.all>= 5){
    
    
                if(this.cur > 3 && this.cur < this.all-2){
    
    
                    left = this.cur - 2
                    right = this.cur + 2
                }else{
    
    
                    if(this.cur<=3){
    
    
                        left = 1
                        right = 5
                    }else{
    
    
                        right = this.all
                        left = this.all -4
                    }
                }
            }
            while (left <= right){
    
    
                ar.push(left)
                left ++
            }
            return ar
        }
    },
})

</script>
</body>
</html>