小米商城全栈项目

简介

在本篇博客中,我们将一步步地创建一个基于NestJS的电商后端服务。我们将从项目初始化开始,逐步完成基本的后端服务搭建,包括数据库导入、接口开发,以及进阶的登录鉴权和动态数据渲染。这将是一个全面的实战教程,适合想要深入了解NestJS和后端服务开发的开发者。

环境准备

在开始之前,请确保你已经安装了以下工具:

  • Node.js

  • npm 或 yarn

  • MySQL

  • Visual Studio Code

步骤1:创建NestJS项目

首先,我们需要创建一个新的NestJS项目。打开终端,运行以下命令:

bash

复制代码
nest new ecommerce-backend

这将创建一个新的NestJS项目,并安装所有必要的依赖。

步骤2:搭建后端服务

进入项目目录,开始搭建后端服务。

bash

复制代码
cd ecommerce-backend

导入SQL数据

在这一步,我们需要将预先准备好的SQL数据导入到数据库中。确保你的数据库服务正在运行,然后使用数据库管理工具(如MySQL Workbench或pgAdmin)导入数据。

步骤3:开发接口

我们将开发几个关键的API接口,包括首页轮播图、我的页面、首页动态数据渲染等。

首页轮播图接口

创建一个Carousel模块,包含CarouselControllerCarouselService。在CarouselController中,定义一个获取轮播图数据的方法。

typescript

复制代码
// swiper.controller.ts
@Controller('swiper')
export class SwiperController {
  constructor(private readonly swiperService: SwiperService) {}
​
  @Get()
  async getSwipers(): Promise<Swiper[]> {
    return this.swiperService.findAll();
  }
}
​

首页数据接口

typescript

复制代码
​
@Controller('/index')
export class IndexController {
  constructor(private readonly indexService: IndexService) {}
​
  @Get()
  async findAll(): Promise<Goods[]> {
    return this.indexService.findAll();
  }
}

我的接口

UserController中,添加一个获取用户信息的方法。

typescript

复制代码
// user.controller.ts
@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}
​
  @Get()
  getUserInfo(): User {
    return this.userService.getUserInfo();
  }
}

步骤4:动态数据渲染

对于首页和我的页面,我们需要实现动态数据渲染。这通常涉及到从数据库中查询数据,并将其返回给前端。

首页动态数据渲染

HomePageController中,添加一个方法来获取首页数据。

typescript

复制代码
// home-page.controller.ts
@Controller('home-page')
export class HomePageController {
  constructor(private readonly homePageService: HomePageService) {}
​
  @Get()
  getHomePageData(): HomePageData {
    return this.homePageService.getHomePageData();
  }
}

步骤5:静态页面渲染

对于分类页面、米圈页面和购物车页面,我们将实现静态页面渲染。

分类页面静态渲染

CategoryController中,添加一个方法来返回分类页面的静态数据。

typescript

复制代码
// category.controller.ts
@Controller('category')
export class CategoryController {
  constructor(private readonly categoryService: CategoryService) {}
​
  @Get()
  getCategoryData(): Category[] {
    return this.categoryService.getCategories();
  }
}

进阶要求

登录接口鉴权

使用NestJS的Guards来实现登录接口鉴权。

typescript

复制代码
// auth.guard.ts
@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(context: ExecutionContext): boolean {
    const request = context.switchToHttp().getRequest();
    const token = request.headers['authorization'];
    // 验证token逻辑...
    return true;
  }
}

动态数据渲染

对于分类页面和米圈页面,实现动态数据渲染。

购物车商品数据渲染

CartController中,添加一个方法来获取购物车商品数据。

typescript

复制代码
// cart.controller.ts
@Controller('cart')
export class CartController {
  constructor(private readonly cartService: CartService) {}
​
  @Get()
  getCartData(): CartItem[] {
    return this.cartService.getCartItems();
  }
}

总结

通过本次项目,我从零开始,一步步地构建了一个基于NestJS的电商后端服务。我们完成了项目创建、数据库导入、接口开发、静态和动态数据渲染,以及登录鉴权。希望这个实战教程能帮助你更好地理解和使用NestJS。

相关推荐
Victor3566 小时前
MongoDB(15) 如何在MongoDB中启用身份验证?
后端
Victor3566 小时前
MongoDB(14)如何修改MongoDB的默认端口?
后端
漂流瓶jz7 小时前
BEM、OOCSS、SMACSS、ITCSS、AMCSS、SUITCSS:CSS命名规范简介
前端·css·代码规范
怒放吧德德8 小时前
Spring Boot 实战:RSA+AES 接口全链路加解密(防篡改 / 防重放)
java·spring boot·后端
陈随易11 小时前
真的,你可以不用TypeScript
前端·后端·程序员
郑州光合科技余经理11 小时前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
唐璜Taro12 小时前
Vue3 + TypeScript 后台管理系统完整方案
前端·javascript·typescript
加号312 小时前
windows系统下mysql多源数据库同步部署
数据库·windows·mysql
シ風箏12 小时前
MySQL【部署 04】Docker部署 MySQL8.0.32 版本(网盘镜像及启动命令分享)
数据库·mysql·docker
李慕婉学姐12 小时前
Springboot智慧社区系统设计与开发6n99s526(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
数据库·spring boot·后端