vue实战(9):总结二

整理前一段所做的工作内容

0.其它

vue实战(1):准备与资料整理
vue实战(2):初始化项目、搭建底部导航路由
vue实战(3):底部导航显示、搭建各模块静态页面、添加登录页页面与路由
vue实战(4):postman测试数据、封装ajax、使用vuex管理状态
vue实战(5):总结一
vue实战(6):异步显示数据、开发Star组件
vue实战(7):完整开发登录页面(一)
vue实战(8):完整开发登录页面(二)
vue实战(9):总结二
vue实战(10):开发店铺详情(一)

1. 异步数据

封装ajax: promise+axios封装ajax请求的函数封装每个接口对应的请求函数(能根据接口定义ajax请求函数)解决ajax的跨越域问题: 配置代理, 对代理的理解
vuex编码创建所有相关的模块: store/index设计state: 从后台获取的数据实现actions: 定义异步action: async/await流程: 发ajax获取数据, commit给mutation实现mutations: 给状态赋值实现index: 创建store对象main.js: 配置store
组件异步显示数据在mounted()通过$store.dispatch('actionName')来异步获取后台数据到state中mapState(['xxx'])读取state中数据到组件中在模板中显示xxx的数据
模板中显示数据的来源data: 自身的数据(内部改变)props: 外部传入的数据(外部改变)computed: 根据data/props/别的compute/state/getters
异步显示轮播图通过vuex获取foodCategorys数组(发请求, 读取)对数据进行整合计算(一维变为特定的二维数组)使用Swiper显示轮播, 如何在界面更新之后创建Swiper对象?1). 使用回调+$nextTick()2). 使用watch+$nextTick() 

2. 登陆/注册: 界面相关效果

a. 切换登陆方式
b. 手机号合法检查
c. 倒计时效果
d. 切换显示或隐藏密码
g. 前台验证提示

3. 前后台交互相关问题

1). 如何查看你的应用是否发送某个ajax请求?  浏览器的network
2). 发ajax请求404请求的路径的对代理是否生效(配置和重启)服务器应用是否运行
3). 后台返回了数据, 但页面没有显示?vuex中是否有组件中是否读取

转载于:https://www.cnblogs.com/jry199506/p/11040156.html

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

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

相关文章

一名IT从业者的英语口语能力成长路径

这篇文章是我最近十天口语系列文章的合辑,文章比较长,一万五千余字。但是系统化地归纳了自己十多年的英语尤其是口语方面的学习经历与总结思考。我不是个纯粹的英语专业学生,我甚至不是任何英语相关专业的学生,但是我和英语却有着…

解决:SpringBoot 错误:Caused by: org.yaml.snakeyaml.scanner.ScannerException

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 错误: Caused by: org.yaml.snakeyaml.scanner.ScannerException: while scanning for the next tokenfound character that cannot s…

好程序员前端分享使用JS开发简单的音乐播放器

好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器。首先,最终效果如图所示:首先,我们来编写html界面index.html,代码如下:&…

学生管理系统stuSystem函数

void stuSystem(){ struct student *head,*stu; int lookup_num; int Delete_num; int Modify_num; char ckeya; int istate0; do { system("cls"); //vc清屏函数&#xff0c;包含在#include<stdlib.h>中 printf(" 欢迎进入学生管理系统&#xff01;\n&q…

OpenCL用于计算机领域的13个经典案例

摘要&#xff1a;当使用加速器和OpenCL时&#xff0c;哪种类型的算法更加快速&#xff1f;来自弗吉尼亚理工大学的Wu Feng教授和他的团队例举了一份算法列表&#xff0c;分享了OpenCL常被用于计算机领域的13个经典案例。 哪种算法可以最好的映射GPU及矢量处理器呢&#xff1f;…

版本控制:集中式(SVN) vs 分布式(GIT)

Linus一直痛恨的CVS及SVN都是集中式的版本控制系统&#xff0c;而Git是分布式版本控制系统&#xff0c;集中式和分布式版本控制系统有什么区别呢&#xff1f; 先说集中式版本控制系统&#xff0c;版本库是集中存放在中央服务器的&#xff0c;而干活的时候&#xff0c;用的都是…

Knative 核心概念介绍:Build、Serving 和 Eventing 三大核心组件

为什么80%的码农都做不了架构师&#xff1f;>>> 作者| 阿里云智能事业群高级开发工程师 元毅 Knative 主要由 Build、Serving 和 Eventing 三大核心组件构成。Knative 正是依靠这三个核心组件&#xff0c;驱动着 Knative 这艘 Serverless 巨轮前行。下面让我们来分…

树莓派基金会来号召用键盘生物学家研究企鹅

伦敦动物学会&#xff08;Zoological Society of London&#xff09;于2014年&#xff0c;与伍兹霍尔海洋研究所和牛津大学等组织合作监控企鹅的计划Penguin Lifelines有了新进展&#xff0c;伦敦动物学会现与其他动物保护组织合作Penguin Watch项目&#xff0c;邀请民众在网上…

BlockingCollectionT 类实现 列队操作

官方文档 为实现 IProducerConsumerCollection<T> 的线程安全集合提供阻塞和限制功能。 通过 BlockingCollection<T> 实现列队调用函数 建立全局变量 BlockingCollection<string> blockingCollection new BlockingCollection<string>(); 建立调用函数…

Git 版本回退

现在&#xff0c;你已经学会了修改文件&#xff0c;然后把修改提交到Git版本库&#xff0c;现在&#xff0c;再练习一次&#xff0c;修改readme.txt文件如下&#xff1a; Git is a distributed version control system. Git is free software distributed under the GPL.然后尝…

AMD院士站台 异构计算与OpenCL编程师资培训首站清华开讲

摘要&#xff1a;2013年10月14日&#xff0c;“2013年异构计算与OpenCL编程师资培训”在清华大学召开。本活动邀请到AMD、Khronos Group及清华大学的多位并行计算领域专家&#xff0c;与参会者共同探讨OpenCL异构开发和优化技术。 2013年10月14日&#xff0c;由教育部科技发展…

【问题记录】RIDE-1.7.3.1控制台及日志中文乱码处理

RIDE-1.7.3.1运行结果界面展示: 解决方法参考链接&#xff1a; https://blog.csdn.net/panda62/article/details/88535376 转载于:https://www.cnblogs.com/quietCorner/p/11046656.html

GPU Saturday技术沙龙:OpenCL程序员眼中的下一代APU架构

摘要&#xff1a;GPU Saturday技术沙龙在北京3WCoffee成功举办。本次活动邀请AMD资深技术人员及清华大学项目研究员就AMD最新的GCN架构、GPU加速计算在挖掘比特币、典型图像算法、深度神经网络算法等领域的分析与应用展开深入讨论。 [CSDN报道] 9月5日&#xff0c;GPU Saturda…

直接取出 post 请求中的 json、得请求体参数、查看 post 请求参数

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 方法如下&#xff1a; try{ServletRequestAttributes requestAttributes (ServletRequestAttributes) RequestContextHolder.getReques…

SparkSQL调优

1、执行计划&#xff08;过往记忆https://www.iteblog.com/archives/2562.html&#xff09; df.explain(true)//显示逻辑计划和物理计划&#xff0c;不加true只显示物理计划 2、逻辑计划优化方法&#xff1a; 谓词下推&#xff0c;列裁剪&#xff0c;常量替换&#xff0c;常量累…

AMD发布APPML源码,构建clMath库

摘要&#xff1a;日前&#xff0c;AMD将加速并行处理数学库&#xff08;Accelerated Parallel Processing Math Library简称APPML&#xff09;开源&#xff0c;内容包含了BLAS和FFT的OpenCL实现&#xff0c;项目托管在GitHub上&#xff0c;命名为clMath&#xff0c;该项目基于A…

最简单的 post 请求发起方式、调用其它系统接口

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 调用其它系统接口&#xff0c;发起一个 post 请求&#xff0c;写法如下&#xff1a; import cn.com.infinitus.yunxiao.jira.vo.EpicV…

CSS基础学习 18.CSS多列

四种常见的浏览器内核&#xff1a; 转载于:https://www.cnblogs.com/songsongblue/p/11050210.html

BGP

BGP&#xff1a;border gateway protocol 边界网关路由协议 路由协议分类&#xff1a;内部网关路由协议IGP&#xff1a;rip ospf isis &#xff08;eigrp&#xff09;外部 网关路由协议EGP&#xff1a;EGP&#xff08;早期淘汰&#xff09; BGP BGP特点&#xff1a;1、针对大型…

OpenCL 2.0发布,带来更强悍的异构计算能力

摘要&#xff1a;Khronos Group本周一发布了OpenCL 2.0&#xff0c;可为显示芯片提供更好的独立性&#xff0c;以便能为通用软件计算出更大的力。该组织已经发布了2.0的临时标准&#xff0c;预计正式版本的发布要等到6个月以后。 Khronos小组于本周一&#xff08;7月22日&…