保姆级教程：Spring Boot+Vue前后端分离开发（第四天）

已于 2024-08-18 12:14:19 修改
阅读量303 收藏 6
点赞数 3
文章标签： spring boot vue.js 后端
于 2024-07-30 19:56:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41567696/article/details/140801439
版权

保姆级教程：Spring Boot+Vue前后端分离开发：第四天

第四天任务概要

在前三天的学习中，我们选择了一种布局，并完成了路由的设置。在本节中，将实现数据库数据的展示。

第一步：表格组件的选择

数据展示需要Element UI的Table组件，因此打开Element UI官网https://element.eleme.cn/#/zh-CN/component/table，复制该组件相应的代码：
在这里插入图片描述
然后将刚才复制的代码粘贴到Page1.vue中，Page1.vue完整代码如下：

在这里插入图片描述
Page1.vue：

<template>
	<div>
	    <el-table
	            :data="tableData"
	            border
	            style="width: 100%">
	        <el-table-column
	                fixed
	                prop="date" #对应tableData里的Date
	                label="日期"
	                width="150">
	        </el-table-column>
	        <el-table-column
	                prop="name" #对应tableData里的name，下面依次类推
	                label="姓名"
	                width="120">
	        </el-table-column>
	        <el-table-column
	                prop="province"
	                label="省份"
	                width="120">
	        </el-table-column>
	        <el-table-column
	                prop="city"
	                label="市区"
	                width="120">
	        </el-table-column>
	        <el-table-column
	                prop="address"
	                label="地址"
	                width="300">
	        </el-table-column>
	        <el-table-column
	                prop="zip"
	                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>
    </div>
</template>

<script>
    export default {
        name: "Page1",
        methods: {
            handleClick(row) {
                console.log(row);
            }
        },

        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        }
    }
</script>

<style scoped>

</style>

第二步：添加分页插件

由于后台数据库中的数据量庞大，因此需要加载分页插件。打开Element UI官网https://element.eleme.cn/#/zh-CN/component/table，选择一个分页插件，并复制该分页组件相应的代码：
在这里插入图片描述
里面涉及到了div与script，因此将其复制到相应的标签中，此时page1.vue代码如下：

<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="date" #对应tableData里的Date
                    label="日期"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name" #对应tableData里的name，下面依次类推
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="省份"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="市区"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    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-switch v-model="value">
        </el-switch>
        <el-pagination
                :hide-on-single-page="value"
                :total="1000"
                layout="prev, pager, next"
                page-size="10" 
                @current-change="page"><!--page-size="10":每页有10条记录   @current-change:绑定页面切换的事件-->
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "Page1",
        methods: {
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){

            }
        },

        data() {
            return {
                value: false,
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        }
    }
</script>

<style scoped>

</style>

在这里插入图片描述
前端编写完毕！

第三步：编写后端代码

打开第一天编写的后端代码，为BookController添加分页插件，BookController.java完整代码如下：

import com.cas.vuespringboot.entity.Book;
import com.cas.vuespringboot.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.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private BookRepository bookRepository;

    @GetMapping("/findAll/{page}/{size}")
    public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){//由于前端进行了分页，因此后端也需要配置分页插件。
        Pageable pageable= PageRequest.of(page-1,size);//在后端分页插件中，第一页从0开始。而前端从1开始，因此需要进行page-1。
        return bookRepository.findAll(pageable);//返回相应页面的数据
    }
}

第四步：完善前端代码，与后端代码实现对接

打开前端项目，终端中输入vue add axios，安装axios组件。
在这里插入图片描述
在Page1.vue中添加axios实现前后端交互，同时修改列的属性，完整代码如下：

<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-switch v-model="value">
        </el-switch>
        <el-pagination
                :hide-on-single-page="value"
                :total="1000"
                layout="prev, pager, next"
                page-size="10"
                @current-change="page"><!--page-size="10":每页有10条记录   @current-change:绑定页面切换的事件-->
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "Page1",
        methods: {
            handleClick(row) {
                console.log(row);
            },
            <!--实现后面页面的跳转-->
            page(currentPage){
                const _this=this
                <!--page()当中也添加axios.get()是为了实现分页跳转-->
                axios.get("http://localhost:8081/book/findAll/"+currentPage+"/10").then(function(resp){
                    _this.tableData=resp.data.content
                    _this.total=resp.data.totalElements
                })
            }
        },
        <!--打开链接时，先自动跳转到第一页-->
        created() {
            const _this=this
            axios.get("http://localhost:8081/book/findAll/1/10").then(function(resp){
                _this.tableData=resp.data.content
                _this.total=resp.data.totalElements
            })
        },

        data() {
            return {
                value: false,
                total: null,
                tableData: []
            }
        }
    }
</script>

<style scoped>

</style>

同时启动前后端项目，发现Page1.vue与后端已对接完成，完毕！
在这里插入图片描述

YZ122552
关注
保姆级课程：Spring Boot+Vue前后端分离开发（第一天）
qq_41567696的博客
07-26 993
运行启动类，启动后端项目，在浏览器地址栏输入：http://localhost:8081/book/findAll。使用VUE3的朋友可能会发现main.js中存在语法报错的问题，原因是IDEA js版本太低。导入完成之后，打开File->settings->Plugins，下载并安装Vue.js插件。当安装完成之后，App.vue变为相应图标，导入过程完成，可以进行开发。输入http://localhost:8080/book，跳出页面。选中刚才新建的项目，点击下方的OK。
保姆级课程：Spring Boot+Vue前后端分离开发（第二天）
qq_41567696的博客
07-27 284
保姆级教程：Spring Boot+Vue前后端分离开发：第二天第二天任务概要第一步：新建一个VUE工程第二步：VUE安装ElementUI第三步：打开ElementUI官网，进行代码参考第四步：通过Vue router动态加载菜单 第二天任务概要 学习Element UI的使用 第一步：新建一个VUE工程 参考我之前的文章： https://blog.csdn.net/qq_41567696/article/details/140696957 VUE2.0建议采用第一种方式创建 创建完成后，使用cd命令进
保姆级教程：Spring Boot+Vue前后端分离开发（第五天）
qq_41567696的博客
08-02 548
在前四天的学习中，我们选择了一种布局，并完成了路由的设置，同时实现了后台数据在前端页面的展示。在本节中，我们紧接着上一节的代码，实现数据的增加，删除与修改。1.打开index.js，将前第一个导航栏的名称修改为“数据管理”，其子导航栏修改为“数据查询”与“数据添加”。完整覆盖DataAdd.vue的代码内容，同时添加Template标签，并删除无用的输入框。，由于需要添加数据，因此需要进行form表单的提交，引入form组件。//这个this指的是vue的this。//这个this指的是vue的this。
保姆级教程：Spring Boot+Vue前后端分离开发（第六天）
qq_41567696的博客
08-03 740
在前五天的学习中，我们选择了一种布局，完成了路由的设置，实现了后台数据在前端页面的展示，同时实现了数据的添加操作。在本节中，我们紧接着上一节的代码，实现数据的删除与修改。2.处理修改的方法：将id传到后台，然后后台找到id=1的数据，然后进行修改操作。//this.$route.query.id //获取id值，实现通过id对数据的修改。至此，该小demo已全部完成。具体细节可能没有讲清楚，大家可以自行查资料，网上都有，甚至比我都有讲的详细。执行删除操作则无需再跳转到新的页面，因此无需编写前端相应的代码。
保姆级课程：Spring Boot+Vue前后端分离开发（第三天）
qq_41567696的博客
07-29 417
一定要加，实现页面的渲染，即跳转到相应的页面后，实现相应页面数据的显示，否则相应页面的数据无法显示。剩下三天时间会实现一个完整的前后端分离项目，后面不见不散~（2）黄色部分是显示资源的窗口，随着导航栏选项选择的改变，显示我们想要的资源。继续学习Element UI的使用，学习如何设置动态路由导航栏。此外，还需要对导航栏进行其他修改，因此让我们开启今天的学习之旅。然而在第二天的课程中，发现页面有两个导航栏进行了嵌套。（1）红色部分为App.vue,是不变的部分；'上海市普陀区金沙江路 1518 弄'
SpringBoot+Vue前后端分离开发案例
听夜雨声烦
03-07 2036
快速搭建前后端开发平台，实现前后端交互
2024最新最详细保姆教程！SpringBoot+Vue前后端分离项目部署运行教程文档。
06-18 958
如果过程中遇到任何报错问题，不要担心，一步一步跟着我的视频，我的笔记来排查。相信你最终也一定可以运行出来项目，能够独立运行出来这个项目是个非常有成就感的事情。能够这么认真仔细教你如何安装软件，部署项目的up主你还见过第二个吗？这么宝藏的up还不来个一键三连+关注！
Springboot+Vue前后端分离项目-管理系统-上
m0_56308072的博客
05-28 5596
前端技术Vue 前端框架Vuex 全局状态管理框架ElementUI 前端UI框架。
【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 后端
热门推荐
大菜的博客
02-09 3万+
【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
Spring Boot 3 + Vue 3 开发的前后端分离学习型小说项目
09-05
ovel 是一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型 小说项目，配备保姆级教程手把手教你从零开始开发上线一套生产级别的 Java 系统，由小说门户系统、作家后台管理系统、平台...
novel 是一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型小说项目
06-13
novel 是一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型小说项目，配备保姆级教程手把手教你从零开始开发上线一套生产级别的 Java 系统，由小说门户系统、作家后台管理系统、平台后台...
在线订餐革命：Spring Boot 点餐系统
2402_85762143的博客
09-25 1346
系统所要实现的功能分析，对于现在网络方便的管理，根据自己的需求可以进行查看信息等，这样既能节省用户的时间，不用在像传统的方式，需要查询、由于很多用户时间的原因，没有办法去了解，真的很难去满足用户的各种需求。网上点餐系统及信息分析的设计对于所使用的计算机没有什么硬性的要求，计算机只要可以正常的使用进行代码的编写及页面设计就可行，主要是对于服务器有些要求，对于平台搭建完成要上传的服务器是有一定的要求的，服务器必须选择安全性比较高的，然后就是在打开系统必须顺畅，不能停顿太长时间；系统数据库删除信息。
Spring Boot房屋租赁平台：现代化解决方案
2401_85439108的博客
09-25 722
根据基于Spring Boot的房屋租赁系统编写的论文主要阐述了房屋租赁系统的开发过程中使用的技术，首先进行系统需求分析，进而进行系统设计，最后才是系统功能实现以及测试几个部分，在开始编写论文之前亲自到图书馆借阅JAVA书籍，MYSQL数据库书籍等编程书籍，然后针对开发的基于Spring Boot的房屋租赁系统，去网上查找了很多别人做好的系统，根据他们的功能设计进行自己的系统的系统功能结构设计，出具需求报告，最后才是进行程序编码，系统完成后才能进行测试和最后的验收工作，程序开发流程大致如此。
Spring Boot 进阶- Spring Boot入门程序详解
初学者
09-25 1301
在之前的项目中我们看到在resource目录中有一个application.properties的文件，现在我们习惯使用application.yml配置文件，其实二者所实现的效果是一样的。在Spring Boot中为开发者提供了很多的场景启动器，并且这些启动器的配置信息并不是在内部写死的，例如配置数据库、配置中间件、配置服务的端口号这些内容。在Spring Boot中统一使用了Properties类对这些配置进行了抽象。在Spring启动的时候可以通过对应的配置前缀进行读取相应的配置值。
Java项目实战II基于Java+Spring Boot+MySQL的免税商品优选购物商城(源码+数据库+文档)
最新发布
2401_86524610的博客
09-30 1054
随着全球贸易的日益繁荣和消费者需求的多样化，免税商品购物已成为众多旅行者和消费者的热门选择。为了提供一个更加便捷、高效且优质的免税商品购物体验，我们精心打造了一款基于Java、Spring Boot和MySQL的免税商品优选购物商城系统。本系统充分利用Java语言的稳定性和Spring Boot框架的灵活性，结合MySQL数据库的高效存储能力，旨在为用户打造一个功能全面、操作简便的在线购物平台。通过系统的智能化推荐和详尽的商品信息展示，用户能够轻松浏览并选购心仪的免税商品，享受前所未有的购物乐趣。
【2025】基于Spring Boot的智慧农业小程序（源码+文档+调试+答疑）
qq_42624269的博客
09-25 602
基于Spring Boot的智慧农业小程序，该项目包含源码、文档、项目介绍PPT、项目图文修改教程、配套的开发软件、软件安装教程、项目调试和发布的学习内容。
使用 Loki、Loki4j、Grafana 和 Spring Boot 搭建一个轻量级、简单、易用的 Java 日志系统
XiaoCai
09-24 948
Loki：类似于 Prometheus 的日志系统，但 Loki 并不索引日志的内容，而是通过标签（label）进行索引，使用 PromQL 进行查询，轻量级且高效。Loki4j：一个适用于 Java 项目的日志库，可以将 Spring Boot 项目的日志直接推送到 Loki。Grafana：用于可视化 Loki 中存储的日志，并提供查询、分析和展示日志的功能。：作为 Java 应用框架，用于生成日志并集成 Loki4j 进行日志传输。Loki提供日志的存储和索引，轻量高效。Loki4j。
敬老院管理系统源码：Spring Boot + Vue前后端分离
资源摘要信息:"敬老院管理系统是一个结合了后端Spring Boot框架和前端Vue.js框架的项目，实现了前后端分离的模式。该项目是用于管理敬老院日常运营的软件系统，提供了完整可运行的源码以及相关的sql文件，可以被直接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YZ122552

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值