Node.js+Mongoose+socket.io搭建的Blog应用
发布于 9 年前 作者 Jocs 5620 次浏览 最后一次编辑是 8 年前 来自 分享

前端学习 本人生物科学本科毕业四年,27岁。从去年九月份开始接触网站开发,到现在利用Node.js初步搭建完成一个博客应用,不知不觉已经大半年。从最开始的Html,CSS,Javascript的学习,慢慢深入到jQuery框架,Bootstrap框架,LESS等,到今年5月份租用服务器,购买域名,搭建了自己的Wordpress博客系统。再到六月份学习Node.js。七月初开始利用这大半年学到的所有技术,开始构建Node.js博客应用。此中心酸和喜悦不可言语。 关于Blog应用 Blog应用:http://jowin88.duapp.com/ 代码在GitHub:https://github.com/Jocs/node_mongodb_blog_system 如果大家懒得注册,可以用以下账号登陆:{user:fumin@126.com ,pass:123456} **已经实现功能:**1、发布文章功能、点赞和关注文章功能、还有修改标签、修改标题、修改文章内容、添加回复、删除回复等功能。这些功能都是通过jQuery的Ajax和服务器进行通讯,把更新数据发送到服务器,服务器进行数据库修改,成功后返回更新后的数据到客户端,客户端再进行前端数据更新。 2、消息推送。当关注文章被其他Blog用户评论后,页面右上角会出现一条推送消息,主要是利用了Html的WebSocket技术,在实现上使用的是Socket.io。文章加载完成后,客户端会把登陆用户所关注的文章发送到服务器,服务器就会把客户加入到以文章的“id”命名的room中,当某篇文章被评论后,服务器就把评论的内容发送到相应的加入该room的客户端。 3、评论区域向上的小三角和显示通知的按钮。通过Ajax向服务器获取SVG,通过SVG画出来的三角。显示通知的按钮利用了CSS3的animation模块。 **将要实现功能和优化:**通过关键字搜索功能、个人主页内容、点击标签搜索具有相同标签的文章、网站SEO优化、网站压力测试、IE浏览器中的一些Bug和不兼容。 说了这么多,其实我就想问问:关于Blog应用有哪些可以优化的地方?作为前端开发的小菜鸟,我怎么进一步学习? 其实我最想问:在上海,我能够应聘前端工程师了吗?

分割线----------------------------------更新 2015-07-29---------------------------------------------------------------

通过在网上的测试,网站进行大面积优化:

1、增加表单验证功能,注册时用户名不能为空,不能够包含空格。邮箱地址必须合法,密码不能少于六个字符,密码不能为空。发表文章表单验证,标题、标签不能为空。内容不能少于4000?字符。评论不能为空。 2、优化了Schema设计,Schema中的voter和watcher field 的type为:Schema.Types.ObjectId,然后通过population,映射到对应的user document。这样就不会出现点赞或关注文章和别的用户冲突了。(ps:以前voter和watcher中存储的是登陆者姓名)。 3、Users model增加了注册时间。 4、SVG向下兼容,优雅降级。如果浏览器不支持SVG,就是用其他替代方法。

15 回复

进一步的学习,还是建议去找一份对应的工作。

应聘也要看公司啊,我们这里有不少招聘帖子的,你可以投投看顺便发现一些自己的优势和不足。

你好,我公司位于上海市宝山区长江南路地铁站,公司主要从事教育系统研发,现在正需要向你这样的技术人员,如果你愿意进一步了解请与我联系。联系电话:021-55660887-8003,18916198552.

@eagersoft 要求和薪资直接发出来,降低沟通成本

你好。。发现了首页上的一点小bug。 QQ截图20150728130548.png

@Pencil-Case 怎么出现这bug的呢?

就瞄了几眼,一点点小建议

  1. 给个demo账户方便大家登录进去看看?懒得注册。。。
  2. 加个.gitignore文件,把node modules,npm-debug.log这种过滤掉
  3. router一般会单独写个模块,这样结构会比较清晰
  4. 要有个config模块,把一些系统的参数放在一起,像app.use(session({secret: ‘keyboard cat’,…这种不能暴露出来

@yyqian 谢谢你的建议,我已经添加了一个公共账号。其次你的2、3、4条建议都挺好的,在以后的开发中我会采纳。

@yyqian 还有个问题,如果我本地的项目我既向推送到百度开放云上面又想推送到GitHub上面,怎么实现呢?

@Jocs 没用过百度开放云,可以用git的话,从github同步一份代码就行了

@Jocs 我公司位于上海市宝山区长江南路地铁站,公司主要从事教育系统研发,现在正需要向你这样的技术人员,如果你愿意进一步了解请与我联系。 岗位职责: 1.负责公司Web产品设计开发,测试及发布工作;2. 理解业务需求,并参与功能与架构机制设计;3. 独立完成应用系统模块的代码编写和单元测试; 具有规范化,标准化的代码编写习惯和良好的技术文档习惯。 任职资格: 1.2年以上NodeJS开发经验或2年开发经验;2.精通NodeJS,熟悉socket.io,express,sailsJS等框架;3.精通Linux服务器环境及常用Web Server(Apache、Nginx)的配置和使用;4.熟悉MySql等数据库应用,使用过MongoDB等NoSQL数据库;5.熟练使用AngularJS及Redis经验者优先。6.月薪10000-15000,经验丰富、能力强者可面议。 联系人:周经理 021-55660887-8003 18916198552;也可把简历发送到邮箱:zhouw@eagersoft.cn

评论区域向上的小三角 这种三角直接用css就能实现了,不需要svg来做吧

@wyHongyang 关于评论区域小三角我认为有三种实现方案: 1、通过背景图片实现。比如这个CSS3info网站:http://www.css3.info/preview/ 知乎网站的评论区域也是通过背景图片实现的:https://www.zhihu.com/ 2、其次就是通过css实现,实现方案应该是这样的:<span class=‘arrow’></span> <style> .arrow{ display: block; position: absolute; top:-10px; left:150px; width:0px; height:0px; border-style:dashed dashed solid dashed; border-color:transparent transparent #ddd transparent; border-width: 0px 10px 10px 10px; } </style> 3.第三种就是使用svg来画。当然具体选择那种方案,肯定是向下兼容。当一种方案不行的话可以使用另外一种方案替换。其实第二种方案有个不好的地方就是做出来的三角不是空心的,所以我选择了使用svg。也有可能我还不会做空心的三角。如果你有空心三角的方法,还望告诉我下,谢谢了。

@wyHongyang 在我写的Blog中,我是这样向下兼容的: //通过Ajax对span.arrow进行替换,用svg来替换span.arrow function hasSVG(){ var SVG_NS = ‘http://www.w3.org/2000/svg’, doc = document; return !!doc.createElementNS && !!doc.createElementNS(SVG_NS, ‘svg’).createSVGRect; } function translateToSvg(){ $.get(’/span_to_svg’,function(msg){ $(’.arrow’).after(msg).remove(); }); } if(hasSVG()){ translateToSvg(); }

@wyHongyang untitled1.png 我用css做出来的就是这样的,丑爆了。空心的小三角我还不知道怎么做。

回到顶部