springboot整合vue04-前后端数据交互

1.分页列表

打开elementui官网，地址： https://element.eleme.cn/#/zh-CN

找一个看顺眼的列表拷贝代码到vue工程；

 

然后找一个看顺眼的分页组件，拷贝代码到vue工程；

 

后台提供一个分页接口

@RestController
@RequestMapping("/book")
public class BookController {
    @Autowired
    private BookRepository books;
 
    @GetMapping("/query/{page}/{size}")
    public Page<Book> query(@PathVariable("page")Integer page,
                            @PathVariable("size")Integer size
        ){
        //封装一个分页对象
        PageRequest pageRequest = PageRequest.of(page, size);
        //findAll的重载方法，传入一个PageRequest对象，返回一个Page对象
        return books.findAll(pageRequest);
    }
}

 

前端用axios做get请求分页接口

需要在created事件中请求；

<template>
    <div>
        <!--列表-->
        <el-table
        :data="books"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="书名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          width="120">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
 
        <!--分页组件-->
        <el-pagination
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="page"
          :total="total">
        </el-pagination>
    </div>
</template> 
 
<script>
  export default {
    name:'PageOne',
    methods: {
      handleClick(row) {
        console.log(row);
      },
      page(currentPage){
          const _this = this;
          axios.get("http://localhost:8090/book/query/"+(currentPage - 1)+"/5").then(function (resp) {
              _this.books=resp.data.content;
              _this.total=resp.data.totalElements;
              _this.pageSize=resp.data.size;
          })
      }
    },
 
    data() {
      return {
        books: [{
          id: '1',
          name: '他改变了季汉',
          author: '诸葛村夫',
        }, {
            id: '2',
            name: '历史选择了曹老板',
            author: '王司徒',
        }, {
            id: '3',
            name: '刘黄书最后的革命',
            author: '小懿子',
        }],
        pageSize:'1',
        total:'10',
          
      }
    },
    created(){
        const _this = this;
        axios.get("http://localhost:8090/book/query/0/5").then(function (resp) {
            _this.books=resp.data.content;
            _this.total=resp.data.totalElements;
            _this.pageSize=resp.data.size;
        })
    }
 
  }
</script>

 

页面效果：

 

2.新增数据

在elementui官网找一个合适的表单，拷贝代码到vue工程，根据需要修改

 

后台增加一个插入数据的web接口：

@Autowired
private BookRepository books;
 
@RequestMapping("/add")
public String add(@RequestBody Book book){
    Book res = books.save(book);
    if(res != null){
        return "success";
    }else{
        return "error";
    }
}

 

然后在vue工程中调用后台接口：

<template>
    <div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="书名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="ruleForm.author"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
 
<script>
      export default {
        name:'PageTwo',
        data() {
          return {
            ruleForm: {
              name: '',
              author: ''
            },
            rules: {
              name: [
                { required: true, message: '请输入书名', trigger: 'blur' },
                { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
              ],
              author: [
                { required: true, message: '请输入作者', trigger: 'blur' }
              ]
            }
          };
        },
        methods: {
          submitForm(formName) {
            const _this = this;   //取vue对象
            this.$refs[formName].validate((valid) => {
              if (valid) {
                //ajax请求
                axios.post("http://localhost:8090/book/add", this.ruleForm).then(function (resp) {
                  if(resp.data == 'success'){
                    _this.$router.push("/p1");  //添加成功跳到列表页
                  }else{
                      alert("error");
                  }
                });
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
      }
    </script>

　　

3.编辑数据

需要先跳到详情页面，然后编辑，因此需要前端提供一个详情页面；

需要后端提供两个接口分别用来通过该id查询、保存编辑；

 

1）后端接口：

//通过id查询
@GetMapping("/get/{id}")
public Book get(@PathVariable("id")Integer id){
    return books.findById(id).get();
}
 
//编辑
@RequestMapping("/edit")
public String edit(@RequestBody Book book){
    Book res = books.save(book);
    if(res != null){
        return "success";
    }else{
        return "error";
    }
}

 

2）跳转到编辑页面

点击编辑按钮，要跳到编辑页面，并且将当前行的id传过去，用来通过id请求后台获取详情数据；

 

编辑按钮：

<template slot-scope="scope">
  <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
  <el-button @click="toEdit(scope.row)" type="text" size="small">编辑</el-button>
</template>　　

分析拷贝过来的列表代码，可以看出来：<template slot-scope="scope">标签下可以用scope.row取到当前行的信息；

用click事件绑定toEdit方法，传入的参数为列表的row；

得到了row，就能通过row.id取到当前行的id；

 

在method中添加一个toEdit方法用来跳转到编辑页面：

toEdit(row){        //跳转到编辑页，并且将选中行的id传过去
    this.$router.push({
        path:'/p3',
        query:{
            id:row.id
        }
    })
}　　

这里是用$router.push跳到编辑页的路由，需要在router目录下给编辑页面配置路由；

 

3）编辑页面

这个页面和新增数据页面类似，可以直接拷贝代码过去，适当修改即可；

需要在created事件中接收传过来的id，并且请求后台得到数据然后填到表单中；

可以用$route.query来得到传过来的参数；（一般$route用来取参数，而$router用来做跳转）

created(){
    const _this = this;
    var id = this.$route.query.id;
    if(id > 0){
        axios.get("http://localhost:8090/book/get/" + id).then(function (resp) {
            _this.ruleForm = resp.data;
        })
    }
}　

 

做完表单填充后，还需要做保存编辑；

包括几个步骤：

    一个ajax提交表单，请求后台的编辑接口；

    保存成功后调回分页列表；

methods: {
  submitForm(formName) {
    const _this = this;   //取vue对象
    this.$refs[formName].validate((valid) => {
      if (valid) {
        //ajax请求
        axios.post("http://localhost:8090/book/edit", this.ruleForm).then(function (resp) {
          if(resp.data == 'success'){
            _this.$router.push("/p1");  //添加成功跳到列表页
          }else{
              alert("error");
          }
        });
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  },
  resetForm(formName) {
    this.$refs[formName].resetFields();
  },
},

 

4.删除

1）后台提供一个删除接口：

@GetMapping("/del/{id}")
public void delete(@PathVariable("id")Integer id){
    books.deleteById(id);
}

 

2）前端

给列表的删除操作绑定一个delete方法；

通过scope.row可以去到目标行的id；

然后用id做参数用axios请求后台；

删除完成后刷新列表；

 

为了防止误删，可以加一个提示弹框；

在elementui中找一个好看的弹框，将代码拷过来；

主要代码：

del(row){
   const _this = this;
   _this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
    axios.get("http://localhost:8090/book/del/"+row.id).then(function (resp) {
        _this.$message({
          type: 'success',
          message: '删除成功!'
        });
        window.location.reload(); //刷新页面
    });
 
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });
  });
}