尚医通 (十) --------- axios、Element UI 与 Node.js

忘是亡心i 2024-04-01 16:25 13阅读 0赞

#### 目录 ####

*  一、axios
 *  二、element-ui
 *  三、Node.js 介绍
 *   *  1. Node.js 的概念
     *  2. BFF

--------------------

## 一、axios ##

**A、axios 作用**

axios 是独立于 vue 的一个项目，可以用于浏览器和 node.js 中发送 ajax 请求。

**B、axios 实例**

① 复制 js 资源

vue.min.js
    axios.min.js

② 创建 axios.html  
③ 引入 js

④ 编写 js

<div id="app">
        <table>
            <tr v-for="user in userList">
                <td>{
       {user.name}}</td>
                <td>{
       {user.age}}</td>
            </tr>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
          
            el: '#app',
            data: {
          
                userList:[]
            },
            created() {
           //在页面渲染之前执行
                //调用方法，得到返回json数据
                this.getList()
            },
            methods:{
          
                getList() {
          
                    //使用axios方式ajax请求
                    axios.get("user.json")
                        .then(response => {
          //请求成功
                            //console.log(response)
                            this.userList =  response.data.data.items
                            console.log(this.userList)
                        }) 
                        .catch(error => {
          
                            console.log(error)
                        }) //请求失败
                }
            }
        })
    </script>

## 二、element-ui ##

element-ui 是饿了么前端出品的基于 Vue.js 的 后台组件库，方便程序员进行页面快速布局和构建  
官网 ：[http://element-cn.eleme.io/\#/zh-CN][http_element-cn.eleme.io_zh-CN]

具体 ui 组件我们在项目中学习

## 三、Node.js 介绍 ##

### 1. Node.js 的概念 ###

**A、JavaScript 引擎**

浏览器的内核包括两部分核心：

*  DOM 渲染引擎
 *  JavaScript解析引擎

Chrome 浏览器内置 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

**B、什么是 Node.js**

脱离浏览器环境也可以运行 JavaScript，只要有 JavaScript 引擎就可以。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境：即 Node.js 内置了 Chrome 的 V8 引擎，可以在 Node.js 环境中直接运行 JavaScript 程序。

在 Node.js 中写 JavaScript 和在 Chrome 浏览器中写 JavaScript 基本没有什么不一样。哪里不一样呢？

*  Node.js 没有浏览器 API，即 document，window 的等。
 *  加了许多 Node.js 专属 API，例如文件系统，进程，http 功能。

**C、Node.js 有什么用**

如果你想开发类似JavaWeb的简单的后端程序，那么学习Node.js是一个非常好的选择。

如果你想部署一些高性能的服务，那么学习 Node.js 也是一个非常好的选择。

通常他会被用来作一个BFF层，即 Backend For Frontend (服务于前端的后端)，通俗的说是一个专门用于为前端业务提供数据的后端程序。

### 2. BFF ###

**A、BFF 解决什么问题**

一个前端页面向 Service A、Service B 以及 Service C发送请求，不同的微服务返回的值用于渲染页面中不同的组件。此时，每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合 Service A、Service B 以及 Service C 响应的数据，这个服务层叫做 BFF。

![在这里插入图片描述][ec753c491a714c82982f8765f8cbd799.png]  
手机、平板端、PC 机等用户终端都需要向每个 Service，例如 Service A 发送请求。对于同一个功能，不同的终端需要的数据格式和内容会有不同。此时 Service A 的一个接口，不能同时满足三个客户端的不同需求。我们可以在 Service A 中开发三个接口，也可以增加一个数据裁剪服务，将数据按照不同终端的不同要求进行裁剪，这个服务层叫做 BFF。

![在这里插入图片描述][9551977220814b75813510ec2da18e21.png]

BFF 层的作用是让前端有能力自由组装后台数据，减少大量的业务沟通成本，加快业务的迭代速度。

无论是数据聚合还是数据剪裁，这类程序的特点是不需要太强大的服务器运算能力，但是对程序的灵活性有较高的要求，这两个特点都正好和 Node.js的优势相吻合。

**B、安装**

官网：[https://nodejs.org/en/][https_nodejs.org_en]  
中文网：[http://nodejs.cn/][http_nodejs.cn]  
LTS：长期支持版本  
Current：最新版

双击安装 `node-v10.14.2-x64.msi`

**C、查看版本**

Node -v

**D、快速入门**

使用前端开发工具：VSCode

**E、控制台查询**

创建 01-控制台程序.js

console.log('Hello Node.js')

打开命令行终端：Ctrl + Shift + y

进入到程序所在的目录，输入

node 01-控制台程序.js

**F、服务器端应用开发**

创建 02-server-app.js

//引入http模块
    const http = require('http');
    //创建服务器
    http.createServer(function (request, response) {
        
    	// 发送 HTTP 头部 
    	// HTTP 状态值: 200 : OK
    	// 内容类型: text/plain
    	response.writeHead(200, {
        'Content-Type': 'text/html'});
    	// 发送响应数据 "Hello World"
    	response.end('<h1>Hello Node.js Server</h1>');
    }).listen(8888);
    // 终端打印如下信息
    console.log('Server running at http://127.0.0.1:8888/');

运行服务器程序

node 02-server-app.js

服务器启动成功后，在浏览器中输入：`http://localhost:8888/`查看 webserver 成功运行，并输出 html 页面

停止服务：`ctrl + c`

[http_element-cn.eleme.io_zh-CN]: http://element-cn.eleme.io/#/zh-CN
[ec753c491a714c82982f8765f8cbd799.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9937e77050694e8abe7b3d2bafb8344d.png
[9551977220814b75813510ec2da18e21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/390f6c7476bd4730b93a7f9a2f9b7ba0.png
[https_nodejs.org_en]: https://nodejs.org/en/
[http_nodejs.cn]: http://nodejs.cn/