太原理工-实验五

1、本科实验课程名称：Android 基础实验项目： 使用 Cordova+ionic+vue+JSP实现 Hybride 模式下简单的登陆操作 实验地点：青软实训专业班级：1334 班学号： 2013005653学生：指导教师：2016 年11 月 7 日实验五 使用 Cordova+ionic+vue+JSP 实现 Hybride 模式下简单的登陆操作一、实验步骤1、并安装 Node.js2、打开npm 输入以下命令：npm install -g cordova回车3、等待网络并安装Cordova4、安装成功后继续输入以下命令：npm install -g cordova ionic回车5、等

2、待网络并安装ionic6、安装成功继续输入以下命令：ionic start LoginDemo cd LoginDemoionic platform add android/创建项目/进入项目目录/添加 android7、打开 android studio 并将 LoginDemo 导入目录结构如下图：8、vue.js 并将其导入到工程中9、修改代码二、部分代码index.html（框架搭建后默认 app 启动页面，因实验功能只需完成登陆操作，故此页不动，仅将其改为登陆成功页面）login.html（登陆页面，启动页面）登录页面bodybackground: #ebebeb;font-fami

3、ly: Helvetica Neue,Hiragino Sans GB, YaHei,9ED14F53,Arial,sans-serif;color: #222;font-size: 12px;*padding: 0px;margin: 0px;.top_divbackground: #008ead;width: 100%;height: 400px;.iptborder: 1px solid #d3d3d3;padding: 10px 10px;width: 290px;border-radius: 4px;padding-left: 35px;-webkit-box-shadow: ins

4、et 0 1px 1px rgba(0,0,0,.075);box-shadow: inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition: border-colorease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadowease-in-out .15s;transition: border-color ease-in-out .15s,box-shadowease-in-out .15s

5、.ipt:focusborder-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8pxrgba(102,175,233,.6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8pxrgba(102,175,233,.6).u_logobackground: url(img/username.png) no-repeat;padding: 10px 10px; ition: absolute;top: 43px;left: 4

6、0px;.p_logobackground: url(img/password.png) no-repeat;padding: 10px 10px; ition: absolute;top: 12px;left: 40px;atext-decoration: none;.toubackground: url(img/tou.png) no-repeat;width: 97px;height: 92px;position: absolute;top: -87px;left: 140px;.left_handbackground: url(img/left_hand.png) no-repeat;

7、width: 32px;height: 37px;position: absolute;top: -38px;left: 150px;.right_handbackground: url(img/right_hand.png) no-repeat;width: 32px;height: 37px;position: absolute;top: -38px;right: -64px;.initial_left_handbackground: url(img/hand.png) no-repeat;width: 30px;height: 20px;position: absolute;top: -

8、12px;left: 100px;.initial_right_handbackground: url(img/hand.png) no-repeat;width: 30px;height: 20px;position: absolute;top: -12px;right: -112px;.left_handingbackground: url(img/lefnding.png) no-repeat; width: 30px;height: 20px; ition: absolute;top: -24px;left: 139px;.right_handingingbackground: url

9、(img/right_handing.png) no-repeat;width: 30px;height: 20px; ition: absolute;top: -21px;left: 210px;$(function()/得到焦点$(#password).focus(function()$(#left_hand).animate(left: 150,top: -38,step: function()if(parse($(#left_hand).css(left)140)$(#left_hand).attr(class,left_hand);, 2000);$(#right_hand).animate(right: -64,top: -38px,step: function()if(parse($(#right_hand).css(right) -70)$(#right_hand).attr(class,right_hand);, 2000););/失去焦点$(#password).blur(function()$(#left_hand).attr(class,initial_left_hand);Jquery-1.9.1.min.js多，故不再此贴出）（实现登陆框动态效果，代码量$(#left_