Ant Design Vue Pro流程分析记录

一、基本介绍

        Ant Design Vue Pro提供了一套完整的解决方案,包括路由、状态管理、UI组件库、HTTP请求封装等,方便开发者快速搭建和维护企业级应用。

二、官网地址

      Ant Design Pro of Vue

三、下载及安装

        推荐使用Yarn

 四、文件分布及说明

dist:发布时产生文件的目录

node_modules:官方和第三方组件所在目录(一般无需修改,如有修改需要注意会被覆盖)

public:公共资源目录

scr:主要代码目录

        api:走向后端的路由目录,其中login.js是登录相关,manage.js是基本管理相关;

        components:组件目录,自定义组件可放到此目录;

        config:配置文件,其中defaultSetting.js项目基本配置,譬如项目名称;

                                     router.config.js登录后主界面静态展示的菜单及路径;

         mock:静态资源,不连后端时常用;

         router:路由,动态生成界面展示路由;

         store:类似于控制器,即主体逻辑在此目录下实现,譬如动态路由的调用,登录接口的调用及逻辑处理;

         utils:工具包

         views:视图,界面展示代码

         tests:测试目录

package.json:组件及其版本等文件,其中:

调试下面部分影响了后续运行使用的命令,譬如,运行时使用yarn run serve中的serve指的就是这里的serve.

五、运行机制:

  1. 用户访问应用时,路由将用户导向BasicLayout

  2. BasicLayout渲染顶部导航栏和侧边栏。

  3. 根据用户的路由地址,Vue Router加载对应的页面组件。

  4. 页面组件可能会通过Vuex进行状态管理,也可能会通过Axios进行HTTP请求。

  5. 页面加载相关资源和数据,并渲染到页面上。

六、登录流程

src.views.user.Login.Vue页面,输入用户名密码后,点击登录,响应handleSubmit事件;

事件中调用Login方法,跳转到src.store.modules.user.js中的Login;

在Login方法中调用login,跳转到scr.api.login.js中的login,进而调用后端方法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/334085.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python fstring教程(f-string教程)(python3.6+格式化字符串方法)

文章目录 Python F-String 教程:深度探究与实用指南引言基础用法什么是F-String?表达式嵌入 格式化选项小数点精度宽度与对齐数字格式化 高级用法复杂表达式调用函数多行F-String嵌套格式化 总结 Python F-String 教程:深度探究与实用指南 引言 在Pyt…

华为数通 HCIP-Datacom(H12-821)题库

最新 HCIP-Datacom(H12-821)完整题库请扫描上方二维码访问,持续更新中。 BGP路由的Update消息中可不包含以下哪些属性? A、Local Preference B、AS Path C、MED D、Origin 答案:AC 解析:as-path和ori…

Day22:Leetcode:654.最大二叉树 + 617.合并二叉树 + 700.二叉搜索树中的搜索 + 98.验证二叉搜索树

LeetCode:654.最大二叉树 1.思路 解决方案: 单调栈是本题的最优解,这里将单调栈题解本题的一个小视频放在这里 单调栈求解最大二叉树的过程当然这里还有leetcode大佬给的解释,大家可以参考一下: 思路很清晰&#xf…

SOLIDWORKS教育版代理商应该如何选择?

SOLIDWORKS作为目前流行的三维设计软件在工程设计,制造和建筑中有着广泛的应用前景。教育版SOLIDWORKS软件是学生及教育机构学习教学的理想平台。 下面介绍几个挑选SOLIDWORKS教育版代理的关键要素: 1、专业知识与经验:代理商应掌握SOLIDWORKS等软件的丰…

跨域计算芯片,一把被忽视的汽车降本尖刀

作者 |王博 编辑 |德新 2019年前后,「中央运算单元区域控制」的架构被提出。基于这一趋势,从板级的多芯片,到板级的单芯片,集成度越来越高,跨域计算芯片随之来到聚光灯下。 跨域计算芯片的特点是,与专为智…

C语言 | Leetcode C语言题解之第104题二叉树的最大深度

题目: 题解: struct QueNode {struct TreeNode *p;struct QueNode *next; };void init(struct QueNode **p, struct TreeNode *t) {(*p) (struct QueNode *)malloc(sizeof(struct QueNode));(*p)->p t;(*p)->next NULL; }int maxDepth(struct …

wordpress主题模板兔Modown 9.1开心版附送erphpdown v17.1插件

Modown 9.1开心版是一款模板兔开发的wordpress主题可,持续更新多年,优秀的资源下载类主题该模板基于Erphpdown,可以销售软件、视频教程、文章等等,通过主题和插件结合可以实现付费下载、付费阅读等功能,配合模板兔的一…

免费分享一套SpringBoot+Vue企业客户关系CRM管理系统【论文+源码+SQL脚本+PPT】,帅呆了~~

大家好,我是java1234_小锋老师,看到一个不错的SpringBootVue企业客户关系CRM管理系统,分享下哈。 项目视频演示 【免费】SpringBootVue企业客户关系CRM管理系统系统 Java毕业设计_哔哩哔哩_bilibili【免费】SpringBootVue企业客户关系CRM管…

3W 1.5KVDC、3KVDC 隔离,宽电压输入 DC/DC 电源模块——TP03DA 系列

TP03DA系列电源模块额定输出功率为3W,外形尺寸为31.75*20.32*10.65,应用于2:1及4:1宽电压输入范围 4.5-9V、9V-18V、18V-36V、36V-72V、9V-36V和18-72VDC的输入电压环境,输出电压精度可达1%,具有输出短路保护等功能,可…

远程户外监控组网方案,工业4G路由器ZR2000

户外监控无人值守4G工业路由器组网应用涉及工业自动化、数据传输和远程监控的重要领域。在户外没有光纤的情况下,想要让监控或传感器等设备联网,仅需一台4G工业路由器即可解决。以下是关于远程监控户外组网的详细分析与应用: 物联网应用场景 …

免费wordpress中文主题

免费大图wordpress主题 首页是一张大图的免费wordpress主题模板。简洁实用,易上手。 https://www.jianzhanpress.com/?p5857 免费WP模板下载 顶部左侧导航条的免费WP模板,后台简洁,新手也可以下载使用。 https://www.jianzhanpress.com/…

Kyndryl 与 Nvidia 建立新的人工智能基础设施合作伙伴关系

Kyndryl与Nvidia宣布达成新的人工智能基础设施战略合作,共同推动AI技术的广泛应用。根据这一合作,Nvidia的先进AI软件解决方案将被引入Kyndryl的开放集成平台——Kyndryl Bridge,以优化基础设施工作负载,并为客户提供更高效的IT服…

阿赵UE引擎C++编程学习笔记——GameMode和生命周期

大家好,我是阿赵。   之前在介绍HelloWorld的时候,我们很创建了一个MyGameModeBase的c类,然后就可以在BeginPlay函数里面写打印的HelloWorld。这一篇主要是说一下,GameMode究竟是一个什么东西,然后UE里面的生命周期是…

Unity 生成物体的几种方式

系列文章目录 unity工具 文章目录 系列文章目录前言👉一、直接new的方式创建生成1-1.代码如下1-2. 效果图 👉二、使用Instantiate创建生成(GameObject)2-1.代码如下2-2.效果如下图 👉三.系统CreatePrimitive创建生成3…

OrangePi AIpro初体验,码农的第一台个人AI云电脑

介绍 香橙派联合华为精心打造,建设人工智能新生态 官网地址:Orange Pi AIpro Orange Pi官网-香橙派 Orange Pi论坛:Orange Pi论坛 昇腾社区:为开发者免费提供数百个代码参考样例昇腾社区-官网丨昇腾万里 让智能无所不及 学习…

832. 翻转图像 - 力扣

1. 题目 给定一个 n x n 的二进制矩阵 image ,先 水平 翻转图像,然后 反转 图像并返回 结果 。 水平翻转图片就是将图片的每一行都进行翻转,即逆序。 例如,水平翻转 [1,1,0] 的结果是 [0,1,1]。 反转图片的意思是图片中的 0 全部被…

达梦数据库创建根据日期按月自动分区表

达梦数据库创建根据日期自动分区表 概念 达梦数据交换平台(简称DMETL)是在总结了众多大数据项目经验和需求并结合最新大数据发展趋势和技术的基础上,自主研发的通用的大数据处理与集成平台。 DMETL创新地将传统的ETL工具(Extract、Transform、Loading…

推送镜像到私有harbor仓库

本地已制作镜像:tomcat-8.5.100-centos7.9:1.0。 本地已经搭建私有仓库:harbor.igmwx.com。 现在需要把镜像 tomcat-8.5.100-centos7.9:1.0 推送到harbor。 (1)查看本地镜像:sudo docker images zhangzkzhangzk:~/d…

【STL】C++ list 基本使用

目录 一 list 常见构造 1 空容器构造函数(默认构造函数) 2 Fill 构造函数 3 Range 构造函数 4 拷贝构造函数 二 list迭代器 1 begin && end 2 rbegin && rend 三 list 容量操作 四 list 修改操作 1 assign 2 push_front &a…

【LaTex】11 ACM参考文献顺序引用 - 解决 ACM-Reference-Format 顺序不符合论文实际引用顺序的问题

【LaTex】11 ACM参考文献顺序引用 写在最前面解决 ACM-Reference-Format 顺序不符合论文实际引用顺序的问题问题描述问题原因如何解决问题解决方案1(更简单)解决方案2(更自由) 小结 🌈你好呀!我是 是Yu欸 …