app.js
//导入express框架,并用变量express保存该框架
const express = require('express')
//创建express服务器
const app = express() /tp.createServer()
//导入express-art-template模板引擎
const express_art_template = require('express-art-template')
const path = require('path')
const mysql = require('mysql')
const Pool = require('mysqlb/Pool')
//指定express使用的模板引擎是express-art-template
app.engine('html',express_art_template)
//指定网页和模板文件的存放位置
//app.set('views', './pages)
app.set('views',path.join(__dirname,'pages'))
//使用express内置的static中间件函数
//实现对各种静态资源文件请求的处理
app.use('/public', express.static('.atic'))
//启动express服务器
app.listen(3000, () => {
console.log('express服务器启动成功!');
})
//创建数据库连接池,然后将连接池保存到pool中
mysql.createPool({
host:'localhost',
user: 'root',
password: 'root',
database: 'gogroject'
})
let sql
let mydata
//编写路由程序
app.get('/',(req ,res) =>{
console.log('浏览器向我的根路劲发送了一个请求')
Pool.getConnection((err,conn) =>{
if(err){
return console.log('数据库查询失败!')
}
console.log('查询到的留言信息是')
console.log(results)
mydata = {
title: '留言列表',
msgs: results
}
})
//向浏览器发送字符串形成的响应信息
//res.send('<h1>首页</h1')
//向浏览器发送网页(也可以将模板转换为网页之后再发送给浏览器)
res.render('index.html',mydata)
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本</title>
<link rel="stylesheet" href="../public/bootstrap/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header" style="border-bottom: none;">
<h1>留言本<small>谢谢你的留言</small></h1>
<a class="btn btn-success" href="/post">发表留言</a>
</div>
</div>
<div class="comments container">
<table class="table">
<tr><th>编号</th><th>用户</th><th>消息</th><th>时间</th><th></th></tr>
</table>
</div>
</body>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言页</title>
<link rel="stylesheet" href="/public/bootstrap/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1><a href="/">留言</a> <small>发表评论</small></h1>
</div>
</div>
<div class="comments container">
<form action="/pinglun" method="post">
<div class="form-group">
<label for="input_name">你的大名</label>
<!--姓名输入框-->
<input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="请写入你的姓名">
</div>
<div class="form-group">
<label for="textarea_message">留言内容</label>
<textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="100"></textarea>
</div>
<button type="submit" class="btn btn-default">发表</button>
</form>
</div>
</body>
</html>