前端开发者使用 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/

最后

感谢大家的阅读,谢谢!

相关推荐
newxtc34 分钟前
【爱给网-注册安全分析报告-无验证方式导致安全隐患】
前端·chrome·windows·安全·媒体
dream_ready2 小时前
linux安装nginx+前端部署vue项目(实际测试react项目也可以)
前端·javascript·vue.js·nginx·react·html5
编写美好前程2 小时前
ruoyi-vue若依前端是如何防止接口重复请求
前端·javascript·vue.js
flytam2 小时前
ES5 在 Web 上的现状
前端·javascript
喵喵酱仔__2 小时前
阻止冒泡事件
前端·javascript·vue.js
GISer_Jing2 小时前
前端面试CSS常见题目
前端·css·面试
八了个戒2 小时前
【TypeScript入坑】什么是TypeScript?
开发语言·前端·javascript·面试·typescript
不悔哥2 小时前
vue 案例使用
前端·javascript·vue.js
anyup_前端梦工厂3 小时前
Vuex 入门与实战
前端·javascript·vue.js
你挚爱的强哥3 小时前
【sgCreateCallAPIFunctionParam】自定义小工具:敏捷开发→调用接口方法参数生成工具
前端·javascript·vue.js