一、前期思想准备
1、我需要什么知识储备?
就个人而言,因为也是各种百度,各种google,各种看书,然后一起大杂揉,所以,可能所需要的知识,可能不会是最新潮的,毕竟网上很多教程和内容都是3年前的。但是大体所需的知识应该八九不离十。
ES6:阮一峰的ES6入门,这个很重要,里面的异步思想及其重要,可能我们之前在学前端的时候,除了Ajax异步请求外,很少在其他地方使用到异步操作,因此异步编程思想被弱化,即使对回调函数这样的知识点,理解得很透彻,但在后台编写javascript的时候,你仍然会因为一些异步操作让你犯难。因此,Generator、promise、async要好好去理解,了解到他们各自的特色和基本的异步操作思想。其次,module这个模块化思想很重要,我姑且把他理解为拼接积木一样的想法,一个一个的小积木拼接成了整个作品的头、手、脚、身体,头、手、脚、身体又构成了整个积木作品,这里的一个一个小积木或是头、手、脚、身体,都可以理解为一个模块(仅个人观点,大神勿喷)。
Node:有了ES6的语法基础和一些基本思想,那么Node便诞生了,在以前,我们跟后台交流的时候,张口一个接口闭口一个接口,那么Node作为后台,他的接口怎么去给制造?网上各种学习,发现了一个专有名词,叫做路由,我把他理解为一个中转站,前后端需要的纽带,但为了迎合以前的思维方式,我便私自把他理解为接口,前端调用该接口(即路由)进行交互。知道了node,肯定少不了npm这样的管理包工具,这个很重要,我之前一直不是很懂这个npm,现在或许也不是很懂,但是至少知道了package.json的重要性和必要性,他能作为你的项目依赖,之前ES6理解了模块的概念,那么npm便是管理node自带核心模块的工具,package.json便是告诉你有什么安装依赖项,具体npm使用自己百度。有了npm这种管理包工具,ejs这样的模块引擎也浮出了水面(现在又听说了更高级的模块引擎,underscore.js 以及 backbone.js,我也不知道是什么,不过可以去了解一下,毕竟我学习的时候,教程都很古老,且自己暂时看官方文档有点吃力)。总之,一个项目需要许多node的模块,具体哪些有什么作用,需要些什么,自己在学习过程中,一边百度一边进步吧。
mongodb:由于大一大二纯娱乐过去,数据库又对我而言是一个新的挑战,百度告诉我,node一般搭配mongodb使用,所以自己去了解mongodb吧,然后顺带npm提供了一个mongoose的模块,方便我们对数据进行增删改查,自己可以去百度学习。
bootstrap:在此之前,CSS和HTML都是自己纯手工,不仅页面难看,而且代码量具大,这个时候bootstrap和Semantic出现在了我面前,反正都是当作便利的一种UI框架来使用,由于好像公司要求bootstrap是加分项,前辈们又说bootstrap是主流框架,所以我采用的是bootstrap来设计自己的页面,没有美工的天赋没有关系,网上这么多网页模板,你看哪个顺眼就copy哪个的设计样式,再加点自己的想法和元素进去即可。
二、功能结构构思
有了思想准备,这个时候,鲁莽的我们可能忽略了一个很重要的步骤,功能构思啊!!!没有这一步,直接上代码,后期的代价是,我想加点新东西进去,发现不合适,代码要通篇幅地去更改,很痛苦。由于我之前一直以为搭个人博客,要像博客园这样,有登陆注册功能,所以我写的博客貌似不是个人博客,不过,都大同小异,以下是我自己大致列出的一些功能,具体还有很多可以琢磨的地方,所以感觉面向对象的思想还是很重要,需要仔细去揣摩各个方法的作用,以及相互调用。我来用图示的方法大致说出自己的一个写代码的思路吧。
最后,自己设计数据库表的时候一定要谨慎谨慎再谨慎,因为这个跟你的功能息息相关,moogodb没有主外键的概念,因此这一点也要注意。我们设计查询的时候,要保证数据的唯一性。
三、开始撸码
这里我就写一下自己撸码的思路和碰到的一些很头痛的问题
1、页面设计:首当其冲肯定是先设计布局好自己的页面,这个需要自己精心根据自己的功能和审美去打磨。
2、登陆注册:登陆注册post请求便碰到了一个难题,node解析json格式的时候,没有准确解析出正确的json格式,原因是前端我们要更改一下传送数据的默认格式xhr.setRequestHeader("Content-Type", "application/json"),接下来便涉及到了一个安全性的问题,我们提交数据的时候不可能把用户密码暴露在控制台啊,因此,sha1()和md5()加密算法便向我们走来,前端传送过去的时候加密保存,验证的时候也加密验证,保证客户的密码安全(我只考虑到比较基础的问题,可能还有很多问题,毕竟是前端的小白来初来乍到后台,所以很多安全问题没有考虑周到,大神勿喷)。
3、发表文章:细心的我发现,如果我发表文章的时候有一些javascript的特殊字符,会报错的,于是转义和反转义字符串的概念深入我心。
4、显示文章:我们发布文章了之后,要显示出来,promise等关键词便让我扎心了很久,单线程的JS异步编程思想很重要,有时候需要解决异步编程带来的问题更重要!只有自己亲身体会了才知道那种痛苦。其次用户登陆状态可以编辑、删除自己发布的文章,且不可以对自己的文章进行点赞、反对。说起点赞反对的功能,不得不多说一句,这个问题有点艰深,因为细心的我们发现QQ点赞的功能,一个ID只能点赞同一篇文章一次,且反复刷新页面也不能重复点赞,但是,我思考要实现这样的效果,只能再建立一张表,匹配一个用户对应的某一篇非自己的文章,添加一个字段是否点赞,但是问了一下后台的同学,认为这个表的意义不大,因此,没必要再去新建一张表达到这样的效果,所以我只能实现当前页面只能对一篇文章点赞,如果刷新页面,则相当于重新加载JS等文件,依然可以继续点赞。这些功能自己要理清逻辑顺序,才能很轻松地达到互相调用,不然相互影响,也会让你头痛。编程逻辑一定要清晰。
5、发布评论:同理发布文章的一些问题外,登录状态下,才可发布评论
6、删除评论:同理,也需要登录状态下,该文章的主人拥有删除评论的功能。
7、我的文章:这里是显示个人发表的文章,以分类的形式显示出来,前端现实界面由于要显示你发表的文章数量,涉及到要多次查询然后再将每个分类文章的数量返回给前端,所以promise要嵌套许多层,当时想了好久。
8、模糊搜索:利用oninput事件,实现这个一功能,匹配的是文章标题。然后便可以搜索出所有匹配的文章。
9、日历:一个插件,这个感觉是最简单的东西,当然,自己也要对HTML和CSS很敏感才能调试出合适的尺寸大小。
10、分页:这次没有采用瀑布流式加载博客所有内容,在我的博客随即里面,自己曾经也做过瀑布流式的加载,这次分页是采取的前端分页,所以还是相对比较简单暴力。
以上我是根据功能记录了一下可能会遇到的问题,下面我根据自己经验之谈,来说一下node搭建博客可能会遇到的问题。
1、前后端交互时,后台获取你前端传来的数据时,要用到body-parser这个中间件,才能获得前端穿来的JSON数据,同样,前端要xhr.setRequestHeader("Content-Type", "application/json")改变默认传输数据的格式。
2、我们习惯了html格式的文本格式,所以采用ejs引擎模板的话,要设置.html格式读取文件,不然是不行的。
3、moogoose模块,定义保存数据的格式的时候(即:var schema = new mongoose.Schema({..............})),同一张表不能重复定义,不然会报错,我们需要引用require来多次调用它
4、每次登陆的时候,我们设置一个全局变量user来保存设置cookie,这样可以实现记住账号和密码的功能,加密算法,sha1()是不可逆的哟
5、文章的我我是根据文章发表时间(精确到秒)+用户名(注册时不可重复)进行查找,同理评论也是根据这两个因素再外加一个评论时间进行查找,以便达到唯一性。
6、最后,就是使用腾讯云服务器的时候,我们安装node环境的系统时,最后使用webstorm上传到服务器时,路径一定要选择/boot路径上传,因为我也不是很懂会腾讯云服务器,但是通过各种报错,我知道了,他默认是从/boot路径下去读取文件,如果你知道怎么在腾讯云服务器上像自己的windows系统那样通过cd C:/boot 那样去定位到某个指定文件夹位置的话,希望留下你的方法,我也想学习一下。
最后,如果有什么问题,留言一起交流交流。github源码:https://github.com/Shmily-HJT/MyProject/tree/master/MyBlog