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 2.4 运行
后端程序启动后，直接打开浏览器输入后端程序所在电脑/服务器 ip:端口号+html路径即可。
本文中所写html路径为/则直接ip:端口号即可，例如127.0.0.1:58030
尾声总结
AMIS使用体验很不错，使用者不需要过多掌握前端的知识，能节约很多开发时间，而且一直在持续更新，本文只能作为入门介绍，更多组件使用还是直接去看官方文档，可以直接查看json结构，很多示例都可以拿来直接用。
文中定有不足之处，恳请指出，大家一起加油相互学习。