springboot+vue增删改查

SpringBoot+Vue的增删改查

首先：创建好springboot项目之后

1.显示
html页面

<tr>
            <td align="center">编号</td>
            <td align="center">姓名</td>
            <td align="center">性别</td>
            <td align="center">地址</td>
            <td align="center">爱好</td>
            <td align="center">班级</td>
            <td colspan="1" align="center">操作</td>
        </tr>
        <!-- 下面的loopStatus是指在网页里面的表可以按顺序排列-->、
        <tr v-for="(v,key) in stu">
            <td align="center"><input type="checkbox" name="id" id="id"></td>
            <td  align="center">{
   {
   v.name}}</td>
            <td  align="center">{
   {
   v.sex}}</td>
            <td  align="center">{
   {
   v.address}}</td>
            <td  align="center">{
   {
   v.hobbey}}</td>
            <td  align="center">{
   {
   v.cname}}</td>
            <td align="center"><a v-on:click="edit(v.uuid)">修改</a>| <a v-on:click="del(v.uuid)">删除</a>  </td>
        </tr>

vue代码（包含在html文件里面一块写的）

<script>
       var vm = new Vue({
   
           el:'#app',
           data:{
   
               stu:[],
           },
           mounted() {
   
               this.check();
               this.getClassData();
               this.dataListFn(1); //调用分页的方法
           },
           methods:{
   
               check:function () {
   
                   $.post("/stu/indexData",{
   },function (data) {
     //显示操作
                       // alert(JSON.stringify(data))
                       var len  = data.length;
                       for(var i = 0;i<len;i++){
   
                           vm.stu.push(data[i]);
                       }
                   })
               },

调用的controller方法
dao层运用了表连接（查询班级）

 @Query(value = "select *  from stu s  inner join class c   on c.cid = s.scid",nativeQuery = true) //查询所有数据带表连接
    List<Map> findAllData();

service层

 public List<Map> findAllData(){
   return stuDao.findAllData();}

controller层

@RequestMapping("/indexData")
    @ResponseBody