慢时光

前言：
从自己决定辞职，到报名饥人谷进行学习，两个月了。在这两个月里，心无旁骛，专注于前端的学习，看饥人谷任务班的教学视频，动手敲代码，调试，看文档，查资料，问老师和同学，完成任务班的任务。两个月过去，我也学完了入门，进阶，高级模块，了解前端工作模式，学习一些前端工具，比如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：最后放一张一直陪我学习的小伙伴。

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

提醒我休息