• <tr id="yyy80"></tr>
  • <sup id="yyy80"></sup>
  • <tfoot id="yyy80"><noscript id="yyy80"></noscript></tfoot>
  • 99热精品在线国产_美女午夜性视频免费_国产精品国产高清国产av_av欧美777_自拍偷自拍亚洲精品老妇_亚洲熟女精品中文字幕_www日本黄色视频网_国产精品野战在线观看 ?

    基于HTML5的手機(jī)移動(dòng)便利店研究

    2018-04-27 12:27:24
    無線互聯(lián)科技 2018年8期
    關(guān)鍵詞:重置郵箱密碼

    張 弛

    (大連集益物流有限公司,遼寧 大連 116601)

    1 關(guān)鍵技術(shù)和需求分析

    1.1 關(guān)鍵技術(shù)

    1.1.1 jQuery

    jQuery是輕量級(jí)的Javascript庫,兼容CSS3以及各種瀏覽器,包括IE,F(xiàn)F,Safari和Opera等。jQuery使得開發(fā)者更加便捷地處理HTML,events以及實(shí)現(xiàn)動(dòng)畫效果,并且其提供了Ajax的交互功能,方便了網(wǎng)站數(shù)據(jù)庫的操作。jQuery還有一個(gè)最大的特點(diǎn)就是文檔健全,提供許多開發(fā)者熟悉的插件,并且都有很好的交互性。隨著jQuery的不斷發(fā)展,其實(shí)現(xiàn)了HTML頁面代碼與內(nèi)容的分離,即js文件可以通過調(diào)用的形式使用,不用再在代碼中嵌套js代碼。

    jQuery的使用方法很簡便,我們可以登錄jQuery的官方網(wǎng)頁進(jìn)行瀏覽和學(xué)習(xí)。需要引用的js文件可以通過http網(wǎng)址的引用寫入代碼,也可以將js文件下載到項(xiàng)目的目錄下直接使用。

    1.1.2 AJAX

    AJAX即“Asynchronous Javascript And XML”(異步Javascript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。其主要功能是通過后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)溝通,使網(wǎng)頁實(shí)現(xiàn)異步更新。傳統(tǒng)的頁面在更新時(shí),是整個(gè)頁面重新加載,而使用AJAX后,僅是局部的更新。它的這種特性,使得因特網(wǎng)的應(yīng)用程序,能夠更加快捷、友好。

    1.1.3 模塊Store

    APICloud的最大魅力源于其本身所帶有的模塊調(diào)用功能,開發(fā)者將所需功能封裝成一個(gè)個(gè)模塊共享到平臺(tái),其他開發(fā)者若想使用該模塊功能即可引入該模塊,而無需自行敲打代碼完成功能的實(shí)現(xiàn)。這樣不僅提高了效率,縮短開發(fā)周期,減少了許多不必要的操作,而且也開動(dòng)眾多開發(fā)者的大腦,共同開發(fā)出多樣的功能模塊,不斷完善和提高系統(tǒng)的性能。APICloud自身封裝了一些模塊功能,包括界面布局、導(dǎo)航菜單、系統(tǒng)應(yīng)用和第三方服務(wù)功能等。

    1.1.4 數(shù)據(jù)云的操作

    要使用APICloud數(shù)據(jù)云API主要有3種方法。(1)api.ajax:使用靈活,但也復(fù)雜,可以連接其他數(shù)據(jù)云。(2)mcm模塊:簡單快捷,但只能連接APICloud的數(shù)據(jù)云。(3)mcmjs-sdk(APICloud JS SDK):是參考angular-resource.js類庫,基于api.ajax而寫成的原生Javascript 類庫。它與已經(jīng)存在的Javascript程序是兼容的,支持對(duì)象化操作,簡化文件上傳、多個(gè)文件上傳、Relation相關(guān)操作,只需要在代碼中做出一點(diǎn)點(diǎn)改變。因?yàn)槭腔赼pi.ajax的參數(shù)封裝類庫,所以可以做到最小的影響性能,最小化配置,讓開發(fā)者很快地在APICloud上使用Javascript和HTML5。

    1.2 需求分析

    手機(jī)移動(dòng)便利店系統(tǒng)的需求分析是軟件開發(fā)生命周期內(nèi)的重要工作,其作用在于引導(dǎo)整個(gè)系統(tǒng)的開發(fā)方向,在設(shè)計(jì)系統(tǒng)時(shí)應(yīng)該著手于4個(gè)方面:(1)用戶登錄以及注冊(cè),用戶進(jìn)入系統(tǒng)必須通過注冊(cè),然后成功登錄,方可獲得相應(yīng)使用權(quán)。(2)店鋪分類管理,這就涉及數(shù)據(jù)庫的分類管理,這樣做的目的是方便買家查詢購買。(3)獲取數(shù)據(jù)庫信息,完成商品的瀏覽、選購等工作。這部分是重點(diǎn),實(shí)現(xiàn)了整個(gè)系統(tǒng)的核心價(jià)值。(4)個(gè)人信息和店鋪信息的修改,這部分實(shí)現(xiàn)了信息的不斷更新,真正實(shí)現(xiàn)網(wǎng)絡(luò)的價(jià)值。

    2 總體設(shè)計(jì)

    2.1 系統(tǒng)架構(gòu)

    根據(jù)系統(tǒng)的需求分析,本項(xiàng)目采用MVC框架,即模型(Model)—視圖(View)—控制器(Controller)框架進(jìn)行設(shè)計(jì)開發(fā)。模型(Model)主要針對(duì)數(shù)據(jù)庫進(jìn)行操作,完成基本的檢索、查詢和刪除;視圖(View)主要針對(duì)系統(tǒng)的界面進(jìn)行設(shè)計(jì),根據(jù)用戶需求完成具體功能模塊的設(shè)計(jì),便于交互;控制器(Controller)主要是根據(jù)用戶發(fā)出的請(qǐng)求,調(diào)用處理相應(yīng)功能的模塊,作出相對(duì)數(shù)據(jù)庫的操作,并將請(qǐng)求結(jié)果返還給用戶?;贏PICloud平臺(tái)的開發(fā)為了調(diào)用眾多功能模塊,其強(qiáng)大之處在于封裝了各類功能接口,使得操作和運(yùn)行都高效有質(zhì)量。APICloud提供的后臺(tái)管理,根據(jù)各項(xiàng)數(shù)據(jù)的回饋形成文檔,為系統(tǒng)修復(fù)和升級(jí)提供材料。

    2.2 數(shù)據(jù)庫設(shè)計(jì)

    根據(jù)需求分析,為了系統(tǒng)的進(jìn)一步設(shè)計(jì),首先設(shè)計(jì)后臺(tái)數(shù)據(jù)庫,方便之后的功能實(shí)現(xiàn)和數(shù)據(jù)交互。

    2.2.1 用戶表(user表)

    user表用于存儲(chǔ)用戶信息,無論用戶身份是什么都存儲(chǔ)在該表中,用于區(qū)別身份的是role列,role列對(duì)應(yīng)role表的用戶類型,在此即可區(qū)分用戶身份。

    2.2.2 角色表(role表)

    區(qū)分用戶角色的role表定義了各個(gè)用戶身份區(qū)別。

    2.2.3 商品表(goods表)

    goods表用于存儲(chǔ)商品信息,store表中relation到該表,則體現(xiàn)了商家所屬的商品信息。

    2.2.4 訂單表(order表)

    order表,存放訂單信息,包括消費(fèi)者、商家和商品的關(guān)聯(lián)信息。

    2.2.5 店鋪表(store表)

    store表,商家信息除了個(gè)人信息在user表中,關(guān)于店鋪的信息存放在store表中。

    3 模塊的劃分與功能設(shè)計(jì)

    通過對(duì)系統(tǒng)的需求進(jìn)行分析,本次開發(fā)將系統(tǒng)功能模塊分為:用戶注冊(cè)、用戶登錄、商品查詢、商品選購、訂單查詢、店鋪商品更新、個(gè)人信息修改七大模塊,系統(tǒng)的功能架構(gòu)如圖1所示。

    圖1 系統(tǒng)功能架構(gòu)

    3.1 用戶注冊(cè)模塊

    用戶進(jìn)入系統(tǒng),首先要注冊(cè)個(gè)人賬號(hào),其中包含的個(gè)人信息有用戶手機(jī)號(hào)、密碼、用戶名、用戶地址、用戶郵箱、用戶身份?;谑謾C(jī)號(hào)的唯一性,使得它成為標(biāo)記用戶的Id,也就是說同一個(gè)手機(jī)號(hào)只能注冊(cè)一次;用戶名和地址方便店家與消費(fèi)者進(jìn)行聯(lián)系;用戶郵箱用于用戶找回賬號(hào)密碼;而用戶身份則是用于區(qū)分賣家還是消費(fèi)者。

    3.2 用戶登錄模塊

    無論是消費(fèi)者還是賣家,他們的登錄方式是相同的,通過將用戶輸入的手機(jī)號(hào)與密碼到數(shù)據(jù)庫進(jìn)行匹配,判斷用戶是否資格使用該賬號(hào)登錄,并執(zhí)行該賬號(hào)下所屬的權(quán)利。

    3.3 商品查詢模塊

    用戶登錄成功后進(jìn)入系統(tǒng)主界面,根據(jù)所需在店家分類的界面下進(jìn)行商品的查詢。查詢過程中,用戶不僅可以查看到琳瑯滿目的商品信息,還可以瀏覽店鋪的商家信息,根據(jù)商家與商品的綜合信息,進(jìn)行接下來的商品選購。

    3.4 商品選購模塊

    用戶查找到心儀商品就可以進(jìn)行購買。在“商品選購”界面下輸入所需商品需求,包括取貨方式、產(chǎn)品種類、數(shù)量和價(jià)錢。完成這些信息后,就可以提交訂單,完成商品的選購功能。

    3.5 訂單查詢模塊

    在這個(gè)模塊下,無論是賣家還是消費(fèi)者,都能查到與自己相關(guān)的購物訂單,方便用戶的個(gè)人消費(fèi)管理,以及查詢個(gè)人的消費(fèi)記錄。

    3.6 店鋪商品更新模塊

    賣家的個(gè)人中心有一個(gè)“我的店鋪”模塊,在這個(gè)模塊下賣家可以通過修改、刪除和添加商品信息的方式,更新店鋪信息。

    3.7 個(gè)人信息修改模塊

    這個(gè)模塊顧名思義就是修改用戶在注冊(cè)時(shí)候填寫的個(gè)人信息,根據(jù)個(gè)人信息的修改,及時(shí)返還數(shù)據(jù)庫進(jìn)行更新,方便日后的購物功能。

    4 詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

    4.1 用戶注冊(cè)功能的設(shè)計(jì)與實(shí)現(xiàn)

    4.1.1 功能概述

    新用戶進(jìn)入系統(tǒng)需要進(jìn)行登錄才能享受系統(tǒng)相關(guān)服務(wù),對(duì)于初次使用的用戶則需要賬號(hào)的注冊(cè)。賬號(hào)注冊(cè)需要用戶提供手機(jī)號(hào)、密碼作為必要信息,下次用戶就可以通過手機(jī)號(hào)直接登錄。在注冊(cè)表中填寫郵箱,是為了重置賬號(hào)密碼時(shí)使用的,并且需要登錄郵箱進(jìn)行驗(yàn)證才能重置密碼。

    4.1.2 功能詳細(xì)設(shè)計(jì)

    (1)用戶注冊(cè)。在設(shè)計(jì)用戶注冊(cè)時(shí),首先注意的是用戶表的建立。本系統(tǒng)的數(shù)據(jù)庫采用APICloud的數(shù)據(jù)云技術(shù),該技術(shù)由APICloud開發(fā),并根據(jù)常用數(shù)據(jù)庫使用方式封裝了許多接口,方便操作和運(yùn)用。在數(shù)據(jù)云中每個(gè)項(xiàng)目有默認(rèn)的5個(gè)表:accessToken, fi le,role,roleMapping,user,其中在注冊(cè)功能上運(yùn)用了user和role表,accessToken表是與user表相關(guān)聯(lián)的用戶登錄記錄表,user表對(duì)accessToken表是一對(duì)多的關(guān)系,即統(tǒng)計(jì)用戶登入登出狀態(tài)的關(guān)聯(lián)表,在注冊(cè)時(shí)無需使用。

    (2)郵箱注冊(cè)。用戶成功注冊(cè)后,若是在注冊(cè)時(shí)填寫了正確的郵箱,則成功注冊(cè)的同時(shí)會(huì)向郵箱發(fā)送驗(yàn)證信息,為了下次方便用戶修改密碼,則用戶需要到郵箱中激活賬號(hào),當(dāng)郵箱激活成功后,user表中的emailVerified就會(huì)由false轉(zhuǎn)變?yōu)閠rue,意味著該賬號(hào)已經(jīng)通過郵箱激活完畢,激活成功。

    4.1.3 界面設(shè)計(jì)

    在界面設(shè)計(jì)時(shí)為了保證界面的友好性和美觀性,需要引入CSS樣式文件,CSS文件的引入方式同JQuery庫的引入,可以通過網(wǎng)絡(luò)地址直接引入,也可以下載引入,由于使用網(wǎng)絡(luò)地址的方式引入,會(huì)使得系統(tǒng)在無網(wǎng)絡(luò)狀態(tài)下出現(xiàn)界面混亂的結(jié)果,所以,本項(xiàng)目開發(fā)中用到的CSS和JQuery文件都是下載到項(xiàng)目列表下引入到項(xiàng)目中,直接在項(xiàng)目包中,這樣在無網(wǎng)絡(luò)狀態(tài)下依然保持順暢的界面。

    4.2 用戶登錄功能的設(shè)計(jì)與實(shí)現(xiàn)

    4.2.1 功能概述

    用戶進(jìn)入系統(tǒng)后,若是已有注冊(cè)賬號(hào)則可以通過登錄系統(tǒng)享受服務(wù)權(quán)利。用戶在登錄界面輸入手機(jī)號(hào)和密碼,若與數(shù)據(jù)庫存儲(chǔ)的密碼和手機(jī)號(hào)相匹配則登錄成功,若不相匹配,則用戶可以通過激活的郵箱重置密碼,重置后用戶就可以根據(jù)新密碼重新登錄系統(tǒng)。

    4.2.2 功能詳細(xì)設(shè)計(jì)

    (1)用戶登錄。在系統(tǒng)界面用戶在input控件中輸入手機(jī)號(hào)和密碼,并由“$api.byId(id).value”獲得輸入框中的值,再通過Ajax傳遞到后臺(tái)數(shù)據(jù)庫進(jìn)行數(shù)據(jù)匹配,若匹配成功則返回ret對(duì)應(yīng)數(shù)據(jù)庫用戶信息。為接下來界面都能傳遞登錄用戶信息,則通過$api.setStorage(key,value)存儲(chǔ)登錄用戶信息,其中key(string)為鍵名,value(任意類型)為值。

    (2)密碼重置。當(dāng)用戶登錄系統(tǒng)忘記密碼,或是想更換密碼提高安全性能時(shí)可以在登錄界面,或是修改個(gè)人信息中重置密碼。請(qǐng)求密碼重置URL:/mcm/api/user/resetRequest,HTTP:POST,請(qǐng)求時(shí)需要發(fā)送一個(gè)POST請(qǐng)求到/resetRequest。當(dāng)然,用戶密碼重置的前提就是激活了郵箱。

    發(fā)送成功后,返回的ret是一個(gè)JSON對(duì)象{“msg”:“請(qǐng)到郵箱查收郵件”}。當(dāng)用戶在登錄時(shí)重置密碼,此時(shí)LocalStorage的token對(duì)象沒有值,則用戶需要輸入用戶注冊(cè)時(shí)的手機(jī)號(hào)和郵箱方可進(jìn)行重置。

    而在登錄后重置密碼,則通過$api.getStorage(‘token’);來獲得登錄后LocalStorage里的token,該參數(shù)代表登錄后用戶在數(shù)據(jù)表中的真實(shí)Id,可以利用這個(gè)Id得到重置密碼的權(quán)利,并執(zhí)行密碼重置功能。

    4.2.3 界面設(shè)計(jì)

    用戶登錄界面主要獲得用戶輸入的手機(jī)號(hào)和密碼,當(dāng)用戶忘記密碼時(shí)則提供密碼重置的功能,因而在登錄界面的設(shè)計(jì)上注重的主要是簡潔大方,讓操作者使用起來很容易,當(dāng)用戶填寫信息與數(shù)據(jù)庫不符,則發(fā)出提示信息。

    4.3 商品查詢功能的設(shè)計(jì)與實(shí)現(xiàn)

    4.3.1 功能概述

    這部分主要完成的功能是用戶通過瀏覽商家查詢自己心儀的商品,為下一步選購做準(zhǔn)備。用戶進(jìn)入系統(tǒng)后首先在主界面會(huì)看到商家的分類,商家的分類方便了用戶篩選自己心儀的商品所歸屬的店鋪。用戶根據(jù)自身喜好選擇商家,則可進(jìn)入該商家的商品列表,在商品列表中消費(fèi)者則可以瀏覽全部商品信息,并可以根據(jù)關(guān)鍵字在搜索表中搜索所需商品,快捷準(zhǔn)確地找到自己所需產(chǎn)品。

    4.3.2 功能詳細(xì)設(shè)計(jì)

    在商家和商品列表這部分的實(shí)現(xiàn)中,除了前端的處理,也涉及后臺(tái)數(shù)據(jù)庫的連接。數(shù)據(jù)表設(shè)計(jì)包括3張:用戶表、店鋪表和商品表。用戶表顧名思義就是店家自己的信息,如果用戶身份為賣家,則pointer到店鋪表,即一個(gè)賣家對(duì)應(yīng)一個(gè)店鋪表的行信息。店鋪表相當(dāng)于一個(gè)橋梁,它存儲(chǔ)店家的備注信息,同時(shí)relation到商品表,關(guān)聯(lián)著賣家的商品信息。

    4.4 訂單查詢功能的設(shè)計(jì)與實(shí)現(xiàn)

    4.4.1 功能概述

    用戶登錄成功后即可在個(gè)人中心查找到自己選購成功的商品,商品列表詳細(xì)記錄了用戶的訂購需求和交易雙方的信息,方便售后的各項(xiàng)服務(wù)。

    4.4.2 功能詳細(xì)設(shè)計(jì)

    這部分的功能實(shí)現(xiàn)主要是表查詢功能。即根據(jù)$api.getStorage(‘token’)獲得的用戶ID,查找到關(guān)聯(lián)的order表信息,并逐一顯示到界面。

    5 結(jié)語

    隨著計(jì)算機(jī)網(wǎng)絡(luò)的高速發(fā)展,各種商業(yè)都與網(wǎng)絡(luò)息息相關(guān),因而網(wǎng)站開發(fā)成了現(xiàn)今IT領(lǐng)域的熱門技術(shù),但是多平臺(tái)移植造成了網(wǎng)站開發(fā)的難點(diǎn)。HTML5網(wǎng)站開發(fā)正是解決了這些問題帶來的困擾,HTML5的網(wǎng)站主要有:兼容性好、跨平臺(tái)(包括:windows,Mac,Linux,iOS等系統(tǒng))、跨終端(包括:手機(jī)、電腦、iPad等設(shè)備)、安全性更高、擴(kuò)展性更強(qiáng)、功能更加豐富、開發(fā)效率更高等特性。

    網(wǎng)絡(luò)信息的時(shí)代,我們?cè)诖笃髽I(yè)大數(shù)據(jù)發(fā)展的同時(shí),也應(yīng)當(dāng)多多關(guān)注身邊小企業(yè)小發(fā)展的動(dòng)態(tài),關(guān)注這些,不僅有助于產(chǎn)業(yè)鏈的持續(xù)發(fā)展,更能細(xì)致入微到我們生活的點(diǎn)點(diǎn)滴滴中,方便我們的生活,提高生活質(zhì)量。

    [參考文獻(xiàn)]

    [1]劉天寅.HTML5與未來的WEB應(yīng)用平臺(tái)[J].陰山學(xué)刊(自然科學(xué)版),2010(2):86-90.

    [2]邢曉鵬.HTML5核心技術(shù)的研究與價(jià)值分析[J].價(jià)值工程,2011(22):157-158.

    [3]龍奇.新一代網(wǎng)絡(luò)技術(shù)標(biāo)準(zhǔn)HTML5的研究[J].科技信息,2011(10):245.

    [4]顧旻霞.構(gòu)建更加開放的移動(dòng)互聯(lián)網(wǎng)[J].信息通信技術(shù),2011(4):54-57.

    [5]顧春蓮.HTML5中的音頻及視頻元素對(duì)互聯(lián)網(wǎng)的影響[J].河北省科學(xué)院學(xué)報(bào),2011(3):106-108.

    [6]史君.支持HTML5技術(shù)的嵌入式移動(dòng)瀏覽器研究與開發(fā)[D].大連:大連海事大學(xué),2012.

    [7]王雯潔.基于UML及HTML5網(wǎng)站的開發(fā)和測(cè)試[D].呼和浩特:內(nèi)蒙古大學(xué),2012.

    猜你喜歡
    重置郵箱密碼
    密碼里的愛
    密碼疲勞
    英語文摘(2020年3期)2020-08-13 07:27:02
    系統(tǒng)重置中途出錯(cuò)的解決辦法
    重置人生 ①
    沒問題郵箱
    趣味(語文)(2018年10期)2018-12-29 12:28:30
    2018年山西省對(duì)口升學(xué)考試考生重置密碼申請(qǐng)表
    密碼藏在何處
    關(guān)于停止使用dianxunjishu@china.com郵箱的通知
    奪命密碼
    郵箱變更
    金华市| 天祝| 汉源县| 巴楚县| 屯昌县| 仪陇县| 永年县| 巨鹿县| 南召县| 封开县| 新晃| 诏安县| 江安县| 商河县| 信宜市| 遵义县| 盐亭县| 左权县| 绩溪县| 康定县| 天气| 宁武县| 乌拉特前旗| 郴州市| 清新县| 托里县| 肃南| 太仓市| 侯马市| 阳城县| 崇文区| 芜湖县| 普宁市| 广东省| 青岛市| 通辽市| 介休市| 万载县| 江西省| 浪卡子县| 松阳县|