AMIS + httplib 快速搭建前后端
本人毫无前端编程经验，只会用C++写一些简单代码，因此想要从头开发一个简单的前端web，从头学html、css、vue……算了，直接放弃。那有没有其他办法呢？答案是有，因此才有了本文。本文适用人群：无前端开发经验、会C++进行，需求简单...............
·
AMIS + httplib 快速搭建前后端
1. 简介
本人毫无前端编程经验，只会用C++写一些简单代码，因此想要从头开发一个简单的前端web，从头学html、css、vue……算了，直接放弃。那有没有其他办法呢？
答案是有，因此才有了本文。
本文适用人群：无前端开发经验、会C++进行，需求简单
1.1 AMIS简介
AMIS是百度的一个低代码前端框架，整个框架开源，使用 JSON
配置来生成页面，不需要懂前端代码，只需要会根据需求配置不同json文件即可。
当然，如果你不了解json格式的文件，建议稍微花几分钟时间学习下，很简单。
另外，百度对于AMIS的使用文档也写的十分详尽，入门后直接看官方文档是很有必要的。
AMIS开源库地址：
amis: 低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率 (gitee.com)
1.2 httplib开源库
httplib库是C++的开源库，简单使用及介绍可参考我另外一篇文章：
httplib库的使用(支持http/https)（一）_秋杪的博客-CSDN博客_httplib
2. 快速使用
2.1 AMIS环境搭建
AMIS有两种使用方法，我在此采用简单的JS SDK方式，这个方式不需要了解前端方面的知识。
SDK包下载地址：Releases · baidu/amis · GitHub
直接下载最新版的 sdk.tar.gz 即可，然后将其解压即可。
2.2 创建一个登陆页面
通过以上步骤我们实际上已经将前端所需环境搭建好了，接下来可以进行页面的开发了。以一个简单登陆界面为例，新建一个登陆页面的 login.html文件，放在sdk解压的目录下，如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>登录界面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="sdk.css" />
<link rel="stylesheet" href="helper.css" />
<link rel="stylesheet" href="iconfont.css" />
<link rel="shortcut icon" href="login.ico">
<!-- 这是默认主题所需的，如果是其他主题则不需要 -->
<!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
<!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
<!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
<style>
html,
body,
.app-wrapper {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script src="sdk.js"></script>
<script type="text/javascript">
(function () {
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
"type": "page",
"title": "",
"style": {
"textAlign": "center",
"fontWeight": "normal",
"backgroundImage": "login.jpg"
},
"regions": [
"body",
"toolbar"
]
"toolbar": [
]
};
let amisScoped = amis.embed('#root', amisJSON);
})();
</script>
</body>
</html>
看不懂html不要紧，只需要关注以下几个地方：
<title>登录界面</title> <!-- 这是页面的标题，可根据实际需求修改 -->
<link rel="shortcut icon" href="login.ico"> <!-- 这是页面的图标，将ico图标文件一同放在sdk解压目录内即可 -->
接下来是let amisJSON这个字段，这个实际上就是我们搭建页面所需要编辑的json格式的字段，整个字段实际就是一个json文件。而且，针对这个json格式文件，AMIS还提供了可视化编辑，地址为：AMIS编辑器
可以利用编辑器来简单修改json，不过编辑器提供的功能也有限，有一些组件的属性只能通过json来自己配置。不过也可以将自己编辑好的json放到编辑器中查看效果。
在上述json中，只是简单的添加了一个页面 “type”: “page”，然后将页面背景设为了"login.jpg"这张图片，大家可以根据自己需求来设置，最后只需将图片素材与html一起放到sdk解压的目录(实际上所有素材都是如此操作)下即可。
好了，将上述html直接用浏览器打开，是否看到效果了？很神奇吧，一个简单的页面就完成了。
2.3 利用httplib搭建简单的后端
很多时候，我们的html运行环境是在服务器上的，使用者并不能像我们上面那样直接去找到html打开，而是通过浏览器输入网址来打开页面的。为了达到这种效果，就需要我们自己开发一个http服务端的后台程序了。
服务端http程序如下，将html所需资源利用Get来供客户端拉取
#include <string>
#include <stdint.h>
#include <sys/time.h>
#include <vector>
#include <map>
#include "stdio.h"
#include <iostream>
#include <algorithm>
#include "httplib.h"
#include <unistd.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <sys/wait.h>
#include <dirent.h>
#include <fstream>
#include <sys/statfs.h>
//读文件
uint64_t sz_read_file(const std::string &path, std::string &out)
{
std::ifstream fs(path, std::ios_base::binary);
fs.seekg(0, std::ios_base::end);
uint64_t size = fs.tellg();
fs.seekg(0);
out.resize(static_cast<size_t>(size));
fs.read(&out[0], static_cast<std::streamsize>(size));
fs.close();
return size;
}
int main()
{
int listen_port = 58030; //可根据需要自己设置
httplib::Server svr;
svr.set_read_timeout(5, 0); // 5 seconds
svr.set_write_timeout(5, 0); // 5 seconds
svr.set_idle_interval(0, 100000); // 100 milliseconds
//在此处添加服务端内容即可
//web 资源//
//主html文件 sdk.css、helper.css、iconfont.css 这三个如果使用上述html模板则必须要有，其余根据自己需求添加
//html
svr.Get("/", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/login.html", body); //路径可根据实际情况来写
res.set_content(body, "text/html");
});
//字体 ontawesome icon等资源
svr.Get("/thirds/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/thirds/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf", body);
res.set_content(body, "font/ttf");
});
svr.Get("/thirds/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/thirds/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2", body);
res.set_content(body, "font/woff2");
});
svr.Get("/thirds/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/thirds/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf", body);
res.set_content(body, "font/ttf");
});
svr.Get("/thirds/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/thirds/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2", body);
res.set_content(body, "font/woff2");
});
svr.Get("/thirds/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/thirds/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf", body);
res.set_content(body, "font/ttf");
});
svr.Get("/thirds/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/thirds/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2", body);
res.set_content(body, "font/woff2");
});
svr.Get("/thirds/@fortawesome/fontawesome-free/webfonts/fa-v4compatibility.ttf", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/thirds/@fortawesome/fontawesome-free/webfonts/fa-v4compatibility.ttf", body);
res.set_content(body, "font/ttf");
});
svr.Get("/thirds/@fortawesome/fontawesome-free/webfonts/fa-v4compatibility.woff2", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/thirds/@fortawesome/fontawesome-free/webfonts/fa-v4compatibility.woff2", body);
res.set_content(body, "font/woff2");
});
//css
svr.Get("/sdk.css", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/sdk.css", body);
res.set_content(body, "text/css");
});
svr.Get("/helper.css", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/helper.css", body);
res.set_content(body, "text/css");
});
svr.Get("/iconfont.css", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/iconfont.css", body);
res.set_content(body, "text/css");
});
svr.Get("/sdk.js", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/sdk.js", body);
res.set_content(body, "application/javascript");
});
//图标资源
svr.Get("/login.ico", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/login.ico", body);
res.set_content(body, "image/x-icon");
});
svr.Get("/login.jpg", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/login.jpg", body);
res.set_content(body, "image/jpeg");
});
svr.Get("/charts.js", [&](const httplib::Request &req, httplib::Response &res)
{
std::string body;
sz_read_file("..路径/charts.js", body);
res.set_content(body, "application/javascript");
});
svr.listen("0.0.0.0", listen_port);
}
2.4 运行
后端程序启动后，直接打开浏览器输入后端程序所在电脑/服务器 ip:端口号+html路径即可。
本文中所写html路径为/则直接ip:端口号即可，例如127.0.0.1:58030
尾声总结
AMIS使用体验很不错，使用者不需要过多掌握前端的知识，能节约很多开发时间，而且一直在持续更新，本文只能作为入门介绍，更多组件使用还是直接去看官方文档，可以直接查看json结构，很多示例都可以拿来直接用。
文中定有不足之处，恳请指出，大家一起加油相互学习。
前往低代码交流专区
更多推荐
17
0- 0
已为社区贡献1条内容
所有评论(0)