express基本使用---留言本

最新推荐文章于 2023-09-26 17:42:57 发布

辣鸡王八鸭

最新推荐文章于 2023-09-26 17:42:57 发布

阅读量165

点赞数

分类专栏： node.js

本文链接：https://blog.csdn.net/weixin_44685781/article/details/105024971

版权

node.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

介绍
art-template 是一个简约,超快的模板引擎
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
支持 Express、Koa、Webpack

app.js

const express = require('express')
// 引入body-parser
const bodyParser = require('body-parser')
//新建一个服务
const app = express()
// 开放静态资源(可以访问public目录后面的)
app.use('/public/', express.static('./public'))
// 配置express-art-template模板引擎
app.engine('html', require('express-art-template'))
//第一个参数 当渲染以.html结尾的文件时,使用art-template模板引擎 但是必须使用art-template 因为express-art-template依赖art-template


//配置body-parser中间件(插件 专门用来解析表单post请求)
// 配置body-parser
app.use(bodyParser.urlencoded({ extended: false }))
//配置body-parser中间件(插件 专门用来解析表单post请求)
app.use(bodyParser.json())
// 先造一些假数据，供模板引擎渲染
let comments = [
    {
        name: 'jack',
        content: 'hello world',
        time: '2019-5-1'
    },
    {
        name: 'Tom',
        content: 'hello world',
        time: '2019-5-1'
    },
    {
        name: 'dream',
        content: 'hello world',
        time: '2019-5-1'
    },
    {
        name: 'james',
        content: 'hello world',
        time: '2019-5-1'
    },
    {
        name: 'jack',
        content: 'hello world',
        time: '2019-5-1'
    },
    {
        name: 'life',
        content: 'hello world',
        time: '2019-5-3'
    }
]
//res.render('html 模板名',{模板数据}) 模板数据可选
//第一个参数不用写路径，默认会去项目的views目录查找该模板文件
//也就是说Express有一个约定,开发人员把所有的视图都放到views目录中
//如果希望修改默认的views 视图渲染存储目录  可以设置 app.set('views',目录路径)
app.get('/', (req, res) => {
    // res对象本身是没有render方法的,当配置了express-art-template才会给其添加此方法
    res.render('index.html', {
        comments: comments
    })
})

app.get('/post', (req, res) => {
    res.render('post.html')
})
app.post('/getComment', (req, res) => {
    // 得到post请求发送的数据
    //在Express中没有内置获取表单Post请求体的api 需要使用一个第三方包 body-parser
    //req.query只能获取get请求参数
    const comment = req.body
    comment.time = '2019-5-21'
    comments.unshift(comment)
    //框架的好处
    res.redirect('/')
    // res.setStatus=302
    // res.setHeader('Location','/')
    // res.end()
})
app.listen(3000, () => {
    console.log('running...')
})

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<body style="margin:200px auto;background:#fff;width:800px;">
<a style="margin-bottom: 30px;color: lightblue;font-size: 40px" href="index.html">首页</a>
<form action="/getComment" method="post">
<div class="form-group">
    <label for="exampleInputEmail1">你的大名</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Name"  name="name" required="required" />
</div>
<div class="form-group">
    <p >留言内容</p>
    <textarea class="form-control" rows="4" name="message" required></textarea>
</div>
    <button>发表</button>
</form>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <style>
        li{
            border-radius: 5px;
            width: 800px;
            line-height: 50px;
            border : 1px solid lightgray;
            padding-left: 10px
        }
    </style>
</head>
<body style="margin:200px auto;background:#fff;width:800px;">
<h1 style="color: lightgray;margin-bottom: 30px">Example page header<small>Subtext header</small></h1>
<!--浏览器会自动对静态资源发起请求 包括img link script video audio 带有src或者href(link)时-->
<a type="button" class="btn btn-success" href="/post">发表评论{{title}}</a>
<ul style="list-style: none;margin-top: 20px;padding: 0">
    {{each comments}}
    <li>{{$value.name}} 说:{{$value.message}} <span style="float: right">{{$value.dateTime}}</span></li>
    {{/each}}
</ul>
</body>
</html>