开发背景：Appcan + wampserver，其中wampserver主要用于提供本地服务器和数据库。
这是软件开发工程这门课中的一个大作业，需要实现：
1）首页(index.html),首页包含：滚动图片，新闻列表和导航栏，首页内容通过Request模块从服务端获取数据显示；
2 ) 登录页面（login.html），实现用户登录，根据学号和密码；（用户未登录时显示）
3 ) 用户信息页面(user.html)，显示用户的详细信息和用户的已修的课程信息（课程名、成绩、学分等）；（用户已经登录时显示）
4）新闻展示页面(newsdetail.html)，显示详细的新闻，新闻数据出入数据库，通过Request模块异步获取；
5) 新闻统计页面(newsstatis.html)，通过uexChart插件绘制饼图，显示各类新闻的占比。
6) 设计所需的数据库表，并将表结构导出提交。
这里主要记录一下自己实现过程中使用到的一些东西。
一、Appcan
1、页面框架
使用Appcan提供的AppCan页面（IDE：文件->新建->AppCan页面），修改html和js文件。
2、重要函数
appcan.ready(function(){
//大括号中的代码在加载页面前会执行，因此需要在html中展示的数据，可以在这里先加载。
})：
appcan.window.open({
name:'index', //页面名称，如果data打不开，则新建一个
data:'index.html', //打开的新页面
aniID:10 //过场动画
})
appcan.button("#main","ani-act",function(){ //按钮，main是html中按钮的id
appcan.window.open({
name:'index',
data:'index.html',
aniID:10
})
}) //这里实现的是，按后跳转到index.html页面
appcan.request.ajax({
url : "http://localhost/ConnectUsage.php", //php文件路径
type : "POST", //传输方式POST/GET
data : { //传输数据
id : id,
pwd : pwd
},
dataType : 'json', //接收数据格式html/json
success:function(data,status,xhr){
//连接成功执行
},
error:function(xhr,status,errMessage,msg){
//连接失败执行
}
});
3、debug的两种方式：提示框和控制台
（1）提示框
alert("我在这里！"); //也可以输出变量
appcan.window.openToast("账户或密码有误！","3000",5,0);
（2）控制台：会显示代码的语法错误，通过下列语句将信息打印在控制台中，检查代码错误。
console.log(num);
二、Ajax请求
异步服务器调用。只要是在单个Web页面的上下文之内进行服务器调用，而且在加载数据和更新页面的同时，浏览器还允许用户继续互动，就说明这个应用程序是在“使用Ajax”，
在大作业中，主要是在个人登录/新闻展示中用到。个人登录：使用ajax验证账户和密码，正确后返回其他信息并展示在另一个界面中；新闻展示：通过主页点击新闻的label，返回并展示相应的新闻内容。ajax的大概过程如下：
- Js文件发出ajax请求，通过ajax中的url访问php文件，并将ajax中的data传送到php文件。
- php文件获得数据后，连接数据库，通过sql语句访问数据库并获得所需数据，之后将获得数据整理为json/html格式，echo该数据，传送回js文件。
- js文件取得json/html格式的数据，整理后，展示在html中，或是存储到本地，用于其他用途。
以登录为例：
1、新建AppCan中的登录页面（见上文），在login.html中获得用户的输入（在appcan页面模板基础上，增加id值）
<input placeholder="学号" id="uid" type="text" class="ub-f1" name="uid">
<input placeholder="密码" id="pwd" type="password" class="umw4 ub-f1" name="pwd">
<div class="button ub ub-ac bc-text-head ub-pc bc-btn uc-a1" id="submit">
登录
</div>
2、login.js中执行ajax：连接php -> 传数据给php -> 接收php传回的数据 -> 将数据存储在本地
# 这里我是用的wampserver，并且将php文件放在www文件下，因此url路径是“http://localhost/ConnectUsage.php”，可以理解为http://localhost指到www文件。
appcan.button("#submit", "ani-act", function() { //按后执行login函数
login();
})
function login(){ //login函数
/*获得html中用户输入的值*/
var id = $("#uid").val();
var pwd = $("#pwd").val();
var name = "";
var sex = "";
var num = 0;
/*格式判断*/
if(id == ""){
appcan.window.openToast('账号不能为空','2000');
return;
}
if(pwd == ""){
appcan.window.openToast('密码不能为空','2000');
return;
}
/*ajax请求*/
appcan.request.ajax({
url : "http://localhost/ConnectUsage.php", //要访问的php文件地址
type : "POST", //POST和GET都可以，要与php文件保持一致，POST传输数据更大
data : { //传输的数据
id : id,
pwd : pwd
},
dataType : 'json', //包括json/html格式，要与php文件保持一致
success:function(data,status,xhr){ //访问成功则执行
if(data.type == "1"){ //账号密码正确
name = data.name;
sex = data.sex;
num = data.number;
var score = data.score;
/*将获取到的数据值进行本地存储，这样其他网页就可以通过appcan.locStorage.getval("xx");获得数据*/
appcan.locStorage.setVal("name",name);
appcan.locStorage.setVal("sex",sex);
appcan.locStorage.setVal("score",score);
appcan.locStorage.setVal("num",num);
appcan.locStorage.setVal("type",data.type);
appcan.window.open({ //跳转到数据展示页面
name:'user',
data:'user.html',
aniID:10
})
}
else{ //账号密码错误
appcan.window.openToast("账户或密码有误！","3000",5,0);
}
},
error:function(xhr,status,errMessage,msg){ //访问失败则执行
appcan.window.openToast("登录失败","3000",5,0);
}
});
}
3、在wampserver的www文件下，建立php文件。ConnectUsage.php中接收json传过来的数据，连接数据库，访问并返回相应的值。
这里我访问了数据库中的两张表，一张是usage，包括用户名、用户密码等；一张是score，包括用户名、课程名、成绩等。
# 将数据以键值的形式存为array格式，然后用json_encode()函数将数据转换为json格式传输
<?php
$username = $_POST['id']; //接收数据，如果ajax中是GET，则这里应是_GET
$password = $_POST['pwd'];
/*连接数据库*/
$conn = mysqli_connect("localhost",
"账户名",
"账户密码",
"数据库名");
$sql = "SELECT * FROM `usage` WHERE `id` LIKE '$username' AND `pwd` LIKE '$password'";
$res = mysqli_query($conn, $sql);
$data = array();
if(!isset($res->lengths)) //账号密码符合
{
$sql2 = "SELECT * FROM `score` WHERE `id` LIKE '$username'";
$res2 = mysqli_query($conn, $sql2);
$data['score'] = array();
$num = 0;
while($row = mysqli_fetch_assoc($res2)){
$num++;
$data['score'][] = $row;
}
$row = mysqli_fetch_assoc($res);
$data['name'] = $row['name'];
$data['sex'] = $row['sex'];
$data['type'] = 1; //标记为1，js通过该返回值判断账号密码适合
$data['number'] = $num;
}
else{ //账号密码不符合
$data['type'] = 0; //标记为0
}
echo json_encode($data); //将数据编码为json格式，并传回js文件
mysqli_close($conn);
?>
4、使用wampserver的phpAdmin建立相应数据库、数据表，并录入要使用的数据。
三、数据展示
通过ajax获得的数据，可以通过appcan.locStorage.setVal()和appcan.locStorage.getVal()在页面之间进行传递。
html中的普通显示，title是html中展示位置的id
<div class="uinn-a6 t-gra4 ulev-app3" id="title"></div>
var name = appcan.locStorage.getVal("name",name);
var sex = appcan.locStorage.getVal("sex",sex);
var str = "姓名： " + name + "\t\t" + " 性别： " + sex;
$("#title").html(str);
表格形式显示
<table id = "score" cellpadding="0" style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">
<tr>
<th scope="col">课程</th>
<th scope="col">学分</th>
<th scope="col">成绩</th>
</tr>
</table>
var str2 = "";
str2 += "<tr><td>" + "课程" + "</td><td>" + "学分" + "</td><td>" + "成绩" + "</td></tr>";
for(var i = 0; i < num; i++)
{
str2 += "<tr><td>" + score[i].course + "</td><td>" + score[i].credit + "</td><td>" + score[i].score + "</td></tr>";
}
$("#score").html(str2);
