express以及art-template

最新推荐文章于 2023-06-14 17:40:11 发布

_zlfan

最新推荐文章于 2023-06-14 17:40:11 发布

阅读量132

点赞数

分类专栏：前端之路

本文链接：https://blog.csdn.net/void_fan/article/details/113029628

版权

前端之路专栏收录该内容

19 篇文章 0 订阅

订阅专栏

express快速入门

安装

npm install express --save

创建你的第一个hello world

var express = require('express')
var app = express();
//路由
app.get('/',(req,res)=>{
    res.send('hello world')
})

app.listen(3000,()=>{
    console.log('app running at localhost:3000');
})

路由指的是确定应用程序如何响应客户机对特定端点的请求，
该端点是URI(或路径)和特定的HTTP请求方法(GET、POST等)。
每条路由都可以有一个或多个处理程序函数，当路由匹配时执行。
路由定义采用如下结构:

app.METHOD(PATH, HANDLER)

app是express的一个实例
METHOD是一个HTTP请求方法，小写
PATH为服务器上的路径
HANDLER是匹配路由时执行的函数。

下面的例子演示了如何定义简单的路由：

app.get('/', function (req, res) {
  res.send('Hello World!')
})

app.post('/', function (req, res) {
  res.send('Got a POST request')
})

app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user')
})

app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user')
})

利用 Express 托管静态文件

为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，使用 Express 中的 express.static 内置中间件函数。

此函数特征如下：

express.static(root, [options])

root参数指定了提供静态资源的根目录。
例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

app.use(express.static('public'))

现在，你就可以访问 public 目录中的所有文件了：

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

Express 在静态目录查找文件，因此，存放静态文件的目录名不会出现在 URL 中。

如果要使用多个静态资源目录，请多次调用 express.static 中间件函数：

app.use(express.static('public'))
app.use(express.static('files'))

访问静态资源文件时，express.static 中间件函数会根据目录的添加顺序查找所需的文件。

为express提供的文件创建虚拟路径前缀(其中路径在文件系统中实际上不存在)。
为静态目录指定一个挂载路径，如下所示:

app.use('/static', express.static('public'))

现在，你就可以通过带有 /static 前缀地址来访问 public 目录中的文件了。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

如果你从另一个目录运行express应用，使用你想要服务的目录的绝对路径会更安全:

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

Express 4.x API参考

art-template在express中的运用

安装

npm install art-template --save
npm install express-art-template --save

使用样例

const express = require('express')
const path = require('path')
const app = express()

// 1. 告诉express框架使用什么模板引擎渲染什么后缀的模板文件
app.engine('art', require('express-art-template'))
// 2. 告诉express框架模板存放的位置是什么
app.set('views', path.join(__dirname, 'views'))
// 3. 告诉express框架模板的默认后缀是什么
app.set('view engine', 'art')

app.get('/index', (req, res) => {
  // 渲染指定目录下的模板index.art
  res.render('index', {
    msg: 'message'
  })
})

app.listen(3000, () => console.log('app running at localhost:3000'))

如果没有指定模板存放位置，默认去应用views目录下

获取模板引擎传递的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>{{msg}}</h2>
</body>
</html>

详细语法请参考官方文档

_zlfan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
express以及art-template

express快速入门安装npm install express --save创建你的第一个hello worldvar express = require('express')var app = express();//路由app.get('/',(req,res)=>{ res.send('hello world')})app.listen(3000,()=>{ console.log('app running at localhost:3000');
复制链接

扫一扫