SPA项目开发（CRUD&表单验证）

最新推荐文章于 2024-05-07 15:15:06 发布
最新推荐文章于 2024-05-07 15:15:06 发布
阅读量645 收藏
点赞数
文章标签： 前端 javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62604616/article/details/126839748
版权

目录

一、表单验证

二、增删改

一、表单验证

步骤：

 ①、将以下拷入Articles.vue中分页条下面

    <!-- 编辑界面 -->
    <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>

拷入后会报错，将title和editFormVisible、editForm赋值

 title: '',
 editFormVisible: false,
   editForm: {
          title: '',
          body: '',
          id: 0
        },

 然后先加入一个方法closeDialog

closeDialog() {
        // 关闭窗体
       
      }

②、 写一个方法 handleEdit

handleEdit(index, row) {
        // 展示新增文章的表单窗体
        this.editFormVisible = true;


      }

效果：

 ③、将以下代码拷入

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) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

 效果：

 步骤总结：

1、拷入表单组件 el-from

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

3、给表单设置规则 rules

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

二、增删改

写个方法：clearData

clearData() {
        // 清除编辑窗体的缓存数据
        this.editForm.title = '';
        this.editForm.id = 0;
        this.editForm.body = '';
        this.title = '';
        this.editFormVisible = false;
      }

在关闭窗体方法中加入以下代码

this.clearData();

handleEdit方法中加入以下代码

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 = '新增窗体';
        }

写入以下代码

clearData() {
        // 清除编辑窗体的缓存数据
        this.editForm.title = '';
        this.editForm.id = 0;
        this.editForm.body = '';
        this.title = '';
        this.editFormVisible = false;
      }

关闭窗体方法和handleEdit中调用以上该方法

this.clearData();

对submitForm方法进行优化

      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.clearData();
              this.search();
            }).catch(e => {

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

然后更改doSearch中的以下代码，改成第二个代码

this.formInline = resp.data.pageBean;
this.formInline.total = resp.data.pageBean.total;

 最后写个删除方法

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.clearData();
           this.search();
         }).catch(e => {

         });

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

整个页面代码

<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" 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) {
        this.formInline.page = 1;
        this.formInline.rows = rows;
        this.search();
      },
      handleCurrentChange(page) {
        this.formInline.page = page;
        this.search();

      },
      // 为了代码复用
      doSearch(parm) {
        // 获取树形节点的数据
        let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
        // alert(url);
        // {uname:'zs',pwd:'123'}

        this.axios.post(url, parm).then((resp) => {
          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.clearData();
           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.clearData();
              this.search();
            }).catch(e => {

            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    created() {
      this.doSearch({});
    }
  }
</script>

<style>
</style>

效果：

雨沐笙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue之路由（SPA开发模式）
m0_52681702的博客
11-02 1108
一、什么是SPA 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取 的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面 优势；...
SPA项目开发之登录注册
m0_75280563的博客
04-07 228
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取// 请求拦截器});自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
2024年最新SPA项目开发之登录注册，web开发敏捷之道
最新发布
2401_84619245的博客
05-07 277
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。” type=“primary” @click=“submitForm(‘ruleForm’)”>提交跳转到登录用户登录忘记密码.配置路径 index.jsroutes: [{path: ‘/’,},},},})
SPA项目开发之首页导航+左侧菜单(1)
2301_79655496的博客
04-17 252
Main// 导入组件// 导出模块data(){return {},// 注册组件**/* 折叠 *//* 在CSS中，通过对某一样式声明!important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */important;/* 不折叠 */important;topNav:定义变量**data(){return{// 不折叠时需显示的图片}**LeftNav:记得将不用的因素清掉导航一分组一选项1选项2。
SPA富应用开发
qq_64662981的博客
03-15 1621
此命令执行后，需注销，重新登录，才生效。sudo usermod -aG docker $USER # $USER 是当前登录的用户。（PS：在执行完docker version之后，应当显示docker的版本类型）、# 使用阿里 docker 镜像，提高镜像拉取速度。# 以非 root 用户身份使用 docker。初始化操作：gitbook init。ifconfig查看虚拟机的ip地址。
SPA-Vue企业级开发模式介绍
weixin_44915822的博客
10-28 281
SPA-Vue企业级开发模式介绍 一、什么是SPA？ SPA(Single Page Application)：单页面应用程序，是一种前端的开发技术，是现在前、后端分离下的一种产物。 传统的网站 ​ 我们传统的网站是由很 多个独立的页面 组成的，当我们点击页面中的 a 标签时，就会向服务器发送一个新的请求，然后下载另一个页面显示，跳转时是页面之间的跳转。 SPA SPA（单页面应用程序），顾名思议，整个网站中只有一个页面，在这个页面中会加载很多个不同的组件，当我们点击按钮时，并不会打开一个新的页面，
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据库逆向（十二）.doc
10-22
在本篇文档中，我们将探讨如何在已有的数据库表基础上，利用 Vue 和 Quasar 框架构建的 CRUDAPI 前端SPA项目中实现数据库逆向工程，以方便管理和操作业务数据。这一过程通常被称为“dbfirst”模式，即先有数据库结构...
travel-App-Mytinerary：在React中使用Redux开发的Travel SPA，用于状态管理，Node，Express＆MongoDB和用于用户界面的Material-UI，具有完整的CRUD功能，身份验证和授权（凭证和oauth），密码重置，图像上传，内容创建和更新功能，用户可以在其中创建和编辑个人资料，自定义旅行路线，评论，评论和收藏夹
02-28
这个项目展示了如何在Web开发中整合多种技术，包括Node.js、Express.js和MongoDB数据库，以及用于用户界面设计的Material-UI库。它提供了完整的创建、读取、更新和删除（CRUD）功能，还支持用户认证和授权，如凭证...
extjs4mvc的crud
02-25
ExtJS 4 MVC 是一种基于 Sencha ExtJS 框架的前端开发模式，用于构建交互性强、功能丰富的Web应用程序。在"extjs4mvc的crud"这个主题中，我们将深入探讨如何使用ExtJS 4的Model-View-Controller（MVC）架构来实现...
MEAN-Projects:Angular＆MEAN项目集合
03-25
在"MEAN-Projects-main"这个压缩包中，开发者可以找到一系列完整的项目实例，通过研究和实践这些项目，可以加深对MEAN栈的理解，提升全栈开发技能。每个项目都有其特定的目标和应用场景，可以帮助学习者逐步建立起一...
CRUD_MEAN
02-27
CRUD_MEAN是一个基于TypeScript的全栈开发项目，它涵盖了创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)这四种基本数据操作，这是任何数据库应用的基础。MEAN是MongoDB、Express.js、AngularJS（或...
SPA项目开发--表单校验+增删改功能
weixin_67450855的博客
09-16 429
一、表单校验 1.1表单组件 el-form 1.2通过点击新增/编辑将表单对应窗口弹出 1.3给表单设置规则 rules 1.4当表单提交时要校验规则 二、增删改功能实现 2.1保证编辑窗口的正常弹出 2.2表单校验通过后，调用后台数据接口完成新增功能
SPA项目开发之登录
weixin_30502157的博客
08-29 342
前端 首先安装开发模板 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项目开发之CRUD+表单验证
m0_53151031的博客
11-12 1045
一、SPA项目之表单验证 我们做项目的都关乎到增删改查的功能，在进行增删改查功能之前，我们必须有一个表单验证。 1、首先先写入表单验证的代码：这里面需要注意的是变量，以及定义方法 <!-- 编辑界面 --> <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog"> <el-form...
Vue企业级开发模式介绍认知SPA不是大保健而是前后端分离的产物
bigdatahyy的博客
10-28 338
什么是SPA？ SPA(Single Page Application)：单页面应用程序，是一种前端的开发技术，是现在前、后端分离下的一种产物。 传统的网站 ​ 我们传统的网站是由很 多个独立的页面 组成的，当我们点击页面中的 a 标签时，就会向服务器发送一个新的请求，然后下载另一个页面显示，跳转时是页面之间的跳转。 SPA SPA（单页面应用程序），顾名思议，整个网站中只有一个页面，在这个页面中会加载很多个不同的组件，当我们点击按钮时，并不会打开一个新的页面，而是还在当前的页面中切换显示不同的组件
Vue开发中，在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
01-09 2684
单页面应用(SPA)的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。对于大多数单页面应用，都推荐使用官方支持的vue-router。在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。routes,mode: "history" // 或者 "hash"})
SPA-Vue企业级开发模式
Harden_zsc的博客
10-28 421
vue-spa 什么是SPA？ SPA（单页面应用程序），项目中只需要1个html页面，多个功能组件，页面跳转其实就是切换组件。 SPA的优缺点 优点 1、减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次 2、并且把大量操作都放到了浏览器中去完成 3、前、后端完成分离，使服务器只需要提供同一套 JSON 数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备 4、而且前端只关注前端、后端只操作数据，各司其职 缺点 1、首屏加载速度可能会很长 2、SEO（搜索引擎优化）
前端开发中spa的优缺点_使用单Spa开发和部署微前端
weixin_26750481的博客
09-08 1457
前端开发中spa的优缺点Micro-frontends are the future of frontend web development. Inspired by microservices, which allow you to break up your backend into smaller pieces, micro-frontends allow you to build, tes...
SPA项目搭建及嵌套路由
m0_67477525的博客
09-06 597
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：注1：xxx 为自己创建项目的名称注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境build文件夹：这个文件夹主要是进行webpack的一些配置webpack基础配置,开发环境,生产环境都依赖webpack开发环境配置webpack生产环境配置build.js 生产环境构建脚本。
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、付费专栏及课程。

余额充值