SpringBoot+vue+jpa+mysql前后台分离实现增删改查分页和三级联动（附源码）（三）

最新推荐文章于 2024-05-28 19:52:48 发布
最新推荐文章于 2024-05-28 19:52:48 发布
阅读量367 收藏 2
点赞数
文章标签： vue.js spring boot mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengyatong/article/details/126098719
版权

前面完成了新建项目和后台内容的编写，接下来编写前台的内容。
首先是目录结构：
在这里插入图片描述
前台的内容不多
这里用到了axios和Element-ui 所以需要先安装依赖：
安装axios:npm install axios
安装element-ui:npm i element-ui -S
之后在main.js中引入：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
/* 引入Element UI */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
/* 引入axios */
import axios from 'axios';
import qs from 'qs';


Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

axios.defaults.baseURL = 'http://localhost:8083/book/'// 接口地址

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue里面的内容：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<style>
</style>

接下来是文件的新建，
在src下面新建一个views的文件夹：
在其中新建文件：addBook.vue,Book.vue,BookUpdate.vue,Linked.vue;
在router下面的index.js中引入路由：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Book from '@/views/Book'
import addBook from '@/views/addBook'
import BookUpdate from '@/views/BookUpdate'
import linked from '@/views/Linked'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Book',
      component: Book
    },
    {
      path: '/addBook',
      name: 'addBook',
      component: addBook
    },
    {
      path: '/linked',
      name: 'linked',
      component: linked
    },
    {
      path:'/update',
      component:BookUpdate
      // show:false
    }
  ]
})

const router = new Router({

})

之后就是页面的编写以及调取后台接口：
addBook.vue:

<template>
    <el-form style="width: 60%" :model="bookForm" :rules="rules" ref="bookForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="图书名称" prop="name">
            <el-input v-model="bookForm.name"></el-input>
        </el-form-item>

        <el-form-item label="作者" prop="author">
            <el-input v-model="bookForm.author"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('bookForm')">提交</el-button>
            <el-button @click="resetForm('bookForm')">重置</el-button>
        </el-form-item>

    </el-form>
</template>

<script>
import axios from 'axios';
    export default {
        data() {
            return {
                bookForm: {
                    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) {
                        axios.post('http://localhost:8083/book/add',this.bookForm).then(function(resp){
                            if(resp.data == true){
                                _this.$alert('《'+_this.bookForm.name+'》添加成功！', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push('/')
                                    }
                                })
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

Book.vue:

<template>
    <div class="book">
        <el-form :model="bookForm" :ref="bookForm" class="bookContainer">
            <el-form-item prop="name">
                <el-input v-model="bookForm.name" auto-complete="false" placeholder="书本名字" type="text"
                style="width: 350px"></el-input>
                <el-button icon="el-icon-search" circle type="primary" @click="getList(1)"></el-button>
                <el-button type="success" round @click="addBook">新增图书</el-button>
                <el-button type="info" round @click="Linked">三级联动</el-button>
            </el-form-item>

            <el-table :data="bookList">
                <el-table-column prop="id" label="编号" width="150"></el-table-column>
                <el-table-column prop="name" label="名称" width="150"></el-table-column>
                <el-table-column prop="author" label="作者" width="150"></el-table-column>
                <el-table-column label="操作列">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="removeById(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination 
                :current-page="currentPage" 
                :page-size="pageSize"
                :total="total"
                style="padding: 30px 0; text-align: center;"
                @prev-click="getList"
                @next-click="getList"
                layout="total, prev, pager, next, jumper"
                @current-change="getList"></el-pagination>
        </el-form>
    </div>


</template>

<script>
import axios from 'axios';
export default {
    name: 'book',
    data() {
        return {
            currentPage: 1,
            pageSize: 2,
            total: 0,
            bookForm:{
                name: ''
            },
            bookList: [],
        }
    },
    created() {
        this.getList(this.currentPage);
    },
    methods: {
        addBook(){
             this.$router.push({
                path: '/addBook',
            })
        },
        Linked(){
             this.$router.push({
                path: '/linked',
            })
        },
        removeById(row){
            const _this = this
            this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{  //点击确定执行then方法
                //调用删除的方法
                axios.delete('http://localhost:8083/book/delete/'+row.id).then(function(resp){})
                .then(response =>{
                    //删除成功 提示信息
                    this.$message({
                        type:'success',
                        message:'删除成功^-^'
                    });
                    //回到列表页面
                    _this.getList(this.pageSize-1);
                })
            })//点击取消 执行catch方法
        },
        edit(row) {
            this.$router.push({
                path: '/update',
                query:{
                    id:row.id
                }
            })
        },
        getList(currentPage){
           const _this=this
            _this.currentPage = currentPage;
            axios.get('http://localhost:8083/book/'
            + 'page?currentPage=' + _this.currentPage
            + '&pageSize=' + this.pageSize + '&name=' + _this.bookForm.name).then(function(resp){
                console.log(resp)
                _this.bookList = resp.data.content
                _this.pageSize = resp.data.size
                _this.total = resp.data.totalElements
            })
        }
    },
}
</script>

<style>
     .bookContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 0px auto;
        width: 1400px;
        padding: 15px 35px 15px 35px;
        background: wheat;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6ca;
    }
</style>

BookUpdate.vue:

<template>
    <el-form style="width: 60%" :model="bookForm" :rules="rules" ref="bookForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="图书编号">
            <el-input v-model="bookForm.id" readOnly></el-input>
        </el-form-item>

        <el-form-item label="图书名称" prop="name">
            <el-input v-model="bookForm.name"></el-input>
        </el-form-item>

        <el-form-item label="作者" prop="author">
            <el-input v-model="bookForm.author"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('bookForm')">修改</el-button>
            <el-button @click="resetForm('bookForm')">重置</el-button>
        </el-form-item>

    </el-form>
</template>

<script>
import axios from 'axios';
    export default {
        data() {
            return {
                bookForm: {
                    id: '',
                    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) {
                        axios.put('http://localhost:8083/book/update',this.bookForm).then(function(resp){
                            if(resp.data == true){
                                _this.$alert('《'+_this.bookForm.name+'》修改成功！', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push('/')
                                    }
                                })
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created() {
            const _this = this
            axios.get('http://localhost:8083/book/'+this.$route.query.id).then(function(resp){
                _this.bookForm = resp.data
            })
        }
    }
</script>

Linked.vue:

<template>
    <div>
        <el-select v-model="provinceCode" placeholder="省份">
            <el-option
                v-for="item in province"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>

        <el-select v-model="cityCode" placeholder="城市">
            <el-option
                v-for="item in city"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>

        <el-select v-model="value" placeholder="区域">
            <el-option
                v-for="item in town"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'linked',
    created() { this.init(); },
    methods: {
        handleChange(value) {
            console.log(value);
        },
        init() {
            const _this=this;
            axios.get('/province').then(resp => {
                _this.province = resp.data;
            }).catch(function (error) {
                console.log(error);
            })
        },
        findByProvinceCode() {
            const _this=this;
            axios.get('/city/' + _this.provinceCode).then(resp => {
                _this.city = resp.data;
            }).catch(function (error) {
                console.log(error);
            })
        },
        findByCityCode() {
            const _this=this;
            axios.get('/town/' + _this.cityCode).then(resp => {
                _this.town = resp.data;
            }).catch(function (error) {
                console.log(error);
            })
        }
    },
    data() {
        return {
            province: [],
            city: [],
            town: [],
            provinceCode: '',
            cityCode: '',
            value: ''
        }
    },
    watch :{
        //监控provinceCode的变化
        provinceCode: {
            handler() {
                this.city = [],
                this.town = [],
                this.cityCode = '',
                this.value = '',
                this.findByProvinceCode();
            }
        },
        //监控cityCode的变化
        cityCode: {
            handler() {
                this.findByCityCode();
            }
        }
    }
}
</script>

至此工作全部完成：
启动前台和后台，访问路径：http://localhost:8081/#/
可以看到效果：
在这里插入图片描述
全部完成啦

亚统
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
springboot+vue+bootstrap实现用户增删改查
12-19
springboot+vue+bootstrap实现用户增删改查，个人手敲源码
Springboot+vue后台管理系统-数据回显+增删改查的实现
justleavel的博客
02-01 6318
上一篇文章已经基本搭建好了框架并且实现了与数据库的对接，我们这篇文章来讲解怎样完成数据的增删改查 首先是上一篇文章写的新增，但是数据没有回显在前端： 我们首先需要在后端写一个查询数据库数据的方法可以将数据显现出来： 我们这里是分页查询，所以需要给他传两个值，分别是当前页和每页条数：这里的我们默认不传参就是第一页然后十条数据 /** * 查询数据 模糊查询 */ @GetMapping public Result<?> findPage(
springboot+vue 项目中实现增删改查
最新发布
hxy319的博客
05-28 517
最后运行该项目就可以进行数据的增删改查了。
SpringBoot-Vue实现增删改查
m0_62121751的博客
09-30 1136
【代码】SpringBoot-Vue实现增删改查。
SpringBoot+Vue实现增删改查
热门推荐
CoCo629vanilla的博客
03-18 1万+
项目简述：一个小Demo，这是一个实现了数据的增删改查和分页功能的页面 所用技术： 前端——Vue+Element+JQuery 后端——SpringBoot+Springdata jpa 项目流程： 1、创建项目 选择Spring Initializr，确定项目的名称、位置、依赖、域名、SDK等属性 注意：初学者SDK和JDK不要选择太高了，避免出现一些不必要的BUG或者未了解新的特性 点击Next，可以设置Spring Boot版本，同理不要设置的太高了。 同时，在此页面可以导
基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)
04-17
springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO（源码+数据库) 技术栈 数据库：MySQL 后端框架：SpringBoot+Spring Data JPA 前端框架：Vue-ElementUI
springboot+vue+elementui实现增删改查和分页查询
09-20
在本项目中，"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，...
springboot+vue+element增删改查Demo
05-24
springboot+vue+element增删改查Demo 集成了： 1. ​ restful接口定义 2. ​ 增删改查定义，路径参数定义 3. ​ 跨域处理 4. ​ 参数校验 5. ​ 异常拦截 6. ​ swagger文档 7. ​ 测试用例 8. ​ logback...
springboot + jpa+ mysql + vue实现增删改查功能
05-16
在本项目中，我们利用Spring Boot、JPA（Java Persistence API）、MySQL数据库和Vue.js前端框架，构建了一个基本的Web应用程序，实现了数据的增删改查（CRUD）功能。以下将详细介绍这些技术及其在项目中的应用。 1....
基于springboot+vue的商城管理系统源码+数据库（高分毕业设计）.zip
06-08
基于springboot+vue的商城管理系统源码+数据库（高分毕业设计）.zip 高分毕业设计项目，代码完整下载可用，纯手打高分毕业设计，也可作为期末大作业和课程设计，小白也可实战。 基于springboot+vue的商城管理系统...
springboot+vue+bootstrap+mysql实现用户增删改查
12-09
springboot+vue+bootstrap+mysql实现用户增删改查，使用后台springboot技术，前端使用vue和bootstrap，数据库是mysql
SpringBoot + Vue 实现单表的增删改查及分页
Lemon
05-10 3891
前端：Vue 后端：SpringBoot、Mybatis 数据库：MySQL 工具：IDEA 环境：JDK1.8、Tomcat 8
spring boot 使用vue技术，实现增删改查的功能
噗嗤
06-18 602
vue增删改查 前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script src="https://c
springboot+vue实现简单增删改查
qq_46045218的博客
06-02 2434
新手springboot+vue前后分离demo训练练手
Springboot+VUE实现增删改查Demo
You are my sunshine
03-16 803
①Vue的路由问题 新建在views包下面的vue组件都需要在index.js中进行配置，否则无法使用；语法：直接引入即可，注意引完之后可以按ctrl点进去直接查看。 import UserManage from '../views/UserManage.vue' import AddUser from '../views/AddUser.vue' import UserUpdate from '../views/UserUpdate.vue' 下面所定义的数组中包含了具体的路由信息，在地址栏输入的路径，
springboot+vue实现增删改查+分页查询
justleavel的博客
09-20 4402
1：首先。创建一个springboot项目，这里我使用以及构建好基本框架的脚手架，打开是这个样子： Result类：已经封装好了三种返回类型的包装类：code，msg，data 2：创建数据库叫mytest(可以自己取名字) CREATE TABLE `user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '序号', `name` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL COM
【Mybatis】spring boot与vue的结合实现增删查改
清风微醺的博客
07-11 1284
新建数据库 create TABLE Depart( Dname VARCHAR(30) CHARACTER SET utf8 COMMENT '部门名称', Manger VARCHAR(20) CHARACTER SET utf8 COMMENT '负责人', `index` int COMMENT '排序', Tel char(11) COMMENT '联系电话', Email VARCHAR(30) COMMENT '邮箱', `Status` VARCHAR(10) CHARACTE
SpringBoot+Vue实现CURD(增删改查)
qq_44410220的博客
09-04 2408
SpringBoot+Vue实现CURD(增删改查)
springboot+vue前后端分离增删改查
06-28
springboot+vue是一种前后端分离的开发模式，其中...该模式下，可以通过接口实现前后端的交互，实现增、删、改、查等功能。在此模式下，后端主要负责对数据进行操作和处理，前端则主要负责界面展示和交互逻辑的实现。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值