使用art-template插件显示页面,实现发表留言功能

最新推荐文章于 2023-03-17 16:29:54 发布

__sunny___

最新推荐文章于 2023-03-17 16:29:54 发布

阅读量214

点赞数

分类专栏：初学node

本文链接：https://blog.csdn.net/weixin_42380658/article/details/84933040

版权

初学node 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一步:引入模块

//引入核心模块
const fs = require('fs');
const path = require('path');
//第三方模块
const express = require('express');
const bodyParser = require('body-parser');
const template = require('art-template');

const app = express();

设置监听

app.listen(3000, () => {
    console.log('开始监听3000');
});

设置静态资源

app.use('/statics', express.static(path.join(__dirname, 'public')));

//配置body-parser,解析解析体中的内容
//配置好之后,可以在回调函数中使用req.body得到数据

app.use(bodyParser.urlencoded({ extended: false }));
// 当发送的post请求，并且 content-type 的值是application/x-www-form-urlencoded
// 处理请求体的格式 name=zs&content=123
// 转换成对象，并且添加到req.body

处理首页的请求

//处理留言列表
app.get('/', (req, res) => {
    let dbPath = path.join(__dirname, 'db.json');
    fs.readFile(dbPath, 'utf-8', (err, data) => {
        if (err) throw err;
        let msgs = JSON.parse(data);
        let html = template(path.join(__dirname, 'views/index.html'), {
            msgs
        });
        res.send(html);
    });
});

//发表留言
app.post('/public', (req, res) => {
    let dbPath = path.join(__dirname, 'db.json');
    fs.readFile(dbPath, 'utf-8', (err, data) => {
        if (err) throw err;
        let msgs = JSON.parse(data);
        let lastMsg = msgs[msgs.length - 1];
        let msg = {
            id: lastMsg.id + 1,
            name: req.body.name,
            content: req.body.content,
            time: '2018-10-19',
            img: lastMsg.img
        };
        msgs.push(msg);
        //转换为json格式,存入json
        let str = JSON.stringify(msgs);
        fs.writeFile(dbPath, str, (err) => {
            if (err) throw err;
            res.send('<script>alert("发表成功");location.href:"/"</script>')
        });
    });
});

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="statics/css/index.css">
</head>
<body>
    <div class="content">
        <div class="wrap">
            <form action="/publish" method="POST">
                <div class="box">
                    <textarea name="content" value="说说今天有趣的事"></textarea> 
                </div>
                <div class="publish">
                    您的大名：<input type="text" name="name">
                    <!-- <a href="javascript:void(0);" class="W_btn">发布</a> -->
                    <button class="W_btn">发布</button>
                </div>
            </form>
        </div>
        <div class="list">
            <ul>
                {{ each msgs }}
                <li>
                    <img src="{{ $value.img }}"  alt="" class="pic">
                    <div class="list_con">
                        <div class="time">
                            <strong>发表时间:  <i>{{ $value.time }}</i></strong>
                            <img src="statics/images/lj.jpg" alt="">
                        </div>
                        <p><b>{{ $value.name }}：</b>  {{ $value.content }}</p>
                    </div>
                </li>
                {{ /each }}
            </ul>
        </div>
    </div>
</body>
</html>

__sunny___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用art-template插件显示页面,实现发表留言功能

第一步:引入模块//引入核心模块const fs = require('fs');const path = require('path');//第三方模块const express = require('express');const bodyParser = require('body-parser');const template = require('art-templa...
复制链接

扫一扫

专栏目录