书籍的增删改查功能编写及表单验证

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量50 收藏
点赞数
文章标签： vue.js 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/theHider/article/details/131971219
版权
本文详细介绍了如何使用Vue.js和Axios实现书籍管理系统的增加、修改和删除功能，包括表单验证和对话框交互。通过定义样式、变量和方法，如doSub()用于数据提交，clear()用于重置表单，以及open()和query()用于显示和查询数据。
摘要由CSDN通过智能技术生成

1.增加书籍功能编写

1.1样式添加

按钮样式

<el-button type="success" @click="open">新增</el-button>

窗体样式

<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear()">
    <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="编号" :label-width="formLabelWidth">
            <el-input v-model="book.id" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="名称" :label-width="formLabelWidth" prop="bookname">
    <el-input v-model="book.bookname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="价格" :label-width="formLabelWidth" prop="price">
    <el-input v-model="book.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="类别" :label-width="formLabelWidth" prop="booktype">
    <el-select v-model="book.booktype" placeholder="请选择书籍类别">
        <el-option v-for="by in booktypes" :label="by.name" :value="by.name" :key="'key_'+by.id"></el-option>
</el-select>
</el-form-item>

</el-form>
<div slot="footer" class="dialog-footer">
    <el-button @click="clear">取消</el-button>
<el-button type="primary" @click="doSub">确定</el-button>
</div>
</el-dialog>

1.2定义变量

title: '新增窗体',
dialogFormVisible: false,
booktypes: [{
id: 1,
name: '言情'
},
{
id: 2,
name: '玄幻'
},
{
id: 3,
name: '武侠'
}
],
formLabelWidth: '100px',
book: {
id: '',
bookname: '',
price: '',
booktype: ''
}

1.3定义方法

doSub

doSub() {
// 新增/编辑提交到后台的数据
let url = this.axios.urls.BOOK_ADD;
if (this.title == '编辑窗体') {
url = this.axios.urls.BOOK_EDIT;
}
let params = {
id: this.book.id,
bookname: this.book.bookname,
price: this.book.price,
booktype: this.book.booktype
}
// 提交之前进行表单验证
this.$refs['book'].validate((valid) => {
if (valid) {
this.axios.post(url, params).then(resp => {
console.log(resp);
if (resp.data.success) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.clear();
this.query({});
} else {
this.$message({
message: resp.data.msg,
type: 'error'
});
}

}).catch(err => {

});
} else {
console.log('error submit');
return false;
}
})
}

clear

clear() {
this.title = '新增窗体';
this.dialogFormVisible = false;
this.book = {
id: '',
bookname: '',
price: '',
booktype: ''
};
}

open

open(idx, row) {
// 打开添加/编辑书籍信息的窗体
this.dialogFormVisible = true;
if (row)
this.title = '编辑窗体';
this.book.id = row.id;
this.book.bookname = row.bookname;
this.book.price = row.price;
this.book.booktype = row.booktype;
}

query

query(params) {
// 通用查询方法
let url = this.axios.urls.BOOK_LIST;
this.axios.get(url, {
params: params
}).then(resp => {
console.log(resp);
this.tableData = resp.data.rows;
this.total = resp.data.total;
}).catch(error => {

})
}

1.4效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.修改书籍功能编写

2.1样式添加

<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="open(scope.$index,scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>

2.2定义变量

title: '新增窗体',
dialogFormVisible: false,
booktypes: [{
id: 1,
name: '言情'
},
{
id: 2,
name: '玄幻'
},
{
id: 3,
name: '武侠'
}
],
formLabelWidth: '100px',
book: {
id: '',
bookname: '',
price: '',
booktype: ''
}

2.3定义方法

doSub

doSub() {
// 新增/编辑提交到后台的数据
let url = this.axios.urls.BOOK_ADD;
if (this.title == '编辑窗体') {
url = this.axios.urls.BOOK_EDIT;
}
let params = {
id: this.book.id,
bookname: this.book.bookname,
price: this.book.price,
booktype: this.book.booktype
}
// 提交之前进行表单验证
this.$refs['book'].validate((valid) => {
if (valid) {
this.axios.post(url, params).then(resp => {
console.log(resp);
if (resp.data.success) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.clear();
this.query({});
} else {
this.$message({
message: resp.data.msg,
type: 'error'
});
}

}).catch(err => {

});
} else {
console.log('error submit');
return false;
}
})
}

clear

clear() {
this.title = '新增窗体';
this.dialogFormVisible = false;
this.book = {
id: '',
bookname: '',
price: '',
booktype: ''
};
}

open

open(idx, row) {
// 打开添加/编辑书籍信息的窗体
this.dialogFormVisible = true;
if (row)
this.title = '编辑窗体';
this.book.id = row.id;
this.book.bookname = row.bookname;
this.book.price = row.price;
this.book.booktype = row.booktype;
}

query

query(params) {
// 通用查询方法
let url = this.axios.urls.BOOK_LIST;
this.axios.get(url, {
params: params
}).then(resp => {
console.log(resp);
this.tableData = resp.data.rows;
this.total = resp.data.total;
}).catch(error => {

})
}

2.4效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.删除书籍功能编写

3.1样式添加

<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="open(scope.$index,scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>

3.2定义变量

3.3定义方法

del

del(idx, row) {
        this.$confirm('你确定要删除id为' + row.id + '的书籍吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(resp => {
          let url = this.axios.urls.BOOK_DEL;
          this.axios.post(url, {
            id: row.id
          }).then(resp => {
            console.log(resp);
            if (resp.data.success) {
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
              // this.clear();
              this.query({});
            } else {
              this.$message({
                message: resp.data.msg,
                type: 'error'
              });
            }

          }).catch(err => {

          })

        }).catch(err => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }

query

query(params) {
// 通用查询方法
let url = this.axios.urls.BOOK_LIST;
this.axios.get(url, {
params: params
}).then(resp => {
console.log(resp);
this.tableData = resp.data.rows;
this.total = resp.data.total;
}).catch(error => {

})
}

3.4效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

表单验证

4.1样式添加

<el-form :model="book" :rules="rules" ref="book">

<el-form-item label="名称" :label-width="formLabelWidth" prop="bookname">

<el-form-item label="价格" :label-width="formLabelWidth" prop="price">

<el-form-item label="类别" :label-width="formLabelWidth" prop="booktype">

4.2定义变量

    rules: {
          bookname: [{
              required: true,
              message: '请输入书籍名称',
              trigger: 'blur'
            },
            {
              min: 4,
              max: 10,
              message: '长度在3到5个字符',
              trigger: 'blur'
            }
          ],
          price: [{
            required: true,
            message: '请输入书籍价格',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请输入书籍类型',
            trigger: 'blur'
          }]
        }

4.3定义方法

4.4效果展示

在这里插入图片描述

theHider
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
php增删改查图书,6.1 - 图书增删改查页面(示例代码)
weixin_39616056的博客
03-11 613
需求：1.列出图书列表、出版社列表、作者列表2.点击作者，会列出其出版的图书列表3.点击出版社，会列出其下的图书列表4.可以创建、修改、删除 图书、作者、出版社完成及注意事项：1.注册/register/2.登录/login/3.注销/logout/4.图书列表/book_list//add_book//update_book/303//del_book/5.出版社列表/publisher_lis...
基于Vue+ELement实现增删改查案例与表单验证（附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
09-27 9551
增删改查是我们写项目百分之七十会遇到的代码，学会Vue+ELement这一套增删改查的流程让你的写代码的效率一步登天！！！
【Vue】数据表格增删改查与表单验证
让优秀成为一种习惯！
09-27 1676
Vue框架与后台交互实现数据表格增删改查与表单验证
基于Vue+ELement实现增删改查案例与表单验证
weixin_74268571的博客
10-10 1939
Element UI和Vue增删改查案例的实现步骤，以及表单验证规则的定义与使用
Java编写的简单的图书管理系统(增删改查)
05-25
【Java编写的简单的图书管理系统(增删改查)】是一个基于Java技术的图书管理软件，主要功能涵盖了图书信息的添加、删除、修改和查询。这个系统没有采用任何框架，而是直接利用了Java的基础特性以及相关的Web技术来...
chapter08_java_springmvc_giving1oq_图书的增删改查_
10-01
在本教程中，我们将深入探讨如何使用SpringMVC框架实现基于浏览器/服务器（B/S）架构的图书管理系统的增删改查（CRUD）功能。SpringMVC是Java Web开发中的一个强大工具，它提供了模型-视图-控制器（MVC）设计模式的...
基于jsp+Servlet+mybatis实现简单增删改查的图书信息系统
01-15
这个系统具备基础的图书信息增删改查（CRUD）功能，并且实现了分页展示，同时也包含了用户登录模块。下面我们将详细解析这些关键知识点。 1. **JSP（JavaServer Pages）**： JSP是Java的一个动态网页技术，允许...
struts2图书管理 有图书增删改查 登录 注册验证
12-13
在这个"struts2图书管理"项目中，我们看到它实现了基础的图书管理系统功能，包括图书的增删改查以及用户登录和注册的验证。 首先，让我们详细了解一下Struts2的核心概念和特性： 1. **Action和Action Mapping**：...
php图书管理系统实现增删改查
12-15
在本项目中，"php图书管理系统实现增删改查"是一个基于PHP开发的简单图书管理应用，旨在帮助用户轻松地管理图书数据，包括添加新图书、删除现有图书、修改图书信息以及查询图书详情。这个系统对于初学者来说，是理解...
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 574
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue ref和reactive区别
灰海
08-25 3547
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue3插件原理
m0_46281382的博客
08-26 1861
简述vue3中use方法加载第三方插件原理
足球联赛|基于SprinBoot+vue的足球联赛管理系统(源码+数据库+文档)
伟庭的博客
08-27 1060
系统阐述的是使用足球联赛管理系统的设计与实现，对于Java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。开发中使用了ssm框架和MySql数据库技术搭建系统的整体架构。
关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
weixin_47342624的博客
08-27 312
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
vue3中如何拿到element plus中el-tree多选的值？
爱敲代码的卡拉米的博客
08-30 108
首先我们要为el-tree设置show-checkbox（它的作用是：节点是否可被选择），然后为el-tree绑定ref。vue2中我们在标签中绑定过ref后会用this.$refs.xxx来进行获取。vue3中的ref跟vue2中的ref获取方式略有不同。
移动端签名
notagoodwriter的博客
08-23 1114
【代码】移动端签名。
Vue：快捷文本
MMF博客园
08-26 1063
Vue：快捷文本
vue+moment转化日期格式为年月日时分秒！最简洁版
demotang的博客
08-30 165
官网：https://momentjs.cn/
vue3 自定义hooks（组合式函数）
咸鱼滚滚
08-26 1235
自定义hooks 是Vue3 组合式函数的别称。 在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值