前端开发者使用 Nuxt.js和 Node.js 开发一款 c2c 项目(属于自己的掘金)

引言

作为一个将近3年的前端开发程序员在工作期间也开发了大大小小不少项目,但是没有一个是属于自己的。于是乎在去年年初的时候就想自己一个人兼顾前后端开发一个自己的项目,想法是好的,但是实现起来有些许困难,毕竟自己之前只会前端。

因为自己不会服务端所以年初的时候放弃需要前后端交互的项目,做了一个纯前端的 web思维导图 项目(算是放弃了需要后端支持的项目🤓🤓🤓)。在这个思维导图项目落地之后,又继续添加功能继续维护(都是参照 XMind 的功能去做的,毕竟自己不是产品,没有那么多天马星空的想法),大概花了3个月的时间,这个项目才算是比较完整了,在完成后的一个月内,说白了就是对这个项目厌倦了,毕竟只有前端玩起来也是很枯燥。

于是乎,之前想做 c2c 的想法又来了,这次不再放弃了,先花了一个月的时间学了 Node.js运维相关 的技术,但是没有 UI,也没有很好的 产品思维,因为自己经常在 掘金 上看文章,想着 掘金UI 也还不错。就参考 掘金 做一套得了,反正也是自己玩玩而已。

技术选型

既然要做就做的稍微好一点,工作中的项目都是常规 Vue 单页面,这次既然是 c2c,起码得用个服务端渲染吧,要不然搜索引擎都搜索不到😎😎😎,于是前端选择了 Nuxt.js 2.0版本,服务端就用了 Node.js (对前端开发者比较友好)。

一顿操作下来 前端服务端 搭建了一个基础的壳子出来,因为自己的个人项目所以会稍微比较用心,代码什么的都想写的好一点点(这也是一年前写的了,现在再看还是有些基础的东西没做好,但是在那个时候觉得还是ok的,说明还是有进步的这一年)

具体技术栈

前端

技术 官网
nuxt.js www.nuxtjs.cn/
Vue2 v2.cn.vuejs.org/
ssr /
antd-vue 1x.antdv.com/docs/vue/in...
websocket /

后端

技术 官网
Node.js nodejs.org/en
Express www.expressjs.com.cn/
Redis redis.io/
Mysql www.mysql.com/
Nginx nginx.org
websocket /
pm2 /
Jwt jwt.io
Swagger-UI github.com/swagger-api...
log4js /

需求功能

技术栈也选了,现在就做功能了,虽然说是参考 掘金,但整个 掘金 系统多大,里面的功能太多了,靠我一个人也不可能都能实现,自己选了几个比较有用,并且不需要大数据量就能做的功能,像 课程直播话题 这些肯定是做不了的。

能做的有哪些其实一眼也能看的出来,起码最最最基本的文章得有吧。经过自己的筛选,最初版本就做以下的几个功能。

第一个版本就做这么多了,再多了也做不了,毕竟还要时间。

项目部署

  • 腾讯云服务器
  • pm2
  • noderedismysqlnginx 环境配置

在断断续续花了一个多月做了这么些功能后就上线了,首次上线还是比较激动的,毕竟是自己 从0到1 的,就像是自己的亲儿子。

不过,就算是亲儿子就这么点东西看来看去也会看厌倦的,就想着一直维护好了,有空的话就增加点新功能,也每天在 掘金 上面逛,看到有什么好的功能直接抄过来得了,哈哈。

所以在后面的大半年就慢慢迭代了一下这些功能。

  • 文章分类、联合搜索
  • 近期热点展示
  • 文章评论支持图片
  • 微信扫码登录
  • 邮箱验证码登录
  • 文章创建 主题选择、代码块高亮主题选择
  • 评论、点赞、关注 消息实时推送

有些小功能也就不说了,看着不多,其实做起来还是得花一点时间的,途中遇到的有些问题感觉单靠 Node.js 无法解决,于是想到用 Python 处理,然后在 Node.js 中来调用 Python 的方法,没想到效果还真不错,至少能解决问题。

还有就是一开始说就想做的好一点,所以有些主要功能细节的地方能做好就做好,可也由于时间的关系还有有一些不足的,不过对自己来说还是比较满意的,自己迭代的想法也会越来越多,也作为自己学习的动力吧,这个项目已经快一年了,运行的还算比较稳定。皇天不负有心人,现在在搜索引擎上输入 gimishare 也能搜索到项目了,服务端渲染 还是有用的。

近期想法及实现

最近还在做一个 私聊 的功能,因为 私聊 涉及到的前端交互逻辑还比较多,所以觉得还是比较有趣的,打算在元旦之后会上线这个功能(目前已经开发了80%)

在基本 私聊 功能上线之后,再对 私聊 功能进行优化以及迭代,比如 @用户屏蔽用户消息免打扰消息单方用户删除 等等,可能这些就会比较迟了,哈哈~~~

感想

最大的感想就是自己的项目一旦成型后,就真的会像自己的亲身儿子似得,想要一直去维护它,让它变得更好,更加全面,不知道你们是不是这样的想法。

还有就是学无止境,一直学,一直有。

线上地址

gimi.zdxblog.cn/

最后

感谢大家的阅读,谢谢!

相关推荐
花花鱼1 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09334 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135826 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning26 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人36 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民2 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf