IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 前端偷偷搞搞微服务 -> 正文阅读

[JavaScript知识库]前端偷偷搞搞微服务

缘起


引用某大佬的一句话,前端现在可以考虑外翻,外翻其他技术方向,所以小编偷偷翻个微服务。目前微服务有很多成熟的技术,node也一样。但是本文不是教大家如何使用框架,而是教大家在没有微服务框架的情况下,如何自己实现一套。为了方便前端童鞋,我们就以node为例子,为了少写点代码,偷偷懒,我们就以express作为框架。

微服务的理解


假如现在没有任何框架,需要你实现微服务,你会如何处理。童鞋们思考几分钟,继续往下看。

首先,我们可以想到页面上,点击事件等方式,调用接口1。然后接口1触发,返回数据。这个时候微服务来了,我们接口1不再直接查库,而是通过分发等一系列处理,调用不在这个服务上接口2。最后,通过多次调用,数据链式返回到最初的接口1,接口1再返回给前端页面数据。

看到这里各位童靴是不是有思路了,很简单,express起两个服务,服务A和服务B,服务A负责可视化路由的管理,和外面接口请求的处理,服务B才是返回核心数据。

上代码


由于时间关系,我们就快进到代码的环节,上几段主要的代码

服务1:

const express = require("express");
const app = express();
const { getTestData } = require("./api/test.js");
app.use(express.static("htmlRes"));
app.use(express.json());
app.get("/", function (req, res) {
  res.writeHead(200, { "Content-Type": "text/html" }); //html方式输出
  res.end();
});
app.post("/test", getTestData);
app.listen(3000, () => console.log("Example app listening on port 3000!"));

其实没必要解释,很简单是不是,我们打开localhost:3000,出现页面,然后触发/test请求,然后我们看看test请求如何写的

const axios = require("axios");

exports.getTestData = async (req, res) => {
  const data = await axios.post("http://localhost:3001/getTest");
  console.log(data.data);
  res.send({
    name: "test",
    desc: "这是main返回的数据",
    ...data.data,
  });
};

大家可以看到,通过同步的方式,我们去请求另外一个服务2的getTest接口,拿到数据进行二次组装返回

我们再来看看服务2的getTest方法

exports.getTestData = (req, res) => {
  res.send({
    micro: "很高兴见到大家",
  });
};

按照代码,最后输出以下内容,证明我们的微服务成功了

{
	desc: "这是main返回的数据"
	micro: "很高兴见到大家"
	name: "test"
}

验证


我们打开localhost:3000页面,然后触发请求,看到下图
在这里插入图片描述
成功了,是不是很容易啊,哈哈,思路就是这么简单,框架无非就是更多的通用性和各种可扩展性,核心就是这个。

具体项目大家可以到这里看:
https://github.com/zjscy666/nodeMicroService

尾声


美好的时光总是短暂的,如果大家喜欢小编的文章,欢迎点赞转发打赏,我们下期见。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-25 18:01:20  更:2022-06-25 18:02:15 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 16:29:10-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码