AMIS + httplib 快速搭建前后端

AMIS + httplib 快速搭建前后端

    • 1. 简介
      • 1.1 AMIS简介
      • 1.2 httplib开源库
    • 2. 快速使用
      • 2.1 AMIS环境搭建
      • 2.2 创建一个登陆页面
      • 2.3 利用httplib搭建简单的后端
      • 2.4 运行
    • 尾声总结

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">
    
    
    
    
    <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">  

接下来是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_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结构,很多示例都可以拿来直接用。
AMIS + httplib 快速搭建前后端_第1张图片

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

你可能感兴趣的:(httplib库的使用,前端,后端,c++,http)