浅谈express框架

express

• 官网：https://www.expressjs.com.cn

安装express和使用

• 安装 ： npm install express --save
• 使用 ：
• : 引入

 const express = require("express"); //引入这个express插件
 console.log(express);//可以打印出这个express插件的所有内容！

使用express创建一个简单的服务器

• 第一步：下载express框架
  npm install express --save

• 第二步：引入express框架
  const express = require("express"); //引入这个express插件

• 第三步：开启一个服务器
  const app = express() //app就是这个服务器了

• 第四步：对中间件的使用

  • 先把静态资源的托管 => 这是一个中间组件（也是一个函数）！
    const middleware = express.static("./")
  • 把静态资源对外的开放
    app.use(middleware)
  • 以上两步，可以简化为
    app.use(express.static("./"))

• 注意点：app.use(参数1，参数2)

  • 参数1：为可选的，就是路径，假如添加了这个路径，你就可以通过带有 (参数1路径) 前缀地址来访问 public 目录中的文件了（这边的public或者 ./)
    app.use('/static', express.static('public'))

const express = require("express");
// console.log(express);

//需求：利用express创建一个服务器！
const app = express();

//把静态资源托管在中间件之中 
const middleware = express.static("./");
//把这些资源对外开放
app.use(middleware)

// app.use(express.static("./"))

//服务器监听的端口号
app.listen(9292, () => {
  console.log("server is running");
})

中间件分类

* 内置中间件
    * express.static()  静态资源服务器
    * express.json()
    * express.Router()
* 自定中间件
    * request
    * response
    * next()    是否执行下一个中间件

express.static()中间件处理逻辑：

自定义一个中间组件，这和组件也是一个函数 函数里面有着3个参数！
参数：参数1：req 参数2：res 参数3：next

• 0. express.static的参数：(req,res,next) => 一个函数!
• 1. 如匹配静态资源，直接返回
• 2. 如果不匹配，则执行next()

const express = require("express");
// console.log(express);

//需求：利用express创建一个服务器！
const app = express();

// //把静态资源托管在中间件之中
const middleware = express.static("./");
// //把这些资源对外开放
// app.use(middleware)

// app.use(express.static("./"))

//自定义组件
app.use((req, res, next) => {
  console.log("中间组件1");
  next()
})

app.use((req, res, next) => {
  console.log("中间组件2");
  // next()
})
//结果：  中间组件1 中间组件2 => 在服务器之中打印出来！
app.use((req, res, next) => {
  console.log("中间组件3");
  next()
})

// app.use(express.static("./"))

//服务器监听的端口号
app.listen(9292, () => {
  console.log("server is running");
})

使用express封装一个商品接口 => get请求的方式！

• 请求的方式 get请求 ； 请求的路径为：http://localhost/goods.html （也就是带有/good.。。。的都可以）

express封装的一个接口

const express = require("express");

//需求：利用express创建一个服务器！
const app = express();

//把静态资源托管在中间件之中
const middleware = express.static("./");
//把这些资源对外开放
app.use(middleware)

//封装一个接口： 
// 带有路径，只有匹配了路径，才能进入到中间组件之内！
// use： 不管是get,post,patch,put,delete...都可以进入 只要前端一发请求，只要是 localhost:服务器的端口号（这边是9292）/goods 便能进入！
// app.use('/goods',(req,res,next)=>{
// app.use("/goods", (req, res, next) => {
**定义任意路由(如：cart) ，当我们访问：`http://localhost:9292/cart`时触发 **
**定义任意路由(如：goods) ，当我们访问：`http://localhost:9292/goods`时触发 **
app.get("/goods", (req, res, next) => {
  console.log("goods"); //这是在服务器打印的
  var goodlist = [];
  for (var i = 0; i < 10; i++) {
    const good = {
      id: "guid" + i,
      price: parseInt(Math.random() * 1000),
      num: i * 2
    }
    goodlist.push(good)
  }
  //服务器做出响应！
  res.send(goodlist);
})

//服务器监听的端口号
app.listen(9292, () => {
  console.log("server is running");
})

前端发起的请求：并且把数据渲染到页面！

  <div id="goodslist">
    <ul>
      <!-- <li>
      <span>1</span><span>2</span>
    </li> -->
    </ul>
  </div>

    var lis = document.querySelector("#goodslist ul");
    //发起ajax请求 url为 http://localhost:9292/goods.html
    var xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:9292/goods", true);
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          var arr = JSON.parse(xhr.responseText)
          // console.log(arr);
          var html = "";
          html = arr.map((item, i) => {
            return `
            <li class="${item.id}">
              <span>数量：${item.num}</span><span>￥${item.price}</span>
            </li> 
            `
          }).join("");
          lis.innerHTML = html;
        }
      }
    }