前端小白，内容如有不足，欢迎指出！

本次项目结合的知识体系有：

1.前端三驾马车（CSS，HTML，JavaScript）

2.bootstrap

3.node和express框架，fetch等应用

一、项目准备工作

搭建以及安装项目依赖和框架：

创建工程文件：这里我们起名为：message

进入项目所在的路径下，在命令行输入：npm init注册项目依赖

完成后如图中显示

1.express

这里我们用淘宝团队提供的镜像：cnpm install express -S(在命令行输入）

express是本次项目的核心。之后的一些中间件和框架都会安装到其包中。

安装完成后看到项目中多出一个node_modules的文件夹，里面包含了很多需要和不需要的文件，不用管它

2.mysql

本次项目结合mysql，储存留言的内容和用户数据。在命令行输入cnpm i mysql进行模块安装。

3.body-parser

bodyparser作为中间件，能解析post请求体中的内容，我们也安装进项目里。cnpm i body-parser

二、搭建项目主要框架

1.html、css部分

为了简介华丽，我们直接拉取bootstrap上的全局css属性和html代码。

这里我们选取全局属性中的表格部分。

拉取内容

在工程文件中，新建一个main.html脚本。放入table标签，并设置一些内容；

当然别忘了，在头部要引用bootstrap的<link>标签，当然也可以安装依赖，这里我们选择后者。

命令行输入cnpm i bootstrap后，在头部引入内容即可：

<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

头部效果

接下来，引入一些按钮，作为发表留言的按键。和点击按钮之后的留言输入框，姓名框等。

我的布局如图：

布局