建设公司设计公司网站,十堰做网站公司,wordpress自定义文章类型分类获取,深圳网站建设的文章目录 前言一、express使用中间件body-parser获取请全体的数据1. 代码2. 效果 二、express使用ejs#xff08;了解即可#xff09;1.安装2.作用3.基本使用#xff08;1#xff09;代码#xff08;2#xff09;代码分析和效果 4.列表渲染#xff08;1#xff09;代码… 文章目录 前言一、express使用中间件body-parser获取请全体的数据1. 代码2. 效果 二、express使用ejs了解即可1.安装2.作用3.基本使用1代码2代码分析和效果 4.列表渲染1代码2代码分析和效果 5.if的条件渲染1代码2代码分析和效果 前言
提示希望你了解express后进行查看后面的内容。 一、express使用中间件body-parser获取请全体的数据
1. 代码
// 1导入express body-parser
const express require(express)
const bodyParser require(body-parser)// 2创建应用对象
const app express();// 3解析querystring格式请全体的中间件
const urlenncodeParser bodyParser.urlencoded({extended: false})// 5创建路由规则
app.get(/login, (req, res) {// 6响应html文件res.sendFile(__dirname /06_index.html)
})// 7post规则点击html页面的登录触发回调函数
app.post(/login, urlenncodeParser, (req, res) {console.log(req.body); // 获取用户名和密码res.send(获取用户数据)
})// 4监听并启动服务器
app.listen(9000, () {console.log(服务器启动了)
})2. 效果 二、express使用ejs了解即可 ejs 中文官网https://ejs.bootcss.com/#install 1.安装
npm install ejs2.作用 将html页面和js逻辑拆分开来 3.基本使用
1代码 js 文件 // 1导入express body-parser
const fs require(fs)
const ejs require(ejs)const name 张三
const age 18let str fs.readFileSync(./07_.html).toString();/*** ejs.render* str, data, options* str str 参数1渲染的html页面* data Object 参数2传递给html页面的参数* options 参数3配置* 作用输出渲染后的 HTML 字符串*/let renderStr ejs.render(str, { name: name, age: age });console.log(renderStr);html 文件 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleejs初体验/title
/head
bodyh1我是 % name %, 今年% age % 岁/h1
/body
/html2代码分析和效果 4.列表渲染
1代码 js 文件 // 1导入express body-parser
const fs require(fs)
const ejs require(ejs)const nameList [张三, 李四, 王五, 赵六]let html fs.readFileSync(./08_.html).toString();let renderStr ejs.render(html, { nameList: nameList });console.log(renderStr);html 文件 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleejs列表渲染/title
/head
body% nameList.forEach(item { %li% item %/li% }) %
/body
/html2代码分析和效果 5.if的条件渲染
1代码 js 文件 // 1导入express body-parser
const fs require(fs)
const ejs require(ejs)const isEat true;let html fs.readFileSync(./09_.html).toString();let renderStr ejs.render(html, { isEat: isEat });console.log(renderStr);html 文件 bodyheader% if(isEat){ %span我吃了饭/span% }else{ %span我还没吃饭/span% } %/header
/body2代码分析和效果
