APPCAN + wampserver 实现简单的个人登录功能

最新推荐文章于 2021-09-11 11:26:01 发布

zzl_1998

最新推荐文章于 2021-09-11 11:26:01 发布

阅读量531

点赞数 1

分类专栏： APP 文章标签： appcan ajax

本文链接：https://blog.csdn.net/qq_40731332/article/details/103507037

版权

APP 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

开发背景：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);

zzl_1998

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
APPCAN + wampserver 实现简单的个人登录功能

开发背景：Appcan + wampserver，其中wampserver主要用于提供本地服务器和数据库。这是软件开发工程这门课中的一个大作业，需要实现：1）首页(index.html),首页包含：滚动图片，新闻列表和导航栏，首页内容通过Request模块从服务端获取数据显示；2 ) 登录页面（login.html），实现用户登录，根据学号和密码；（用户未登录时显示）3 ) 用户信...
复制链接

扫一扫