文章目录

模板化

简介

什么是模板化

将一个复杂的程序文件依据一定规则（规范）拆分成多个文件的过程称之为模块化

好处

下面是模块化的一些好处：

防止命名冲突

高复用性

高维护性

暴露数据

如何暴露

//声明函数
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

node.js(2)