访客留言簿/日志——允许人们添加评论或者日记，可以设置开启/关闭评论，并且可以记录下每一条目的时间。也可以做成喊话器。
将它放在http://www.codingjiang.com.cn/desktop欢迎大家来玩哦~ 持续更新中
项目包含：
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+=date
var 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};
else
alert("内容为空");
$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}}       {{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:[email protected]</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;
}