访客留言簿/日志——允许人们添加评论或者日记，可以设置开启/关闭评论，并且可以记录下每一条目的时间。也可以做成喊话器。

项目包含：

1）、Node.js的Express框架

2）、Angular、bootstrap、JQuery.

3）、MySQL数据库

设计数据存储结构：

数据库名称：blog

表名：annoymous

字段：

name --- char

time --- datetime

content --- text

sec_id --- int32

新建Express工程

更改APP.js中的view engine为html

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

后端接口设计：

1、/data/newMessage

请求格式：{name:'xxx',content:'xxx'}，name为用户昵称，content为留言内容.

作用：将对应留言存储下来

返回：{flag:true/false}

2、/data/Message

请求格式：{page:int}

作用：返回对应页数处的留言

返回：[{name:'xxx',time:'xxx',content:'xxx'},{name:'xxx',time:'xxx',content:'xxx'},{name:'xxx',time:'xxx',content:'xxx'}](数组)

搭建后端接口：

建立新的路由文件来相应数据post请求（实际上user.js就够，在这里新建一个是用来展示node.js express如何添加新的路由文件）

app.js中注册这个文件

var dataResponser = require('./routes/Datas/index');
app.use('/data', dataResponser);

安装node.js的mysql模块

进入项目目录

SHIFT+右键->打开power shell

输入 npm install mysql --save

安装完成后引入


var mysql=require('mysql');

配置连接信息：

var connection = mysql.createConnection({host     : 'localhost',user     : ,password : ,database : 'blog'
});
connection.connect();

相应路由请求、页面，前端JS文件如下

var express = require('express');
var router = express.Router();
var mysql=require('mysql');
var connection = mysql.createConnection({host     : 'localhost',user     : 'root',password : '密码',database : 'blog'
});
connection.connect();
router.post('/asd', function(req, res, next) {console.log(req.body);console.log("get post request");res.send(req.body);
});router.post('/newMessage', function(req, res, next) {data = req.body;var date = new Date();strYear = (date.getYear()+1900).toString();strMonth = (date.getMonth()+1).toString();strdate = date.getDate().toString();strHour = date.getHours().toString();strMinute = date.getMinutes().toString();date=strYear+"-"+strMonth+"-"+strdate+" "+strHour+":"+strMinute;sql+=datevar sql = "INSERT into anonymous(name,time,content) value(\"";sql+=data.name;sql+="\",\"";sql+=date;sql+="\",\"";sql+=data.content;sql+="\")";console.log("Now time: "+date);console.log("Run SQL: "+sql);connection.query(sql,function (err,result) {res.send({flag:true});});
});
router.post('/Message', function(req, res, next) {var sql = "select name,time,content from anonymous order by sec_id  desc limit 3";connection.query(sql,function (err,result) {console.log(result);res.send({data:result});});
});module.exports = router;

var app=angular.module('DeskTop-main',[]);
app.controller('ctrl',function ($scope,$http,$window) {$http.post('/data/Message',{page:'1'}).then(function (respond) {msg = respond.data.data;console.log(msg);$scope.messages=msg;},function () {});$scope.submit= function(){if($scope.input!=undefined)json = {name:"匿名用户",content:$scope.input};elsealert("内容为空");$http.post('/data/newMessage',json).then(function (respond) {$window.location.reload();},function () {alert("failed");});}
})

<!DOCTYPE html>
<html>
<head><title>匿名留言板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/lib/bootstrap.min.css" rel="external nofollow" ><script src="/js/lib/jquery-3.3.1.min.js"></script><script src="/js/lib/bootstrap.min.js"></script><link rel="stylesheet" href="/css/lib/bootstrap.min.css"><script src="/js/lib/angular.min.js"></script><script src="/js/Desktop/Controller/DeskTop-main.js"></script><link rel="stylesheet" href="css/style.css" rel="external nofollow" ><link rel="stylesheet" href="css/Desktop/index.css" rel="external nofollow" >
</head>
<body class=" container" ng-app="DeskTop-main" ng-controller="ctrl"><div class="m-auto title text-center">留言板</div><div class="main m-auto"><div class="m-auto Messages" ng-repeat="v in messages"><div class="name text-center">{{v.name}}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{v.time}}</div><div class="content text-center">{{v.content}}</div></div><textarea class="m-auto input" ng-model="input"></textarea><div class="m-auto submit text-center" ng-click="submit()">提交</div><div class="m-auto information">2018-09-12 author:coding_jiang@outlook.com</div></div>
</body>
</html>


.container{background-color: black;
}
.main{height:1200px;width: 600px;}
.title{display: block;font-size: 48px;width: 500px;color: black;background-color: white;border-bottom-width: 5px;border-bottom-color: black;border-bottom-style: solid;
}
.input {display: block;height: 120px;width: 500px;
}
.submit{display: block;margin-top: 5px;display: block;height: 50px;font-size: 28px;width: 500px;background-color: white;color:black;border-top-width: 5px;border-top-color: black;border-top-style: solid;transition: 1s;
}
.submit:hover{display: block;margin-top: 100px;display: block;height: 50px;font-size: 28px;width: 500px;background-color: black;color:white;border-width: 5px;border-color: white;border-style: solid;cursor: pointer;transition: 1s;
}
.Messages{height:200px;width:500px;background-color: white;border-bottom-width: 5px;border-bottom-color: black;border-bottom-style: solid;
}
.name{float: left;height:30px;width:500px;font-size: 20px;border-bottom-width: 5px;border-bottom-color: black;border-bottom-style: solid;
}
.content{font-size: 20px;float: left;width:400px;display: inline-block;}

body {padding: 50px;font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}a {color: #00B7FF;
}
.information{height: 25px;text-align: center;font-size: 15px;color: white;
}