vue前后端分离实现CRUD操作(简略版)

已于 2023-08-19 17:55:16 修改
阅读量1.4k 收藏
点赞数 2
文章标签： 前端 vue.js javascript
于 2023-08-14 19:53:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66228897/article/details/132283099
版权

 前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./vendor/bootstrap-4.3.1-dist/css/bootstrap.css">
    <script src="./vendor/jquery/jquery-3.3.1.js"></script>
    <script src="./vendor/popper.js/popper.min.js"></script>
    <script src="./vendor/bootstrap-4.3.1-dist/js/bootstrap.js"></script>
    <script src="./vendor/vue/vue.js"></script>
</head>
<body>
    
    <div class="container" id="workarea">
        <h3 class="mt-5 mb-3">图书管理系统 <small>在库图书{{bookList.length}}本</small></h3>
        <div class="text-right">
            <button class="btn-primary mb-2" v-on:click="showCreateBookDlg">新增图书</button>
        </div>
        <div class="row">
            <div class="col-12">
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">ISBN编号</th>
                        <th scope="col">图书名称</th>
                        <th scope="col">图书价格</th>
                        <th scope="col">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                        <!-- virtual DOM -->
                        <tr v-for="(book,idx) in bookList">
                            <td>{{idx+1}}</td>
                            <td>{{book.isbn}}</td>
                            <td>{{book.name}}</td>
                            <td>{{book.price}}</td>
                            <td>
                                <button class="btn btn-primary btn-sm" @click="showUpdateModalDlg(idx)">修改</button>
                                <button class="btn btn-danger btn-sm" @click="showRemoveBookDlg(book.isbn,book.name)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

         <!-- addBookModal -->
        <div class="modal fade" id="addBookModal" data-backdrop="static" data-keyboard="false" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">创建新图书</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="promptMsg">
                        <form action="/books" method="post">
                            <div class="form-group">
                                <label>ISBN编号</label>
                                <input name="isbn" class="form-control" v-model="newBook.isbn">
                            </div>
                            <div class="form-group">
                                <label>图书名称</label>
                                <input name="name" class="form-control" v-model="newBook.name">
                            </div>
                            <div class="form-group">
                                <label>图书价格</label>
                                <input name="price" class="form-control" v-model="newBook.price">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="createBook">确认保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- delBookModal -->
        <div class="modal fade" id="delBookModal" data-backdrop="static" data-keyboard="false" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">操作提示</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{removeBookMsg}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="removeBook">确认删除</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- modifyBookModal -->
    <div class="modal fade" id="modifyBookModal" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改图书信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="/books" method="post">
                        <div class="form-group">
                            <label>ISBN编号</label>
                            <input name="isbn" class="form-control-plaintext" readonly v-model="updatedBook.isbn">
                        </div>
                        <div class="form-group">
                            <label>图书名称</label>
                            <input name="name" class="form-control" v-model="updatedBook.name">
                        </div>
                        <div class="form-group">
                            <label>图书价格</label>
                            <input name="price" class="form-control" v-model="updatedBook.price">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="updateBook">确认保存</button>
                </div>
            </div>
        </div>
    </div>

    </div>

    <script>
          
          //一个Vue对象，可以管控一个网页区域，实现数据绑定和各种操作
          var vm = new Vue({
              el:"#workarea",
              created(){
                this.loadData()
              },
              data(){
                 return {
                    bookList:[],
                    newBook:{},
                    updatedBook:{},
                    removeBookMsg:"",
                    removeBookISBN:""
                 }
              },
              methods:{
                loadData(){
                    $.get('http://127.0.0.1:8080/books',(result)=>{
                        vm.$data.bookList=result.data;
                    });
                },
                showCreateBookDlg(){
                    $("#addBookModal").modal("show");
                },
                showRemoveBookDlg(isbn,name){
                    this.removeBookMsg=`您确认要删除图书《${name}》?`;
                    this.removeBookISBN=isbn;
                    $("#delBookModal").modal("show");
                },
                showUpdateModalDlg(idx){
                    this.updatedBook = this.bookList[idx];
                    $("#modifyBookModal").modal('show');
                },
                updateBook(){
                    let that = this;
                    $.ajax({
                        url:'http://127.0.0.1:8080/book/'+that.updatedBook.isbn,
                        type:'PUT',
                        data:that.updatedBook,
                        dataType:"json",
                        success:function(result){
                            if(result.type=='SUCCESS'){
                                $("#modifyBookModal").modal("hide");
                                let idx = that.bookList.findIndex(function(book){
                                    return book.isbn==that.updatedBook.isbn;
                                });
                                that.bookList.splice(idx,1,that.updatedBook);
                            }
                        }
                    })
                },
                createBook(){
                    $.post('http://127.0.0.1:8080/book',this.newBook, (result)=>{
                        if(result.type=='SUCCESS'){
                            this.bookList.push(this.newBook);
                            this.newBook={};
                            $("#addBookModal").modal("hide");
                        }
                    })
                },
                removeBook(){
                    $.ajax({
                      url:'http://127.0.0.1:8080/book/'+this.removeBookISBN,
                      type:'DELETE',
                      success:function(result){
                            if(result.type=='SUCCESS'){
                                $("#delBookModal").modal("hide");
                                let bookList = vm.$data.bookList;
                                let idx = bookList.findIndex(function(book){
                                    return book.isbn==vm.$data.removeBookISBN;
                                });
                                vm.$data.bookList.splice(idx,1);
                            }
                      }
                    });
                }
              }
          });

    </script>


</body>
</html>

后端代码

后端代码https://blog.csdn.net/qq_66228897/article/details/132224790?spm=1001.2014.3001.5501

Ys20
关注
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
天罡gg的专栏
03-07 1万+
如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？ 做Java开发都应该学习哪些框架技术？ 我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！ 那今天就给大家带来一门专栏课程，由 天罡gg 和 经海路大白狗 两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！
【庖丁解牛】vue-element-admin前端CRUD通用操作组件详解，对，核心就是crud.js文件
追寻上飞的博客
10-12 8708
框架之所以能够快速定制应用，得益于其通配的CRUD操作，属性配置多样化且个性化，能够满足绝大部分开发需求，也方便了代码生成。钩子函数与vue生命周期的执行顺序应该是我们最关注的，因为事件的起始影响着编程的思路。行代码，以及下图中其它四个vue组件，形成了对通用CRUD操作的高级封装。离不开assign，vm.$option，callVm。钩子函数应该说是做的很精细，包含各个用户操作的事件。函数，封装了配置项、方法、钩子函数。在该文件之前有一个老版本的文件，在。共计9个函数，最重要的就是。
（vue）spa项目开发之CRUD&表单验证&vue的增删改查
men_ma的博客
08-28 715
转载请标明出处：https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 （vue）spa项目开发之CRUD&表单验证&vue的增删改查前言课程目标目录及一些准备工作1.表单验证2.增删改查功能实现 前言 续上几篇博客(有先后顺序): 博客名称及链接 spa项目开发之登录注册（vue）. SPA项目开发之首页导航+左侧菜单+mock.js模拟响应ajax请求+.
操作users表的CRUD（增、查、删、改）
m0_52896041的博客
11-26 761
操作users表的CRUD（增、查、删、改）
Vue3【六】实现页面简单的增删改查
SpringHASh的博客
10-24 1639
vue3 + elementPlus 实现简单的增删改查，多选框批量删除。
Day27 ssm框架之CRUD（不包含ajax）
weixin_44014201的博客
10-18 93
CRUD Create（ 创 建 ） Retrieve（查询） Update（更新） Delete（删除） 技术：ssm（spring+springmvc+mybatis） 设计一个sql create database crud; use crud; create table department( did int primary key auto_increment, dname varchar(20) ) insert into department values(null,'java'); i
Spring Boot Vue前后端分离开发实战.pdf
04-21
综上所述，文档《Spring Boot Vue前后端分离开发实战.pdf》涵盖了前后端分离的开发模式、Spring Boot和Vue.js的基础知识和使用、开发环境的搭建、前后端交互的实现、项目配置与启动、数据库操作、前端开发的实践等多...
毕设项目：基于SpringBoot+Vue前后端分离 实现的宿舍管理系统.zip
最新发布
12-30
毕设项目：基于SpringBoot+Vue前后端分离 实现的宿舍管理系统 毕设项目：基于SpringBoot+Vue前后端分离 实现的宿舍管理系统 毕设项目：基于SpringBoot+Vue前后端分离 实现的宿舍管理系统 毕设项目：基于SpringBoot+...
Springboot_Vue前后端分离
06-08
在“Springboot_Vue前后端分离”项目中，MySQL作为数据存储，Spring Boot通过JDBC或者ORM框架（如Hibernate）与MySQL进行交互，完成数据的CRUD操作。 综上所述，这个项目涵盖了现代Web开发中的多个关键知识点，包括...
基于SpringBoot+Vue前后端分离的健身房系统源码.zip
06-06
基于SpringBoot+Vue前后端分离的健身房系统 前端采用Vue、Element UI。 后端采用Spring Boot、Spring Security、Redis & Jwt。 功能 用户管理：用户是系统操作者，该功能主要完成系统用户配置。 部门管理：配置系统...
CRUD的解析
m0_73852362的博客
01-24 61
update +表名称 set +列名称='p006 ',列名称='p002' where ids=6-----用逗号隔开可以修改多列。b: insert into nation values('n003',' ')只添加一列后面的是空给所有的添加可以用。d:给多列添加insert into nation(code,name) values('n004','维吾尔族')update +表名称 set +列名称=' 'set(设置)---修改所有的内容这一列的。1、添加数据(create)
mybatis-plus Mapper CRUD 接口和Service CRUD 接口使用（二）
全场梦游c的博客
04-14 2849
dao层 public interface GoodDao extends BaseMapper<Good> { } Service实现类 package mptest.mybatistest.service.impl; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import c...
前端实现项目列表的CRUD
weixin_44192903的博客
07-14 1031
第三步，前端实现项目列表的各项功能及增删改查。
RESTFul风格实现CRUD（无数据库）（二）
李某人的博客
03-29 1007
3.5具体功能：删除功能 添加Vue.js 前端页面: <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table id="dataTable" border="1" &
做crud遇到的问题
weixin_45209580的博客
08-30 426
1.crud的流程 1 流程: servlet调service进行业务处理 service调dao完成数据库操作 dao在把数据库操作结果在给service service继续处理在把结果返回给servlet servlet在根据service的处理结果选择是请求转发还是重定向来显示页面 2.登录功能效验实现 2 流程（登录功能效验实现）: servlet层中UserServlet调UserServiceImpl UserServiceImpl调UserDaoImpl UserDaoImpl操作数据
cool-admin框架前端使用-vue3版本，树形表格批量展开和收起
坚持，努力，奋斗不止
12-11 844
row-key参数是行的key，这里我默认用id，所以下面expand-row-keys参数数组必定要插入行id。:expand-row-keys参数是一个数组，点击事件后，如果插入行id，会展开该行，反之，为空，则全部收起。:default-expand-all参数是布尔值，这里我默认给false。
Vue3+Vite+Element-Plus实现CRUD常见表单项目
Linlietao0587的博客
01-30 3889
效果有 查询，增加，表格，删除，编辑其实CRUD，就是一个管理项目最常见的功能C增加 (Create)R读取 (Read)U更新 (Update)D删除 (Delete)
vue3异步组件 按需加载插件@vueuse/core
菜鸟先飞
05-13 4363
使用到了异步加载的组建@vueuse/core实现懒加载功能
vuecrud钩子_eladmin框架开发中的细节
weixin_29248653的博客
12-31 1018
EL-ADMIN 后台管理系统是一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分离的后台管理系统，具有使用最新技术栈，社区资源丰富，项目按功能模块化，提升开发，测试效率等优势。为了方便后来者能快速掌握，并开发，笔者整理了中间可能碰到的一些问题。有些问题可能比较简单，本文主要针对新手入门。一、图片...
SpringBoot与Vue2.0前后端分离实现CRUD项目
整合Spring Boot和Vue.js实现前后端分离的CRUD应用，需要注意的点包括： - **API接口设计**：前后端分离需要定义清晰的API接口，前端通过这些接口与后端交互。 - **状态管理**：在Vue.js中，可以使用Vuex等状态管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值