前后端分离进阶二：后台+数据

前三篇：前后端分离初体验一：前端环境搭建

　　　　前后端分离初体验二：后端环境搭建+数据交互

　　　　前后端分离进阶一：使用ElementUI+前端分页

 

参考：https://www.bilibili.com/video/BV137411B7vB

B站UP：楠哥教你学Java

 

项目已上传至GitHub：

　　前端：https://github.com/ownzyuan/vuetest_01

　　后端：https://github.com/ownzyuan/springboot_vue_test_01/tree/master

 

后台+数据库

BookHandler

　PageRequest.of( page,size )：

　page:查询的页数（从0开始，所以-1）

　size：每页显示的数量

package com.zy.controller;
 ​
 import com.zy.entity.Book;
 import com.zy.repository.BookRepository;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 ​
 import java.util.List;
 ​
 @ResponseBody
 @Controller
 @RequestMapping("/book")
 public class BookHandler {
 ​
     @Autowired
     private BookRepository bookRepository;
 ​
     @GetMapping("/findAll/{page}/{size}")
     public Page<Book> findAll(@PathVariable("page")Integer page, @PathVariable("size") Integer size){
         //page:查询的页数（从0开始，所以-1）
         //size：每页显示的数量
         Pageable pageable = PageRequest.of(page-1,size) ;
         Page<Book> bookList = bookRepository.findAll(pageable);
         return bookList;
     }
 }

 

数据库增加字段

 

数据对接

安装 axios 插件

　　命令：vue add axios

PageOne

<template>
     <div>
     <el-table
             :data="tableData"
             border
             style=" 100%">
         <el-table-column
                 fixed
                 prop="id"
                 label="编号"
                 width="150">
         </el-table-column>
         <el-table-column
                 prop="name"
                 label="书名"
                 width="120">
         </el-table-column>
         <el-table-column
                 prop="author"
                 label="作者"
                 width="120">
         </el-table-column>
         <el-table-column
                 fixed="right"
                 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
             layout="prev, pager, next"
 ​
             page-size="6"
 ​
             :total="50"
             @current-change="page"
     >
     </el-pagination>
     </div>
 </template>
 ​
 <script>
 ​
     export default {
         methods: {
             handleClick(row) {
                 console.log(row);
             },
             page(currentPage){
                 const _this = this;
                 axios.get('http://localhost:8181/book/findAll/'+currentPage+'/4').then(function (resp) {
                     _this.tableData = resp.data.content
                     _this.total = resp.data.totalElements
                 })
             }
         },
 ​
         created() {
             const _this = this;
             axios.get('http://localhost:8181/book/findAll/1/4').then(function (resp) {
                 _this.tableData = resp.data.content;
                 _this.total = resp.data.totalElements;
             })
         },
 ​
         data() {
             return {
                 total: null,
                 tableData: null
             }
         }
     }
 </script>

效果

第一页

（一页显示4条内容）

第二页

第三页

 

添加数据

前端

  将 pageOne 更名为 BookManage

  将 pageTwo 更名为 AddBook 并进行操作

AddBook.vue

<template>
     <el-form style=" 60%" :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>
 ​
 </template>
 ​
 <script>
     export default {
         data() {
             return {
                 ruleForm: {
                     name: '',
                     author: ''
 ​
                 },
                 rules: {
                     name: [
                         {required: true, message: '请输入图书名称', trigger: 'blur'}
                     ],
                     author: [
                         {required: true, message: '请输入作者名', trigger: 'blur'}
                     ]
                 }
             };
         },
         methods: {
 ​
             submitForm(formName) {
                 const _this = this;
 ​
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
                         //alert('校验通过!');
                         axios.post('http://localhost:8181/book/save', this.ruleForm).then(function (resp) {
                             if (resp.data == 'success') {
                                 //_this.$message("添加成功");
 ​
                                 _this.$alert('《'+_this.ruleForm.name+'》添加成功!', '成功', {
                                     confirmButtonText: '确定',
                                     callback: action => {
                                         _this.$router.push('/BookManage')
                                     }
                                 });
 ​
 ​
                             } else {
 ​
                             }
                         })
 ​
                     } else {
                         //console.log('error submit!!');
                         return false;
                     }
                 });
             },
             resetForm(formName) {
                 this.$refs[formName].resetFields();
             }
         }
     }
 </script>
 ​
 <style scoped>
 ​
 </style>

修改router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 ​
 import App from "../App"
 import BookManage from "../views/BookManage"
 import Index from "../views/Index"
 import AddBook from "../views/AddBook"
 import PageThree from "../views/PageThree"
 import PageFour from "../views/PageFour"
 ​
 Vue.use(VueRouter)
 ​
 const routes = [
     {
         path: "/",
         name: "图书管理",
         component: Index,
         redirect: "/BookManage",
 ​
         children: [
             {
                 path: "/BookManage",
                 name: "查询图书",
                 component: BookManage
             },
             {
                 path: "/AddBook",
                 name: "添加图书",
                 component: AddBook
             }
         ]
     }
 ​
 ]
 ​
 const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes
 })
 ​
 export default router

 

后端

BookHandler

@Autowired
     private BookRepository bookRepository;
 ​
 @PostMapping("/save")
 public String save(@RequestBody Book book){
     /*@RequestBody：主要用来接收前端传递给后端的json字符串中的数据
       GET方式无请求体，所以使用@RequestBody接收数据时，
       前端不能使用GET方式提交数据，而是用POST方式进行提交*/
 ​
     Book result = bookRepository.save(book);
     if (result != null){
         return "success";
     }else {
         return "error";
     }
 ​
 }

 

数据对接之后

添加页面

 

添加数据

成功

查看