慢时光

蔡晨辉蔡晨辉

原地址:简书

前言:
从自己决定辞职,到报名饥人谷进行学习,两个月了。在这两个月里,心无旁骛,专注于前端的学习,看饥人谷任务班的教学视频,动手敲代码,调试,看文档,查资料,问老师和同学,完成任务班的任务。两个月过去,我也学完了入门,进阶,高级模块,了解前端工作模式,学习一些前端工具,比如webpack,gulp和requirejs等等,做出自己的第一个网站,算是对自己的学习有一个阶段性的总结,顺便了解后端的工作流程。
下一步准备深入学习前端框架,react,vue,进一步提高自己。

网站简介

慢时光----我的第一个网站

我建的第一个网站,类似学生时代学校外面奶茶店的留言墙,使用github登录之后,可以在上面留言。


慢时光


点击左边的“添加按钮”,会出现一个新的留言条,输内容后,留言条就会在按照瀑布流形式排布。双击钉子删除,删除后瀑布流重新排布。
点击留言文本区,可以修改留言内容。在导航条右边是用户信息,可以登录和注销。游客只有访问的权限,没有修改权限。
以上就是网站的全部功能。

网站建设之思想

网站功能简单,相应的逻辑也很简单,主要是用户登录后留言条信息的存储,查询和修改,用户权限也可以通过在信息中加入用户ID实现。用户进行相应操作时,会先进行相应的判断,用户ID符合才可以进行相应操作。如果匹配不上,就会弹出“您没有权限”的提醒。

在网站建设开始之前,前后端默认分离,前端负责页面的互动和效果展示,后端负责数据处理,前后端通过请求进行数据交流,因此要先约定好请求的端口,发送数据类型及数据的含义,很重要!!!

网站建设之工具

建设这个网站整体框架采有express搭建,后端数据采用sequelize,github登录采用passport,这是后端。然后,网站前端,也就是页面,整体采用瀑布流布局,采用jQuery编码,组件化思想,将每个功能组件分开,然后采用面向对象编程,用webpack进行打包,ajax进行数据请求。

在前端工作中,我认为最核心的思想,就是组件化。将每个功能分开,模块化,工具化,需要时在通过require进行调用,前端工作将变成组装模块,前端工作将大大减少,从而有更大的时间和精力进行开发,新功能的普及速度也会大大提高。

网站建设之实战

Step1

新建项目文件夹,初始化:

$npm instal express --save;//安装express,并生成依赖

$ npm install express-generator -g;//安装express应用生成器

$ express myapp;//当前工作目录下创建一个命名为 myapp 的应用

$ cd myapp ;//进入myapp文件夹

$ npm install;//安装所以依赖



初始化网站框架


到这一步,一个网站的框架就已经完成啦,通过$ node ./bin/www就可以本地开启服务器,浏览器打开http://loaclhost:3000就看到了网页。(通过package.json设置命令“start”为“ node ./bin/www”,就可以直接通过npm start开启)

Step2

这个网站的模板引擎采用ejs,主要语法和HTML一样,不过也支持JavaScript语言,通过<% %>将JavaScript语言包裹就可以运行。我的主要思路是先写好html页面(可以用浏览器打开,便于修改),然后将不变的内容复制 进去模板引擎中,需要修改的地方再加入JavaScript修改。


模板引擎和HTML页面


模板引擎中修改的部分


然后就是页面的互动,note的增删改查,瀑布流布局,登录注销,弹窗提示,这对于专业前端的我(手动逻辑)来说,小case啦,啪啪啪搞定。



JavaScript代码文件


至此,我们的网站主页就完成啦。

坑点:

1.public是网站的静态目录,在app.js中设置,因此,模板引擎中引用只需从public文件下开始。

2.webpack.config.js设置文件中,入口和出口采用“path”模块,定位文件所在目录,不然gitbash在其他目录下打开webpack会报错。


webpack设置


3.登录按钮采用a标签,而不是ajax发送请求,因为oauth2.0协议需要页面跳转进行登录,ajax发送请求不会进行页面的刷新,也就是说引起浏览器报错,因为不同源。

Step3

到这一步,前端的工作已经完成80%,后面只需要进行调试和增加权限设置,主要进行后端的工作。

网站的入口是bin目录下www文件,就是监听loaclhost:3000端口,一发现请求就转入app.js文件,app.js才是整个网站的真正入口。


app.js---网站真正入口


内容很多,引入各种模块,进行各种初始化设置。网站入口就是上图所示,当接收到'/'请求时,转入index文件,就是在routes文件下的index.js(app.js中设置idnex的位置)。
在index.js中,我们就可以开始我们的设置啦。登录请求,删除请求,增加请求等等一系列请求,针对不同的请求,进行不同的数据反馈。


index.js---网站核心逻辑


到这里,前后端已经连接起来,可以运行啦!
不对,还是少了些神马,忘记了,还没有建立数据库,用户的信息没有报保存,这才是真正的后端呀。
通过sequelize模块,建立数据库,还需要安装sqlite3模块哦。建立一个note表,存储用户数据,只需要建立text和username行,数据自带的有ID和createAt,updateAt。



note.js---后端的后端:数据库


index.js通过引入note模块,增删改查数据库里的数据,从而实现用户数据的保存和删除。

到这一步,网站的前后端完成,网站算是完成啦!!

坑点:

因为网站比较简单,逻辑清晰,不存在什么其他的坑点,唯一的就是登录了。引入passport模块和passport-github模块,申请github的oauth app,然后再设置id和密码,特别主要callbackURL不能错,index.js设置和github里面必须一致才可以登录验证。

再说一句,前后端端口必须先约定好,最好是记录下来,不然就很容易变坑。

Step4

网站已经全部建成,最后一步就是上线啦,我使用的是饥人谷的服务器,域名申请的是阿里的。

到这一步了,只需要把文件上传服务器,然后输入npm start就可以打开啦。但是,但是,怎么上传呀?这远程服务器又不能像自己电脑一样,原谅我,我就是这样无奈的在这一步卡住了。ftp的client端上传,主机没有设置,scp远程拷贝,原谅一下。最后,受谷里同学提醒,先上传github,然后从github上clone下来,正好还可以复习下github操作。一番操作猛如虎,git add ., git commit -ma “add files”, git push origin master 上传成功。然后主机登录,git clone,添加秘钥,再git clone 完成啦。

npm start,网站正式开启。


网站主页---未登录


最后一个坑点,其实也算不上坑点,就是长期开启服务器,使用pm2命令,让nodejs 应用命令行持久化,关闭gitbash也可以访问网站啦,这,才是真正的完成。

网站建设之感受

建立这个网站,前前后后差不多花了一个星期时间,查看每个模块的文档,一步步调试,到最后上线,看着心里还是挺自豪的。在此要特别感谢下饥人谷的老师们和同学,提出的问题都可以耐心回答,少走了很多弯路。

老实说,这个网站不够漂亮,还存在很多问题,后续我会继续对它进行改进,在做网站时就有的一些想法,由于时间关系而没有加入进去,后期通过学习,慢慢添加进来。

Idea1:做一个网站进入的动画效果,进入时间隧道,回到初中学校胖的奶茶店里,最后聚焦在这片充满回忆的留言墙上。思路是添加一段视频,进入时展示,然后就删除。
Idea2:留言墙背景换成墙的图片,留言条样式也换成纸条形式,通过css实现。
Idea3:留言条不拘泥于留言,应该还可以是照片。
Idea4:删除和添加增加动画效果,更加温馨,弹窗也更加人性化。
Idea5:增加查询功能,可以找到自己想看的人的留言,也给用户添加权限,设置仅自己可见和他人可见;
Idea5:留言条下面增加点赞,随着用户增多,留言墙第一页只展示点赞最多的留言。
Idea6:增加qq登录和微信登录,毕竟国人专属。
ps:最后放一张一直陪我学习的小伙伴。


它就这样默默的监督我学习

提醒我休息

文章被以下专栏收录
2 条评论
推荐阅读