前后端分离进阶二:后台+数据
前三篇:前后端分离初体验一:前端环境搭建
参考: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="width: 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="width: 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"; } }
数据对接之后
添加页面
添加数据
成功
查看