1. 程式人生 > >Apicoud+vue開發高效能商城APP專案實戰教程

Apicoud+vue開發高效能商城APP專案實戰教程


第一章:專案概述

001:apicloud平臺介紹。
目前所流行的webapp開發平臺的引入,webapp開發的趨勢和能做的事情。

002:知識體系架構介紹。
vue.js的引入介紹,apicloud模組機制的優勢和選型,開發工具phpstorm和webstorm的推薦使用。

第二章:apicloud快速入門教程

003:apicloud環境搭建
註冊賬號,IDE工具下載,環境配置。

004:建立專案,IDE工具使用篇
兩種建立專案的方式講解。
雲端控制檯建立專案和利用IDE工具來建立建立專案,專案程式碼和apicloud提供svn倉庫的概念。

005:apicloud開發工具使用技巧
phpstorm配合apicloud的IDE工具來開發專案流程。
apicloud工具的介面介紹,各個選單的使用規則,程式碼上傳流程分析。

006:apicloud打包,釋出升級篇
雲升級,雲編譯,雲打包,推送等使用技巧。

007:apicloud專案的目錄結構分析和技術架構體系的介紹
預設專案目錄檔案結構,css和js,html的潛約束規則。
apicloud日誌console使用。
京東商城手機站的js類庫說明。
其他第三方類庫的介紹和使用規則,和微信小程式開發的共同點和不同點。
apicloud開發app的包容性和微信小程式的限制和規則約束。
window物件和document物件的使用規則。

第三章:vue.js高階教程

008:vue.js前端框架安裝和使用範圍。
vue版本升級和使用方式,vue和jquery.js,和zepto.js的優劣勢分析。
vue為什麼無法在開發小程式裡無法使用,Windows物件分析。
Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

009:vue快速入門
vue.js是什麼,vue.js的宣告式語法,條件與迴圈,from表單渲染語法。

010: v-model實際使用案例
登入介面的v-model繫結或渲染資料,實際流程分析。

011:v-if,v-bind實戰使用案例,典型登入頁面的邏輯實現。
v-bind:class,v-if else,執行流程分析。
vue實現典型的登入頁面效果,模仿噹噹,京東登入效果,根據使用者的輸入監聽登入按鈕和可操作行為。
在實際專案開發中可以直接參考,拿來用。

012:v-for的高階使用,實戰使用案例,典型的列表頁面的邏輯實現
結合傳統list頁面,來對v-for進行實際專案中的渲染,模擬今日頭條的資料列表來實行,加深對v-for的靈活使用。
v-for實現下拉重新整理,上拉載入實現。
在開發噹噹網商城專案中,商品列表,訂單列表等等v-for的使用無處不在。

013: v-on:click()的高階使用,實戰使用案例,典型購物車列表頁面刪除,新增一條資料的邏輯實現
v-on:click結合v-for使用,繫結list中每一條資料,刪除list中的某一條,n條資料操作,
使用場景為訂單list中,刪除一條訂單。購物車刪除一條資料等等在操作list的使用。
vm.list刪除一條資料後指標的變化,vm物件會對指標進行重置。
特別強調,vm物件中關於this關鍵詞的使用。

014:$watch()的高階使用場景之下拉選單
$watch()的使用原則和場景,能用但不能濫用,主要使用場景為。
當click事件監聽不到的時候而又不得不觀察某個變數的變化,重點是配合下拉選單操作來使用。

015: form表單繫結一覽
普通文字插值,單選繫結,多選繫結,修飾符之 .number, .trim的使用技巧。
特別強調;文字區域插值( <textarea></textarea> ) 並不會生效,應用 v-model 來代替。
vue元件模式不適合於APIcloud開發app,APIcloud在打包的過程中會影響vue的元件化,建議用原始引入的方式來使用vue。

016:vue的ajax類庫vue-resource的引入使用上,vue-ajax的使用案例
vue-resource的下載和引入,怎麼看文件,和測試程式碼。
目前git上的vue-resource其實是相容vue1.0和vue2.0的,都是可用得。
結合資料列表頁面和api介面資料,實戰引入vue-resource的操作。
vue-resource提供ajax元件預設是沒有解決跨域問題的,需要自行處理或則後臺開發人員做服務端的跨域處理。

017:vue的ajax類庫vue-resource的引入使用下
vue-resource ajax 跨域跳過的坑,php版本的問題,導致我們寫的php介面程式碼沒有生效。
特別強調:php版本也是需要測試,選一個穩定的版本。
回撥接受引數的固定寫法
var ret = JSON.parse(response.data);得到api返回的完整json資料

第四章:資料庫設計

018:圖片資源模組設計和廣告
圖片資源表,利用七牛雲端儲存做圖片伺服器,app開發的標配設計。
cms模組資料表設計,app首頁輪播和廣告位資料表設計。

019:商品模組設計
商品分類表,商品主表設計和附加表設計規範,規格資料表的設計。
相簿表設計,商品表和圖片表關係拆解。
一再強調,圖片資源是一個單獨的表,所有涉及到圖片操作都需要左聯查詢獲取圖片的url地址。

020:會員模組和地區通用表設計
國家通用的省市區資料來源,配合apicloud應用商店釋出的省市區三級聯動模組來實現。
通用的收貨地址表,會員銀行卡表,充值提現日誌表設計注意事項。

021:購物車模組設計
購物車和商品主表,商品附表的關係。
購物車和訂單主表之間的關係,和裝置id之間的關係。
app端免登陸購物車欄位表明,pc端免登陸session_id欄位說明,免登陸業務邏輯怎樣實現。

022:訂單模組設計
訂單主表和訂單附表一對多的關係,訂單表的配送地址和使用者地址之間的關係。
訂單表和使用者支付操作的業務邏輯處理,包括支付寶,微信支付,到付模式,並且引入預支付訂單的概念。

023:許可權管理模組設計
每個成型的系統都有一套全系管理系統。對比此專案和其他系統的許可權管理,分析優劣勢。
許可權節點概念的引入,所謂的許可權dom樹形結構概念。

027:首頁輪播資料和推薦商品介面開發
商品聯查的時候注意商品是否上下架,只篩選出上架的商品
谷歌瀏覽器jsonview外掛的使用

028:商品分類,商品子分類,無限極分類開發
商品分類包括無限級分類,包括子分類篩選

029:thinkphp3.2和5.0版本除錯API介面時get引數傳遞解惑
thinphp3.2版本和5.0版本在url傳引數的升級變化。
如何在瀏覽器裡面的url來進行引數傳遞,直接測試程式碼。

030:指定商品分類下的商品列表,分頁介面開發。
分頁引數page的突出使用,區分thinkphp3.2和thinkphp5.0的區別。

031:商品詳情,多規格商品資料整合介面開發。
預設選中一個規格商品進行展示,根據使用者選擇規格的不同,我們呼叫指定的規格產品。

032:新增某件商品到購物車操作,商品加1/n介面開發

033:購物車某件商品減1,減n操作,考慮併發情況的介面開發

034:購物車刪除某件商品介面開發,購物車列表介面開發

035:購物車列表全選反選介面開發,某件商品選擇反選介面開發

036:使用者註冊簡訊傳送介面開發