【vue2】使用vue常见的业务流程与实现思路

这篇具有很好参考价值的文章主要介绍了【vue2】使用vue常见的业务流程与实现思路。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue 流程设计,javascript,前端,vue.js,ajax

 🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:vue的业务处理思路。前台数据渲染与后台的增删改查操作

【前言】当大家会点开这一篇文章,大家可能会对vue全家桶与vue基础知识有了一个整体的认识。比如我要实现一个数据共享,(假设我用的vuex)我们会先去写下一个模块来存放数据,随后在页面中将我们需要处理的数据通过actions或者直接mutations传过去修改state中数据即可。从功能细分来看,这个很完美完成了我们功能点所需要实现的功能。从业务上来看,我们为什么需要将这个数据存储进我们的vuex呢?就不能通过其他功能来实现吗?比如我是不是也可以通过父子之间的传值来实现功能数据共享。对吧,实现的方式不只是一种,具体那种更加适合?我的回答是没有最强的实现方式,只有更贴切我们业务实现的方法。

目录

一、功能开发思路

二、前台模块

                2.1渲染数据流程

                2.2提交数据流程

三、后台模块

                3.1列表渲染流程

                3.2添加流程

                3.3删除流程

                3.4编辑流程


一、功能开发思路

1.分析需求

        从原型图分析我们需要做什么,实现功能需要用到什么方法,怎样做便于开发与后期的可维护性等等等都是我们需要考虑的一些问题。

2.分析接口

        分析我们需要的接口数据需要提供什么,以及我们通过接口文档写下来我们发送数据得到的结果是什么。

3.实现功能

1.创建分支、切换分支

       切换分支就是为了我们模块化的处理自己负责的部分,不会失误将他人写的代码给破坏以及放置他人将自己的模块破坏。最重要的是当出现问题了不会影响主分支上面的代码。

2.创建页面配置路由

       分支创建好了,我们就需要开始对于我们的页面根据原型图进行一个开发设计喽!

3.绘制页面内容(自己绘制,使用UI库)

          根据UI设计师提供的原型图进行等比例的还原。与UI对接样式,与后端对接数据接口文档。

4.实现功能

                ①前台:渲染数据、提交数据

                ②后台:增删改查

5.测试数据

                减轻代码BUG率,自测完成之后就将数据提交给测试

6.合并分支、处理分支

                测试通过之后,合并分支到主分支,当前模块就处理完成啦!!!


二、前台模块

2.1渲染数据流程

关于接口的封装,请移步:【vue2小知识】实现axios的二次封装_初映CY的前说的博客-CSDN博客

1.分析接口

        拿到接口文档先分析接口,根据模块来封装我们请求方法。比如有的是用户相关的接口我们可以新建一个user模块来存储我们与用户相关的模块。当我是商品相关的接口我就可以新建一个goods的模块来专门存放我们关于商品接口相关的模块。

        作用很简单:便于我们管理接口,提高代码的可阅读性。

2.data里面定义存储数据的变量

        确保我们获取的数据通过data渲染到页面当中。用于后面的数据绑定。

3.methods里定义获取数据的方法

 生命周期钩子的用法请移步:

【vue2】vue生命周期的理解_初映CY的前说的博客-CSDN博客

1.导入封装好的请求方法

2.调用请求方法,发数据,交数据

3.处理正确与错误处理

4.生命周期created判断是否需要调用

        如果页面上需要一打开就需要接口提供的信息,我们常把请求放入生命周期函数created()钩子中,当页面一加载的时候就会执行我们写在methods中的请求。

5.渲染界面

将通过接口获取到的数据绑定到data中即可

2.2提交数据流程

        1.分析接口

        2.data中定义表单变量,进行数据绑定

        3.提交按钮绑定事件

        4.导入封装好的请求方法

        5.加工处理数据(比如校验合法性与去除文字空左右格等等)

        6.发送请求,提交数据

        7.请求成功与请求错误的处理

三、后台模块

3.1列表渲染流程

        1.分析接口,封装请求方法

        2.调用接口绑定生成列表、绘制可视化

【列表功能】后台多增删改查操作,重点在于对于数据的处理。需要细看分页组件的使用(总数变量、页码变量、每页数更换事件、每页更换事件等)

官方指南:分页组件 | Element

vue 流程设计,javascript,前端,vue.js,ajax

【可视化设计】可视化可写也可不写,写了数据就会”动起来“,不再是仅form表单而已。

官网指南:Apache ECharts

vue 流程设计,javascript,前端,vue.js,ajax

3.2添加流程

        1.分析接口封装接口

        2.绘制弹框(定义一个布尔变量;绑定事件变为true)

        3.绘制表单

                ①表单绘制(数据获取和绑定)

                ②表单校验(model、rules、ref、prop、v-model

        4.提交事件

                ①确定按钮绑定提交事件

                ②methods处理

                        a.主动校验表单数据

                        b.收集数据发送请求

                        c.成功提示。失败处理

                        d.列表更新

                        e.表单重置,关闭弹窗

        5.取消事件

                ①取消按钮绑定取消事件

                ②methods定义取消事件函数(重置表单数据,关闭弹窗)

3.3删除流程

        1.分析接口封装接口

        2.删除按钮绑定事件

        3.定义删除事件函数(弹出确认框,发送删除请求(是否携带id?),列表更新 )

3.4编辑流程

        1.分析接口封装接口

        2.绘制弹窗与表单

        3.数据回显

                ①共用添加弹窗执行不同的逻辑。编辑则回显数据,添加则不用回显文章来源地址https://www.toymoban.com/news/detail-779677.html


——期待大家的关注与支持! 你的肯定是我更新的最大动力——

到了这里,关于【vue2】使用vue常见的业务流程与实现思路的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JAVA 微信公众号授权给开放平台(第三方平台)开发流程及第三方平台代公众号实现业务

    一 、开放平台账户注册及开发配置请参考我之前的文章 开发前准备工作。 二、授权流程 官方文档细节比较多 我说的比较直白 (1)首先 启动票据推送服务 (2)接收消息→解密→验证并获取票据→保存票据 component_verify_ticket (3)获取第三方平台调用凭证 component_access_tok

    2024年03月15日
    浏览(64)
  • 业务流程测试

    主要问题存在于 : 1、测试点分析:逻辑性不强 2、测试用例:关于,要细致到什么程度,不太明确 3、测试用例设计时是依据需求说明书还是系统? 流程规范的公司,一定是基于需求说明书(或原型图)来设计测试用例 进入项目的时间节点来看 项目初期介入,依据 需求 说

    2023年04月11日
    浏览(37)
  • 安全策略与业务需求不匹配:安全规则与业务流程的优先级不一致

    随着网络攻击手段层出不穷、黑客技术的日益升级和网络安全法规的日益严格化,企业在保障信息安全的同时也面临着越来越大的压力和挑战。其中一个突出的问题是**安全策略与业务需求的不匹配问题**。这主要表现为安全规则的制定与企业日常的业务流程存在很大的差异和

    2024年01月21日
    浏览(41)
  • 自定义Dynamics 365实施和发布业务解决方案 - 4. 自动化业务流程

    本章的主要重点是研究拟议应用程序的关键业务流程的自动化。每个组织每天都有自己独特的业务操作,这些操作是业务的关键部分。有些自动化的业务流程不需要用户交互,有些流程需要用户交互。此外,在某些业务流程中,某些用户操作完成,然后触发自动化流程来完成

    2024年02月09日
    浏览(43)
  • 业务流程自动化:ThinkAutomation Professional Crack

    ThinkAutomation 助力您的业务流程自动化。自动执行本地和基于云的业务流程,以降低成本并节省时间。 自动化传入的通信渠道,监控数据库,对传入的Webhook,Web表单和聊天机器人做出反应。处理文档、附件、本地文件和其他邮件源。 从传入消息中解析和提取数据并执行业务流

    2024年02月09日
    浏览(38)
  • AI智能语音机器人的基本业务流程

    先画个图,了解下AI语音机器人的基本业务流程。 上图是一个AI语音机器人的业务流程,简单来说就是首先要配置话术,就是告诉机器人在遇到问题该怎么回答,这个不同公司不同行业的差别比较大,所以一般每个客户都会配置其个性化的话术。 话术配置完成后,需要给账号

    2024年02月12日
    浏览(56)
  • 业务流程编排系统设计中的API安全与鉴权

    在当今的数字时代,API(应用程序接口)已经成为企业和组织中不可或缺的组件。它们为不同系统之间的通信和数据共享提供了一个标准化的方式。然而,随着API的普及和使用,API安全和鉴权问题也变得越来越重要。业务流程编排系统中的API安全与鉴权涉及到保护API免受未经授

    2024年02月19日
    浏览(32)
  • 企业内业务系统与Activiti流程引擎的结合(五)

    书接上回 Activiti流程接口中台 接口实现 查询指定人员办理过的任务 /task/user/{userNo}/hiProcinst 查询 activiti 相关表 请求参数 返回参数

    2024年02月13日
    浏览(42)
  • 企业内业务系统与Activiti流程引擎的结合(一)

    Activiti流程接口中台 此模块分以下几部分: 一、数据库表设计 二、后台接口设计 系统使用的Activiti版本  一、初始化的数据库表 1. Activiti 涉及25张表 ACT_EVT_LOG                        事件日志 ACT_GE_BYTEARRAY            部署流程的资源(bpmn、图片) ACT_GE_PROPERTY           

    2023年04月12日
    浏览(35)
  • 生成式AI的力量:它如何彻底改变业务流程自动化

    生成式AI的力量:它如何彻底改变业务流程自动化       生成式AI是一种可以创建新数据或内容的人工智能,它正在彻底改变业务流程自动化。通过利用生成式人工智能,企业可以简化和增强各种流程,从而提高生产力、效率和创新能力。生成式人工智能在业务自动化方面的

    2024年03月24日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包