尚医通 (十) --------- axios、Element UI 与 Node.js-Toy模板网

这篇具有很好参考价值的文章主要介绍了尚医通 (十) --------- 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。

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

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

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/');