| 框架 | 规范 | 区别 | 定义与引入 |
|---|---|---|---|
| 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.exportsrequire(相对路径)npm前端JS = ECMAScript+BOM+DOM
后端JS = ECMAScript+I/O
请求request
响应response
Content-Typehttp 创建一个服务器
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
expressMiddlewareapp.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