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

最新推荐文章于 2023-09-14 14:39:14 发布
最新推荐文章于 2023-09-14 14:39:14 发布
阅读量293 收藏 2
点赞数 4
分类专栏： ElementUI Vue 文章标签： vue.js elementui javascript 前端 npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65211978/article/details/126837484
版权

目录

一、表单验证

思路

所需表单

增加和编辑页面：

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

表单验证

表单提交时进行校验规则 

效果​编辑

二、CRUD

表单校验通过后，调用后台数据接口完成新增功能（删改同样如此）

效果展示

新增：

 修改：

 删除

一、表单验证

思路

1.出现表单组件 el-form
2.通过点击 新增/编辑将表单对应窗口弹出
3.给表单设置规则 rules
4.当表单提交时要校验规则

所需表单

<!-- 搜索筛选 -->
    <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 border style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="文章ID" width="300">
      </el-table-column>
      <el-table-column sortable prop="title" label="文章标题" width="300">
      </el-table-column>
      <el-table-column sortable prop="body" label="文章内容" 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-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>

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

判断是弹出新增还是编辑

 handleEdit(index, row) {
        this.clearData();
        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 = '新增窗口';
        }
      },

表单验证

 给表单设置规则 都放入Articles.vue

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

表单提交时进行校验规则 

      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;
          }
        });
      }

效果

二、CRUD

保障编辑窗体的正常弹出

表单校验通过后，调用后台数据接口完成新增功能（删改同样如此）

<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" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60%">
      </el-table-column>
      <el-table-column sortable prop="id" label="文章ID" width="300%">
      </el-table-column>
      <el-table-column sortable prop="title" label="文章标题" width="300%">
      </el-table-column>
      <el-table-column sortable prop="body" label="文章内容" 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: '',
          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,
          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 => { // 代表成功 this污染的问题可以通过箭头函数来实现 jdk8的 lambda表达式
            console.log(resp);
            this.listData = resp.data.result;
            this.formInline.total = resp.data.pageBean.total;


          }).catch(function() { //代表失败

          });
      },
      search() {
        //按照 条件进行查询
        this.doSearch(this.formInline);
      },
      closeDialog() { //关闭窗体
        this.clearData();
      },
      clearData() {
        //清除编辑窗体的缓存数据
        this.editForm.title = '';
        this.editForm.id = 0;
        this.editForm.body = '';
        this.title = '';
        this.editFormVisible = false;
      },
      handleEdit(index, row) { //展示新增文章的表单窗体
        this.clearData();
        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>

效果展示

新增：

 修改：

 删除

取消删除

 确定删除

歐陽。
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue之路由（SPA开发模式）
zxy15974062965的博客
11-02 332
1、什么是SPA 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数 据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面 优势； ...
SPA项目开发之动态树+数据表格+分页
Smootht的博客
08-25 224
SPA项目开发之动态树+数据表格+分页1. 前言2. 动态树2.1 代码块概解2.2 效果显示3. 数据表格+分页3.1 定义组件3.2 表格样式3.3 搜索框3.4 分页3.5 实现代码块3.6 实现效果图 1. 前言 续写前篇Spa项目开发之首页导航+左侧菜单，在spa项目中进行书写一个动态树与数据表格，分页的功能 2. 动态树 2.1 代码块概解 在前篇代码的基础上，将LeftNav.vue组件内容进行修改成动态的菜单，也就是将获取到的表格数据赋值遍历输出 要实现路由跳转，先要在el-menu标
SPA项目开发（CRUD&表单验证）
m0_62604616的博客
09-13 645
拷入后会报错，将title和editFormVisible、editForm赋值。①、将以下拷入Articles.vue中分页条下面。然后更改doSearch中的以下代码，改成第二个代码。关闭窗体方法和handleEdit中调用以上该方法。然后先加入一个方法closeDialog。2、通过点击 新增/编辑将表单对应窗口弹出。②、 写一个方法 handleEdit。handleEdit方法中加入以下代码。1、拷入表单组件 el-from。写个方法：clearData。在关闭窗体方法中加入以下代码。
SPA项目开发之登录
weixin_30502157的博客
08-29 340
前端 首先安装开发模板 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 就这样把4个一个个安装就可以了，出现err就重新下载 index.jsp import Vue from 'vue' import Router fr...
SPA首页导航和左侧菜单
chiyangj的博客
08-28 709
这里写目录标题使用mockjs模拟mock.js的安装引用mock.js拦截路由配置首页头部点击退出 使用mockjs模拟 什么是mock.js Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 mock.js重要特性 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求 不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。 mock.js的安装引用 进入项目的盘符如： 安装moc
Springboot+JPA实现分页+crud
10-01
Springboot+JPA实现分页+crud
Springboot+Mybatis实现分页+CRUD
最新发布
10-01
Springboot+Mybatis实现分页+CRUD
ssm+maven+bootstrap+crud
08-28
SSM高级整合视频教程源码 雷老师 ssm+maven+bootstrap+分页技术+批量删除
badaso:Laravel无头CMS（SPA仪表板+ CRUD + API生成器等）
03-16
巴达索带有SPA接口的Laravel CRUD Generator什么是巴达索Badaso是可扩展的SPA Laravel管理仪表板+ API生成器，具有基于AJAX和REST API的完整功能。要求！ Laravel具有laravel要求。 （注意：使用Laravel 5.8测试）...
BootStrap+Mybatis框架下实现表单提交数据重复验证
08-31
"BootStrap+Mybatis框架下实现表单提交数据重复验证" 本文主要介绍了BootStrap+...通过添加隐藏的input字段、编写JavaScript代码和使用Mybatis框架来实现数据的CRUD操作，我们可以轻松实现表单提交数据重复验证功能。
element-curd-template:基于element ui的curd模板
04-28
element-curd-template 基于element ui的curd模板 构建步骤 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 主要依赖 vue vue-router vuex axios less mockjs normalize.css element-ui 目录说明 . ├── App.vue 根实例 ├── api HTTP API ├── components 组件 ├── config 配置 ├── main.js 入口js ├── mock mo
SPA项目开发（首页导航&左侧菜单）
weixin_66202611的博客
09-12 365
process.env.moc在生产环境为false，开发环境为turn。以上两个文件还是有区别的 一个是开发环境（dev.env）表示需要这门技术mock作为数据的接口。2.导入AppMain.vue/LeftNav.vue/TopNav.vue。3.在需要用到总线中变量时，通过this.$root.Bus.$on获取中心中的变量值。2. 在子组件中通过this.$root.Bus.$emti注册事件进行传参。4.router.index.js中添加路由与组件的映射。2.引入到main.js中使用。
Vue的SPA单页面开发
Miketutu的博客
02-05 727
Vue的SPA单页面开发
SPA项目开发--表单校验+增删改功能
weixin_67450855的博客
09-16 428
一、表单校验 1.1表单组件 el-form 1.2通过点击新增/编辑将表单对应窗口弹出 1.3给表单设置规则 rules 1.4当表单提交时要校验规则 二、增删改功能实现 2.1保证编辑窗口的正常弹出 2.2表单校验通过后，调用后台数据接口完成新增功能
SPA应用Web前端页面开发与 Jquery基本语法【学习笔记 一 】
卟♪恋
08-10 446
SPA概念       SPA-Single Page Application 单页面应用       主页面只有一个，启动只显示主页面，其他的页面都根据需要动态嵌入到主页面中。 SPA应用的流行的框架 Google Angular Facebook React Vue.js jQuery系列框架 页面的实现框架       Bootstrap 框架。 jquery概念    ...
SPA项目开发(登录)及常见问题
m0_47252566的博客
08-26 1211
@TOC SPA项目登录功能的实现 安装开发模块 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 三级目录 三级目录 三级目录 二级目录 三级目录
预约SPA管理系统开发（JAVA搭建）
2301_79072569的博客
09-14 118
同时，该系统也可以为SPA中心提供更准确的数据分析和统计功能，帮助中心做出更好的决策和规划。用户需求：了解SPA中心的运营模式、用户群体以及用户需求，以便为不同类型的用户提供满意的服务。模块开发：根据系统设计，分别实现用户模块、管理模块、预约模块、支付模块和评价模块的功能。接口设计：为了实现各个模块之间的数据交互，需要设计合适的接口，并编写对应的代码。用户模块：用户可以通过此模块注册账号、登录系统，以及浏览和预订SPA服务。功能需求：确定系统的基本功能，如用户注册、预约、支付、评价等。
SPA项目开发之首页导航+左侧菜单
m0_53151031的博客
11-10 585
目录 一、Mock.js模拟响应ajax请求 二、前台主界面的搭建 三、退出功能 四、左侧树收缩功能（vue总线的概念） 一、Mock.js模拟响应ajax请求 1、为什么会使用Mock.js来模拟响应ajax请求？ 在当今时代，随着计算机技术的发展，公司收益也会日益增加，同时要求写项目的速度就会越来越快，这时，一个公司的前端工程师和后端工程师就会分开合作，前端工程师就不会因为等后端工程师的功能数据而停止项目的进程。 2...
avue-crud表单验证
07-28
在Avue-Crud中，表单验证是一个非常重要的功能。下面是一些关于Avue-Crud表单验证的相关内容： 1. 表单验证规则定义：在Avue-Crud中，可以通过在表单元素上使用`rules`属性来定义验证规则。例如，可以使用`required...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

歐陽。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值