-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
96 lines (94 loc) · 4.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
<title>AliceSPA</title>
<link rel="shortcut icon" href="images/logo.png" >
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="js/run_prettify.js?autoload=true&skin=sunburst"></script>
</head>
<body style="font-size:17px;">
<div style="text-align:center;background:#eeeeee;padding-bottom:1em;padding-top:4em;">
<img src="images/logo.png" style="width: 22em;">
<span style="display:inline-table">
<img src="images/BSPText.jpg">
<p>
<a class="btn btn-lg" style="border: solid;" href="https://github.com/TeamUnfinite/AliceSPA" target="blank" >AliceSPA on Github</a>
<a class="btn btn-lg" style="border: solid;" href="https://github.com/TeamUnfinite/AliceSPA/wiki" target="blank" >Documents</a>
</span>
</div>
<div style="background:#fefece;padding-bottom:1em;">
<div class="container" style="text-align:center;">
<h1 style="font-size:3em;">What is AliceSPA?</h1>
AliceSPA is an framework for building beautiful, simple and powerful single page applications. A backend server and a frontend client have been implemented with some basic functions, such as account system, role authentication, captcha, direct database accessing. AliceSPA have a protocol for communications between server and client, and do every thing quiet. There are also some extensions of AngularJS for quickly developing your application. Some knowledge of basic libraries is required. Slime framework and medoo are used in backend, AngularJS 1.x is used in client.
<p>
<div class="row" style="text-align: initial;">
<div class="col-sm-12">
<pre class="prettyprint">
//Server PHP
utils::secureRoute(
$app->post('/api/product','\Your\NameSpace\ProductController:handle'),//Register your API url and set a method to handle it.
['productManager','admin'],//Current user must have these roles.
'image',//Current request must have correct image captcha.
['product' => ['select','update','delete','insert']]//Client can directly access specified database table and actions under this API.
);
</pre>
</div>
<div class="col-sm-12">
<pre class="prettyprint">
//Client JavaScript
angular.ASPAModule('app',['AliceSPA'])//AliceSPA extend AngularJS with new features.
.run(['ASPADirectDatabaseService','ASPAAPIProtocolService','ASPADirectiveHandleService',function(ASPADirectDatabaseService,ASPAAPIProtocolService,ASPADirectiveHandleService){//Inject AliceSPA services.
ASPADirectDatabaseService.select('/api/product','product','*',{'create_date[>]':'2016-09-04 15:36:00'})//SELECT * FROM product WHERE create_date > "2016-09-04 15:36:00"
.then(
function(successData){
},
function(failureErrors){
}
);
var imageCaptchaId = ASPADirectiveHandleService.getASPACaptchaImageHandle('myHandle').id;//Get handle with dynamic generated method.
var options = ASPAAPIProtocolService.makeImageCaptchaOptions(null,imageCaptchaId,'captchaCode');//Fill in addons.
ASPAAPIProtocolService.post('/api/product/add',{'name':'productName','price':23},null,options).then(//Send request and AliceSPA will check roles and captcha.
function(successData){
},
function(failureErrors){
}
);
}]);
</pre>
</div>
<div class="col-sm-12">
<pre class="prettyprint" id="htmlCode">
</pre>
<script>//<![CDATA[
(function () {
document.getElementById("htmlCode").innerHTML = '<!--Client HTML-->\n<aspa-captcha-image aspa-handle="myHandle"></aspa-captcha-image>'.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
})();
//]]>
</script>
</div>
</div>
</div>
</div>
<div style="background:#eeeeee;padding-bottom:1em;">
<div class="container" style="text-align:center;">
<h1 style="font-size:3em;">Free</h1>
AliceSPA is licensed under the MIT license.
</div>
</div>
<div style="background:#fefece; padding-bottom:1em;">
<div class="container" style="text-align:center;">
<h1 style="font-size:3em;">Contributors</h1>
<div class="row">
<div class="col-sm-3">
<h3>ruojianll</h3>
<div>E-MAIL: <a href="mailto:[email protected]">[email protected]</a></div>
<div>E-MAIL: <a href="mailto:[email protected]">[email protected]</a></div>
</div>
<div class="col-sm-3">
<h3>MengXiangXiX</h3>
<div>E-MAIL: <a href="mailto:[email protected]">[email protected]</a></div>
</div>
</div>
</div>
</div>
</body>
</html>