前三篇:先後端分離初體驗一:前端環境搭建html
參考:https://www.bilibili.com/video/BV137411B7vBjava
B站UP:楠哥教你學Javaios
PageRequest.of( page,size ):web
page:查詢的頁數(從0開始,因此-1)spring
size:每頁顯示的數量vue-router
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 axiosjson
<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 並進行操做
<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>
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"; } }
成功