文章目录
🌟前言
哈喽小伙伴们，新的专栏 Node 已开启；这个专栏里边会收录一些Node的基础知识和项目实战；今天带领大家初识一下 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.路由
🌟 由 ：请求方式+请求路径
（1）get发送数据
（2）get接收数据
Express中内置了一个API，可以直接通过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
配置 body-parser
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.模板引擎
🌟 什么是模板引擎
- 引入模板引擎
- 设置模板目录
- 设置模板引擎
- 渲染模板
app.render(viewname,data,callback)
🌟 原理
function render(tpl,data){
return tpl.replace(/\{\{(\w+)\}\}/g,function(input,words){
return data[words];
})
}
var result = render('<h1>{{title}}</h1>',{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内容(支持标签)
🌟 包含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('static'));
//让app实例去使用一些内容（常规的方法，也是一些中间件）；
//express.static("public")中的参数是静态路由资源所在的目录的名字
//其还支持虚拟的前缀用于迷惑被人
app.use('/gjsgadjgajdgadgajdga',express.static('static'));
🌟写在最后
更多Node知识以及API请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！