前言
在本篇博客中，我将分享如何构建一个类似于小米商城的移动端全栈项目。项目采用前后端分离的架构，后端使用了 Nest.js 框架，数据库选择 MySQL 来存储用户信息和商品数据。前端通过 ** Fetch** 与后端进行数据交互，确保数据的实时性与准确性。作为一个刚刚学习 Nest.js 的开发者，在项目开发过程中遇到了不少问题，并通过实践找到了相应的解决方案。希望这篇博客能对正在进行全栈开发的你有所帮助。
小米商城地址： 点击这里<<<
项目目录结构
在开始项目之前，了解项目的目录结构是非常重要的。以下是本项目的目录结构及其说明： mishop/ ├── dist/ # 编译后的输出文件 ├── node_modules/ # 项目依赖的模块 ├── public/ # 前端静态资源 │ ├── CSS/ # 样式文件 │ │ ├── all.css │ │ ├── home.css │ │ ├── login.css │ │ ├── my.css │ │ ├── shopping.css │ │ ├── sort.css │ ├── html/ # HTML页面 │ │ ├── Home.html │ │ ├── login.html │ │ ├── my.html │ │ ├── shopping.html │ │ ├── sort.html │ │ └── Rice-Circle.html │ └── images/ # 图片资源 ├── src/ # 后端源码 │ ├── goods/ # 商品相关模块 │ ├── swiper/ # 轮播图模块 │ ├── user/ # 用户模块 │ │ ├── user.controller.ts │ │ ├── user.entity.ts │ │ ├── user.module.ts │ │ ├── user.service.ts │ ├── app.controller.ts # 应用控制器 │ ├── app.controller.spec.ts # 控制器测试文件 │ ├── app.module.ts # 应用模块 │ ├── app.service.ts # 应用服务 │ └── main.ts # 应用入口 ├── .eslintrc.js # ESLint配置 ├── .gitignore # Git忽略文件 ├── .prettierrc # Prettier配置 ├── nest-cli.json # Nest CLI配置 ├── package-lock.json # 依赖锁定文件 ├── package.json # 项目依赖和脚本 ├── README.md # 项目说明文件 ├── tsconfig.build.json # TypeScript构建配置 └── tsconfig.json # TypeScript配置
目录说明：
dist/：存放编译后的后端代码。
node_modules/：项目的依赖模块，由 npm 或 pnpm 管理。
public/：存放前端的静态资源，包括CSS、HTML和图片。
CSS/：存放各个页面的样式文件。
html/：存放各个页面的HTML文件。
images/：存放项目所需的图片资源。
src/：后端源码目录。
goods/：商品相关的模块，负责商品数据的管理。
swiper/：轮播图模块，管理首页的轮播图数据。
user/：用户模块，处理用户的注册、登录等功能。
其他文件如 app.controller.ts、app.module.ts 等是Nest.js应用的核心文件。
其他配置文件如 .eslintrc.js、.prettierrc 等用于代码规范和格式化。
注意事项
小米商城移动端项目主要针对移动设备开发，如果您在PC端进行访问，需要使用浏览器的移动模拟器来查看效果：
按下 F12 进入开发者工具。
按下 Ctrl + Shift + M 切换到移动设备模式。
否则，您可能会被重定向到小米官网。
1. 引入 Nest.js
首先，确保您的电脑已安装 Node.js，安装 Node.js 时会附带 npx 和 npm。接下来，使用以下命令全局安装 Nest CLI 并创建新项目：
pnpm i -g @nestjs/cli # 全局安装 Nest CLI
nest new mishop # 创建项目
在创建项目过程中，选择使用 pnpm 作为包管理工具。如果遇到问题，可以切换到 npm。 创建完成后，项目结构会自动生成。接下来，我们需要设置数据库，并在数据库中创建相应的表，最后通过 Nest.js 连接数据库。
2. 连接数据库
创建数据库与表
我选择使用 MySQL 作为数据库，并使用 phpMyAdmin 或 MySQL Workbench 创建数据库和表。以下是我创建的主要表结构：
goods：商品信息
users：用户信息
swiper：轮播图数据
配置数据库连接
在项目根目录下安装