标签：
我于去年12月份开始接触apicloud技术，到现在半年有余，期间大约自学了三个月，模仿apicloud官网[http:///www.apicloud.com]的一个实例完成毕业设计。自认为是有收获的。毕竟纯粹是自学，自己基础水平也一般，现在利用此技术在完成一个app的前端，属于刚起步，摸索了两周。现在把自己收获的做个记录和分享，废话不说直接上代码。更多问题欢迎交流，qq：635149113 了解。
我前端最开始是自己写的，用的就是基本的html、css、js 也结合了一些aui框架写的前端
数据库用的官方的云数据库，它有一些数据类型比较特殊，基本的就是String、Number、File、Date、Boolean、Array、Object...我要说的是pointer（一对一）和realation（一对多）。
大概介绍一下pointer（一对一）和realation（一对多）。
pointer（一对一）：就像是一个公民只有一张身份证
realation（一对多）：就像是一个老师可以带多个班、或者说一个人可以有多个小名
学过数据库建过表的人知道这两种关系，重要性也知道，谁的有实际用处的数据库也不可能只有几张完全没关系的表。ok，就是说你用云数据库对数据进行操作是不用自己写后端代码的，具体的在官方文档有提供实例，最强大的有API调试。
前端的东西我用一个很具体的例子写出来。例子中涉及到从数据库中的一张表取值，是以其他一个页面的一个按钮触发的这个事件跳到这个页面，然后根据条件去判断具体显示哪些值。我使用的是dot.js模板。自己百度学习一下。
这里边也涉及了基本的存取值问题，就是从数据库取到值后处理显示到界面还是取值之前进行处理后显示到界面，这是不一样的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> 6 <title>APP</title> 7 <link rel="stylesheet" type="text/css" href="../../css/aui.css" /> 8 <link rel="stylesheet" type="text/css" href="../../css/api.css" /> 9 <style> 10 .aui-text-center{font-size: 14px !important;height: 50px;line-height: 50px;} 11 .box{ 12 display:-webkit-box; 13 display: -moz-box; 14 -webkit-box-orient: horizontal; 15 -moz-box-orient: horizontal; 16 height: 85px; 17 border: 0px solid fuchsia; 18 } 19 .box div img{width: 60px;border: 0px solid darkblue;} 20 .box div:nth-of-type(2){-webkit-box-flex:6;border: 0px solid teal;height: 86px;margin: 0px 5px;} 21 .aui-content-padded{margin-bottom:0px;margin-top: 10px;} 22 .aui-content-padded ul li div .imgLeft{position: relative;} 23 .aui-content-padded ul li div .imgLeft + span{border: 0px solid #00FFFF;position: absolute;height: 20px;width: 60px;font-size: 12px;text-align: center;} 24 .aui-content-padded ul li div .mName{margin-bottom:8px;float:left;text-align: left;color: black;border: 0px solid red;width: 65%;} 25 .aui-content-padded ul li div .text-left{text-align: left;font-size: 12px;} 26 .aui-content-padded ul li div .aui-ellipsis-2 {-webkit-line-clamp: 3;clear: both;} 27 hr{height: 1px;border:none;border-top: 1px solid #cccccc;margin-top: 15px;} 28 .box div:nth-of-type(1) span{color: #99bbff;} 29 .aui-content-padded ul li div .judge{color: #ff8585;margin-bottom:8px;border: 0px solid lawngreen;text-align: right;} 30 .bo{border: 0px solid darkblue;text-align: center;} 31 </style> 32 </head> 33 <body> 34 <p class="bo aui-ellipsis-2" id="headText">每一勋章，当天只可授予1次；每天，最多可授予3枚勋章</p> 35 <div class="aui-content-padded test"> 36 <ul> 37 <script id="awardMedal-template" type="text/x-dot-template"> 38 {{ for(var i=0;i<it.length;i++){ }} 39 <li class="box"> 40 <div class=""> 41 <img class="imgLeft" src="{{=it[i].img.url}}" /> 42 <span>{{=it[i].habit}}</span> 43 </div> 44 <div class="aui-text-left aui-padded-5"> 45 <p class="mName">{{=it[i].medalName}}</p> 46 <!--描述：此处需要进行判断具体显示哪一个 --> 47 {{if(it[i].medalNum>0){}} 48 <p class="judge">今天已授予</p> 49 50 {{ }else{ }} 51 <input class="judge aui-pull-right aui-radio aui-radio-info" type="radio" name="demo"> 52 {{}}} 53 <p class="aui-ellipsis-2 text-left">{{=it[i].getMedalDue}}</p> 54 </div> 55 </li> 56 <hr class="aui-padded-10"/> 57 {{ } }} 58 </script> 59 <li id="awardMedal"></li> 60 </ul> 61 </div> 62 63 64 </body> 65 <script type="text/javascript" src="../../script/api.js"></script> 66 <script type="text/javascript" src="../../script/common.js"></script> 67 <script type="text/javascript" src="../../script/doT.min.js"></script> 68 <script type="text/javascript"> 69 70 apiready = function() { 71 awardWall(); 72 api.setRefreshHeaderInfo({ 73 visible: true, 74 loadingImgae: ‘wgt://image/refresh-white.png‘, 75 bgColor: ‘#f2f2f2‘, 76 textColor: ‘#4d4d4d‘, 77 textDown: ‘下拉刷新...‘, 78 textUp: ‘松开刷新...‘, 79 showTime: true 80 }, function(ret, err) { 81 awardWall(); 82 api.refreshHeaderLoadDone(); 83 }); 84 85 api.addEventListener({ 86 name: ‘scrolltobottom‘ 87 }, function(ret, err) { 88 awardWall(); 89 }); 90 91 } 92 93 94 function awardWall() { 95 var urlParam1 = { 96 "where":{"medalName":{"ne":"更多勋章"}},"skip":0 97 }; 98 var awardMedal = ‘/medal?filter=‘; 99 ajaxRequest(awardMedal + JSON.stringify(urlParam1), ‘GET‘, ‘‘, function(ret, err) { 100 if(ret) { 101 // alert(JSON.stringify(ret)); 102 // alert(typeof(JSON.stringify(ret))); //string 103 // alert(typeof(ret)); //object 104 // alert(JSON.stringify(ret[5].medalNum)); 105 var content1 = $api.byId(‘awardMedal‘); 106 var tpl1 = $api.byId(‘awardMedal-template‘).text; 107 var tempFn1 = doT.template(tpl1); 108 109 var allMedal = 0; 110 for (var i = 0; i < ret.length; i++) { 111 allMedal += ret[i].medalNum; 112 } 113 if(allMedal==3){ 114 //只能显示已经授予的三个，或者是medalNum>0的 115 //将得到的ret再次筛选，取出medalNum>0的全部数据，放到ret1 116 var ret1 = []; 117 for (var i = 0; i < ret.length; i++) { 118 if(ret[i].medalNum>0){ 119 ret1.push(ret[i]); 120 } 121 } 122 var headText = document.getElementById("headText").innerHTML=‘真厉害！孩子在今天已经获得了3枚习惯勋章，不可获得更多了哦~真厉害！孩子在今天已经获得‘; 123 content1.innerHTML = tempFn1(ret1); 124 }else if(allMedal<3){ 125 //全部显示，其中未授予过的是单选按钮，而且加上已经授予的总和不能大于3 126 content1.innerHTML = tempFn1(ret); 127 }else{ 128 //do nothing 129 } 130 } else { 131 api.alert({ 132 msg: err.msg 133 }); 134 } 135 api.hideProgress(); 136 }) 137 } 138 139 </script> 140 141 </html>
我的数据库如下，这是我从云端导出的,是后缀为.json的文件
1 {"_id":{"$oid":"578c7ebf2348b7f9487e3b42"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/52ff744cc0a02c8ab5e9b70699502a4d.jpg","name":"medal01.jpg","id":"578c7ebf8339749c49a6d472"},"createdAt":{"$date":"2016-07-18T07:01:19.769Z"},"updatedAt":{"$date":"2016-07-20T06:56:13.136Z"},"medalName":"思考勋章","habit":"行动习惯","getMedalDue":"连续七天，每天用20~30连续七天，每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择，你们是最棒的啊！","medalNum":0} 2 {"_id":{"$oid":"578c7eca2348b7f9487e3b4f"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/8330f4e73acf4fb70f6c36e5b2c1aa38.jpg","name":"medal02.jpg","id":"578c7eca2348b7f9487e3b4e"},"createdAt":{"$date":"2016-07-18T07:01:30.349Z"},"updatedAt":{"$date":"2016-07-20T03:19:49.412Z"},"medalName":"探险勋章","habit":"兴趣习惯","getMedalDue":"连续七天，每天用20~30连续七天，每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择，你们是最棒的啊！","medalNum":0} 3 {"_id":{"$oid":"578c7ed2dcad32dc7129e42c"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/5746e258841d92f48c52e6e30fecd05b.jpg","name":"medal03.jpg","id":"578c7ed28339749c49a6d47c"},"createdAt":{"$date":"2016-07-18T07:01:38.432Z"},"updatedAt":{"$date":"2016-07-20T07:10:54.237Z"},"medalName":"阅读勋章","habit":"交友习惯","getMedalDue":"连续七天，每天用20~30连续七天，每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择，你们是最棒的啊！","medalNum":1} 4 {"_id":{"$oid":"578c7ed7f78b9b494aeb67c5"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/8330f4e73acf4fb70f6c36e5b2c1aa38.jpg","name":"medal02.jpg","id":"578cc66c4a2810821723bf41"},"createdAt":{"$date":"2016-07-18T07:01:43.264Z"},"updatedAt":{"$date":"2016-07-20T03:19:43.172Z"},"medalName":"作业勋章","habit":"生活习惯","getMedalDue":"连续七天，每天用20~30连续七天，每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择，你们是最棒的啊！","medalNum":0} 5 {"_id":{"$oid":"578c7edc8339749c49a6d483"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/c8f1a1a7d9ae437300e7ccac00e7a0fb.jpg","name":"medal05.jpg","id":"578c7edc8339749c49a6d482"},"createdAt":{"$date":"2016-07-18T07:01:48.978Z"},"updatedAt":{"$date":"2016-07-20T06:53:29.724Z"},"medalName":"勤劳勋章","habit":"卫生习惯","getMedalDue":"连续七天，每天用20~30连续七天，每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择，你们是最棒的啊！","medalNum":1} 6 {"_id":{"$oid":"578c7ee22348b7f9487e3b5a"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/0a1e5c08fdfc58f75eb8746d89e89f0a.jpg","name":"medal06.jpg","id":"578c7ee2f78b9b494aeb67ca"},"createdAt":{"$date":"2016-07-18T07:01:54.150Z"},"updatedAt":{"$date":"2016-07-19T08:22:22.886Z"},"medalName":"独立勋章","habit":"学习习惯","getMedalDue":"连续七天，每天用20~30连续七天，每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择，你们是最棒的啊！","medalNum":0} 7 {"_id":{"$oid":"578c7ee7f78b9b494aeb67cc"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/ad32b55e9e2ea46bd6b52ad46620841f.jpg","name":"medal07.jpg","id":"578c7ee72348b7f9487e3b5c"},"createdAt":{"$date":"2016-07-18T07:01:59.636Z"},"updatedAt":{"$date":"2016-07-20T05:31:55.975Z"},"medalName":"持之以恒勋章","getMedalDue":"连续七天，每天用20~30连续七天，每天用20~30分钟陪着孩子阅读书籍书籍可以由父母或者孩子选择，你们是最棒的啊！","habit":"行动习惯","medalNum":1} 8 {"_id":{"$oid":"578c82762348b7f9487e3d4c"},"img":{"url":"http://a3e6b86719cc7b60664a.b0.upaiyun.com/apicloud/612b57d32bf57643cfe995113a9ce6d0.jpg","name":"medal08.jpg","id":"578c82762b69092010030805"},"medalName":"更多勋章","createdAt":{"$date":"2016-07-18T07:17:10.154Z"},"updatedAt":{"$date":"2016-07-19T10:52:28.860Z"},"medalNum":0}
里边还涉及到几个js文件以及css,直接放到你本地是不能运行的。只是逻辑和基本的方法留个笔记。欢迎交流。
标签：
原文地址：http://www.cnblogs.com/zlj1027/p/5689253.html
