Vue：书籍的增删改操作（对话框）以及表单验证

已于 2023-07-28 11:50:41 修改
阅读量235 收藏
点赞数 1
文章标签： vue.js javascript 前端
于 2023-07-28 10:41:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59084280/article/details/131963025
版权
本文展示了如何在Vue.js应用中实现书籍管理的增删改查功能，包括封装API请求、创建新增和编辑对话框、表单验证以及处理用户交互，如编辑和删除书籍。此外，还涉及了El-Dialog和El-Form组件的使用。
摘要由CSDN通过智能技术生成

一、书籍的增删改操作

1.api/action.js

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/ssm', //服务器
	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //用户登陆
  'SYSTEM_MENU': '/module/queryRootNode', //系统菜单
  'Book_ADD': '/book/addBook', //书籍新增
  'Book_EDIT': '/book/editBook', //书籍编辑
  'Book_DEL': '/book/delBook', //书籍删除
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

2、 BookList.vue(新增功能)

2.1添加新增按钮
<el-button type="success" icon="el-icon-search" @click="open()">新增</el-button>
2.2 新增弹出框
<!--添加删除的弹出框-->
<el-dialog title="新增书籍" :visible.sync="dialogFormVisible">
    <el-form :model="book">
        <el-form-item label="书籍名称" :label-width="formLabelWidth">
            <el-input v-model="book.bookname" autocomplete="off"></el-input>
		</el-form-item>
	<el-form-item label="书籍价格" :label-width="formLabelWidth">
    <el-input v-model="book.price" autocomplete="off"></el-input>
	</el-form-item>
		<el-form-item label="书籍类型" :label-width="formLabelWidth">
    		<el-select v-model="book.booktype" placeholder="请选择书籍类型">
        		<el-option v-for="by in booktypes" :label="by.name" :value="by.name" 						:key="by.id"></el-option>
			</el-select>
	</el-form-item>
	</el-form>
	<div slot="footer" class="dialog-footer">
    	<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" @click="handleSubmit">确 定</el-button>
	</div>
</el-dialog>

注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏 :visible.sync="dialogFormVisible" 注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息； @close="dialogClose"  

Dialog对话框基本属性

参数说明
visible是否显示 Dialog，支持 .sync 修饰符，默认：false
titleDialog 的标题，也可通过具名 slot （见下表）传入
widthDialog 的宽度，默认：50%
fullscreen是否为全屏 Dialog，默认：false
modal是否需要遮罩层，默认：true
close-on-click-modal是否可以通过点击 modal 关闭 Dialog，默认：true
close-on-press-escape是否可以通过按下 ESC 关闭 Dialog，默认：true
show-close是否显示关闭按钮，默认：true

 

Dialog对话框事件  

事件说明回调参数
openDialog 打开的回调无
openedDialog 打开动画结束时的回调无
closeDialog 关闭的回调无
closedDialog 关闭动画结束时的回调无

 

同时data中要添加属性

title: "新增窗体",
        dialogFormVisible: false,
        formLabelWidth: '100px',
        booktypes: [{
          id: 1,
          name: "言情"
        }, {
          id: 2,
          name: "玄幻"
        }, {
          id: 3,
          name: "现实"
        }],
        book: {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }
2.3 methods
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.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 => {

        })
      },
      clear() {
        this.title = '新增窗体';
        this.dialogFormVisible = false;
        this.book = {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        };
      },
      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;
        }
       }

3.编辑和删除功能

3.1添加按钮（scope）
<el-table-column label="操作">
	<template slot-scope="scope">
        <el-button size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		<el-button size="mini" type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
	</template>
</el-table-column>
3.2methods
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.query({});

            } else {

              this.$message({
                message: resp.data.msg,
                type: 'error'
              });

            }
          }).catch(err => {});

        }).catch(err => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      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.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 => {

        })
      }

二、表单验证

1.修改弹出层

 <!--添加删除的弹出框-->
<el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="book" :rules="rules" ref="book">
        <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.number="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="by.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
</el-dialog>

Form表单组件基本属性：

属性说明
model表单数据对象
rules表单验证规则
inline行内表单模式
label-position表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width，可选值：right/left/top
label-width表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。

 

2.在data中添加rules

rules:
{
    bookname: [
        {required: true, message: '请输入书本名称', trigger: 'blur'},
        {min: 1, message: '长度必须在1个字符以上', trigger: 'blur'}
    ],
	price: [
		{required: true, message: '请输入书本价格', trigger: 'blur'},
		{type: 'number', message: '必须为数字', trigger: 'blur'}
	],
	booktype: [
		{required: true, message: '请选择书籍类型', trigger: 'blur'}
	]
}

hjlplus
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue实现图书的添加删除
m0_64337756的博客
03-28 308
<!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&gt...
vue简易添加图书
wangyuan_111的博客
09-15 450
【代码】vue简易添加图书。
vue做一个简单的图书管理实现增删功能
m0_67351783的博客
04-12 632
删除书名</label><label for="group">书名书名
vue案例-图书管理
qq_34082921的博客
01-10 2434
【代码】vue案例-图书管理。 1.学习vue时做的一个小案例，本身案例很简单，经过优化又加些比较常用的功能，比如在添加图书前，先判断编号是否存在，并提示给用户，并且编号文本框只能输入数字等等优化。 2.使用到数组数据，方法，监视，挂载钩子，数据是本地数据，方法实现了大部分的功能函数，监视属性实现动态检查数据的合法性，挂载实现了计时器的触发，每秒查询本地时间并且做了格式化，主要是修改与添加图书时，自动调用本地的时间日期
图书管理案例（vue）
weixin_42424454的博客
10-22 554
该案例主要实现功能为图书的添加、删除以及修改。 主要涉及的知识有事件绑定，聚焦、时间格式化、数量统计、侦听器、生命周期等 样式： <style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table { width: 100%; border-collapse: collapse; }
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
在Vue.js框架中结合Element UI库...通过以上方法，我们可以有效地管理Vue+ElementUI应用中的对话框关闭、表单验证和状态恢复，提供更好的用户体验。记住，保持应用状态的一致性和清晰性对于提高用户满意度至关重要。
vue+elementui 对话框取消 表单验证重置示例
10-16
总结而言，实现Vue+Element UI对话框取消表单验证重置的示例展示了如何使用Element UI组件事件和Vue的JavaScript方法来完成表单状态的重置。通过了解和使用el-dialog和el-form组件的特性，以及Vue.js的响应式原理和...
vuedemo:list增删改
05-02
一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view ...
vue 自定义弹窗
wm_wu的博客
09-25 1076
vue 自定义弹窗 <template> <div id="demo"> <!-- 随便写个点击事件,把model设为true即可 --> <!-- 自定义提示框 --> <div class="model" @touchmove.prevent v-if="model"> <div class="box"> 这里可以放弹窗的内容 </div> </div> </di
vue如何创建弹窗组件| 青训营笔记
kilig_CSM的博客
08-15 37
theme: fancy 这是我参与「第四届青训营 」笔记创作活动的第8天. 背景: 在同一个父组件中有两个子组件,其中一个子组件作为弹窗被隐藏,而另一个子组件中的按钮能够触发该弹窗子组件. 弹窗子组件: html部分: <template> <!-- 收藏列表 --> <div class="CollectList"> ...
VUE弹窗的两种实现方式
热门推荐
hui_she的博客
04-19 6万+
方法一 使用.sync修饰符 element就是使用的这种方式，实现方式如下： 父组件： <template> <div id="demo"> <test-model :show.sync="showFlag"></test-model> </div> </t...
Vue+elementUI-书籍的增删改
lisfgj的博客
07-28 163
书籍的增删改,数据的校验
Vue(二十四)vue-cli脚手架项目使用layer弹框
Good Luck
05-30 320
引入layer，在index.html中引入 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script> 在Vue组件中使用。 window.layer.msg('登录成功'
【精讲】vue框架 利用脚手架实现购物车（含添加、删除、存储、清空数据、全选or单选、tap栏切换）内含详细注释
m0_59505309的博客
08-09 1389
【精讲】vue框架 利用脚手架实现购物车（含添加、删除、存储、清空数据、全选or单选、tap栏切换）内含详细注释
Vue3我这样使用弹窗
可乐会唱歌的博客
09-25 2489
vue3弹窗的使用
一个简单的vue项目之图书管理系统，自用，无ui，持续更新...
最新发布
南柯一梦
10-31 1022
一个简单的vue+springboot项目，由于博主只是想做个前端界面来调试后端，本人也是一只小菜鸡，所以没有很多精力对ui做优化，谨慎参考。
vue第七天基础知识--脚手架及组件间传值
Little_Fishs的博客
03-03 1023
一、组件通信（组件传值） 1.1父子组件通信 父组件 <子组件标签 :变量='要传递的数据'></子组件标签> 子组件 props：['变量'] <div id="app"> <div> <!-- <h1>{{msg}}</h1> --> <...
Vue学习（二十六）——综合案例：图书管理（一）
云中、漫步的博客
10-05 1178
目录一、图书列表的展示功能1、实现静态列表效果2、基于数据实现模板效果3、处理每行的操作按钮二。添加图书1、实现表单的静态效果2、添加图书表单域数据绑定3、添加按钮事件绑定4、实现添加业务逻辑三、修改图书1、修改信息填充到表单① JS中的Array.filter()方法2、修改后重新提交表单3、重用添加和修改的方法②JS中的Array.some()方法③Js中的箭头函数 接下来我们结合之前我们所学到的知识，完成一个图书管理的案例，大致如下，完成对图书的増、删、改操作： 一、图书列表的展示功能 1、实现静态
vue的弹窗简单实例
weixin_44585066的博客
08-22 1289
先配置一个dialog页面，代码如下 </div> <div class="btns"> <div v-if="type !== 'confirm'" class="default-btn" @click="dangerBtn"> <span style="pos...
Vue+Element UI：配置对话框关闭与表单验证清空技巧
1. 在操作系统中创建目录F:\VMDisk\Sharedisk，这是为了后续创建共享磁盘时避免错误。如果不创建，可能会导致配置过程受阻。 2. 使用VMware的vSphere工具（vmware-vdiskmanager.exe）创建多个共享磁盘，包括ocr....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值