# SatWeb

SatWeb框架将H5和传统的CS程序融合，集成了登录、用户管理、菜单管理、权限管理等模块。集成了百度低代码前端框架amis (opens new window),支持自定义JSON完成界面配置和功能，实现了低码平台。支持集成CS程序，CS程序可以由PB,Delphi,C#,VB等语言开发，通过提供的组件，将CS运行在html5框架的tab中。解决了传统CS开发界面不美观，升级困难等问题。

特性

主体是纯H5页面，运行在浏览器中
用户无需了解html、css, 通过配置就可以快速开发BS
支持集成H5DWSatReport, 实现用户自定义复杂表单和报表
通过H5DW实现数据窗口转为html5
方便快速将现有的CS程序Web化

借助SatRDA提供的强大的插件功能，可以很容易实现跨平台的前端和后台的开发。

# 下载地址：

群文件下载 SatRDA_V2021XXXX

QQ群：345559891
Delphi开发群：374683171

# 老版本说明

老版本文档

# 界面预览

# 在线演示

http://www.satrda.com:5555/webui (opens new window)

# 开始使用

下载最新版本并解压
进入server目录，双击satserver.exe运行
SQLServer中建立数据库erp,并执行建表脚本(目录：satweb/sqlserver.sql,如需要示例的demo表和数据，执行satweb/alldemo.sql)
进入SatRDA后台的连接管理界面修改名为erp的连接，使其指向新建立的库，并测试连接通过
打开浏览器，输入 http://127.0.0.1:5555/webui (opens new window), 可以看到效果

# SatWeb配置

通过SatRDA后台配置配置SatRDA插件
点击插件管理,可以看到webui和erp两个插件其中webui插件是SatWeb的H5界面，类型是h5，提供浏览器看到的全部html5界面。其中Dir为web/dist表示文件夹为plugins/web/dist, 也可以通过satserver打包功能把框架html5全部打包成了一个文件。
其中erp为框架提供webapi,这里类型是js插件，用js实现了webapi，也可以使用pb,delphi等实现。js实现webapi的好处是可以跨平台，支持linux运行。
更详细了解js和h5插件可以参考satrda插件
通过修改配置文件satrda.config.js路径plugins/web/dist/data/satrda.config.js可以修改程序名称，调用的api地址等

(function(){
    window.baseConfig = {
        "title":"SatWeb框架",
        "webapp":"test",
        "api":"/erp",
        "debug":false,
        "index":"/data/page/index.js",
    }
})();

提示: title设置显示名称为SatWeb框架,index表示框架首页会加载/data/page/index.js的配置界面。

# 自定义框架显示菜单

示例中框架的菜单如下：
menu

该菜单可以通过SatWeb提供的菜单管理、角色管理和用户管理进行配置，会根据登录的用户显示不同的菜单。

# 后台JS脚本

框架的后台api都是通过SatRDA的JS脚本实现的，JS脚本代码在路径 server/plugins/erp 中。用户可以通过把 server/plugins/erp 导入HBuilder中进行修改和调试。导入后如图：

# 调试页面

双击index.html进入该页面,页面代码如下：

<body>
	<script src="satrda.min.js"></script>
	<script src="dw.bundle.js"></script>
	<script src="util.js"></script>
	<script src="erp.js"></script>
	<script src="app.js"></script>
	<script src="role.js"></script>
	<script src="user.js"></script>
	<script>
		var debug = satrda.debug;
		debug.start("127.0.0.1:5555","erp");
	</script>
</body>

页面代码中把js脚本都加入了，其中satrda.min.js放在第一个
通过语句debug.start("127.0.0.1:5555","erp")指定调试本机的erp插件
可以通过修改"127.0.0.1:5555"连接到远程的服务端，如："www.mytest.com:5555"
点击右上角预览按钮后HBuilder会打开该网页，网页会执行 debug.start("127.0.0.1:5555","erp") 开始调试
HBuilder调试方法可以参考HBuilder调试js插件

# 后台WebAPI实现

框架后台API通过SatRDA的JS脚本代码实现。

打开 app.js 主要代码如下:

let app = {
		captchaImage(ctx,r,w) {
			let captcha = satrda.Captcha;
			let data = captcha.create({type:"string",height:40,width:120})
			w.write(data);
		},
		login(ctx,r,w) {
			const data = r.jsonBody;
			const {
				username,
				password,
				code,
				uuid
			  } = data;

			//校验成功
			if (satrda.Captcha.verify(uuid,code.toLowerCase())) {

			} else {
				w.write({code:500,msg:"校验失败"})
				return;
			}

			const db = getDB();
			const userid = db.queryLong(`select user_id from sys_user where user_name = '${username}' and password = '${password}'`);
			if (userid === undefined) {
				w.write({code:500,msg:"登录失败"})
				return;
			} 

			const session = ctx.sessionStart();
			session.set('user',username);
			session.set('userId',userid);
			const token = session.id();
			w.write({code:0,token,msg:"操作成功"})
			
		},
		getInfo(ctx,r,w) {
			const session = ctx.getSession();
			const userId = session.get('userId');
			const userName = session.get('user');
			const user = {userId,userName,avatar:''};
			let roles = Array.from(permissionService.getRolePermission(user));
			let permissions = Array.from(permissionService.getMenuPermission(user));
			w.write({"msg":"操作成功","code":200,user,permissions,roles});

		},
		getRouters(ctx,r,w) {
			const session = ctx.getSession();
			const userId = session.get('userId');
			let list = menuService.selectMenuTreeByUserId(userId);
			let routers = buildMenus(list);
			w.write({code:200,msg:'操作成功',data:routers});		
		},
		logout(ctx,r,w) {
			let data = {msg:"操作成功",code:200};
			w.write(data);
		},
		testdb(ctx,r,w) {
			let db = getDB();
			let value = db.syntaxFromSQL('select id,name, 1 as col1 from test1');
			let ds = new DataStore();
			ds.setTransObject(db);
			ds.dataObject = value;
			ds.retrieve();
			
			ds.setItem(1,"name","jsname1");
			ds.update();
			w.write({count:ds.rowCount()});
			console.log(ds.rowCount());
		}
	}
	
	//将app对象加入到路由中，不同的请求会进入到app中的同名方法,如app中有方法login，则请求api
	// http://127.0.0.1:5555/erp/login 时会进入到该方法
    satrda.Router.all("/erp",app);

其中 satrda.Router.all("/erp",app) 表示将/erp开头的api注册到app对象中，注册后app中的方法会映射为webapi。如getRouters方法的webapi地址为/erp/getRouters，该方法提供了自定义的框架菜单。 app对象中还有一些方法，captchaImage 提供了验证码功能，login提供了用户登录验证。

需要了解更多JS插件内容，可查看 JS插件基本操作和 JS插件高级操作

# 发布脚本

参考 JS插件发布

H5DW →