SPA项目开发之CRUD+表单验证

已于 2022-09-14 19:42:18 修改
阅读量124 收藏
点赞数
文章标签： vue.js javascript 前端
于 2022-09-14 19:42:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62327548/article/details/126858635
版权

目录

一，表单验证

1、出现表单组件 el-form

2、通过点击新增/编辑将表单对应窗口弹出

3、给表单设置规则 rules

4、当表单提交时要校验规则

二，增删改功能的实现

删除：

一，表单验证

1、出现表单组件 el-form

2、通过点击新增/编辑将表单对应窗口弹出

3、给表单设置规则 rules

4、当表单提交时要校验规则

Articles.vue：

<template>
  <div>
    <!--  搜索筛选-->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.title" placeholder="输入文章标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
 
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row style="width: 100%;">
      <el-table-column align="center" type="selection" min-width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="文章ID" min-width="300">
      </el-table-column>
      <el-table-column sortable prop="title" label="文章标题" min-width="300">
      </el-table-column>
      <el-table-column sortable prop="body" label="文章内容" min-width="300">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 
    <!-- 分页条 -->
    <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="formInline.total">
    </el-pagination>
 
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="文章标题" prop="title">
          <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="body">
          <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  name: 'Articles',
  data() {
    return {
      title: '',
      editFormVisible: false,
      editForm: {
        title: '',
        body: ''
      },
      rules: {
        title: [
          {required: true, message: '请输入文章标题', trigger: 'blur'},
          {min: 5, max: 10, message: '长度须在 5 到 10 个字符之间', trigger: 'blur'}
        ],
        body: [
          {required: true, message: '请输入文章内容', trigger: 'blur'}
        ],
 
      },
 
      listData: [],
      formInline: {
        page: 1,
        total: 10,
        title: ''
      }
    }
  },
  methods: {
    handleSizeChange(rows) {
      // console.log("页面发生改变")
      this.formInline.page = 1;
      this.formInline.rows = rows;
      this.search();
    },
    handleCurrentChange(page) {
      // console.log("当前页码发生改变")
      this.formInline.page = page;
      this.search();
    },
    //是为了代码复用
    doSearch(param) {
      // 获取树形节点的数据
      let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
 
      //this指的是vue实例
      this.axios.post(url, param)
        .then(resp => {//代表成功 箭头函数 jdk8的语法
          console.log(resp);
          this.listData = resp.data.result;
          this.formInline = resp.data.pageBean;
        }).catch(function () {//代表失败
 
      });
    },
    search() {
      //  按照条件进行查询
      this.doSearch(this.formInline);
    },
    closeDialog() {
      //  关闭窗体
 
    },
    handleEdit() {
      // 展示新增文章的表单
      this.editFormVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  created() {
    this.doSearch({});
  }
}
</script>
 
<style scoped>
 
</style>

 功能代码：

data() {
			return {
				listData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: ''
				},
				total: 0,
				title: '',
				editFormVisible: false,
				editForm: {
					title: '',
					body: '',
					id: 0
				},
				rules: {
					title: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 10,
							message: '长度在 5 到 10 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}]
				}
			};
		},

 

 

二，增删改功能的实现

Articles.vue

<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.title" placeholder="输入文章标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
      element-loading-text="拼命加载中" style="width: 100%;">
      <!-- <el-table-column align="center" type="selection" width="60">
      </el-table-column> -->
      <el-table-column sortable prop="id" label="编号" width="100">
      </el-table-column>
      <el-table-column sortable prop="title" label="文章标题" width="100">
      </el-table-column>
      <el-table-column sortable prop="body" label="文章内容" width="300">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
    </el-pagination>

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="文章标题" prop="title">
          <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="body">
          <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存
        </el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: 'Articles',
    data() {
      return {
        title: '',
        editFormVisible: false,
        editForm: {
          title: '',
          body: '',
          id: 0
        },

        rules: {
          title: [{
              required: true,
              message: '请输入文章标题',
              trigger: 'blur'
            },
            {
              min: 5,
              max: 10,
              message: '长度在 5 到 10 个字符',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: '请输入文章内容',
            trigger: 'blur'
          }],
        },

        listData: [],
        formInline: {
          page: 1,
          rows: 10,
          total: 0,
          title: ''
        }
      }
    },
    created() {
      this.dosearch({});
    },
    methods: {
      handleSizeChange(rows) {
        console.log("当前页查询数量为：" + rows);
        this.formInline.page = 1;
        this.formInline.rows = rows;
        this.search();
      },
      handleCurrentChange(page) {
        console.log("当前页为：" + page);
        this.formInline.page = page;
        this.search();
      },
      dosearch(param) {
        let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
        this.axios.post(url, param).then(res => {
          console.log(res);
          this.listData = res.data.result;
          this.formInline.total = res.data.pageBean.total;
        }).catch(function(error) {
          console.log(error);
        });
      },
      search() {
        this.dosearch(this.formInline);
      },
      closeDialog() {
        // 关闭窗体

      },
      clearData() {
        // 清楚编辑窗体的缓存数据
        this.editForm.title = '';
        this.editForm.id = 0;
        this.editForm.body = '';
        this.title = '';
        this.editFormVisible = false;
      },
      handleEdit(index, row) {
        this.clearData();
        // console.log(row);
        // 展示新增文章的表单窗体
        this.editFormVisible = true;

        if (row) {
          // 编辑
          this.title = '编辑窗体';
          this.editForm.id = row.id
          this.editForm.title = row.title
          this.editForm.body = row.body

        } else {
          // 新增
          this.title = '新增窗体';
        }
      },
      deleteUser(index, row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
          this.axios.post(url, {id:row.id}).then(r => {
            // 新增成功后1、关闭窗体--清空数据  2、重新查询
            this.$message({
              message: r.data.msg,
              type: 'success'
            });
            this.closeDialog();
            this.search();
          }).catch(e => {

          });


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url;
            if (this.editForm.id == 0) {
              // 新增
              url = this.axios.urls.SYSTEM_ARTICLE_ADD;
            } else {
              url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
            }
            this.axios.post(url, this.editForm).then(r => {
              // 新增成功后1、关闭窗体--清空数据  2、重新查询
              this.$message({
                message: r.data.msg,
                type: 'success'
              });
              this.closeDialog();
              this.search();
            }).catch(e => {

            });


          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    created() {
      this.dosearch({});
    }

  }
</script>

<style>
</style>

增加展示：

 

编辑界面：

 

删除：

deleteUser(index, row) {
				this.$confirm('此操作将永久删除文件，是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
					this.axios.post(url, {id:row.id}).then(r => {
						this.$message({
							type: r.data.msg,
							message: '删除成功!'
						});
						this.closeDialog();
						this.search();
					}).catch(e => {
 
					})
 
 
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}

当我们点击删除 会给予提示 

 

这里打架可以看到数据就剩155条了 那就删除成功了

 

呲花1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从开源框架el-admin中学习状态模式
qq_45670042的博客
03-27 1114
eladmin设计模式——状态模式解读
el-admin实战解析
KeepCodeing
08-30 8321
主要是梳理出我对el-admin的一些理解，在项目中，在实战中的一些经验和感悟。
ELADMIN-04 crud的封装
kandan_cc的博客
01-07 1483
文件定义了一个名为CRUD的对象，它包含了一些用于处理CRUD（创建、读取、更新、删除）操作的方法。这个对象可以被其他组件导入并使用，以便在这些组件中执行CRUD操作,下面四个Vue组件都会用到这个js文件文件定义了一个Vue组件，这个组件包含了添加、编辑、删除和导出按钮。这个组件可以被其他组件导入并使用，以便在这些组件中显示CRUD操作的按钮。四个按钮两边还各有一个插槽可以自行添加新的按钮。
crud增删改查文件——自定义钩子函数
yehaocheng520的博客
05-26 7762
import {initData,download} from '@/api/data' import {parseTime,downloadFile} from '@/utils/index' import Vue from 'vue' /** CRUD配置 */ function CRUD(options){ const defaultOptions = { tag:'default', //id字段名 idFiled:'id', //标题 title:'', //请求数据的
基于SSM开发的CRUD+源代码+文档说明
11-28
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
badaso:Laravel无头CMS（SPA仪表板+ CRUD + API生成器等）
03-16
巴达索带有SPA接口的Laravel CRUD Generator什么是巴达索Badaso是可扩展的SPA Laravel管理仪表板+ API生成器，具有基于AJAX和REST API的完整功能。要求！ Laravel具有laravel要求。 （注意：使用Laravel 5.8测试）...
SpringBoot CRUD + 事务 DEMO
08-10
SpringBoot CRUD + 事务 DEMO,CSDN竟然不支持0分下载，只能设置1分了
JavaCRUD:基本的Java CRUD + MySQL
03-07
JavaCRUD 基本的Java CRUD + MySQL 将此文件夹复制到NetBeansProjects 打开mysql 导入perpustakaan.sql 在mysql上： 创建数据库db_perpus; 使用db_perpus; 创建表buku（kode_buku int（11）auto_increment...
ssm-crud+webservice.rar
12-24
使用java的ssm框架+shiro管理权限+webservice开放接口，主要内容是员工界面的增删改查和ajax实现员工信息修改的实时检验，前端使用bootstrap,还使用了cxf包和jax-ws开发了员工增查的webservice接口(员工是复杂类型).
使用javaweb+jsp+MySQL实现学生管理CRUD+Excel导入功能
10-09
使用javaweb+jsp实现CRUD+Excel导入功能，无过多依赖。 1、完成学生信息的新增操作 2、完成学生信息的编辑操作 3、完成学生信息的查询操作 4、完成学生信息的删除操作 5、完成学生信息的导入操作 数据库使用的MySQL...
基于 SSM-VUE 前后端分离的 CRUD+源代码+文档说明
11-27
基于 SSM-VUE 前后端分离的 CRUD 旨在帮您学习 SSM 整合 ## 一、项目概览 ### 相关技术 #### 前端 - 开发框架：Vue3、Axios、Element Plus - 脚手架：@Vue/cli - 依赖管理: npm - 开发工具：VSCode 、Chrome ...
SpringUsuarioCrud:Crud + Spring 4 + Java 8 + BootStrap框架
05-15
SpringUserCrud 具有完整CRUD的项目。 使用Spring创建具有完整CRUD的Web项目。 使用的技术： SpringMVC 4 Spring安全4 Spring数据Spring标签库冬眠Java 8 BootStrap框架（HTML，CSS，JavaScript） 玛文Apache Tomcat...
基于SSM框架与Bootstrap的CRUD实战源码
最新发布
03-25
项目概述： 本项目是一款基于SSM框架（SpringMVC+Spring+MyBatis）整合的实战源码，主要...通过以上技术栈，本项目能够快速开发出一个具备完整CRUD（增删改查）功能的系统，为开发者提供了一个高效、可靠的实战模板。
M3-D10:Netflix（CRUD + ES6）
03-20
M3-D10:Netflix（CRUD + ES6）
FastAdmin 基本知识流程一栏
aochijing0046的博客
02-25 2136
fastadmin进阶 安装：出现登陆页无法显示：可能是php的gd2扩展未开启 FastAdmin 在 Nginx 中的配置 用的是AdminLTE后台模板require.js、less、Bower 调试错误：看runtime/log FastAdmin 的上传代码在哪里？ 一张图解析FastAdmin中的表格列表的功能 fastadmin的页面是如何生成的？ F...
laravel-admin使用
dmguying的博客
03-01 2464
上次我们学习了laravel-admin的安装。今天我们来说说laravel-admin的使用。 创建新菜单 这个比较简单直接上图： 然后就生成了会员管理的菜单： 创建控制器 菜单创建好之后，url路径我们也定好了，接下来就是创建资源控制器了，使用如下命令： php artisan admin:make MemberController --model=App\Models\Member 后...
Laravel-admin form 表单是增加或者修改
weixin_30521649的博客
07-18 3209
Laravel-admin 实现 form 表单是增加或者修改的三种方法，应用情景：1、新增或者修改 form 展示的表单不同；2、新增或者保存前后回调进行其他的操作 　　 1、 use Illuminate\Support\Facades\Route; Route::currentRouteName () == ' 路由名称.edit' 2、 isset(request(...
quartz整合springboot实现动态配置任务的CRUD详情操作
itboy
02-22 881
quartz整合springboot实现动态配置任务的CRUD详情操作 文章目录quartz整合springboot实现动态配置任务的CRUD详情操作一、quartz中相关介绍Quartz API二、quartz整合springboot实现动态配置任务的CRUD1、导入jar包2.相关代码( 这里用到了 SpringDataJpa 操作数据库 )2.1定时任务实体类：2.2 service实现类...
avue-crud表单验证
07-28
在Avue-Crud中，表单验证是一个非常重要的功能。下面是一些关于Avue-Crud表单验证的相关内容： 1. 表单验证规则定义：在Avue-Crud中，可以通过在表单元素上使用`rules`属性来定义验证规则。例如，可以使用`required...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值