收集整理了一份《2024年最新物联网嵌入式全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升的朋友。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事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行业感兴趣的新人**
**都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**