文章目录
模板化
简介
什么是模板化
将一个复杂的程序文件依据一定规则（规范）拆分成多个文件的过程称之为 模块化
好处
下面是模块化的一些好处：
防止命名冲突
高复用性
高维护性
暴露数据
如何暴露
//声明函数 function tiemo(){ console.log('贴膜....'); } //暴露数据 module.exports = tiemo;
//导入模块 const tiemo = require('./me.js'); //调用函数 tiemo(); //=> 贴膜....
两种方式
module.exports = value
exports.name = value
导入模块
在模块中使用 require 传入文件路径即可引入文件
const test = require('./me.js')
require 使用的一些注意事项：
对于自己创建的模块，导入时路径建议写 相对路径，且不能省略 ./ 和 …/
js 和 json 文件导入时可以不用写后缀，c/c++编写的 node 扩展文件也可以不写后缀，但是一般用不到，直接使用 node 的
require() 方法即可将 JSON 文件转换成 JS 对象
如果导入其他类型的文件，会以 js 文件进行处理
如果导入的路径是个文件夹，则会 首先 检测该文件夹下 package.json 文件中 main 属性对应的文件，
如果存在则导入，反之如果文件不存在会报错。
如果 main 属性不存在，或者 package.json 不存在，则会尝试导入文件夹下的 index.js 和 index.json，
如果还是没找到，就会报错
导入 node.js 内置模块时，直接 require 模块的名字即可，无需加 ./ 和 …/
导入模块流程
1.将相对路径转为绝对路径，定位目标文件
2.缓存检测
3.读取目标文件代码
4.包裹为一个函数并执行（自执行函数）。通过 arguments.callee.toString() 查看自执行函数
5.缓存模块的值
6.返回 module.exports 的值
function require(file){ //1. 将相对路径转为绝对路径，定位目标文件 let absolutePath = path.resolve(__dirname, file); //2. 缓存检测 if(caches[absolutePath]){ return caches[absolutePath]; } //3. 读取文件的代码 let code = fs.readFileSync(absolutePath).toString(); //4. 包裹为一个函数 然后执行 let module = {}; let exports = module.exports = {}; (function (exports, require, module, __filename, __dirname) { const test = { name: '尚硅谷' } module.exports = test; //输出 console.log(arguments.callee.toString()); })(exports, require, module, __filename, __dirname) //5. 缓存结果 caches[absolutePath] = module.exports; //6. 返回 module.exports 的值 return module.exports; }
express
介绍
简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用(HTTP 服务)
使用
下载
npm init npm i express
使用
//1. 导入 express const express = require('express'); //2. 创建应用对象 const app = express(); //3. 创建路由规则 app.get('/home', (req, res) => { res.end('hello express server'); }); //4. 监听端口 启动服务 app.listen(3000, () =>{ console.log('服务已经启动, 端口监听为 3000...'); });
路由
介绍
路由确定了应用程序如何响应客户端对特定端点的请求
使用
//导入 express const express = require('express'); //创建应用对象 const app = express(); //创建 get 路由 app.get('/home', (req, res) => { res.send('网站首页'); }); //首页路由 app.get('/', (req,res) => { res.send('我才是真正的首页'); }); //创建 post 路由 app.post('/login', (req, res) => { res.send('登录成功'); }); //匹配所有的请求方法 app.all('/search', (req, res) => { res.send('1 秒钟为您找到相关结果约 100,000,000 个'); }); //自定义 404 路由 app.all("*", (req, res) => { res.send('<h1>404 Not Found</h1>') }); //监听端口 启动服务 app.listen(3000, () =>{ console.log('服务已经启动, 端口监听为 3000'); })
获取请求参数
//导入 express const express = require('express'); //创建应用对象 const app = express(); //获取请求的路由规则 app.get('/request', (req, res) => { // 1. 获取报文的方式与原生 HTTP 获取方式是兼容的 console.log(req.method); console.log(req.url); console.log(req.httpVersion); console.log(req.headers); // 2. express 独有的获取报文的方式 // 获取路径 console.log(req.path) //获取查询字符串 console.log(req.query); // 『相对重要』对象形式返回所有的查询字符串 // 获取指定的请求头 console.log(req.get('host')); res.send('请求报文的获取'); }); //启动服务 app.listen(3000, () => { console.log('启动成功....') })
获取路由参数
app.get('/:id.html', (req, res) => { res.send('商品详情, 商品 id 为' + req.params.id); });
响应设置
//获取请求的路由规则 app.get("/response", (req, res) => { //1. express 中设置响应的方式兼容 HTTP 模块的方式 res.statusCode = 404; res.statusMessage = 'xxx'; res.setHeader('abc','xyz'); res.write('响应体'); res.end('xxx'); //2. express 的响应方法 res.status(500); //设置响应状态码 res.set('xxx','yyy');//设置响应头 res.send('中文响应不乱码');//设置响应体 //连贯操作 res.status(404).set('xxx','yyy').send('你好朋友') //3. 其他响应 res.redirect('http://atguigu.com')//重定向 res.download('./package.json');//下载响应 res.json();//响应 JSON res.sendFile(__dirname + '/home.html') //响应文件内容 });
中间件
介绍
中间件（Middleware）本质是一个回调函数
中间件函数 可以像路由回调一样访问 请求对象（request） ， 响应对象（response）
作用
中间件的作用 就是 使用函数封装公共操作，简化代码
类型
定义全局中间件
let recordMiddleware = function(request,response,next){ //实现功能代码 //..... //执行next函数(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next) next(); }
app.use(recordMiddleware)
app.use(function (request, response, next) { console.log('定义第一个中间件'); next(); })
多个全局中间件
app.use(function (request, response, next) { console.log('定义第一个中间件'); next(); }) app.use(function (request, response, next) { console.log('定义第二个中间件'); next(); })
路由中间件
app.get('/路径',`中间件函数`,(request,response)=>{ }); app.get('/路径',`中间件函数1`,`中间件函数2`,(request,response)=>{ });
资源中间件
//引入express框架 const express = require('express'); //创建服务对象 const app = express(); //静态资源中间件的设置，将当前文件夹下的public目录作为网站的根目录 app.use(express.static('./public')); //当然这个目录中都是一些静态资源 //如果访问的内容经常变化，还是需要设置路由 //但是，在这里有一个问题，如果public目录下有index.html文件，单独也有index.html的路由 //则谁书写在前，优先执行谁 app.get('/index.html',(request,response)=>{ respsonse.send('首页'); }); //监听端口 app.listen(3000,()=>{ console.log('3000 端口启动....'); });
接口
简介
接口是 前后端通信的桥梁
RESTful API
json-server
1.全局安装 json-server
npm i -g json-server
2.创建 JSON 文件（db.json），编写基本结构
{ "song": [ { "id": 1, "name": "干杯", "singer": "五月天" }, { "id": 2, "name": "当", "singer": "动力火车" }, { "id": 3, "name": "不能说的秘密", "singer": "周杰伦" } ] }
以 JSON 文件所在文件夹作为工作目录，执行如下命令
json-server --watch db.json
