留言板

留言板DOME

1，需求分析

功能：

 1）显示留言
 2）发表留言

技术：

Express（创建一台服务器，载入静态页面，接收前端传递的数据，存储数据）
EJS
数据存储（目前存储在文件中）
HTML+CSS

2，准备工作

（1）准备静态页面

静态页面准备OK。

（2）开始写后端（准备服务器）

创建一个文件夹，当作项目目录：

初始化项目，生成配置文件：

安装依赖：

使用IDE打开项目：

开始创建服务器：

通过nodemon启动服务器：

通过浏览器测试之，如下：

3，载入静态资源

 如果使用原生的方式载入非常麻烦，因为你需要你所有的资源，读出来，然后给浏览器响应回去。代码量非常大，由于我们是前端开发工程师，node原生写法，不需要我们掌握，直接上express中截入静态资源 ，使用express载入静态资源，非常简单，一行代码搞定。

我们先把静态资源放到项目的public目录下面，引时这个静态资源，不包含html文件，但是Html文件本质也是静态资源，只不过，我们需要把html文件放到views下面的。

先把静态资源放到public目录下面的，操作如下：

写代码载入上面的静态资源，如下：

使用浏览器访问你的静态资源，如下：

到此，我们的静态资源就载入OK了。

4，实现发表留言

用户在前端页面中填写，留言内容，你要知道，留言内容是在前端，

在提交留言之前，你需要确保，你的form中有name字段，如果没有，是提交不成的，代码如下：

先在浏览器端，看一下，这个请求有没有发出去，如下：

详情如下：

此时，服务器，找不到资源就报404。

接着要实现这个publish的路由，如下：

如何获取浏览器端传递过来的数据呢？

答：通过body-parser来获取。

我们去找一个模块怎么用？去哪找？

答：有两个地方官方一点，npm和github。目前来说，就去Npm上找。

https://www.npmjs.com/ 搜索如下：

点进去：

经过分析，写代码如下：

测试之，如下 ：

数据得到，然后，要把数据存储到文件中。

但是存储之前，我们思考，一个留言一般都是有一个时间的，这个时候，不应该让用户自己去填写，如何添加一个时间呢？

 答：只需要给留言这个对象上加上一个time属性。

实现如下：

接着才是想办法，把数据存储到文件中，也就是对文件操作，要使用到系统模块，叫fs模块。如下：

数据存储到什么格式的文件中呢？

答：.txt可以   还有更好的，叫.json文件    由于我们没有学习Json，你给它当作JS对象。

尝试写了如下代码：

测试之，如下：

报错了。分析如下：

如何把一个JS对象转成字符串：

修改代码如下：

修改后，测试如下：

看一下，有没有这个文件，并且文件中没有数据，如下：

再去试一把，如下：

再看一下data.json，如下：

重新思考代码如何写了：

测试如下：

如果外面不包一个数组，不符合JSON文件的规范。

重新编写代码如下：

测试OK，到此，发表留言就OK了。

5，实现显示留言

然后，要实现显示留言。

前面已经安装过了ejs，它是一个第三方的模块，使用的话，直接去npm上搜索如何使用。

点进去，发现并没有关于在express中如何实现ejs，此时，你可以去github上看一下，如果还没有，你去百度搜索别的博客，如下：

实现代码中下：

先不绑定数据，直接渲染一个模板如下：

到目前为止，我们的项目目录结构如下：

尝试访问之，如下：

我们应该这样访问：

到目前为止，仅仅是渲染了一个没有数据的模板，或者说模板中的数据还是假数据，如下：

把假数据换成真实的数据，在服务器端访问/时，得到数据，如下：

在模板中，完成数据的替换，如下：

测试如下：

显示留言也OK了，so easy~

再在再测试之，如下：

优化代码如下：

测试如下：