Vue移动端项目--瑞幸咖啡重构优化

来了客官,好久不见!

从年初开始,就有个想法,想着把之前做过的项目重新整理一下。毕竟今时不同往日,从现在的角度去看曾经做过的项目,倒是觉得有很多稚嫩的地方。毕竟无论做什么都是熟能生巧,由浅入深嘛。

瑞幸咖啡是之前做过的一个vue移动端项目,项目也是比较粗浅,结构比较混乱。之所以重构代码,一方面是对自己的一个总结,另一方面也是为了众多前端初学者行一个方便之举,能够更好地实战vue框架。

如果对这个项目不了解,可以点击这里Vue项目-手机app瑞幸咖啡详解(全网最细) 从脚手架搭建到前后端数据交互本次重构依旧采用vue2框架,只是接口采用json-server的形式模拟实现,功能基本能够复现。好了,废话不多说,下面就简单介绍一下本次重构内容!

一,项目结构

在这里插入图片描述

  • public 这个就不用介绍了吧

  • src 开发目录

    • src/assets 存放项目下的静态资源(图片,icon,字体文件等)
    • src/components 项目下的公共组件
    • src/hooks 存放公共请求处理函数(如获取用户收货地址)
    • src/pages 项目页面组件
    • src/router 存放路由(包括路由列表,路由守卫)
    • src/store vueX目录
    • src/utils 存放项目公用工具类(如存取userInfo)
  • App.vue 项目主组件

  • main.js 入口文件

  • db.json 存放json-server数据(很重要,用来模拟接口)

  • README.md 项目说明文件

    其余文件可以不用关注,或者自行搜索了解

二,项目启动

step 1

npm install
or
yarn install

step 2

npm run server

step 3

npm run serve
or
yarn serve

三、账号登录

经过以上步骤,项目就能够成功启动,但是项目必须登录才能进入,本项目设置了三个账号,存放在项目文件中,读者可自行拉取代码体验,文章最后我会附上项目完整免费源码(是不是良心博主)。

在这里插入图片描述
先别急,这里有必要作个说明,此处登录需要账号(也就是手机号)和验证码,验证码按照以上步骤获取即可,只有手机号合法且验证码正确方可登录成功!

四,重构说明

在这里插入图片描述

本项目共分为上图五个模块以及登录模块。本次项目重构整合了所有页面组件,公共组件,静态资源,改用json-server模拟接口实现页面功能。在复现之前所有功能的前提下,优化了部分功能,如购物车、订单模块等,还新增了账户余额查询,订单评论功能。
对于之前的代码也作出了优化,删除或更改了冗余的代码块,提取公用代码块为工具类,对于路由守卫也作出了更改,对于页面访问的权限只有登录账户才能访问。
对于组件名,变量名等统一了规范,全部按照阿里前端规范修改,变量或函数名更加语义化,也都做了详细的代码注释,方便初学者更加容易理解。
此外还修改了部分代码或是css的bug,使得项目运行更加流畅。当然,json-server模拟接口可能并不尽人意,奈何我只是小小一个前端。况且,重点是在于对于vue框架的项目实战学习。

五,总结

本次项目重构断断续续也花了挺久时间的,中间也是磕磕绊绊。好在重构工作初步完成,当然后续可能也会继续进行优化的。当下初学前端的读者可以点点关注,期待下后续吧!一个最最良心的前端博主!

最后的最后,最重要的源码地址(拉取默认分支即可):

https://gitee.com/sandas/ruixing

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

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

相关文章

字符串 (2)--- 前缀函数与 KMP 算法

/* https://www.luogu.com.cn/problem/UVA455 最小周期&#xff1a; n - pi[n -1] */ #include <iostream> #include <string> #include <vector> using namespace std; vector<int> prefix_fun(string s) { int len s.length(); /…

基于java在线点餐系统设计与实现

基于java在线点餐系统设计与实现 随着科学技术与经济的快速发展&#xff0c;网络信息技术也有了显著的提升与进步&#xff0c;当今的社会是一个集数字化&#xff0c;网络化&#xff0c;信息化的&#xff0c;并且是以网络为核心的现代化社会。伴随信息互联网的高速成长&#xf…

深度学习——批标准化Batch Normalization

什么是批标准化&#xff1f; 批标准化&#xff08;Batch Normalization&#xff09;是深度学习中常用的一种技术&#xff0c;旨在加速神经网络的训练过程并提高模型的收敛速度。 批标准化通过在神经网络的每一层中对输入数据进行标准化来实现。具体而言&#xff0c;对于每个输…

Linux基本指令操作

登陆指令&#xff08;云服务器版&#xff09; 当我们获取公网IP地址后&#xff0c;我们就可以打开xshell。 此时会有这样的界面&#xff0c;我们若是想的登陆&#xff0c;则需要输入以下的指令 ssh 用户名公网IP地址 然后会跳出以下的窗口 接着输入密码——密码便是先前定好…

微服务安全简介

​由于其可扩展性、灵活性和敏捷性&#xff0c;微服务架构已经变得越来越受欢迎。然而&#xff0c;随着这种架构的分布和复杂性增加&#xff0c;确保强大的安全措施变得至关重要。微服务的安全性超越了传统的方法&#xff0c;需要采用全面的策略来保护免受不断演变的威胁和漏洞…

CentOS 7 x86_64 制作openssh 9.3p2 rpm包修复安全漏洞 —— 筑梦之路

最近openssh 暴露出一个安全漏洞CVE-2023-38408&#xff0c;以下是相关资讯&#xff1a; 2023年7月19日&#xff0c;OpenSSH发布紧急安全补丁&#xff0c;以解决OpenSSH ssh-agent转发中存在安全漏洞远程执行CVE-2023-38408。漏洞由Qualys威胁研究单位(TRU)发现。 OpenSSH 是Se…

Promise 讲解,js知识,es6

文章目录 一、Promise的三种状态1. 初始态pending2. 成功态fulfilled&#xff0c;调用resolve方法3. 失败态rejected&#xff0c;调用reject方法 二、Promise的方法then方法catch方法 三、async和awaitasync 函数await 表达式 四、代码举例帮助理解1、Promise的值通过then方法获…

网络设备身份鉴别使用TACACS+和RADIUS

TACACS&#xff08;Terminal Access Controller Access Control System Plus&#xff09;和RADIUS&#xff08;Remote Authentication Dial-In User Service&#xff09;是两种常用的网络认证协议&#xff0c;用于管理网络设备的用户身份验证和访问控制。 TACACS是一种基于TCP/…

在vsCode 中执行Electron 项目时,出现中文乱码问题

问题&#xff1a;vscode 中执行Electron 项目时&#xff0c;控制台出现乱码 解决方法&#xff1a; 在 terminal 修改编码格式&#xff1a;65001代表UTF-8&#xff0c;936代表GBK

IC设计从业者必备的宝藏网站!

对于IC设计从业者而言&#xff0c;获取准确的学习资源&#xff0c;行业资讯直观重要&#xff0c;今日我们推荐ic行业专业的宝藏网站&#xff0c;希望对从业者有所帮助。 01-找开源项目的网站 GitHub除了Git代码仓库托管及基本的 Web管理界面以外&#xff0c;还提供了订阅、讨论…

关于SVC和PendSV

这两个都属于异常而不是中断&#xff0c;所谓异常就是ARM内核中断这两个中断都是由用户代码主动触发的&#xff0c;即软件触发&#xff0c;没有其它触发源SVC&#xff1a;系统服务调用&#xff0c;进入该异常可以进入特权模式&#xff0c;即在需要进行各种系统操作的时候主动触…

用 Generative AI 构建企业专属的用户助手机器人

原文来源&#xff1a; https://tidb.net/blog/a9cdb8ec 关于作者&#xff1a;李粒&#xff0c;PingCAP PM TL;DR 本文介绍了如何用 Generative AI 构建一个使用企业专属知识库的用户助手机器人。除了使用业界常用的基于知识库的回答方法外&#xff0c;还尝试使用模型在 fe…

树形dp记录路径 CF1779F Xorcerer’s Stones

CF1779F Xorcerer’s Stones 树形dp记录路径 首先我们分析一下操作。 对于奇树&#xff0c;进行一次操作后&#xff0c;其异或和不变&#xff1b;对于偶树&#xff0c;进行一次操作后&#xff0c;其异或和为0。 如果我们能让所有点异或和为0&#xff0c;只要在根节点再进行一次…

JAVA面试总结-Redis篇章(三)——缓存雪崩

JAVA面试总结-Redis篇章&#xff08;三&#xff09;——缓存雪崩

go性能分析工具之trace

参考文章&#xff1a; https://eddycjy.gitbook.io/golang/di-9-ke-gong-ju/go-tool-trace https://mp.weixin.qq.com/s__bizMzUxMDQxMDMyNg&mid2247484297&idx1&sn7a01fa4f454189fc3ccdb32a6e0d6897&scene21#wechat_redirect 你有没有考虑过&#xff0c;你的g…

【计算机编程语言】HTML-前端基础知识

文章目录 HTML1.初识HTML1.1什么是HTML 2.网页基本标签2.1标题标签2.2段落标签2.3换行标签2.4水平线标签2.5字体样式标签2.6注释和特殊符号 3.图像、超链接、网页布局3.1图像3.2链接标签3.3网页布局 4、列表、表格、媒体元素4.1列表4.2表格4.3媒体元素 5.页面结构分析6.iframe内…

运维英语基础语法-一般现在时

一般现在时的陈述句-你、我、他&#xff1a; 公式&#xff1a;代词be动词名词 代词&#xff1a; 代词用来代替名词&#xff0c;以避免重复。常见的代词有I, you, he, she, it, we, they, me, him, her, us, them等。 Be动词 am&#xff08;用于第一人称单数&#x…

0基础学习VR全景平台篇 第70篇:VR直播-如何设置付费观看、试看

对于拥有优质内容的VR直播&#xff0c;可以通过付费观看的方式进行内容变现&#xff0c;是当下非常流行的商业模式。 付费价格&#xff1e;0时便会自动弹出“试看时间”的设置项。试看时间&#xff1d;0秒时&#xff0c;用户进入直播间需要先付费才可观看&#xff1b;试看时间&…

Python中字符串拼接有哪些方法

目录 什么是字符串拼接 为什么要进行字符串拼接 Python中字符串拼接有哪些方法&#xff1f; 什么是字符串拼接 字符串拼接是将多个字符串连接在一起形成一个新的字符串的操作。在编程中&#xff0c;字符串拼接经常用于将不同的字符串组合在一起&#xff0c;以创建更长或更有…

Elasticsearch 映射Mappings (三)

文章目录 前言一、Mapping简介查看索引映射 二、自动映射 dynamic mapping自动类型推断mapping注意点 三、手动映射 Expllicit mapping创建索引 四、自动映射模板 Dynamic Templates定义映射模板规则判定&#xff1a;conditlonsmatch_mapping_typematch、unmatchpath_match、pa…