【源码】基于 Vue 框架的电商购物系统

项目简介

本项目是基于 Vue、VueX、Vant、Axios、Node.js、Express 及 MySQL 构建的电商购物系统。前端界面友好且功能丰富，后端接口按 restful 原则设计，便于统一请求业务功能，为用户打造便捷购物平台。

项目的主要特性和功能

技术选型

前端采用 Vue 框架，用 VueX 进行状态管理，Vant 提供移动端组件，Axios 处理前后端数据交互；后端使用 Node.js 和 Express 搭建服务器，MySQL 存储数据。

业务功能

• 后端：接口遵循 restful 原则设计，按功能划分接口文件，便于阅读维护。服务器端口 3000，对 sql 语句做了防注入处理，支持 cors 跨源资源共享和 session 管理，有完善的错误处理机制，可处理 404 和 500 错误。
• 前端：实现懒加载提升页面性能；支持短信验证登录；有购物车功能；支持图片预览与上传；具备点赞、评论功能；有轮播图展示商品；提供级联菜单；支持下拉刷新和上拉加载；运用路由守卫进行登录拦截保障信息安全。

安装使用步骤

项目安装

1. 确保已下载本项目的源码文件。
2. 在项目根目录下执行以下命令安装依赖： npm install

开发环境运行

执行以下命令进行开发环境的热更新编译和运行： npm run serve

生产环境部署

执行以下命令进行生产环境的编译和压缩： npm run build

配置懒加载

• 项目本地安装： shell npm i @babel/plugin-syntax-dynamic-import -D
• 在项目根目录添加 vue.config.js 配置文件，内容如下： js module.exports = { chainWebpack: config => { // 删除编译后的独立js文件上的预获取操作 config.plugins.delete("prefetch"); } };

Vant 组件安装与配置

• 安装 Vant 及相关插件： shell npm i vant npm i babel-plugin-import -D
• 在 babel.config.js 中进行配置： js module.exports = { plugins: [ [ "import", { libraryName: "vant", libraryDirectory: "es", style: true }, "vant" ] ] };
• 在 assets/vant/vant-ui.js 中按需引入组件。
• 在 main.js 中配置： js import "./assets/vant/vant-ui";

Axios 安装与配置

• 安装 Axios： shell npm i axios
• 在 main.js 中进行配置： js // 导入axios第三方ajax模块 import axios from "axios"; // 配置axios基础路径 axios.defaults.baseURL = "http://127.0.0.1:3000"; // 配置axios保存session信息 axios.defaults.withCredentials = true; // 将axios注册到vue实例中，由于axios不支持use，所以将实例添加到vue原型 Vue.prototype.axios = axios;

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】