框架 | 规范 | 区别 | 定义与引入 |
---|---|---|---|
require.js | AMD | 前端+异步 | define + require() |
sea.js | CMD | 前端+异步 | |
nodejs | CommonJS | 后端+同步 | module.exports + require() |
ECMAScript2015 | ESModule | 前端+同步 |
let jq = require([‘jquery‘], _ => {});
console.log(jq);//undefined
let http = require(‘http‘);
console.log(http);
CommonJS
规范模块分类NodeJS
内部模块require(模块名))
module.exports
require(相对路径)
npm
前端JS = ECMAScript+BOM+DOM
后端JS = ECMAScript+I/O
请求request
响应response
Content-Type
http
创建一个服务器
url
处理请求地址
path
处理文件地址
fs
文件处理
服务器主动
无跨域限制
在不支持webSocket
的浏览器上如何实现
setTimeout
) setTimeout(function show() {
console.log(666)
setTimeout(show, 5000)
}, 5000)
fs模块
fs.readFile()/fs.readFileSync()
fs.writeFile()/fs.writeFileSync()
fs.appendFile()/fs.appendFileSync()
全局变量
__dirname
当前文件所在的目录地址
__filename
当前文件所在地址
stream文件流
:文件的液体状态
读取流(以流的方式读取文件内容)
fs.createReadStream(filepath)
写入流
管道流
gulp.task(‘compileSass‘,()=>{
gulp.src(‘./src/sass/home.scss‘) //返回一个读取流
.pipe(sass())
.pipe(rename())
.pipe(gulp.dist(‘./dist‘)) // gulp.dist()返回一个写入流
})
npm
全局安装:为了在命令行使用
项目安装:为了在代码中引用require
express
Middleware
app.use(middleware)
内置中间
express.static()
express.json()
express.urlencoded()
express.Router()
自定义中间
中间件是一个函数,格式为
function(request, response, next){}
request
请求对象,保存客户端信息
response
响应对象,保存服务端信息
next()
是否进入下一个中间件的方法
app.use(express.static(‘./‘))
利用模块化思想实现接口与路由的编写
RESTful
规范接口get
查
post
增
patch/put
改
delete
删
get
/goods
所有商品
post
/goods
增加商品
get
/goods/:id
单个商品
delete
/goods/:id
删除商品
patch/put
/goods/:id
修改商品(patch部分修改,put完全修改)
postman
动态路由:request.params
url参数(?后面的参数):req.query
请求体参数(post,patch):req.body
必须借助第三方中间件来获取
CommonJS
:利用commonJS
规范把路由分离到单独的文件中
中间件express.Router()
:利用中间件把所有模块组合成一个完成的应用
Promise
对象Pending
初始状态
Resolved
成功状态
Rejected
失败状态
状态只能从
Pending
改成Resolved
或从Pending
改成Rejected
解决回调地狱
方法的封装
async & await
让我们以同步的代码实现异步编程
await
用于等待Promise
对象的返回结果
await
不能单独使用,必须放在async
函数中
async
是函数定义的关键字,利用async
定义的函数会返回一个Promise
对象
async
函数中的返回值,就是promise
状态为Resolved
时的值
function getData(url,callback) {
let data;
let xhr = new XMLHttpRequest();
xhr.onload = () => {
data = xhr.responseText;
callback(data)
}
xhr.open(‘get‘,url,true);
xhr.send();
return data;
}
let data = getData(‘/goods/123‘);
console.log(data);//undefined
// 利用回调函数来获取异步请求的数据
getData(‘/goods/10086‘, function(data) {
console.log(data)
});
// 利用Promise改造
function getData(url){
return new Promise((resolve,reject) => {
let data;
let xhr = new XMLHttpRequest();
xhr.onload = () => {
data = xhr.responseText;
resolve(data)
}
xhr.open(‘get‘,url,true);
xhr.send();
})
}
getData(‘/goods/10086‘).then(data => {
console.log(data)
})
(async function() {
let data = await getData(‘/goods/10086‘)
})();
步骤
创建全局函数
利用script标签发起请求,并发送全局函数名
后端接收全局函数名,并返回函数执行的js代码,顺便出入数据
缺点
只能get请求
不是一个ajax请求
一个真正的ajax跨域请求方案
操作步骤
Access-Control-Allow-Origin
Access-Control-Allow-Headers
Access-Control-Allow-Methods
目标服务器有接口:代理 http-proxy-middleware
目标服务器没有接口:爬 request & cheerio
会分析html结构
会使用工具
与用户的交互感更强
用户体验更好
开发更灵活
输入地址,返回index.html
解析html,返现script
请求服务器,返回js代码
发起ajax请求,返回数据
解析数据,生成html结构
SEO
速度更快
输入地址,返回index.html
由于所有的html结构已经在服务器生成完毕,浏览器解析html结构
MySQL
:关系型数据库,类似与表格
MongoDB
:非关系型数据库,类似于json
数据库 | 表 | 数据记录 | |
---|---|---|---|
MySQL | database | table | row |
MongoDB | database | collection | document |
驱动(第三方模块)
mongodb
mongoose
统一返回前端的数据格式
async & await
前后端的理解
RESTful规范的理解
怎么理解Express中间件
原文:https://www.cnblogs.com/pleaseAnswer/p/15005464.html