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解压的目录下，如下：





    
    登录界面

看不懂html不要紧，只需要关注以下几个地方：

登录界面

接下来是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 
#include 
#include 
#include 
#include 
#include "stdio.h"
#include 
#include 
#include "httplib.h"
#include 
#include 
#include 
#include 
#include 
#include 
#include 

//读文件
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));
    fs.read(&out[0], static_cast(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结构，很多示例都可以拿来直接用。

文中定有不足之处，恳请指出，大家一起加油相互学习。

AMIS + httplib 快速搭建前后端

C/C++/C#相关栏目本月热门文章