node.js留言本项目开发

最新推荐文章于 2024-07-05 16:35:25 发布

X-712

最新推荐文章于 2024-07-05 16:35:25 发布

阅读量83

点赞数 2

文章标签： node.js

本文链接：https://blog.csdn.net/qq_63532615/article/details/139356757

版权

app.js


// 导入express框架，并用变量express保存该框架
const express = require('express')
// 导入express-art-template模板引擎
const express_art_template = require('express-art-template')
const path = require('path')
const mysql = require('mysql')
// 为了能够定义过滤器，需要导入art-template
const art_template = require('art-template')
// 导入在myfilters.js文件中定义的过滤器函数dateFormat
const myfilters = require('./myfilters.js')

// 创建express服务器
const app = express() // http.createServer()

// 指定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('./static'))

// 启动express服务器
app.listen(3000, () => {
    console.log('express服务器启动成功！')
})

// 创建数据库连接池，然后将该连接池保存到pool变量中
const pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'goproject'
})

// 定义过滤器datetimeFormat,它其实就是定义在myfilters.js文件中的dateFormat函数
art_template.defaults.imports.datetimeFormat = myfilters.dateFormat

let sql
let mydata
// 编写路由程序
app.get('/', (req, res) => {
    console.log('浏览器向我的根路径发送了一个请求')
    pool.getConnection((err, conn) => {
        if(err) {
            return console.log('数据库连接获取失败！')
        }
        sql = 'select * from messages'
        conn.query(sql, (err, results) => {
            // 用完连接后，向连接池归还连接
            conn.release()
            if(err) {
                return console.log('数据库查询失败！')
            }
            console.log('查询到的留言信息是')
            console.log(results)
            mydata = {
                title: '留言列表',
                msgs: results
            }
            // 向浏览器发送字符串形式的响应信息
            // res.send('<h1>首页</h1>')
            // 向浏览器发送网页(也可以将模板转换为网页之后再发送给浏览器)
            res.render('index.html',mydata)
            res.render('index.html', mydata)
        })
    })
})

//处理用户单击发表评论按钮
app.get('/post', (req, res) => {
    res.render('post.html')
})

//处理用户提交的留言信息
app.post('/pinglun',(req,res) => {
    console.log('发表留言的用户姓名' + req.body.username)
    console.log('发表留言的内容' + req.body.message)
})
//将表单数据保存到数据库的messages数据表中
pool.getConnection((err, conn) => {
    if(err){
        return console.log('数据库链接获取失败')
    }
    //没有错误
    sql = "insert into messages(id, name, messages, datatime) values(null,?, ?, ?)"
    params =[req.body.username, req.body.message, moment().format('YYYY-MM-DD HH:m:ss')]
    conn.query(sql,params,(err) => {
        if(err) {
            return console.log('留言发表失败')
        }
        //成功
        //redirect表示让浏览器跳转到指定的路由路径，显示该路径对应的页面效果
        // res.redirect('/)
        res.send('<script> alert("留言发表成功"); window.location.href="/";</script>')
    }) 
})

//处理用户单击删除按钮
app.get('/del',(req, res) => {
    console.log('用户要删除的是第' + req.query.myid + '条留言')
    //根据获取到的id值，来删除数据库中的留言记录
    pool.getConnection((err, conn) => {
        if(err){
            return console.log('数据库链接获取失败！')
        }
        //没有错误
        sql = 'delete from messages where id=?'
        params = [req.query.myid]
        conn.query(sql,params,(err) =>{
            of(err){
                return console.log('留言删除失败！')
            }
            //成功
            res.send('<script> alert("留言删除成功！"); window.location.href="/";</script>')
        })
    })
})

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>

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">
    <h3 class="text-center"><%= title %></h3>
    <table class="table">
      <tr><th>编号</th><th>用户</th><th>消息</th><th>时间</th><th></th></tr>
      <% let i %>
      <% for(i=0; i<msgs.length; i++) { %>
        <tr>
          <td><%= msgs[i].id %></td>
          <td><%= msgs[i].name %></td>
          <td><%= msgs[i].message %></td>
          <td>{{ msgs[i].datetime | datetimeFormat }}</td>
        </tr>
      <% } %>
    </table>
  </div>
</body>
</html>