node.js实现在线留言板

在线留言板

线上预览地址
Github
$npm install 安装依赖
$npm run start 启动项目

前期构想

网站框架采用成熟的快速搭建的express,它是node.js的一个快速搭建网站的框架，后端数据采用sequelize存储,能够方便快速的搭建一个后端数据存储，github登录采用passport登录验证，网站前端，也就是页面，整体采用瀑布流布局，采用jQuery编码,less预加载，组件化思想，将每个功能组件分开，然后采用面向对象编程，用webpack进行打包，ajax进行数据请求。
在前端工作中，我认为最核心的思想，就是组件化。将每个功能分开，模块化，工具化，需要时在通过require进行调用，前端工作将变成组装模块，前端工作将大大减少，从而有更大的时间和精力进行开发，新功能的普及速度也会大大提高。

step1:

1.新建文件夹,并进入

2. $ npm init -y 初始化项目
3. $ npm install express --save 把express安装到当前目录下
4. $ npm install express-generator -g 安装 express应用生成器
5. $ expres . -f -e创建网页模板以及相关文件
6. $ npm install 安装相关依赖包

到此,一个简单的网站的框架就完成了,通过 node ./bin/www来启动网站.浏览器打开http://loaclhost:3000就看到了网页,可通过package.json设置"start":"node ./bin/www",就可以直接输入 npm run start来启动了

换端口的方法是 PORT=4000 node bin/www

初始化网站框架

Step2

网站的模板引擎采用ejs，主要语法和HTML大致，通过<% %>将JavaScript语言包裹就可以运行。我的主要思路是先写好html页面，然后将不变的内容复制 进去模板引擎中，需要修改的地方再加入JavaScript修改。

模板引擎和HTML页面

模板引擎

完成了前期的准备工作,然后就是页面的互动，note的增删改查，瀑布流布局，登录注销，弹窗提示，这对于专业前端的我（手动逻辑）来说，小case啦，啪啪啪搞定。
]
orient/strip%7CimageView2/2/w/1240)

step3

到这一步，前端的工作已经完成80%，后面只需要进行调试和增加权限设置，主要进行后端的工作。
网站的入口是bin目录下www文件，就是监听loaclhost：3000端口，一发现请求就转入app.js文件，app.js才是整个网站的真正入口。

入口文件

内容很多，引入各种模块，进行各种初始化设置。网站入口就是上图所示，当接收到'/'请求时，转入index文件，就是在routes文件下的index.js（app.js中设置index的位置）。
在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，网站正式开启。