搭建博客初衷
博主近期在学习React ,暑假时学习了React16,并花了一周写了一个练习项目。由于上手的时间比较短,且已经两个月没看了,对React的知识已经遗忘的差不多了 ,且React主流已经是18版本了,多了一些新特性需要去了解,自然需要一个demo实践下React18了 
。
加上近期博主有计划性的学习下Node,并构思一个基于Node+React前后端分离的项目,于是产生了搭建个人博客的想法。
之前博主的文章,生活感悟记录在简书平台,学习笔记记录在CSDN,两类的文章分别在不同的平台记录,自然需要一个专用的网站能够同时记录生活感悟与学习笔记。
搭建前准备
技术选型
使用的技术比较明确,前端使用React18+antd+router_v6+redux+Ts,于是博主花了一周的时间复习了下React,并实践了React18的一些新特性。服务端则是使用Node+express+mysql,在学校花了一周多的时间看了看文档并敲了些demo,达到能够为个人博客提供一些基本的接口,自然是没问题了。
服务器+域名购买
博主这里使用的是阿里云2核4G轻量应用服务器,由于域名需要十多天的审核备案,开发前需提前进行备案。
项目部署
前期使用的是XShell,用起来比较麻烦,后面使用的是宝塔
整体开发思路
数据库简单设计—>服务端基本接口（1周）—>前台（1周）—>后台（1周）—>部署测试（1周）,也就是差不多一个月的时间搞定。
博客v1.0上线
数据库
作为第一版博客,数据库建表就本着简单的原则建了三张表分别是用户表,分类表,文章表。
开始本地数据库使用的是SQlite,后使用mysql
服务端
用了近两周的时间学习了Node+Express,并写了大大小小15个接口（写接口用时一周左右,上传与条件查询的接口相对麻烦些）,本地测试没问题后开始着手于前台开发
完成接口如下
- 登录接口
- 分类增删改查
- 博客表增删改查
- 博客表查询分页接口
- 上传接口
- 加入token验证接口
前端（前台+后台）
开始觉得整个项目开发会在服务端上投入大部分的时间,不过最后写下来后,发现花在前端上的比重较重一些,一个前台,一个后台（熟悉使用React开发后,大部分时间花在构思布局跟调一些基本样式上面）这里回顾下前台的开发流程：
- 基于React+ts+antd+Eslint初始化项目,代码格式化仅在编辑器进行了配置,并保存了常用的代码片段便于后续使用
- 在前台页面上的多端适配上,使用了Ant Design自带的layout组件+媒体查询的方式进行布局
- 比较React18与React16,使用的路由跟Redux的一些常用API都有了些变化,但整体变化不大,在路由上进行了简单设计,因为使用到了Redux,并对其进行封装,开始进行了一个简单的模块化封装,自己的小项目够用就可以,使用后总是感觉,模块分的并不是很清晰,后续重新梳理了下codewhy老师的Redux封装,并使用。
- Axios封装就自由方便些,因为前后端都是自己写的,对于HTTP返回的状态码可自定义返回的内容,对于一些请求拦截在前端上作出简单的处理提示。
在熟悉React开发流程后,很快便把前台与后台的页面写完了,并在线上服务器测试了所有接口
前台完成
- 登录页
- 展示页面（部分样式未调整）
- 详情页
后台完成
- 文章管理
- 分类管理
- 添加修改文章页面
- 用户管理页面
(3条消息) React18开发中问题记录(持续更新)_一缕阳光@的博客-CSDN博客_routeobject ts
项目展示
后台展示
前台展示（PC+移动,1.0版本仅后台对接口测试后展示,前台接口测试未展示）
博客迁移至typecho
博主开发个人博客已经一个月了,所有功能基本上完善,开发期间也会受到大大小小的事情影响,但总算是完成了自己的个人博客项目,收获颇多,也是对自己近期的学习进行一个总结性的产出。
临近假期博主因为要处理一些事情的原因,投入时间颇多,并计划假期中跟小伙伴们一起准备面试的内容,所以个人博客项目在后期美化与维护上就不在投入时间了,也就停掉了当下的任务。
在后来决定使用博客框架对自己的本博文进行托管,于是使用了现在的typecho,后续博主会将博文陆续迁移至typecho中,且博客不会停止更新。
1 条评论
表评论6397