express web开发框架
一、简介
基于 Node.js 平台,快速、开放、极简的 Web 开发框架。
二、操作命令
初始化项目,创建package.json 文件
yarn init -y
在yarn 下安装 express
yarn add express -S
三、express 方法
1.use()
为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件。使用 use() 函数实现托管静态文件。
express 写的访问路径,从上到下执行,先写的先执行,只有匹配的执行。
const { response } = require('express');
const express = require('express');
const app = express();
//use() 访问静态目录,回调函数调用请求和响应,回调函数又被称为中间件
//use 从上到下开始匹配,只要第一个使用了,后面的就不能使用,加上next 下一个use才会生效
app.use('/', (request, response, next) => {
console.log(0);
next();
}, (request, response, next) => {
console.log(1);
next();
});
app.use('/ajax', (request, response) => {
console.log('ajax');
})
app.use('/api', (request, response) => {
response.end('api显示')
})
//listen() 三个参数,第一个端口号,第二个回调函数
app.listen(8080, () => {
console.log('localhost:8080');
});
2.Router() 创建路由
创建和使用路由
const express = require('express');
//路由中间件
const router = express.Router();
router.get('/',(request, response, next)=>{
response.end('root')
});
路由协议的语义方法-提交方法
//router 各个协议的区别
//获取数据
router.get('/index', (request, response, next) => {
const data =request.body;
console.log(data);
response.send(data);
})
//添加数据
router.post('/index', (request, response, next) => {
const data =request.body;
console.log(data);
response.send(data);
})
//修改数据-覆盖式修改,覆盖全部数据
router.put('/index', (request, response, next) => {
const data =request.body;
console.log(data);
response.send(data);
})
//修改数据-增量修改,修改单个数据,不影响全部
router.patch('/index', (request, response, next) => {
const data =request.body;
console.log(data);
response.send(data);
})
//删除数据
router.delete('/index', (request, response, next) => {
const data =request.body;
console.log(data);
response.send(data);
})
//如果想什么提交方法都接收,使用all,把之前的提交方法删除
router.all('/index', (request, response, next) => {
const data =request.body;
console.log(data);
response.send(data);
})
3.body-parser模块
先用 yarn 或 npm 安装body-parser模块。body-parser 模块用来获取表单数据和解析json对象。
const express = require('express');
const app = express();
const router = require('./route/index');
const bodyParser=require('body-parser');
//urlencoded 用来获取前端给的表单数据。json 用来解析json对象
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
4.利用 Express 托管静态文件
相比之前获取静态文件路径,进行文件读取较为简单
例如,通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了:
app.use(express.static('public'))
四、rmvp 模型
把整个开发过程抽象化,将各个部分的功能抽象成单个模块。r与p交互。v和c的交互需要通过p
r-route 路由
五、template engine 模板引擎
在后端返回数据需要显示到页面的时候,后端自己渲染比较麻烦,前端如果运用模板引擎就方便了许多。
引入模板,前后端都可以使用
art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器
art-template 语法可以写在html中,用{{}}
居多。
1.art-template
安装引擎,用yarn 和 npm 皆可以安装
npm install --save art-template
npm install --save express-art-template
2.使用和配置
server.js
在server 文件配置art-template相关设置
// view engine setup
app.engine('art', require('express-art-template'));
app.set('view options', {//注意此处和官网不一样,是个坑
debug: process.env.NODE_ENV !== 'production',
// 是否开启对模板输出语句自动编码功能。为 false 则关闭编码输出功能
// escape 可以防范 XSS 攻击
escape: true, //转化html代码
});
app.set('views', path.join(__dirname, 'view'));
app.set('view engine', 'art'); //设置view引擎
view 层的 list.art 文件
{
"ret":ture,
"data":{{data}}
}
3.在浏览器中使用art-template
写在js文件中引入到html页面
核心方法
// 基于模板名渲染模板
template(filename, data);
// 将模板源代码编译成函数
template.compile(source, options);
// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);
循环
{{each target}}
{{$index}} {{$value}}
{{/each}}