全栈学习-从0到1打造博客（第二章：SSR框架+typeORM+

SSR框架

原本想用next.js来开发用户端，后面发现另一个号称地球上没有对手的 SSR 框架，于是乎准备用它来搞blog的用户端！！！

有兴趣的同学可以了解下，框架地址：http://doc.ssr-fc.com/

框架目录结构地址：http://doc.ssr-fc.com/docs/features$structure

创建SSR项目

npm init ssr-app blog-user-ssr

选择nest.js的项目，我选择的是第二个

c4177dcebe504dab81762cd85bae0de5_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp.jpg

回车创建成功

e7d6dd302742465fb1dbb6c3bdcbd531_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp.jpg

创建modules

按照示例文件，在/src/modules中创建文章对应的modules文件，直接复制示例文件

7abe581679ed4b18ac7c3f7b0f3c8c88_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp.jpg

连接数据库

如果觉得安装数据库比较麻烦的话，可以使用php的集成环境一键开启，该软件主要用来开启php环境的，但是也可以只用mysql和nginx，还是很方便滴

软件名：phpcustom，地址：http://www.phpcustom.com/

下载完成解压后，运行PHPCUSTOM.exe，在左下角Mysql那里，右键菜单启动或停止。该软件里面内置phpmyadmin管理数据库，具体操作进入官网查看

f0221d8b74124d0a8562772a4d7259a3_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp.jpg

Mysql安装并启动后就可以开始链接数据库了，数据表结构在第一章中查看：https://www.jianshu.com/p/80e0a93d3cfe

首先安装@nestjs/typeorm typeorm mysql2

npm i --save @nestjs/typeorm typeorm mysql2

进入/src/app.module.ts, 进行数据库连接配置，并把新建的article.module.ts导入

8a997c1dff4e46568055748acbcb9632_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp.jpg

在/src目录创建entity文件夹，用来放实体文件，并在entity中创建article/article.entity.ts，与数据表字段对应

b56bd2c66eeb4dc08d4179542fd5a8a9_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp.jpg

文章moudules

在aticle.module.ts，@Module()中导入service，controller，entity，typeOrmModule

1.webp.jpg

文章service

在article.service.ts中查询数据库文章信息

fc09efefe4944fb2922c2bb8b3530403_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp.jpg

文章api.controller

在api.controller.ts中引入article.service.ts

装饰器@Controller("/api")与@Post("/article")，表示接口地址为/api/article的post请求

创建方法queryArticleInfo()调用article.service中的getArticleData()方法返回数据

2.webp.jpg

文章controller

装饰器@Controller("/")与@Get("/article/:id")，表示访问地址为/aticle/xx的get请求

3.webp.jpg

useRender只是将示例中的服务端路由解析封装而已，参考文档：http://doc.ssr-fc.com/docs/features$develop

4.webp.jpg

此时后端已经完成了

前端数据获取

在/web/pages中创建article/render$id.vue和fetch.ts，vue文件名中$id对应接参id值，fetch从示例文件中复制过来

关于fentch在官网中查看：http://doc.ssr-fc.com/docs/features$fetch

fentch中ctx会获取到对应的service，使用service调用api.service方法获取文章数据

5.webp.jpg

apiService与后端controller服务端路由解析方法中一致

6.webp.jpg

前端组件

在render$id.vue中写一个简单页面，通过props接收reactiveFetchData来获取fetch中return的数据,reactiveFetchData为固定的取参名, 具体参考文档：http://doc.ssr-fc.com/docs/features$communication

7.webp.jpg

前后端完成，cmd输入npm run start运行，打开http://127.0.0.1:3000/article/1 ，我们来看看效果

7.webp (1).jpg 8.webp.jpg

因为鄙人也是边学边写所以写的不是很好，请见谅！！！

原文传送门：https://juejin.cn/post/7155693576293187615

下一章

等待...