Vue.js 电商 SPA 实战项目：前后端分离开发-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 是一款优秀的前端框架，适合构建单页面应用（SPA）。在本文中，我们将介绍一个 Vue.js 电商 SPA 实战项目，其中包括前后端分离开发的详细内容和示例代码。

项目介绍

本项目是一个电商 SPA，包括用户注册、登录、商品展示、购物车、订单管理等功能。前端使用 Vue.js 构建，后端使用 Node.js + Express 框架实现 RESTful API，数据库使用 MongoDB。

项目结构

frontend：前端代码
- src：源代码
  - api：封装了与后端交互的 API
  - components：组件
  - router：路由
  - store：Vuex 状态管理
  - views：页面
- package.json：前端依赖
backend：后端代码
- app.js：应用程序入口
- routes：路由
- models：数据模型
- controllers：控制器
- config.js：配置文件
- package.json：后端依赖

前端开发

技术栈

Vue.js：前端框架
Vue Router：路由
Vuex：状态管理
Axios：HTTP 客户端
Element UI：UI 组件库
Sass：CSS 预处理器

项目搭建

创建项目
```
vue create frontend
```

安装依赖

cd frontend
npm i axios element-ui sass sass-loader vue-router vuex

配置环境变量

在 .env 文件中配置后端 API 的地址：
```
VUE_APP_API_URL=http://localhost:3000/api
```
启动项目
```
npm run serve
```

实现功能

用户注册和登录

用户注册和登录是电商网站的基本功能之一。我们将使用 Element UI 中的表单组件实现用户注册和登录功能。

创建登录和注册页面

在 views 目录下创建 Login.vue 和 Register.vue 页面，并在 router/index.js 中配置路由。
实现表单功能

使用 Element UI 中的表单组件实现表单功能，包括表单验证和提交。
封装 API

在 api 目录下封装用户注册和登录的 API。
存储用户信息

使用 Vuex 存储用户信息，包括用户 ID、用户名和用户角色。

商品展示

商品展示是电商网站的核心功能之一。我们将使用 Element UI 中的卡片组件实现商品展示功能。

创建商品列表页面

在 views 目录下创建 ProductList.vue 页面，并在 router/index.js 中配置路由。
获取商品数据

在 api 目录下封装获取商品数据的 API。
实现商品列表功能

使用 Element UI 中的卡片组件实现商品列表功能，包括商品展示和商品搜索。

购物车

购物车是电商网站的重要功能之一。我们将使用 Vuex 实现购物车功能。

创建购物车页面

在 views 目录下创建 Cart.vue 页面，并在 router/index.js 中配置路由。
实现购物车功能

使用 Vuex 存储购物车信息，包括商品 ID、商品数量和商品价格。实现添加商品、删除商品和修改商品数量的功能。

订单管理

订单管理是电商网站的重要功能之一。我们将使用 Element UI 中的表格组件实现订单管理功能。

创建订单列表页面

在 views 目录下创建 OrderList.vue 页面，并在 router/index.js 中配置路由。
获取订单数据

在 api 目录下封装获取订单数据的 API。
实现订单列表功能

使用 Element UI 中的表格组件实现订单列表功能，包括订单展示和订单搜索。

后端开发

技术栈

Node.js：后端语言
Express：后端框架
MongoDB：数据库
Mongoose：MongoDB 的 ODM（Object Document Mapping）框架

项目搭建

创建项目
```
mkdir backend
cd backend
npm init
```
安装依赖
```
npm i express mongoose
```
配置环境变量

在 .env 文件中配置 MongoDB 的连接地址：
```
MONGODB_URI=mongodb://localhost:27017/ecommerce
```
启动项目
```
node app.js
```

实现功能

用户注册和登录

用户注册和登录是电商网站的基本功能之一。我们将使用 Passport 和 JWT 实现用户注册和登录功能。

创建用户模型

在 models 目录下创建 User.js 模型，包括用户名、密码和用户角色。
实现用户注册和登录功能

使用 Passport 和 JWT 实现用户注册和登录功能，包括用户注册、用户登录和验证用户身份。

商品管理

商品管理是电商网站的重要功能之一。我们将使用 Mongoose 实现商品管理功能。

创建商品模型

在 models 目录下创建 Product.js 模型，包括商品名称、商品描述和商品价格。
实现商品管理功能

实现商品的增删改查功能，包括添加商品、删除商品、修改商品和获取商品列表。

订单管理

订单管理是电商网站的重要功能之一。我们将使用 Mongoose 实现订单管理功能。

创建订单模型

在 models 目录下创建 Order.js 模型，包括用户 ID、商品 ID、商品数量和订单金额。
实现订单管理功能

实现订单的增删改查功能，包括添加订单、删除订单、修改订单和获取订单列表。

前后端交互

前后端交互使用 Axios 实现。在 api 目录下封装与后端交互的 API，包括用户注册和登录的 API、商品管理的 API 和订单管理的 API。

以用户注册为例，实现如下：

// javascriptcn.com 代码示例
import axios from 'axios'

const apiUrl = process.env.VUE_APP_API_URL

export const register = async (username, password) => {
  const res = await axios.post(`${apiUrl}/auth/register`, {
    username,
    password
  })
  return res.data
}

总结

本文介绍了一个 Vue.js 电商 SPA 实战项目，包括前后端分离开发的详细内容和示例代码。通过本项目，我们学习了 Vue.js、Node.js、Express、MongoDB 等技术，掌握了如何使用这些技术构建一个完整的电商网站。希望本文对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65094fa295b1f8cacd40a7dc