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

---

一、axios

A、axios 作用

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

B、axios 实例

① 复制 js 资源

vue.min.js
axios.min.js

② 创建 axios.html
③ 引入 js

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

④ 编写 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

具体 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。

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

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

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

B、安装

官网：https://nodejs.org/en/
中文网：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