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
下一章
等待...
网友评论