電商項目
1.包含主流電商業務邏輯的移動端項目
2.學習的主要目標是掌握移動端應用開發
項目準備
項目介紹
網站是中國主要的運動鞋、皮鞋網絡零售網站，聚焦在垂直的鞋及其相關商品領域深耕。
憑藉雄厚的資金實力和在電子商務業界的誠信積累，與Nike、Adidas、Converse、NewBalance等國際大牌深度合作。
保證了產品與專賣店同步更新，讓您不出家門能最快速度買到當季新款名牌鞋。
功能介紹
| 平臺 | 模塊 | 功能 |
|---|---|---|
| 移動端web端 | 首頁 | 靜態展示頁面模塊 |
| 移動端web端 | 分類 | 一級分類、二級分類 |
| 移動端web端 | 商品 | 搜索中心、商品列表、商品詳情 |
| 移動端web端 | 購物車 | 購物車管理 |
| 移動端web端 | 用戶 | 登錄、註冊、賬戶管理 |
| 移動端web端 | 收貨地址 | 展示、添加、編輯、刪除 |
| - | - | - |
| pc端後臺管理 | 登錄 | 管理員登錄 |
| pc端後臺管理 | 用戶管理 | 用戶權限管理 |
| pc端後臺管理 | 分類管理 | 一級分類、二級分類管理 |
| pc端後臺管理 | 商品管理 | 商品錄入、刪除、修改、展示 |
項目架構
| 系統分層 | 使用技術 |
|---|---|
| 數據層： | MYSQL |
| 服務層： | NodeJs(express) |
| 前端展示： | mobile web application,pc management system |
開發模式
前後分離：
一種是前端先寫一個靜態頁面，寫好後，讓後端去套模板。
靜態頁面可以本地開發，也無需考慮業務邏輯只需要實現頁面即可。
不足是還需要後端套模板，這些前端代碼後端需要瀏覽一遍，以免出錯。另一種協作模式是，前端直接去寫模板。
這樣做的問題在於，前端編寫過程中很依賴與後端環境，需要依賴後臺提供的接口。
這種模式可認爲是前後分離模式，也是接口化開發。
不管哪一種開發模式都需要對服務層session有所瞭解。
瞭解session
- 在計算機中，尤其是在網絡應用中，稱爲會話控制。
Session 對象存儲特定用戶會話所需的屬性及配置信息。
這樣，當用戶在應用程序的 Web 頁之間跳轉時，存儲在 Session 對象中的變量將不會丟失，
而是在整個用戶會話中一直存在下去。當用戶請求來自應用程序的 Web 頁時，
如果該用戶還沒有會話，則 Web 服務器將自動創建一個 Session 對象。
當會話過期或被放棄後，服務器將終止該會話。Session 對象最常見的一個用法就是存儲用戶的首選項。
- 在計算機中，尤其是在網絡應用中，稱爲會話控制。
環境搭建
一般在進行前後分離開發需要配置好本地開發環境，
也就是說需要在本地搭建後臺開發環境，node，java，php，等後臺編程語言，提供接口支持。
- 項目後臺編程語言是nodejs所有必須安裝nodejs軟件
- 項目github主頁 https://github.com/zhousg/letao
- 可使用git拉取源代碼
git倉庫地址 https://github.com/zhousg/letao.git
克隆項目：$ git clone https://github.com/zhousg/letao.git
進入目錄：$ cd letao/
拉取項目：$ git pull origin master- 下載源碼需要依賴的外部文件，其實就是包。
npm i 或者 npm install- 創建數據庫直接在數據庫中執行建庫腳本 letao初始化.sql
- 修改數據庫連接
//修改models文件夾裏面的db.js中的數據庫鏈接信息
const pool = mysql.createPool({
host : '127.0.0.1',
user : 'root',
password : '',
database : 'letao'
});
//a) host 數據庫的ip地址
//b) user 數據庫的用戶名
//c) password 數據庫密碼
//d) database 數據庫的庫名- 啓動項目
//進入項目目錄
npm start 接口列表
移動端接口列表
- 用戶模塊
- 產品模塊
- 分類模塊
- 購物車
- 收貨地址模塊
pc端接口列表
- 員工模塊
- 產品模塊
- 分類模塊
- 用戶模塊
移動端web端
MUI介紹
- Mui 是一個ui框架 針對移動端開發的ui框架 只能適配移動端（流式佈局）
- 學習官網 http://dev.dcloud.net.cn/mui/
- 官方文檔 http://dev.dcloud.net.cn/mui/ui/
組件展示 http://dcloud.io/hellomui/
特點
- 最接近原生APP體驗的高性能前端框架
- 輕量
追求性能體驗，是我們開始啓動MUI項目的首要目標，輕量必然是重要特徵；
MUI不依賴任何第三方JS庫，壓縮後的JS和CSS文件僅有100+K和60+K - 原生UI
鑑於之前的很多前端框架（特別是響應式佈局的框架），UI控件看起來太像網頁，沒有原生感覺，因此追求原生UI感覺也是我們的重要目標
MUI以iOS平臺UI爲基礎，補充部分Android平臺特有的UI控件 - 流暢體驗
下拉刷新
爲實現下拉刷新功能，大多H5框架都是通過DIV模擬下拉回彈動畫，在低端android手機上，
DIV動畫經常出現卡頓現象（特別是圖文列表的情況）；
mui通過雙webview解決這個DIV的拖動流暢度問題；拖動時，拖動的不是div，
而是一個完整的webview（子webview），回彈動畫使用原生動畫
首頁模塊
- 頁面骨架
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
<title>樂淘首頁</title>
<link rel="stylesheet" href="assets/mui/css/mui.css"/>
<link rel="stylesheet" href="css/common.css"/>
</head>
<body>
<div class="lt_container">
<header class="lt_topBar"></header>
<div class="lt_content">
<div class="lt_wrapper"></div>
</div>
<footer class="lt_tabBar"></footer>
</div>
<script src="assets/mui/js/mui.js"></script>
</body>
</html>- 輪播圖
- 導航欄
- 商品區
學習目的：搭建頁面骨架，使用mui輪播圖組件。
分類瀏覽
- 分類頁面
- 菜單區域滾動
- 一級菜單渲染
- 二級分類聯動渲染
學習目的：全屏頁面，使用mui區域滾動組件，異步數據交互。
搜索中心
- 搜索中心頁面
- 搜索查詢功能
- 搜索記錄管理
學習目的：完成頁面，本地存儲，模版引擎使用，關鍵字搜索。
商品列表
- 商品列表頁面
- 搜索查詢功能
- 商品列表渲染
- 列表排序功能
- 上拉刷新功能
- 下拉加載功能
學習目的：完成頁面，模版引擎使用，異步數據交互，mui下拉組件使用，mui上拉組件使用。
商品詳情
- 商品詳情頁面
- 商品數據展示
- 商品尺碼選擇
- 商品數量選中
- 加入購物車
學習目的：完成頁面，模版引擎使用，異步數據交互，mui下拉組件使用，mui數量選擇組件，mui消息彈窗組件。
購物車
- 購物車商品展示
- 購物車商品刪除
- 購物車商品編輯
- 購物車下拉刷新
- 購物車總額計算
學習目的：mui完成頁面，模版引擎使用，異步數據交互，mui下拉組件使用，mui滑動列表組件，mui消息彈窗組件。
用戶模塊
用戶登錄
1.1 用戶登錄頁面 1.2 異步登錄 1.3 登錄回跳 學習目的：使用mui完成頁面，異步完成登錄邏輯，異步登錄回跳業務實現個人中心
2.1 個人中心頁面 2.2 個人信息展示 2.3 退出功能 學習目的：使用mui完成頁面，異步個人信息渲染，異步退出交互。用戶註冊
3.1 用戶註冊頁面 3.2 獲取短信驗證 3.3 用戶註冊功能 學習目的：使用mui完成頁面，短信校驗業務，異步註冊交互。
pc端後臺管理
bootstrap介紹
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。
Bootstrap 提供了全面、美觀的文檔。你能在這裏找到關於 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的所有詳細文檔。
還有很多基於bootstrap的插件，如paginator,validator
管理員登錄
- 管理員登錄頁面
- 異步登錄交互
學習目的：使用bootstrap完成頁面，異步登錄交互業務。
首頁模塊
- 首頁快速搭建
- 菜單功能
- 退出功能
- 數據可視化
學習目的：完成頁面搭建，二級菜單交互功能，echarts完成數據可視化，退出業務。
用戶管理
1.用戶分頁展示
2.用戶禁用啓用
學習目的：完成頁面搭建，二級菜單交互功能，echarts完成數據可視化，退出業務。
分類管理
一級分類管理
1.1 一級分類分頁展示 1.2 一級分類添加 1.3 一級分類刪除 學習目的：使用bootstrap完成頁面，模態框添加功能，模態框刪除功能。二級分類管理
1.1 二級分類分頁展示 1.2 二級分類添加 1.3 二級分類刪除 學習目的：使用bootstrap完成頁面，fileuplaod圖片上傳,添加功能，模態框刪除功能。
商品管理
- 商品分頁展示
- 商品添加
- 商品修改
- 商品刪除
學習目的：完成頁面搭建，fileuplaod圖片上傳，加功能，模態框刪除功能。