電商項目
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圖片上傳,加功能,模態框刪除功能。