基于express框架的留言板实现步骤

阅读原文时间：2023年07月10日阅读：2

　　这个留言板是基于express框架，和ejs模板引擎，首先需要在根目录安装express框架，然后安装ejs模块和body-parser(获取用户表单提交的数据)；建立项目目录 message，然后依次建立views文件夹（存放ejs模板文件）、public（存放静态资源css js images，使用express内置中间件static托管静态）、routers（路由文件，创建路由级中间件）；

然后建立一个入口文件app.js .

// 项目入口文件
'use strict';
const express = require('express');
const path = require('path');
const app = express();
const bodyParser = require('body-parser');
//引入获取表单的第三方中间件
//托管静态资源
app.use(express.static(path.join(__dirname, 'public'))); //将public的资源全部托管

// 使用bodyparser中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
//实现跟路由;可以通过message二级路由来实现
const message = require('./routers/message');
app.use('/', message);
//之后的显示全部在二级路由message中处理
app.listen(3000, () => {
console.log('3000 is on!');
});

　　再在routers文件夹中建立一个message路由如下

const express = require('express');
const router = express.Router();
const path = require('path');
const fs = require('fs');
const app = express();
// 实现载入页面的路由；需要载入的页面中含有静态资源和用户的留言

router.get('/', (req, res) => {
// 显示用户的留言
//读取数据
let arr = [];
// 渲染ejs页面
if (fs.existsSync('msg.json')) { //判断是否存在这个文件，如果存在就直接读取，如果不存在就写入
let str = fs.readFileSync('msg.json', 'utf8');
arr = JSON.parse(str);
}
res.render('index.ejs', { data: arr }, (err, html) => {
if (err) throw err;
console.log(html);
res.send(html);
});
});
// 处理用户的提交留言
router.post('/publish', (req, res) => {
let msg = req.body; //提取用户提交的数据
msg.time = new Date().toLocaleString();
let arr = [];
// 保存用户的留言
if (fs.existsSync('msg.json')) {
// 如果msg.json存在文件就先读取文件再写入
let str = fs.readFileSync('msg.json', 'utf8');
arr = JSON.parse(str);
}
arr.push(msg);
// 将数据写入msg.json中
fs.writeFile('msg.json', JSON.stringify(arr), (err) => {
if (err) throw err;
res.send('

发布成功返回

');
});
});
module.exports = router;

在views文件夹中放ejs模板文件index.ejs，代码如下；

LD Studio 留言板---很靠谱的留言板

    <div class="main">  
        <div class="content">  
            <% for (var i = 0; i < data.length; i++) { %>  
                <div class="msg">  
                    <h2>  
                        <%= data\[i\].title %>  
                    </h2>  
                    <p>发表于  
                        <a href="">  
                            <%= data\[i\].time %>  
                        </a> 由  
                        <a href="">  
                            <%= data\[i\].author %>  
                        </a>  
                    </p>  
                    <p>  
                        <%= data\[i\].content %>  
                    </p>  
                </div>  
                <% } %>

                    <div class="msg\_form">  
                        <h2>发表留言</h2>  
                        <form action="/publish" method="post">  
                            <ul>  
                                <li>  
                                    <label for="">标题：</label>  
                                </li>  
                                <li>  
                                    <input type="text" name="title" class="txt" />  
                                </li>  
                                <li>  
                                    <label for="">作者：</label>  
                                </li>  
                                <li>  
                                    <input type="text" name="author" class="txt" />  
                                </li>  
                                <li>  
                                    <label for="">内容：</label>  
                                </li>  
                                <li>  
                                    <textarea name="content" id="" cols="70" rows="5"></textarea>  
                                </li>  
                                <li>  
                                    <input type="submit" value="提 交" class="btn" />  
                                </li>  
                            </ul>  
                        </form>  
                    </div>  
        </div>

        <div class="sidebar">  
            <h2>最新留言</h2>  
            <ul>  
                <li><a href="">LAMP架构</a></li>  
                <li><a href="">JavaScript程序设计</a></li>  
                <li><a href="">CSS样式</a></li>  
                <li><a href="">XTHML结构</a></li>  
            </ul>  
        </div>  
    </div>  
    <div style="clear:both;"></div>  
    <!-- 公共底部 -->  
    <div class="footer">  
        <p><a href="">LD Studio</a>  2009-2012 版权所有</p>  
    </div>  
</div>

最后启动app.js

留言板实现完成！

手机扫一扫

移动阅读更方便

你可能感兴趣的文章

图书商城项目练习①管理后台Vue2/ElementUI

vue使用elementUI组件提交表单（带图片）到node后台

基于express框架的留言板实现步骤

LD Stuido留言板

很靠谱的留言板