太原理工-實(shí)驗(yàn)五

1、本科實(shí)驗(yàn)課程名稱：Android 基礎(chǔ)實(shí)驗(yàn)項(xiàng)目： 使用 Cordova+ionic+vue+JSP實(shí)現(xiàn) Hybride 模式下簡(jiǎn)單的登陸操作 實(shí)驗(yàn)地點(diǎn)：青軟實(shí)訓(xùn)專業(yè)班級(jí)：1334 班學(xué)號(hào)： 2013005653學(xué)生：指導(dǎo)教師：2016 年11 月 7 日實(shí)驗(yàn)五 使用 Cordova+ionic+vue+JSP 實(shí)現(xiàn) Hybride 模式下簡(jiǎn)單的登陸操作一、實(shí)驗(yàn)步驟1、并安裝 Node.js2、打開(kāi)npm 輸入以下命令：npm install -g cordova回車(chē)3、等待網(wǎng)絡(luò)并安裝Cordova4、安裝成功后繼續(xù)輸入以下命令：npm install -g cordova ionic回車(chē)5、等

2、待網(wǎng)絡(luò)并安裝ionic6、安裝成功繼續(xù)輸入以下命令：ionic start LoginDemo cd LoginDemoionic platform add android/創(chuàng)建項(xiàng)目/進(jìn)入項(xiàng)目目錄/添加 android7、打開(kāi) android studio 并將 LoginDemo 導(dǎo)入目錄結(jié)構(gòu)如下圖：8、vue.js 并將其導(dǎo)入到工程中9、修改代碼二、部分代碼index.html（框架搭建后默認(rèn) app 啟動(dòng)頁(yè)面，因?qū)嶒?yàn)功能只需完成登陸操作，故此頁(yè)不動(dòng)，僅將其改為登陸成功頁(yè)面）login.html（登陸頁(yè)面，啟動(dòng)頁(yè)面）登錄頁(yè)面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()/得到焦點(diǎn)$(#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););/失去焦點(diǎn)$(#password).blur(function()$(#left_hand).attr(class,initial_left_hand);Jquery-1.9.1.min.js多，故不再此貼出）（實(shí)現(xiàn)登陸框動(dòng)態(tài)效果，代碼量$(#left_