nest全栈项目

项目简介
这是一个全栈小米商城的项目，用到了nest后端数据库 和前端js ，平时有空一点点写出来的，如果有说的不对的地方欢迎指正

一、配置nest

1.全局安装nest

npm i -g @nestjs/cli 

2.创建项目

nest new 项目名

创建完项目后会问你用什么方式来管理依赖包 这里用的npm 安装好了之后用
nest start启动项目 启动成功就是下面这个样子

3.连接数据库
这里连接的是mysql 需要本地配置mysql

import { TypeOrmModule } from '@nestjs/typeorm';

4.生成模块
连接到数据库之后创建一个模块用来操作数据库

命令：

nest g res 模块名

5.配置连接数据库
在app.module.ts里连接数据库 完成一些基本配置

import { TypeOrmModule } from '@nestjs/typeorm';

在main.ts文件里可以给全局路由加上一个前缀

二、项目实践

1.首页
这是前端的静态页面，我们把轮播图通过调数据库的方式来渲染

我这里创建好了一个数据库，用来存储首页轮播图的图片，这里调用数据库的好处就是方便以后维护修改 直接在数据库里更换图片就好了

在创建一个轮播图的模块名叫swiper，在swiper.entity.ts文件里面添加实体，实体是一个映射到数据库的数据表

swiper.entity.ts配置 这里必须要和我们数据库数据一一对应

swiper.controller.ts配置 轮播图渲染需要获取数据库里的数据 所以我们用get请求

返回所有数据

 return await this.swiperService.findAll()

前端用axios.get发送get请求来获取数据库数据，我们可以把获取到的数据库的数据打印出来看一下
打印出来的数据是个数据 所以我们可以用循环的方式来渲染轮播图

2、分类
首先看下静态页面 分类页面有一个tab栏切换的功能，也就是说要根据不同的选项渲染出不一样的数据

在输入指令nest g res classification 创建模块

这里需要获取数据库的所有数据 所以也是在classification.module.ts里面将get设置成return await this.classificationService.findAll();

要根据不同的tab栏渲染出不一样的数据 我就想到了条件判断 这里我就创建了一个数据库 数据的父id等于tab栏的id。

所以我们前端可以这样写 首先渲染tab栏 并把id设置成数据库里的父id

然后在设置渲染内容，首先循环数据库数据，在判断当点击的dom元素的id等于数据库里的数据时就渲染相对应地数据

点击事件，将每次点击dom元素的id传给render 默认渲染第一个