美文网首页
全栈学习-从0到1打造博客(第二章:SSR框架+typeORM+

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

作者: NO我的错 | 来源:发表于2022-10-18 12:23 被阅读0次

    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来获取fetchreturn的数据,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

    下一章

    等待...

    相关文章

      网友评论

          本文标题:全栈学习-从0到1打造博客(第二章:SSR框架+typeORM+

          本文链接:https://www.haomeiwen.com/subject/fpwjzrtx.html