dw可以做有后台的网站么？,莱州唯佳网络科技有限公司,品牌设计需要做些什么,在线logo设计免费生成器页面渲染
常见的页面分为两种#xff0c;一种是静态页面#xff0c;比如用 Vue、React 等写好的静态页面#xff0c;另一种是动态模板页面#xff0c;如 Thymeleaf#xff0c;JSP 等。
本节将简要介绍如何在 express 中渲染静态页面#xff0c;以及适用于 express 的模…页面渲染
常见的页面分为两种一种是静态页面比如用 Vue、React 等写好的静态页面另一种是动态模板页面如 ThymeleafJSP 等。
本节将简要介绍如何在 express 中渲染静态页面以及适用于 express 的模板引擎 pug 。
配置开放资源
写前端的和搞部署的同学应该都清除页面渲染的用到的 css, js, fonts, images 等都是静态资源部署的时候需要在服务器端放行并配置一个正确的路径。
Express 内置了一个 static 中间件来托管静态资源express.static(root, [options])
大致用法如下
app.use(URL, express.static(PATH));URL是外界访问静态资源的前缀路径PATH则是资源资源目录的位置可以是相对路径也可以是绝对路径。
渲染静态页面
为了方便演示我用 evp-express-cli 快速创建了一个 express 后端并使用 Svelte 快速构建了一个简单的页面而且已经构建好了构建产物就在svelte/public目录。
为了方便和模板页面区分我决定把静态目录设为public并让我们的静态页面展示在 /static 路由下
拷贝静态页面到我们准备开放的public下面配置静态页面获取资源的路径 原本的css,js等等路径都是在/下的我们调整到/static/下面去
!DOCTYPE html
html langen
headmeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1titleSvelte app/titlelink relicon typeimage/png href/static/favicon.pnglink relstylesheet href/static/global.csslink relstylesheet href/static/build/bundle.cssscript defer src/static/build/bundle.js/script
/headbody
/body
/html在 express 中设置静态资源路径src\app.js
app.use(/static, express.static(path.join(__dirname, ../public)));此时运行后端访问 static 路由即可正常显示我们的静态 svelte 页面
其它的前端框架 Vue、React 等都是类似的就不介绍了。
模板引擎 pug
可以用的模板引擎有很多express 官方推荐了 pug那我们就用 pug吧
还是在刚才那个项目先安装 pug 依赖
npm install pug这次我打算让 pug 页面渲染在 /views/ 路由下在根目录创建一个 views 目录
在 app.js 中设置页面引擎为 pug
app.set(view engine, pug);在 /views 路由上渲染pug页面
app.get(/views, (req,res) {res.render(index, { title: express-pug-demo, message: Welcome to express pug!});
})后面的是我们给 pug 模板传递的参数既然是动态页面了自然要体验一下数据交互 3. 在 views 目录下创建index.pug 和 css目录 4. 在 index.pug 中写页面传进来的参数相当于全局变量可以直接引用我们还自定义了一个常量放到 a 标签上并引入了 css/index.css 作为页面样式
- const express_demo https://jun-laner.gitee.io/express-demodoctype html
html head title titlestyleinclude css/index.cssbodydiv(classcontainer)h1 messagea(href express_demo, target _blank) Go to express-democss目录下创建 index.css 并写入样式
.container {text-align: center;padding-bottom: 28px;
}此时重启服务器并访问 views 即可正常渲染 pug 页面
pug 用法简介
接下来我们简要介绍一下 pug 的语法可以直接拉取本节的源码并运行pug的用法都写在了示范的pug页面中
标签
在 html 中的标签在 pug 中不能加书名号了并且会自闭和无须手动闭合如 html:
phello, world!
/ppug:
p hello, world!需要注意的是html中因为标签是闭合的所以标签上下、标签之间可以不严谨的对齐但是 pug 标签必须对齐排列在它应该排列的列范围内缩进了才代表这个标签囊括在上一级标签下。
文档类型
Doctype通常我们指定为 html 即可其实就是 html 文件的头
doctype html
html
//...定义变量
在 pug 中我们可以写 js 脚本定义变量然后嵌入到标签中去渲染
- const hello_msgWelcome to express pug!//...span #{hello_msg}把变量赋给标签内容可以像上面那种模板嵌入也可以直接赋予
span hello_msg代码块
如果你的 js 代码很长不方便写在一行比如定义一个数组
错误示范这样子是错误的这是单行脚本的写法
- const list [a,b,]正确示范空出一行即可
- const list [a,b,]标签属性
通常我们需要给标签赋予一些属性比如元素的类名、a 标签的地址、图片的地址等等
a(href express_demo, target _blank) Go to express-demo多个属性用逗号分隔开变量直接赋给属性硬编码的属性则以字符串传入
列表渲染
通常我们会需要渲染列表vue 中有 v-forReact用 map 迭代列表而 pug 可以用 each in 直接迭代列表
- const apps [{ name: qq },{ name: wechat },{ name: ins }]each app in listp #{app.name}注意缩进迭代的元素要缩进到 each 下级
If 分支
如果遇到需要条件渲染的地方可以这样写
if hello_msgspan hello_msg exists!Case 分支
如果有条件有多个值可以用 case 来替换 if
- const day 1;case daywhen 1span Mondaydefaultspan Unknown引入外部文件
学过 JSP 的应该记得 JSP 里面就有 includepug 的include 可以引入一个 pug引入其它文件则会被当作文本
我们可以用 include 来导入外部CSS
html head title titlestyleinclude css/index.css如果你想用 link 的方式导入CSS也可以但 express 后端必须把对应目录设置为静态资源
html head title titlelink(relstylesheet, hrefcss/index.css) //- 如果要href引入必须在express中设置为静态资源设置 views 为资源目录
app.use(/views, express.static(path.join(__dirname, ../views)));样式
上面已经介绍从外部引入样式办法这里再补充一下在 pug 中如何直接写样式
style.h1 {color: green;}style标签后面的那个 . 不要忘记剩下的样式就按常规的CSS写法即可
过滤器
过滤器可以用于渲染特定的片段需要借助插件实现当然也可以自定义
以渲染 markdown 为例先安装 markdown 依赖
npm install jstransformer-markdown-it然后划定一块区域放置我们的markdown
div(classmd):markdown-it(linkify langPrefixhighlight-js)# Markdownuse markdown in pug file## examplethis is example# Thanks For Reading this Article页面渲染就介绍到这里重要的静态资源配置模板页面通常其实用不到如果需要更详细的用法可以关注 pug 官方手册
下一节-express-validator
