express.static 和 lit-html

下面这段代码：

app.use 指定的回调函数(第七行)，在任意类型的 HTTP 请求到来时，都会被触发。

为了 serve 静态文件比如图片文件，css 文件和 JavaScript 文件，可以使用 express.static 这个内置的中间件函数。

我们可以在 public 文件夹里放入 image 等类型的文件。

然后就可以用如下 url 访问这些静态文件了：

http://localhost:3000/images/kitten.jpg

app-limit-width, 这些都是占位符。

运行时在 prodcast 下面出现了大量的 section 节点。

这些节点生成的位置在 client.js 里：

lit：

lit 即 package.json 里定义的依赖：lit-html:

lit-template 是一个针对 JavaScript 的 html 模板库。

看个最简单的例子：

// Import lit-html functions
import { html, render } from 'lit-html';debugger;
const myTemplate = (name) => html`<div>Hello ${name}</div>`;const div = document.getElementById('jerry');
render(myTemplate('lit-html'), div);

index.html:

<html><body><h1>Hello</h1><div id="jerry"></div></body>
</html>

最后的输出：

如果你发现在 Chrome 开发者工具里无法调试 lit html 的生成源代码，可能是遇到了这个问题。

更多Jerry的原创文章，尽在：“汪子熙”:

express.static 和 lit-html相关推荐

express.static 作用及用法
express相信是很多人用nodejs搭建服务器的首选框架,相关教程有很多,也教会了大家来如何使用.如果你想更深的了解他的细节,不妨和我一起来研究一下. 先来看一个每个人都用到的方法app.use( ...
express中res.sendFile、res.render、express.static()三者的使用
一.res.sendFile 必须使用绝对路径,它的作用是响应出去一个任意类型文件,也可以直接返回html文件做渲染. app.get("/kkk", (req, res) =&g ...
学习笔记-express路径问题
在页面渲染成功之后,报错出现静态文件css样式引用路径出错,于是我就根据express api文档,托管静态文件作出修改,最后全是徒劳.于是我又从引用开始找起,<link rel="s ...
express中放置静态文件
不使用模版引擎的话要直接添加html,可以使用express.static()中间件设定静态文件目录,然后将html文件放在里面,如:express默认静态文件目录为 app.use(express. ...
express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...
Express结合Webpack的全栈自动刷新
在以前的一篇文章BrowserSync,迅捷从免F5开始中,我介绍了BrowserSync这样一个出色的开发工具.通过BrowserSync我感受到了这样一个理念:如果在一次ctrl + s保存后可以 ...
node mongoose_如何使用Express，Mongoose和Socket.io在Node.js中构建实时聊天应用程序
node mongoose by Arun Mathew Kurian 通过阿伦·马修·库里安(Arun Mathew Kurian) 如何使用Express,Mongoose和Socket.io在N ...
Node.js Express 框架 Express
Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...
在 Azure 中的 Linux VM 上创建 MongoDB、Express、AngularJS 和 Node.js (MEAN) 堆栈
本教程介绍如何在 Azure 中的 Linux VM 上实现 MongoDB.Express.AngularJS 和 Node.js (MEAN) 堆栈. 通过创建的 MEAN 堆栈,可以在数据库中添 ...

express.static 和 lit-html

express.static 和 lit-html相关推荐

最新文章

热门文章