基于工作項目的Android高級開發(fā)實戰(zhàn)（第2版） 課件 第12、13章 點餐系統(tǒng)客戶端、第13章 ThinkPHP、課程思政QQ在線聊天APP整體設(shè)計

Android項目開發(fā)實戰(zhàn)Android項目開發(fā)實戰(zhàn)第12章

跟我做在線點餐系統(tǒng)(3)客戶端開發(fā)本章大綱8-1、設(shè)計思路8-2、文件結(jié)構(gòu)8-3、開發(fā)步驟8-4、知識點8-5、課后題8-1

設(shè)計思路8-1

設(shè)計思路客戶端8-1

設(shè)計思路客戶端客戶端設(shè)計思路可簡單描述如下：設(shè)計服務(wù)器訪問功能類HttpPostUtil，實現(xiàn)客戶端與服務(wù)端信息交互。設(shè)計主視圖FirstActivity，用于選擇注冊或登錄。設(shè)計注冊視圖RegisterActivity，通過HttpPostUtil，與服務(wù)端的Register.php進行信息交互，實現(xiàn)用戶注冊。設(shè)計登陸視圖LoginActivity，通過HttpPostUtil，與服務(wù)端的Image.php及Login.php進行信息交互，實現(xiàn)用戶登錄。設(shè)計工具類ImageLoader、FileCache及MemoryCache，訪問服務(wù)端，實現(xiàn)菜單圖片的異步加載。設(shè)計語言設(shè)置類MenuFragment，實現(xiàn)多語言菜單。8-1

設(shè)計思路設(shè)計數(shù)據(jù)封裝類MenuBean，封裝訂單信息。設(shè)計菜單顯示適配器類MenuListAdapter，負責(zé)顯示菜單信息，以及通過ImageLoader，獲取菜單圖片。設(shè)計菜單視圖MenuActivity，通過MenuFragment選擇菜單語言，并且通過HttpPostUtil，與服務(wù)端的ShowMenu.php進行交互，獲取相應(yīng)語言的菜單信息，然后將菜單信息傳遞給MenuListAdapter，實現(xiàn)菜單的顯示。以及實現(xiàn)訂單的生成，并將訂單信息通過MenuBean封裝后，傳遞給訂單視圖OrderActivity。設(shè)計訂單顯示適配器類OrderListAdapter，負責(zé)顯示訂單信息。設(shè)計訂單視圖OrderActivity，通過OrderListAdapter顯示訂單，并通過HttpPostUtil，與服務(wù)端的AddOrder.php進行交互，實現(xiàn)下單。8-2

文件結(jié)構(gòu)8-2

客戶端文件結(jié)構(gòu)點菜系統(tǒng)客戶端為android客戶端。主要實現(xiàn)功能包括注冊，登陸，查看多語言菜單，下單功能。餐廳可為每張桌子配備一臺手機，當有不同客戶光臨的時候，通過手機端點餐。在收銀臺的電腦的管理端可以查看所點菜式的中文名和數(shù)量。主要描述分5個模塊。分別為：主界面：跳轉(zhuǎn)登錄或者注冊界面。登陸模塊：驗證碼，登錄后獲得對面座位的信息。注冊模塊：注冊用戶和座位號的信息。菜單模塊：根據(jù)所選標簽，獲取不同語言菜式，選擇菜式和數(shù)量發(fā)送到訂單界面。訂單模塊：查看已點菜式和數(shù)量，提醒用戶確定無誤后將訂單發(fā)送到服務(wù)端。8-2

客戶端文件結(jié)構(gòu)8-3

開發(fā)步驟8-3-1

主界面（1）創(chuàng)建工程新建Android工程diancai，然后在src中如圖9-2建立包名。8-3-1

主界面（2）創(chuàng)建啟動界面（主界面）視圖右鍵包com.sziit.diancai.activity，選擇new->other。彈出選擇框，選擇Android->Android

Activity->BlankActivity->next，Launcher

Activity打鉤8-3-1

主界面（3）編寫主界面布局將本書資源文件中的相關(guān)圖片復(fù)制到“.\diancai\res\drawable-hdmi”。打開activity_first.xml，編寫布局文件，添加兩個按鈕，一個登陸按鈕，一個注冊按鈕。代碼如下8-3-1

主界面（4）編寫主界面代碼打開FirstActivity.java，在onCreate()加載按鈕并監(jiān)聽跳轉(zhuǎn)到相應(yīng)界面。代碼如下：8-3-2

注冊模塊（1）創(chuàng)建注冊視圖右鍵包com.sziit.diancai.activity，選擇new->other。彈出選擇框，選擇Android->Android

Activity->BlankActivity->next，新建RegisterActivity，8-3-2

注冊模塊（2）編寫注冊視圖布局打開activity_register.xml，編寫代碼如下：8-3-2

注冊模塊（3）編寫OKHTTP訪問功能類在com.sziit.diancai.utils包中新建功能類OkhttpUtil.java,封裝HTTP

POST信息的發(fā)送方法并返回json數(shù)據(jù)。代碼如下，請根據(jù)服務(wù)器端的IP地址設(shè)置服務(wù)器IP地址（與數(shù)據(jù)庫中設(shè)置的IP保持一致）：8-3-2

注冊模塊（4）編寫注冊視圖代碼打開RegisterActivity.java，編寫代碼如下，在子線程中調(diào)用“.\diancai\src\com.sziit.diancai.utils\OKHttpUtil.java”，實現(xiàn)HTTP異步訪問。8-3-2

注冊模塊（5）添加Internet訪問權(quán)限打開AndroidManifest.xml，添加Internet訪問權(quán)限，代碼如下：.\diancai\AndroidManifest.xml<uses-permission

android:name="android.permission.INTERNET"

/><uses-permissionandroid:name="android.permission.ACCESS_WIFI_STATE"/>8-3-3

登陸模塊（1）創(chuàng)建登陸視圖右鍵包com.sziit.diancai.activity，選擇new->other。彈出選擇框，選擇Android->Android

Activity->BlankActivity->next，新建LoginActivity8-3-3

登陸模塊（2）編寫登陸視圖布局打開activity_login.xml，編寫代碼如下：8-3-3

登陸模塊（3）編寫登陸視圖代碼打開LoginActivity.java，編寫代碼如下，在子線程中調(diào)用

“.\diancai\src\com.sziit.diancai.utils\HttpPostUtil.java”，實現(xiàn)HTTP異步訪問。8-3-4

菜單模塊（1）創(chuàng)建菜單視圖按上面方法新建視圖MenuActivity，對應(yīng)的類文件與布局文件為MenuActivity.java和activity_menu.xml。8-3-4

菜單模塊（2）預(yù)定義字符串值打開res/values/strings.xml。把列表名輸入進去方便以后調(diào)用。.\diancai\res\values\strings.xml<?xml

version="1.0"

encoding="utf-8"?><resources><string

name="app_name">diancai</string><string

name="action_settings">Settings</string><string

name="hello_world">Hello

world!</string><string

name="title_activity_login">LoginActivity</string><string

name="title_activity_first">FirstActivity</string><string

name="title_activity_register">RegisterActivity</string><string

name="title_activity_menu">MenuActivity</string><string

name="title_activity_order">OrderActivity</string><string-array

name="language"><item>中文菜單</item><item>日文菜單</item><item>韓文菜單</item><item>英文菜單</item></string-array></resources>8-3-4

菜單模塊（3）編寫菜單視圖布局編輯activity_menu.xml，代碼如下。為一個空的FrameLayout。用于下邊將不同的Fragment放進來。.\diancai\res\layout\activity_menu.xml<FrameLayoutxmlns:android="/apk/res/android"xmlns:tools="/tools"android:id="@+id/container"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MenuActivity"tools:ignore="MergeRootFrame"

></FrameLayout>8-3-4

菜單模塊新建fragment_menu.xml。添加一個listview和一個button。.\diancai\res\layout\fragment_menu.xml<LinearLayout

xmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"

><ListViewandroid:id="@+id/listView"android:layout_width="match_parent"android:layout_height="326dp"android:layout_weight="1.02"

></ListView><Buttonandroid:id="@+id/ok"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/shape"android:text="提交"/></LinearLayout>8-3-4

菜單模塊新建menu_list_item.xml。用于設(shè)計菜單列表顯示的每一項8-3-4

菜單模塊（4）編寫菜單視圖代碼編輯MenuActivity.java，代碼如下。在actionbar上添加下拉菜單，然后實現(xiàn)ActionBar.OnNavigationListener接口，即可在點擊相應(yīng)下拉菜單項顯示對面的內(nèi)容，內(nèi)容顯示在一個Fragment中。8-3-4

菜單模塊（5）編寫菜單子頁面代碼在com.sziit.diancai.activity新建MenuFragment類，繼承Fragment，編寫代碼如下，供菜單主視圖調(diào)用8-3-4

菜單模塊（6）異步加載菜式圖片在com.sziit.diancai.utils新建FileCache.java文件緩存類。用于緩存異步加載的列表圖片。8-3-4

菜單模塊在com.sziit.diancai.utils新建MemoryCache.java內(nèi)存緩存類。用于緩存異步加載列表的圖片。8-3-4

菜單模塊在com.sziit.diancai.utils新建ImageLoader.java。封裝異步加載圖片的方法。8-3-4

菜單模塊（7）創(chuàng)建菜單信息接口在com.sziit.diancai.bean新建MenuBean，調(diào)用Serializable接口，實現(xiàn)菜單信息封裝，代碼如下。8-3-4

菜單模塊（8）顯示菜單在com.sziit.diancai.adapter新建MenuListAdapter類繼承BaseAdapter。用于顯示菜單列表項。獲取對應(yīng)控件。顯示相應(yīng)數(shù)據(jù)。監(jiān)聽加減按鈕。用數(shù)組記錄點菜數(shù)量。8-3-4

菜單模塊（9）添加SD卡讀取權(quán)限在AndroidManifest.xml添加權(quán)限讀取sd卡的權(quán)限。.\diancai\AndroidManifest.xml<uses-permission

android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission

android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>8-3-5

訂單模塊（1）創(chuàng)建訂單視圖按上面方法新建訂單視圖OrderActivity，對應(yīng)的類文件與布局文件分別為OrderActivity.java和activity_order.xml。8-3-5

訂單模塊（2）編寫訂單視圖布局編輯activity_order.xml，代碼如下。8-3-5

訂單模塊（3）編寫訂單視圖代碼編輯OrderActivity.java，代碼如下：8-3-5

訂單模塊（4）顯示訂單在com.sziit.diancai.adapter新建OrderListAdapter類繼承BaseAdapter。用于顯示訂單。8-4

知識點8-4

知識點Javascript腳本語言:Javascript是一種增加網(wǎng)頁交互性的腳本語言，跟Java語言以及Java服務(wù)器頁面（JSP）沒有任何關(guān)系。jQuery:jQuery是一套跨瀏覽器的Javascript庫，簡化HTML與Javascript之間的操作。本例中，使用Javascript以及jQuery，使用DIV+CSS進行頁面布局,實現(xiàn)了菜單頁面與訂單頁面中表格奇數(shù)行與偶數(shù)行顏色設(shè)置。8-4

知識點D:\xampp\htdocs\Order\ShowMenu.php<!DOCTYPE><html>.................................................................<!--引入Jquery，為菜單表格奇數(shù)行、偶數(shù)行、首行設(shè)置不同顏色--><script

src="./jquery.min.js"

type="text/javascript"></script><script

type="text/javascript">$().ready(function(){$("#main

table

tr:even").addClass("t_even");$("#main

table

tr:odd").addClass("t_odd");$("#main

table

tr:first").removeClass("t_even");$("#main

table

tr:first").addClass("t_tit");});</script>.................................................................</html>8-5

課后習(xí)題8-5

習(xí)題項目三中，服務(wù)器IP是通過一個靜態(tài)變量固定在程序中的，當服務(wù)器IP發(fā)生變化時，需要修改代碼（項目一、二中的處理也是相似的），這很不方便。請嘗試在客戶端添加服務(wù)器IP的設(shè)置功能，使用戶可隨時更改服務(wù)器IP?？蓞⒖紙D11-3進行設(shè)計：（1）在登陸視圖中添加一個設(shè)置按鈕，點擊后計入設(shè)置視圖；（2）在設(shè)置視圖中輸入IP及端口號，即可完成服務(wù)器IP設(shè)置。8-5

習(xí)題這里給出一些提示：在客戶端添加一個設(shè)置視圖，獲取用戶輸入的IP及端口號修改HTTP異步訪問類HttpPostUtil代碼，添加一個服務(wù)器

IP修改方法。注意，服務(wù)器IP修改后，與服務(wù)端功能模塊如登陸、注冊、下單等相關(guān)的URL都要進行調(diào)整。8-5

習(xí)題作業(yè)提交：（1）UI設(shè)計圖（2）代碼（服務(wù)端、管理端、客戶端）（3）開發(fā)文檔（需求、整體設(shè)計、詳細設(shè)計）（4）單元測試報告移動終端軟件開發(fā)實戰(zhàn)移動終端軟件開發(fā)實戰(zhàn)第九章PHP開發(fā)框架初步本章大綱9-1、PHP開發(fā)框架簡介9-2、ThinkPHP開發(fā)框架實例9-1、PHP開發(fā)框架簡介9-1PHP開發(fā)框架簡介1.1

框架的定義PHP開發(fā)框架就是一套具有一定結(jié)構(gòu)的代碼，提供了開發(fā)一個PHP

web服務(wù)器的基本功能代碼。1.2

框架的優(yōu)勢（1）快速

PHP開發(fā)框架提供了開發(fā)一個PHP

web服務(wù)器的基本功能代碼，避免了代碼的重復(fù)編寫，節(jié)省了開發(fā)時間。2）規(guī)范

一個PHP開發(fā)框架的結(jié)構(gòu)是固定的，這相當于為開發(fā)者制定了開發(fā)規(guī)范，所有的開發(fā)者按照相同的規(guī)范開發(fā)程序，有利于開發(fā)中的合作以及后期維護。PHP開發(fā)框架相當于web開發(fā)的流水線。9-1PHP開發(fā)框架簡介1.3常用的框架（1）Zendframework開發(fā)PHP語言的Zend公司提供的官方框架，功能最全頁最為笨重。（2）CodeIgniter一個非常小巧的框架，開發(fā)靈活，速度快。（3）CakePHP一個重量級框架，耦合度高，開發(fā)大型項目會比較麻煩。（4）ThinkPHP國人框架，小巧，開發(fā)靈活，入門容易，不太適合大型項目。（5）HushFramework

國人框架，已被多個國內(nèi)網(wǎng)絡(luò)公司采用，運行效率高，沿用了ZendFramework的規(guī)范。9-1PHP開發(fā)框架簡介1.4框架與MVC

目前大多數(shù)的框架都是基于MVC模式的。MVC是一種采

用Model-View-Controller（模型-視圖-控制器）結(jié)構(gòu)開

發(fā)程序的模式，強調(diào)程序中模型、視圖、控制器三者分離。三者定義如下圖所示：Model（模型）：程序中處理數(shù)據(jù)邏輯的部分，通常負責(zé)在數(shù)據(jù)庫中存取數(shù)據(jù)。View（視圖）：程序中數(shù)據(jù)顯示部分，相當于用戶界面。Controller

（控制器）：程序中負責(zé)與用戶交互的部分，控制器接收到用戶的操作后，根據(jù)用戶的操作調(diào)用模型中的相應(yīng)方法進行數(shù)據(jù)庫操作等，最后將模型傳遞回來的數(shù)據(jù)傳遞給視圖進行顯示。9-1PHP開發(fā)框架簡介9-2、ThinkPHP開發(fā)框架實例9-2

ThinkPHP開發(fā)框架實例本節(jié)中，將采用ThinkPHP框架，開發(fā)一個極簡新聞系統(tǒng)，符合MVC模式。本例實現(xiàn)的功能如下圖所示。2.1

View（視圖）開發(fā)1）導(dǎo)入ThinkPHP框架

在文件夾“D:\xampp\htdocs\mynews\”中，新建一個文件夾“7”，將解壓后的

ThinkPHP框架目錄中所有的內(nèi)容拷貝到此文件夾。拷貝完成后，確保下列文件與文件夾都在

“D:\xampp\htdocs\mynews\7”中。9-1PHP開發(fā)框架簡介并確保下列文件與文件夾都在Application文件夾中，這些文件夾代表ThinkPHP應(yīng)用程序中的各個模塊。9-1PHP開發(fā)框架簡介（2）創(chuàng)建程序管理模塊?

在“D:\xampp\htdocs\mynews\7\Application\”中，新建一個文件夾“Admin”，用于存放管理程序輸入輸出的代碼。將“D:\xampp\htdocs\mynews\7\Application\Home”中的所有文件與文件夾拷貝到

“D:\xampp\htdocs\mynews\7\Application\Admin\”文件夾中?？截愅瓿珊螅_保下列文件與文件夾都在ewwss\\77\\AApppp“D:\xampp\htdocs\myn

lication\Admin\”中。9-1PHP開發(fā)框架簡介9-1PHP開發(fā)框架簡介（3）創(chuàng)建輸出視圖

“D:\xampp\htdocs\mynews\7\Application\Admin\View”文件夾中，創(chuàng)建一個

News文件夾，存放相應(yīng)Controller（控制器）的輸出視圖?！癉:\xampp\htdocs\mynews\7\Application\Admin\View\News”文件夾中，創(chuàng)建一個

news_list.html頁面文件，該頁面用于接收相應(yīng)Controller（控制器）的輸出數(shù)據(jù)，然后展示給用戶。代碼如下：（4）創(chuàng)建輸入視圖

在“D:\xampp\htdocs\mynews\7\”文件夾中，創(chuàng)建一個index.html頁面，該頁面為新聞發(fā)布系統(tǒng)的首頁，也是

Controller（控制器）的輸入頁面。代碼如下：9-1PHP開發(fā)框架簡介2.2

Controller（控制器）開發(fā)

在

“D:\xampp\htdocs\mynews\7\Applicati

on\Admin\Controller\”文件夾中，創(chuàng)建

一個控制器類NewsController.class.php，在該類中創(chuàng)建一個news_list()方法，用于調(diào)用Model（模型）中的方法，查詢數(shù)據(jù)庫中的新聞列表，并把查詢到的數(shù)據(jù)傳遞給

news_list.html頁面。代碼如下：9-1PHP開發(fā)框架簡介9-1PHP開發(fā)框架簡介2.3

Model（模型）開發(fā)（1）創(chuàng)建數(shù)據(jù)庫SET

character_set_client

=

gbk;

SET

character_set_connection

=

gbk;SET

character_set_database

=

gbk;SET

character_set_results

=

gbk;SET

character_set_server

=

gbk;SET

collation_connection

=

gbk_chinese_ci;SET

collation_database

=

gbk_chinese_ci;SET

collation_server

=

gbk_chinese_ci;create

database

news;use

news;create

table

news(news_id

int

auto_increment

primary

key,title

char(100)

not

null);2.3

Model（模型）開發(fā)（2）給ThinkPHP提供的Model（模型）方法配置好參數(shù)即可。打開

“D:\xampp\htdocs\mynews\7\Applicati

on\Common\Conf\config.php”，填寫如下代碼，使ThinkPHP的Model（模型）可以訪問localhost主機上mysql數(shù)據(jù)庫中的名為news的數(shù)據(jù)庫。9-1PHP開發(fā)框架簡介注意命名規(guī)則：存放輸出視圖的文件夾：

News該輸出視圖對應(yīng)的控制器類：NewsController該控制器類對應(yīng)的PHP文件：NewsController.class.php2.4測試在瀏覽器中輸入

“http://localhost/mynews/7/index.ht

ml”，打開新聞發(fā)布系統(tǒng)首頁，點擊“新聞列表”鏈接查看新聞列表。9-1PHP開發(fā)框架簡介3、小結(jié)本章采用ThinkPHP框架，將新聞發(fā)布系統(tǒng)的新聞瀏覽功能改造成了MVC模式，實現(xiàn)了

Model-View-Controller（模型-視圖-控制器）三者的分離。本章的代碼中，HTML代碼與PHP代碼完全分離，Controller（控制器）與View（視圖）之間僅通過一個

newsList變量傳遞數(shù)據(jù)，實現(xiàn)了頁面美工人員與PHP程序員的工作完全的分離。9-3小結(jié)4、課后練習(xí)（1）為QQ在線聊天增加一對一聊天功能。（2）將QQ在線聊天系統(tǒng)采用ThinkPHP框架改造成MVC模式。9-4課后練習(xí)QQ在線聊天APP整體設(shè)計移動互聯(lián)網(wǎng)應(yīng)用開發(fā)技術(shù)課程思政本次疫情中，充分體現(xiàn)了我國醫(yī)護人員愛崗敬業(yè)的專業(yè)精神大批醫(yī)護人員展現(xiàn)了優(yōu)秀的職業(yè)素質(zhì)與心理素質(zhì)，在抗疫的第一線，克服重重困難，堅守崗位，舍生忘死，救死扶傷祖國的建設(shè)中，各行各業(yè)都需要這種愛崗敬業(yè)精神作為一名未來的程序員，我們要干一行、愛一行，在工作中具有飽滿的熱情，能夠克服困難，堅守崗位1項目需求分析1注冊：填寫用戶名、密碼，點擊注冊按鈕進行注冊。查詢數(shù)據(jù)庫，若庫中無重復(fù)用戶名，則注冊成功。注冊成功后，在數(shù)據(jù)庫中新增一個用戶1項目需求分析2登錄：點擊圖4-1中的登錄按鈕進行登錄。查詢數(shù)據(jù)庫，若用戶名密碼正確，則成功登陸。成功登陸后，進入QQ

主界面的會話子界面，列表中有一個默認的

QQ聊天群，如圖4-3所示。1項目需求分析3群聊：點擊QQ主界面中的群欄目進入群聊視圖，如圖所示。點擊發(fā)送按鈕可發(fā)群信息，信息發(fā)送成功后，在數(shù)據(jù)庫中會增加一條聊天記錄，如圖所示。群內(nèi)其他用戶可實時的接收到當前用戶發(fā)送的信息。2項目設(shè)計思路在線音樂播放器的開發(fā)包括客戶端的開發(fā)與服務(wù)端的開發(fā)。服務(wù)端設(shè)計如圖所示；客戶端設(shè)計如圖所示。用戶信息及聊天信息等信息存儲在在服務(wù)器上的MySQL數(shù)據(jù)庫中。客戶端向服務(wù)端發(fā)送數(shù)據(jù)庫操作相應(yīng)的增、刪、改、查請求，實現(xiàn)注冊、登陸、聊天。按功能模塊劃分，本項目開發(fā)可分為兩個子任務(wù)：用戶注冊及登錄模塊開發(fā)；聊天信息發(fā)送與接收模塊開發(fā)。每個功能模塊的開發(fā)都包含了服務(wù)端與客戶端的開發(fā)。下面結(jié)合設(shè)計圖4-6與4-7，對兩個子任務(wù)的設(shè)計思路分別進行闡述。2項目設(shè)計思路2項目設(shè)計思路-用戶注冊及登錄模塊1)

在服務(wù)端數(shù)據(jù)庫中添加一個用戶表，記錄用戶名、用戶密碼等信息。在服務(wù)端編寫數(shù)據(jù)庫連接代碼conn.php，實現(xiàn)服務(wù)端各個代碼模塊與

MySQL數(shù)據(jù)庫的連接。在服務(wù)端編寫注冊功能代碼registe