This minimalist front and rear end separation application cannot be missed
This is a minimalist code demonstration that uses KOA Web services to render a static page of a website.
System components
List of files for the front-end service:
"Koa" : "tokens ^ 2.13.1", "koa - the router" : "^ 10.0.0", "koa - static" : "^ 5.0.0"Copy the codeJust copy 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": "Tokens ^ 2.13.1"."koa-router": "^ 10.0.0"."koa-static": "^ 5.0.0"}}Copy the codeApp.js Application entry code
const koa = require('koa');
const serve = require('koa-static');
const path=require('path');
// Start koA Web service
const app = new koa()
// Load the static page
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);
Copy the codeStart a koA service and use the koA-static middleware to render static files in the static folder of the current application. By default, the index. HTML home page will be loaded.
Ok, next. Develop our UI site.
The UI site
Write index. HTML
The following code mainly uses AXIos and a getProduct.js. When the home page loads, getProduct.js will get the backend product service display product.
<html>
<head>
<title>Lei Xuecheng -UI FrontendSerivce</title>
</head>
<body>
<h1>This is a pre - and post-segment separation application!</h1>
<h2>Back-end data display: "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>
Copy the codeNext up is getProducts.js
The internal use axios calls the products and services (third party service) interface (http://localhost:8081/products), then respectively according to the request is successful and failure state wrote div id as the “result”.
A successful invocation of a third-party service is displayed on a green background, and a failure is displayed on a red background.
Here’s the point: in complex Web applications, there are many JS like getProducts that interact with multiple interfaces on the back end and then feed back updates to the UI layer. This is true for Angular/React/Vue.
function $(id){
return document.getElementById(id)
}
function handleOnData(data){
$('result').innerHTML = '<div style="background:green">'
+ JSON.stringify(data)
+ '</div>'
}
function handleOnError(msg){
$('result').innerHTML = '<div style="background:red">'
+ JSON.stringify(msg)
+ '</div>} // Third party interface (product service interface) // Code implementation: https://blog.csdn.net/geeklevin/article/details/109403172 var api = 'http://localhost:8081/products' console.log('will get products from api:' , api); axios.get(api) .then(function (response) { handleOnData(response.data); }) .catch(function (error) { console.log(error); HandleOnError (' Back-end service offline! '); });Copy the codeBack-end product service implementation code
Please copy: NodeJS Backend Development 03 using the Restify development API for a full CRUD, change the port to 8081, and refer to this article to launch.
Results demonstrate
UI startup commands are as follows. The left side of the two figures below shows the UI service home page, and the right side shows the status of opening the product service interface browser.
Nodeapp.js # Start UI service.Copy the codeStart the backend service (no longer accessible on the right), and the LEFT UI site displays JSON data for the product!
UI readers can draw even more beautiful ones, so let your imagination run wild.
Thinking summary
Front-end separation is more of a manifestation of web applications under the broad principles of decoupling.
Like Swing, Qt or C#UI in the past, you can also apply this idea. Seamlessly integrate the interface/page with the back-end code using the Web API. This also allows for technical heterogeneity (Web service NodeJS, Springboot/PythonDjango on the back end, etc.), which is very flexible without causing the architecture to be too discrete.
Front and back separation is an industry standard!
After reading this article, have you learned it? Try doing it yourself, using a familiar technology, or have a friend or two develop a separate service as described in this article, integrate it, and discuss it with each other.
I hope the readers fully understand and grasp the point.
To learn more about NodeJS, check out the NodeJS column from the Lei School Committee