node ---- 02

最新推荐文章于 2022-06-12 10:53:16 发布

原创最新推荐文章于 2022-06-12 10:53:16 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node

node 专栏收录该内容

5 篇文章

订阅专栏

node ---- 02

一. Node.js的框架 express

使用express构建静态服务器[ 后端渲染 ]
使用express构建api服务器【接口】

二. 前端通信【 socket 】

Node中完成通信功能
扩展： H5的 webSocket 实现通信功能

1. express通过生成器【脚手架】

作用：可以帮助我们快速构建一个express项目
脚手架的安装
- 全局安装
- npx安装
脚手架的使用

全局安装的使用
- express -e 项目名称
npx的使用
- npx express -e 项目名称

在这里插入图片描述

1. 先找package.json
1. 找到了项目启动文件 bin/www
  - 它是通过http来做了一个服务器，默认端口是：3000
  - 这个文件中引入了一个app文件，这个文件是将createServer中的回调函数放到了外面，以模块化的形式使用的，这个文件我们叫它： ‘入口文件’
1. app.js
- express是由路由和中间件构成的
  - 路由：可以完成页面的连接或是接口的打造
  - 中间件：中间件是一个函数，一个具有特定功能的函数
    - 中间件的参数
      - req : 全称： request 表示请求
      - res : 全称： response 表示响应
      - next: 表示request和response之间的连接，相当于桥梁的作用
        next如果断开，那么请求和响应就会中断 next( false )
    - 中间件要想调用，必须通过app的use方法来调用
1. 路由中间件
- 路由中间件人家是以模块化的形式使用
  - routes/xx.js
  - res.render(‘index’)
    - 配置了模板的路径
    - 配置了后缀名省略
1. view/xxx.ejs

这是home.js文件：

const express = require('express');

const router = express.Router();

router.get('/', function(req, res, next) { 
    res.render('home', {
        data: {
            msg: '<h2>开始后端渲染数据</h2>',
            flag: true,
            kaola: [{
                id: "1",
                pic: [{ 'title': '列表展示1', 'src': '/images/p01-0.jpg' }, { 'title': '放大图1', 'src': '/images/p01-1.jpg' }, { 'title': '放大图2', 'src': '/images/p01-2.jpg' },{ 'title': '放大图3', 'src': '/images/p01-3.jpg' }, { 'title': '缩小图1', 'src': '/images/p01-1s.jpg' },{ 'title': '缩小图2', 'src': '/images/p01-2s.jpg' },{ 'title': '缩小图3', 'src': '/images/p01-3s.jpg' },{ 'title': '购物车展示', 'src': '/images/p01-g.jpg' }],
                price: "56.00",
                title: "【111便宜大碗】Naturie imju 薏仁亮白保湿防晒化妆水 500毫升"
            }, {
                id: "2",
                pic: [{ "title": "列表展示", "src": "/images/p02-0.jpg" }, { "title": "放大图1", "src": "/images/p02-1.jpg" }, { "title": "放大图2", "src": "/images/p02-2.jpg" },{ "title": "放大图3", "src": "/images/p02-3.jpg" }, { "title": "缩小图1", "src": "/images/p02-1s.jpg" },{ "title": "缩小图2", "src": "/images/p02-2s.jpg" },{ "title": "缩小图3", "src": "/images/p02-3s.jpg" },{ "title": "购物车展示", "src": "/images/p02-g.jpg" }],
                price: "87.00",
                title: "222Papa recipe 春雨 蜂蜜补水保湿面膜 25克/片 10片装 当红爆款"
            }, {
                id: "3",
                pic: [{ "title": "列表展示", "src": "/images/p03-0.jpg" }, { "title": "放大图1", "src": "/images/p03-1.jpg" }, { "title": "放大图2", "src": "/images/p03-2.jpg" },{ "title": "放大图3", "src": "/images/p03-3.jpg" }, { "title": "缩小图1", "src": "/images/p03-1s.jpg" },{ "title": "缩小图2", "src": "/images/p03-2s.jpg" },{ "title": "缩小图3", "src": "/images/p03-3s.jpg" },{ "title": "购物车展示", "src": "/images/p03-g.jpg" }],
                price: "129.00",
                title: "Swisse 奶蓟草护肝片 120片/瓶【拯救熬夜的肝】"
            }, {
                id: "4",
                pic: [{ "title": "列表展示", "src": "/images/p04-0.jpg" }, { "title": "放大图1", "src": "/images/p04-1.jpg" }, { "title": "放大图2", "src": "/images/p04-2.jpg" },{ "title": "放大图3", "src": "/images/p04-3.jpg" }, { "title": "缩小图1", "src": "/images/p04-1s.jpg" },{ "title": "缩小图2", "src": "/images/p04-2s.jpg" },{ "title": "缩小图3", "src": "/images/p04-3s.jpg" },{ "title": "购物车展示", "src": "/images/p04-g.jpg" }],
                price: "49.90",
                title: "【日本版黑色】KISS ME 奇士美 花漾美姬梦幻泪眼防水眼线液笔 0.1极细0.4毫"
            }, {
                id: "5",
                pic: [{ "title": "列表展示", "src": "/images/p05-0.jpg" }, { "title": "放大图1", "src": "/images/p05-1.jpg" }, { "title": "放大图2", "src": "/images/p05-2.jpg" },{ "title": "放大图3", "src": "/images/p05-3.jpg" }, { "title": "缩小图1", "src": "/images/p05-1s.jpg" },{ "title": "缩小图2", "src": "/images/p05-2s.jpg" },{ "title": "缩小图3", "src": "/images/p05-3s.jpg" },{ "title": "购物车展示", "src": "/images/p05-g.jpg" }],
                price: "119.00",
                title: "innisfree 悦诗风吟 绿茶精萃水乳两件套装"
            }]
        }
    });
});

module.exports = router;

这是home.ejs模板文件

1. ejs语法
  - 注意： ejs语法符号是不能换行的
  - 非转义输出 <%- %> 可以解析xml类型数据
  - 转义输出 <%= %> 可以解析普通类型数据
  - 流程控制 <% %>
    - if条件语句
    - 循环语句

通过express来打造api服务器【后端接口】

步骤

通过脚手架搭建项目
1.1 创建项目 npx express -e 目录名

创建接口

/* 
  这里的路由将作为将来的后端接口
*/

const express = require( 'express' )

const router = express.Router() 


//接下来我们打造接口 ,使用restful api

  router.route('/position')
    .post((req,res,next) => {// post增
      res.setHeader('Access-Control-Allow-Origin','*')
      res.render('position',{
        data: JSON.stringify({ //以字符串的形式传递数据
          info: 'post',
          status: 200,
          name: 'bvdf'
        })
      })
    })
    .delete((req,res,next) => {//删
      res.setHeader('Access-Control-Allow-Origin','*')

      res.render('position',{
        data: JSON.stringify({
          info: 'delete',
          status: 200,
          name: 'bvdf'
        })
      })
    })
    .put((req,res,next) => {//改
      res.setHeader('Access-Control-Allow-Origin','*')

      res.render('position',{
        data: JSON.stringify({
          info: 'put',
          status: 200,
          name: 'bvdf'
        })
      })
    })
    
    .get((req,res,next) => {//查
      res.setHeader('Access-Control-Allow-Origin','*')

      res.render('position',{
        data: JSON.stringify({
          info: 'get',
          status: 200,
          name: 'bvdf'
        })
      })
    })
module.exports = router

接口的打造需要遵循一个规则： restful api

  // 接口只有一个，但是数据请求方式多个 
   http://localhost:3000/shop
      get请求    查询
      post请求   增加一个商品
      delete请求 删除一个商品
      put 请求   修改一个商品信息

接口测试

3.1 使用测试用具来测试
- insomina
  3.1.1 测试前启动项目
  3.1.2 npm start之前别忘了要做下面的操作：3.1.3和 3.1.4
  3.1.3 在app.js中使用
```
var positionRouter = require('./routes/position');
app.use('/',positionRouter);
```
3.1.4 为了可以实时监听
修改 package.json中的
```
"start": "nodemon ./bin/www"
```

3.2 前端进行接口数据请求

3.2.1 新建前端文件夹以及html文件

	
	    <h1>前端请求</h1>
	    <button>点击发送请求</button>
	    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
	    <script>
	        $(function(){
	            $('button').on('click',function(){
	                $.ajax({
	                    type: "get",
	                    url: "http://localhost:3000/position",
	                    success: function (res) {
	                        console.log(JSON.parse(res));
	                    }   
	                });
	            })
	        })
	    </script>

3.2.2 发Ajax请求肯定会出现跨域问题

跨域问题解决：

用设置请求头的方式解决跨域
使用中间件 cors [ 第三方模块 ]
2.1 cnpm i cors -S
2.2 app.js文件引入

2.3 统一设置跨域

      app.use(cors({
        "origin": "*",
        "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
        "preflightContinue": false,
        "optionsSuccessStatus": 200
      }))

反向代理解决跨域

在前端服务器中短暂的开启一个后端，让这个后端帮助我们请求数据，然后在返回给前端

使用一个叫做 request 的(第三方)模块进行数据请求


const request = require('request');
const express = require('express');
const app = express();
const port = 5000;
const hostname = 'localhost';

app.get('/user', (req, res, next) => { 
 
    res.setHeader('Access-Control-Allow-Origin', '*');
    request('https://m.lagou.com/listmore.json', function(error, response, body) {
        res.json(JSON.parse(body));
    });
})

app.listen(port, hostname, () => {
    console.log(`接口服务器为： http://${hostname}:${port}`);
});