基于Vue开发的一个仿京东电商购物平台系统(附源码下载)

电商购物平台项目

项目完整源码下载

基于Vue开发的一个仿京东电商购物平台系统

Build Setup

# csdn下载该项目源码压缩包
解压重命名为sangpinghui_project# 进入项目目录
cd sangpinghui_project# 安装依赖
npm install# 建议不要直接使用 cnpm 安装以来,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org# 启动服务
npm run serve

技术选型

image-20220608150139753

前端路由

image-20220608150232527

API 接口

image-20220608150314003

目录介绍

image-20220608150502494

header 组件

image-20220608151719241

使用声明式路由导航与编程式路由导航

解决编程式路由导航的一个错误

编程式路由跳转到当前路由(参数不变), 会抛出 NavigationDuplicated 的警告错误,如何解决?

通过修正 Vue 原型上的 push 和 replace 方法

// 缓存原型上的push函数
const originPush = VueRouter.prototype.push;
const originReplace = VueRouter.prototype.replace;
// 给原型对象上的push指定新函数函数
VueRouter.prototype.push = function (location, onComplete, onAbort) {// 判断如果没有指定回调函数, 通过call调用源函数并使用catch来处理错误if (onComplete === undefined && onAbort === undefined) {return originPush.call(this, location, onComplete, onAbort).catch(() => {});} else {// 如果有指定任意回调函数, 通过call调用源push函数处理originPush.call(this, location, onComplete, onAbort);}
};
VueRouter.prototype.replace = function (location, onComplete, onAbort) {if (onComplete === undefined && onAbort === undefined) {return originReplace.call(this, location, onComplete, onAbort).catch(() => {});} else {originReplace.call(this, location, onComplete, onAbort);}
};

Footer 组件

image-20220608152337887

利用路由元信息 meta 配置和 v-show 控制 footer 组件的显示和隐藏在

{path: '/register',component: Register,meta: { // 需要隐藏footer的路由添加此配置isHideFooter: true}
},{path: '/login',component: Login,meta: {isHideFooter: true}
},
//在组件上面添加<Footer v-show="!$route.meta.isHideFooter"/>

Home 组件

image-20220608152939577

子组件

image-20220608153006927

封装 ajax 请求模块

/* 
对axios进行二次包装
1. 配置通用的基础路径和超时
2. 显示请求进度条
3. 成功返回的数据不再是response, 而直接是响应体数据response.data
4. 统一处理请求错误, 具体请求也可以选择处理或不处理
*/
import axios from 'axios';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';// 配置不显示右上角的旋转进度条, 只显示水平进度条
NProgress.configure({ showSpinner: false });const service = axios.create({baseURL: '/api', // 基础路径timeout: 15000, // 连接请求超时时间
});service.interceptors.request.use((config) => {// 显示请求中的水平进度条NProgress.start();// 必须返回配置对象return config;
});service.interceptors.response.use((response) => {// 隐藏进度条NProgress.done();// 返回响应体数据return response.data;},(error) => {// 隐藏进度条NProgress.done();// 统一处理一下错误alert(`请求出错: ${error.message || '未知错误'}`);// 后面可以选择不处理或处理return Promise.reject(error);}
);export default service;

配置代理服务器

devServer: {proxy: {'/api': { // 只对请求路由以/api开头的请求进行代理转发target: 'http://182.92.128.115', // 转发的目标urlchangeOrigin: true // 支持跨域}}
},

使用 vuex 管理状态

由于项目体积比较大,向服务器发请求的接口过多,服务器返回的数据也会很多,如果还用以前的方式存储数据,导致 vuex 中的 state 数据格式比较复杂。采用 vuex 模块式管理数据。
Vuex 核心概念:state、actions、mutations、getters、modules

Mock/模拟数据接口

Mockjs: 用来拦截 ajax 请求, 生成随机数据返回

mock/mockServer.js

// 先引入mockjs模块import Mock from 'mockjs';
//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露,但是可以引入]
//webpack默认对外暴露的:图片、JSoN数据格式
import banner from './banner.json';
import floor from './floor.json';
//mock数据:第一个参数请求地址第二个参数:请求数据
Mock.mock('/mock/banner', { code: 200, data: banner }); //模拟首页大的轮播图的数据
Mock.mock('/mock/floor', { code: 200, data: floor });

api/ajaxMock.js

/* 
专门请求mock接口的axios封装
*/
import axios from 'axios';const mockAjax = axios.create({baseURL: '/mock', // 路径前缀timeout: 10000, // 请求超时时间
});mockAjax.interceptors.request.use((config) => {return config;
});mockAjax.interceptors.response.use((response) => {return response.data;},(error) => {return Promise.reject(error);}
);export default mockAjax;

api/index.js

import mockAjax from './mockAjax';// 获取广告轮播列表
export const reqBanners = () => mockAjax.get('/banners');// 获取首页楼层列表
export const reqFloors = () => mockAjax.get('/floors');

Search 路由

1.搜索查询条件参数理解与准备 2.组件动态数据显示 3.根据分类和关键字进行搜索 4.根据品牌进行搜索 5.根据属性进行搜索 6.排序搜索 7.自定义分页组件

image-20220608155022983

image-20220608155044667

Detail 路由

1)图片放大镜效果 2)小图轮播

image-20220608155212247

AddCartSuccess 路由

区别使用 sessionStorage 与 localStorage

image-20220608155413517

ShopCart 路由

1)用户临时 ID 的处理 2)购物车数据的管理(复杂) 3)不使用 v-model 监控用户输入
4)async / await / Promise.all() 的使用

image-20220608155635581

注册与登陆路由

1)注册/登陆请求后组件的响应处理 2)登陆后自动携带 token 数据

image-20220608155847993

image-20220608155904866

测试用的账号和密码:

账号:13700000000
密码:111111

导航和路由守卫

a.只有登陆了, 才能查看交易/支付/个人中心界面
b.只有没有登陆, 才能查看登陆界面
c.只有携带的 skuNum 以及 sessionStorage 中有 skuInfo 数据, 才能查看添加购物车成功的界面
d.只能从购物车界面, 才能跳转到交易界面
e.只能从交易界面, 才能跳转到支付界面
f.只有从支付界面, 才能跳转到支付成功的界面

订单与支付

1)提交订单 2)支付二维码 3)获取订单状态

image-20220609105837105

image-20220609105953404

image-20220609110004433

支付组件

image-20220609110322172

image-20220609110333949

支付成功组件

image-20220609110358429

我的订单组件

image-20220609110438770

图片懒加载

还没有加载得到目标图片时, 先显示 loading 图片
在进入可视范围才加载请求目标图片

路由懒加载

(1)当打包构建应用时,JS 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了
(2)本质就是 Vue 的异步组件在路由组件上的应用
需要使用动态 import 语法, 也就是 import()函数

前台表单校验

(1)项目中有一些如注册/登陆表单, 在提交请求前是需要进行表单输入数据校验的
(2)只有前台表单验证成功才会发请求
(3)如果校验失败, 以界面红色文本的形式提示, 而不是用 alert 的形式
(4)校验的时机, 除了点击提交时, 还有输入过程中实时进行校验

image-20220609110707175

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

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

相关文章

知识图谱 vs GPT

简介&#xff1a; 当我们谈论知识图谱时&#xff0c;我们指的是一种结构化的知识表示形式&#xff0c;是一种描述真实世界中事物及其关系的语义模型&#xff0c;用于描述实体之间的关系。它通过将知识组织成图形结构&#xff0c;提供了一种更全面、准确和智能的信息处理方式。知…

每日一题(LeetCode)----二叉树--二叉树的层平均值

每日一题(LeetCode)----二叉树–二叉树的层平均值 1.题目&#xff08;637. 二叉树的层平均值&#xff09; 给定一个非空二叉树的根节点 root , 以数组的形式返回每一层节点的平均值。与实际答案相差 10-5 以内的答案可以被接受。 示例 1&#xff1a; 输入&#xff1a;root […

微信小程序开发会务管理系统解决方案

随着移动通讯业务以及信息技术的快速发展&#xff0c;移动端的应用 (APP)的功能越来越多样越来越受欢迎。微信、支付宝以及各大手机品牌开始着手于“小程序”“轻应用”的开发化&#xff0c;在信息技术较为发达、社交软件较为集中的当今社会中&#xff0c;使用微信小程序开发程…

【SpringBoot框架篇】34.使用Spring Retry完成任务的重试

文章目录 简要1.为什么需要重试&#xff1f;2.添加maven依赖3.使用Retryable注解实现重试4.基于RetryTemplate模板实现重试 简要 Spring实现了一套重试机制&#xff0c;功能简单实用。Spring Retry是从Spring Batch独立出来的一个功能&#xff0c;已经广泛应用于Spring Batch,…

Redis 数据一致性

概述 当我们在使用缓存时&#xff0c;如果发生数据变更&#xff0c;那么你需要同时操作缓存和数据库&#xff0c;而它们两个又分属不同的系统&#xff0c;因此无法做到同时操作成功或失败&#xff0c;因此在并发读写下很可能出现缓存与数据库数据不一致的情况 理论上可以通过…

分布式高级知识点

分布式一致性算法: Paxos Paxos 是一种分布式一致性算法,用于在分布式系统中达成共识。它可以保证,即使在存在节点故障的情况下,系统也能就某个值达成一致。 Paxos 算法的基本思想是,首先选出一个协调者(leader)。协调者负责向其他节点发送提案(proposal)。其他节点收…

python封装接口自动化测试套件 !

在Python中&#xff0c;我们可以使用requests库来实现接口自动化测试&#xff0c;并使用unittest或pytest等测试框架来组织和运行测试套件。以下是一个基本的接口自动化测试套件封装示例&#xff1a; 首先&#xff0c;我们需要安装所需的库&#xff1a; pip install requests …

pytest conftest通过fixture实现变量共享

conftest.py scope"module" 只对当前执行的python文件 作用 pytest.fixture(scope"module") def global_variable():my_dict {}yield my_dict test_case7.py import pytestlist1 []def test_case001(global_variable):data1 123global_variable.u…

大华web SDK使用记录

用于开发项目中免登录前端摄像头播放页面&#xff0c;使用WEB无插件开发包V1.1.R1509191.230712 1.sdk提供2个通道&#xff0c;1个是视频流通道&#xff0c;基于websocket&#xff0c;使用PalyerControl对象&#xff1b;1个是云台控制通道&#xff0c;基于ajax&#xff0c;使用…

pythonPandas二:数据读取与写入

Pandas提供了各种函数和方法来实现数据读取和写入的操作。下面我将详细介绍Pandas中常用的数据读取和写入的方法。 数据读取&#xff1a; 从CSV文件读取&#xff1a;可以使用pd.read_csv()函数来读取CSV文件&#xff0c;并将其转换为DataFrame对象。 df pd.read_csv(data.csv…

qt 异常汇总

1. C2338 No Q_OBJECT in the class with the signal (编译源文件 ..\..\qt\labelme-master\src\mainwindow.cpp mainwindow头文件中的类没有Q_OBJECT宏定义&#xff0c;或者其子类或者其他依赖没有Q_OBJECT宏定义。 全部qt类都要写上Q_OBJECT. 2. C2385 对connect的访…

【c++】vector的特性及使用

目录 一、vector的介绍及使用 1、vector迭代器的使用 2、vector的空间增长 3、vector的迭代器失效问题 二、vector的深度剖析与模拟实现 一、vector的介绍及使用 1、vector迭代器的使用 vector的迭代器就是原生态指针。vector的迭代器使用方法与string的迭代器使用方法相…

【CANopen】关于STM32中CanFestival的pdo应用

系列文章目录 文章目录 系列文章目录一、发送1、同步传输2、异步传输 二、接收 使用STM32F407单片机 pdo属于过程数据用来传输实时数据&#xff0c;即单向传输&#xff0c;无需接收节点回应。 一、发送 分为同步传输和异步传输。 1、同步传输 分为循环传输&#xff08;周期…

【12】ES6:模块化

一、JavaScript 模块化 JavaScript 模块化是一种组织和管理 JavaScript 代码的方法&#xff0c;它将代码分割为独立的模块&#xff0c;每个模块都有自己的作用域&#xff0c;并且可以导出和导入功能。模块化可以提高代码的可维护性、可重用性和可扩展性。 在JavaScript中&…

【vue/uniapp】使用 uni.chooseImage 和 uni.uploadFile 实现图片上传(包含样式,可以解决手机上无法上传的问题)

引入&#xff1a; 之前写过一篇关于 uview 1.x 版本上传照片 的文章&#xff0c;但是发现如果是在微信小程序的项目中嵌入 h5 的模块&#xff0c;这个 h5 的项目使用 u-upload 的话&#xff0c;图片上传功能在电脑上正常&#xff0c;但是在手机的小程序上测试就不会生效&#x…

漏洞复现--海康威视IP网络对讲广播系统远程命令执行

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

职场革命:六款AI助手改写工作效率的故事

引言 在数字化时代&#xff0c;AI助手正快速成为职场的革命者。这些智能助手不仅仅是效率的提升者&#xff0c;它们更是创新的驱动力&#xff0c;重新定义了我们的工作方式。从自动化PPT创建到智能邮件优化&#xff0c;它们的影响深远且多元。本文将深入探讨六款不同领域的AI助…

三维模型数据的几何坐标变换的点云重建并行计算技术方法分析

三维模型数据的几何坐标变换的点云重建并行计算技术方法分析 倾斜摄影三维模型数据的几何坐标变换与点云重建并行计算技术的探讨主要涉及以下几个方面&#xff1a; 1、坐标系定义与转换&#xff1a;在进行坐标变换前&#xff0c;需要确定各个参考系的定义并实现坐标系之间的转…

卷积神经网络|制作自己的Dataset

在编写代码训练神经网络之前&#xff0c;导入数据是必不可少的。PyTorch提供了许多预加载的数据集&#xff08;如FashionMNIST&#xff09;&#xff0c;这些数据集 子类并实现特定于特定数据的函数。 它们可用于对模型进行原型设计和基准测试&#xff0c;加载这些数据集是十分…

任务悬赏源码活动营销三级分销返佣积分商城版

分销功能:用户拉新用户做任务可以获取任务返佣,三级分销逻辑。 用户拉新会员可以获取一定比例的返佣,根据会员的等级不同获取返佣的比例不同。 会员功能:会员可以根据不同的等级设置任务返佣比例, 以及提现手续费和发布任务置顶次数的赠送问题。会员做任务的价格与普通…