2024年物联网嵌入式最全这个极简前后端分离应用不能错过_qt 前后端分离 工业软件(1),2024年最新工作感悟

收集整理了一份《2024年最新物联网嵌入式全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升的朋友。
img
img

如果你需要这些资料,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

这是一个极简的代码展示,使用koa web服务渲染网站静态页面。

系统组件组成

在这里插入图片描述

前端服务的文件列表:
在这里插入图片描述
读者可自行准备package.json, 本文使用以下版本:

"koa": "^2.13.1",
"koa-router": "^10.0.0",
"koa-static": "^5.0.0"

直接懒人复制 package.json

{
  "name": "uiapp",
  "version": "1.0.0",
  "description": "uiapp by levin",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "keywords": [],
  "author": "levin",
  "dependencies": {
    "koa": "^2.13.1",
    "koa-router": "^10.0.0",
    "koa-static": "^5.0.0"
  }
}

app.js 应用入口代码

const koa = require('koa');  
const serve = require('koa-static'); 
const path=require('path');

// 启动koa web服务
const app = new koa()

// 加载静态页面
var staticPath = path.join(__dirname + '/static');
console.log('static-path:', staticPath)
app.use(serve(staticPath))

console.log(new Date())
const PORT = 8080
console.log('start app at port %s', PORT)
app.listen(PORT);

思路:启动一个koa 服务,并使用koa-static中间件渲染当前应用下的static文件夹的静态文件,会默认加载index.html首页。

好,接下来。开发我们的UI站点。

UI站点

先写index.html

下面代码主要使用了axios和一个getProduct.js。
当首页加载的时候,getProduct.js 会获取后台产品服务展示产品。

<html>
<head>
<title>雷学委-UI FrontendSerivce</title>
</head>
<body>
<h1>这是一个前后段分离的应用!</h1>
<h2>后端数据展示:"http://localhost:8081"</h2>
<div id="result" ></div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/getProducts.js" ></script>
</html>

接下来是getProducts.js

这个内部使用了axios调用了产品服务(第三方服务)的接口(http://localhost:8081/products) ,然后分别针对请求成功和失败把状态写到id为“result” 的div上。

调用第三方服务成功显示绿色背景,失败显示红色背景。

重点来了:
复杂的web 应用中会有很多getProducts这样的JS更后端多个接口进行交互,然后再把交互完的数据更新反馈到UI层,这个不管是Angular/React/Vue都是如此。

function $(id){
    return document.getElementById(id)
}

function handleOnData(data){
    $('result').innerHTML = '<div style="background:green">' 
         + JSON.stringify(data)
         + '</div>'
}



**收集整理了一份《2024年最新物联网嵌入式全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升的朋友。**
![img](https://img-blog.csdnimg.cn/img_convert/8e8939218e0092a72f18cca4837674f1.png)
![img](https://img-blog.csdnimg.cn/img_convert/8df2d4ef3f13f72a6a6e098326472f0a.png)

**[如果你需要这些资料,可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**

ttps://bbs.csdn.net/topics/618679757)**

**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值