xlab转正项目经验

评论区

项目负责人(mentor)：@李晨潇

用 React 完成一个简易评论区，它的功能如下：用户可以在上方输入框中输入评论的用户名 & 评论内容，点击提交按钮发送评论，发送的评论需要展示在下方，点击每条评论右下角的删除按钮可以删除该条评论。

1.制作前端的csshtml文件

2.分成添加评论，发送本页评论，删除评论三个功能,制作后端go文件，以http server的形式和前端进行交互

3.根据html和go接口，分成添加评论，展示本页评论，删除评论，换页的功能，写js文件

3.进行连接

你学到了什么方面的知识技能
- 浏览器开发者工具看报错和前后端请求的发送与响应
- 后端和前端接口的搭配，后端的HTTP server的运行。如何提取配置文件
- go的基本操作，异步并行
- 前端三件套的网页编写，Dom节点，flex
遇到了什么困难以及解决方案
- 更改了的前端一直无法显示出来，浏览器缓存问题ctrl+F5刷新
- 做了换页但是没响应，前后端变量名没对上
- js文件监听函数的顺序有讲究
对于该项目之后发展的建议和继续优化的方向
- 可以更复杂一点

项目负责人(mentor)：@李晨潇

完成一个简易（自由）的聊天软件。用户可以在此应用中创建和删除自己创建的聊天房间，并且在加入某一个房间后，使用自定义的昵称与其他用户进行实时文字通讯。

写chatroom组件，先分成两部分，roomlist和chatwindow,先做出成列房间和添加房间的功能，成列房间是通过读取数据库内房间然后map将每一个房间返回成roomlist的flex组件。再做出点击切换currentroom,右键删除room的功能。用useswr稳定读取rooms的数据并渲染。

message就是做出添加message和切换房间后和添加message后成列message，为了让不同的窗口也能实时更新，使用useSWR获取message数据。

做的时候脑子有点乱，最开始渲染一次，wsr获取的东西有改变后react就会自动渲染，不需要再写use effect
写setname组件

和上面的过程差不多
在App.tsx里配置路由，在两个界面里设置相互跳转，将user传输到chatroom界面设定主界面为setname
补充main.tsx
写后端文档，先建立message和room两个数据库，再主要功能为创造聊天室，删除聊天室，获取所有聊天室，在某房间添加新信息，获取某房间所有信息。其中储存功能与数据库相连接。
完善了界面，增加了保存最后一次打开的房间记录的功能

项目负责人(mentor)：@李晨潇

用 create-T3-App，给聊天室前端进阶项目写一个后端，在实现原有接口的基础上，加上登陆与鉴权。

因为前端已经写好，要做的是写后端

在schema中定义数据库，挂载到root.ts
写出关系到该数据库的后端路由
改成zod
到前端组件中引入该路由
把前端中的信息获取到后端进行操作从fetchapi改成后端路由的直接函数使用，先写了每次使用函数就进行refetch更新prop值但是另一个窗口可能不使用案件就没法更新页面，用了swr之后是自动更新prop值
同样地写message，room,user三个路由

你学到了什么方面的知识技能
- trpc的对接，前后端写法都有较大的改变，但是更清晰了
- zod
- drizzle orm
- 如何挂载以对接前后端，ctx,以及数据库的创建怎么连接
- nextjs客户端和服务端的区分，路由编写向文件结构的简化
- env文件
- publicProcedure，loginProcedure，cookie
- mutate和refetch
遇到了什么困难以及解决方案
- 用yarn更新依赖文件后导致配置互相不兼容，手忙脚乱尝试修改原有的配置文件但没有用，一直基本功能出问题。到后面全部重新做才解决问题。
- route没访问对
- 一直处于starting不compile，之前的没关干净端口被占用，重启
- 修改了schema相关的，才需要 db push
对于该项目之后发展的建议和继续优化的方向
- 用现成的react组件更美观
- 可以把主页面做一下
- 在trpc的同时加上swr（忘记了）
- 尽可能多地用服务器渲染
- 要做到不登陆就不能发消息（使用loginProcedure）登录鉴权可以做的更复杂和安全