Node【七】初识Express框架
文章目录
- 前言
- Express框架
-
- 1.什么是框架
- 2.express安装
- 3.创建web服务
-
-
- 基本遵循之前的四个步骤：
-
- 4.路由
-
- 由 ：请求方式+请求路径
-
- （1）get发送数据
- （2）get接收数据
- （3）get动态路由
- （4）post接收数据
- （5）post传递数据
- 5.模板引擎
-
- 什么是模板引擎
- 原理
- 在express中使用模板引擎
- 设置模板引擎后缀
- ejs的标签
- 语法
-
- 包含include
- 自定义分隔符
- 6.静态文件托管
- 写在最后
前言
哈喽小伙伴们，新的专栏 Node 已开启；这个专栏里边会收录一些Node的基础知识和项目实战；今天我们开始这个专栏的第七篇文章，带领大家初识一下 Express框架 ；让我们一起来看看吧
Express框架
Express文档
1.什么是框架
可以理解为是一条路，要遵守一定的规则，就会给咱们提供很多便利。为了规范开发流程，降低开发难度，提高开发效率而制定的一套共人们使用的功能模块或者是编程的约定。
2.express安装
- mkdir myapp 创建项目目录。
- cd myapp==>npm init。
- npm install express --save （可替换为[-S]）。
3.创建web服务
基本遵循之前的四个步骤：
- 导入需要使用的express包
- 创建web实例
- 定义允许访问的地址 ( 路由 )
- 原先的输出： res.end()
- 使用express后的输出： res.send()
- 启动服务 （监听端口）
//前提是安装好express，导包
let express=require('express');
//创建web服务
let app=express();
//配置路由
//监听 get请求
//req 请求对象
//res 响应对象
app.get("请求的URL",(req,res)=>{
//逻辑
//向客户端响应数据
res.send({id:1,name:'张三'})
});
//监听post请求
app.post("请求的URL",(req,res)=>{
//逻辑
});
......
//开启服务器
app.listen(8000,()=>{})
4.路由
接收发送请求，分析请求路径（pathname），分发到指定的位置。
由 ：请求方式+请求路径
（1）get发送数据
查询字符串：？key=value&key=value
（2）get接收数据
Express中内置了一个API，可以直接通过request.query来获取。
request.query
// 在express中可以直接通过 request.query 来获取字符串参数
// http://127.0.0.1:4000/about?name=zhangsan&message=hello
app.get('/about',function (request,response) {
console.log(request.query);
response.send('关于我');
})
（3）get动态路由
/path/:id
接受数据：req.params
（4）post接收数据
在Express中没有内置获取 post 请求体的API，我们需要使用第三方插件 body-parser
安装 npm install body-parser
配置 body-parser
进行下方代码的配置，就会在 request 请求对象上就会多出来一个属性：body 我们就可以直接通过 request.body 来获取表单 POST 请求体的数据了
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
使用
var express = require('express')
var bodyParser = require('body-parser')
var app = express()
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.post('/about',function (request,response) {
console.log(request.body);
})
（5）post传递数据
const express = require('express');
const app = express();
app.post('/api/post', function(req, res) {
// 直接返回对象
res.send({ name: 'abc' });
});
app.listen('8088', () => {
console.log('8088');
});
5.模板引擎
什么是模板引擎
模板引擎是一个将页面模板和要显示的数据结合起来生成HTML页面的工具。
- 引入模板引擎
- 设置模板目录
- 设置模板引擎
- 渲染模板
app.render(viewname,data,callback)
原理
function render(tpl,data){
return tpl.replace(/\{\{(\w+)\}\}/g,function(input,words){
return data[words];
})
}
var result = render('{{title}}
',{title:'人生如此美好'})
在express中使用模板引擎
app.set('views','./views'); //设置模板存储位置
app.set('view engine','ejs'); //设置模板引擎
设置模板引擎后缀
app.set('views',path.join(__dirname,'views')); //设置模板存储位置
app.set('view engine','html');
app.engine('html',require('ejs').renderFile); //使用ejs模板引擎解析html
ejs的标签
- <% ‘Scriptlet’ 标签, 用于控制流，没有输出
- <%= 向模板输出值（带有转义）
- <%- 向模板输出没有转义的值
- <%# 注释标签，不执行，也没有输出
- <%% 输出字面的 ‘<%’
- %> 普通的结束标签
语法
<% code %> //javascript代码
<%= code %> //显示替换过html的特殊字符内容
<%- code %> //显示原始html内容(支持标签)
<%= code %>与<%- code %>的区别，code为普通字符串两者没有区别，为标签时<%- code %>会显示标签效果
包含include
<% include header %>
<% include tpl/footer %>
自定义分隔符
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
var ejs = require('ejs');
ejs.delimiter = '$';
app.engine('ejs',ejs.renderFile);
6.静态文件托管
设置静态托管：app.use( express.static ( ) )
本方法一定要写在具体的路由监听之前。
app.use(express.static('static'));
//让app实例去使用一些内容（常规的方法，也是一些中间件）；
//express.static("public")中的参数是静态路由资源所在的目录的名字
//其还支持虚拟的前缀用于迷惑被人
app.use('/gjsgadjgajdgadgajdga',express.static('static'));
前缀的使用意义：
- 可以迷惑被人，一定程度上阻止被人猜测我的服务器的目录结构
- 可以帮助我们更好的阻止和管理静态资源
写在最后
更多Node知识以及API请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！
✨原创不易，还希望各位大佬支持一下！
点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！