1. 程式人生 > >真實資料對接 從0開發前後端分離的企業級上線專案(再談前後端分離式 手把手從0打造電商平臺-前端開發)

真實資料對接 從0開發前後端分離的企業級上線專案(再談前後端分離式 手把手從0打造電商平臺-前端開發)

第1章 課程介紹(2018配套教程:電商前端+電商後端+電商許可權管理系統課程) 本章中會先讓大家瞭解課程整體情況,然後手把手帶大家做一些開發前的準備工作。 1-1 課程導學 1-2 電商平臺需求分析 1-3 架構設計及技術選型 1-4 前後端配合方式及資料介面定義 第2章 開發環境搭建與開發工具使用技巧 本章會手把手帶大家搭建起開發環境,並在正式開發之前,教大家一些提高開發效率的工具使用技巧。(nodejs和npm安裝、git安裝和配置、sublime使用技巧、chrome除錯工具、代理神器charles&Fiddler) 2-1 開發環境的搭建 2-2 nodejs和npm的介紹與安裝(mac,windows) 2-3 git的安裝和配置(mac,windows) 2-4 sublime使用技巧 2-5 chrome除錯工具 2-6 代理神器Charles&Fiddler 2-7 本章知識點總結 第3章 專案初始化與基於模組化的腳手架搭建 本章我會手把手帶大家對專案進行初始化,包括專案建立,專案結構設計和一整套基於模組化的開發腳手架的搭建(知識點:專案建立、專案結構設計、專案腳手架搭建、npm和webpack初始化、webpack–js、css檔案處理、webpack – html處理、icon-font和圖片處理、webpack–dev-server、程式碼提交,Git遠端倉庫的規範化用法等)… 3-1 專案初始化概要 3-2 專案目錄結構設計與Git遠端倉庫的建立 3-3 專案腳手架搭建概要 3-4 npm和webpack的初始化 3-5 webpack對指令碼和樣式的處理 3-6 webpack對html模板的處理 3-7 webpack對icon-font和圖片的處理 3-8 webpack-dev-server 3-9 專案初始程式碼提交與本章知識點總結 第4章 專案通用功能開發 本章中我會先帶著大家對專案的業務進行分析,並提取出專案的通用功能,然後手把手帶大家完成通用模組的開發,讓大家學會程式碼的高複用技巧。(知識點:通用功能分析和拆分思想、高逼格UI開發經驗與技巧,通用模組設計與獨立打包方法,通用JS工具類封裝、全域性樣式開發、通用結果提示頁開發、通用導航元件開發、通用搜索元件開… 4-1 專案通用模組設計和拆分概要(通用JS工具,通用佈局,通用樣式,通用導航,通用提示頁) 4-2 通用JS工具類封裝(網路資料請求功能) 4-3 通用JS工具類封裝(獲取服務端介面url、引數功能) 4-4 通用JS工具類封裝(hogan 渲染html模板功能) 4-5 通用提示功能,驗證功能封裝(手機號驗證,郵箱格式驗證,非空驗證功能) 4-6 通用UI佈局,樣式開發 4-7 通用導航開發(UI 層) 4-8 通用導航開發(邏輯層) 4-9 通用footer開發 4-10 通用header開發 4-11 通用側邊導航開發 4-12 通用操作提示頁開發 4-13 程式碼提交與本章知識點總結 第5章 使用者模組開發 本章我會帶著同學們分析,拆解使用者模組的功能及技術點,並手把手帶大家實現登入、註冊、找回密碼、個人中心、修改密碼等功能。(知識點:資料安全性處理方案,表單同步/非同步驗證,小型SPA開發) 5-1 使用者模組的設計,功能拆分,互動資料介面解析 5-2 登入頁面的開發1 5-3 登入頁面的開發2 5-4 註冊頁面的開發 5-5 找回密碼頁面的開發 5-6 個人中心的開發1 5-7 個人中心的開發2 5-8 修改密碼功能的開發 5-9 本章知識點總結與課後作業 第6章 商品模組開發 本章我會帶著同學們分析,拆解商品模組的功能與技術點,並手把手帶大家實現商品首頁,商品列表,商品詳情等功能(知識點:JQuery外掛模組化改造,獨立元件抽離技巧,多功能列表開發,輪播圖開發、分頁元件拆分和封裝、商品排序,商品大圖與縮圖聯動等)… 6-1 商品模組的設計,功能拆分,互動資料介面解析 6-2 首頁左側關鍵字導航介面開發 6-3 首頁Banner及F樓層介面開發1 6-4 首頁Banner,F樓層介面開發2 6-5 商品列表頁的開發1 6-6 商品列表頁的開發2 6-7 商品列表頁的開發3 6-8 商品列表頁的開發4 6-9 商品列表頁的開發5 6-10 商品詳情頁的開發1 6-11 商品詳情頁的開發2 6-12 商品詳情頁的開發3 6-13 商品詳情頁的開發4 6-14 程式碼提交與本章知識點總結 第7章 購物車模組開發 本章我會帶著同學們分析,拆解購物車模組的功能與技術點,並手把手帶大家開發購物車功能,包括購物車的常見用法、和後端的互動等。(知識點:商品狀態隨時驗證方案,模組內部方法呼叫方式,非Form提交時的資料驗證等)… 7-1 購物車模組的設計,功能拆分,互動資料介面解析 7-2 購物車頁面的實現(UI)1 7-3 購物車頁面的實現(UI)2 7-4 購物車頁面的實現(邏輯)1 7-5 購物車頁面的實現(邏輯)2 7-6 購物車頁面的實現(邏輯)3 7-7 程式碼提交與本章知識點總結 第8章 訂單模組開發 本章我會帶著同學們分析,拆解訂單模組的功能與技術點,並手把手帶大家實現訂單的資訊填寫、訂單的生成和確認訂單的整個流程。(知識點:Modal式元件封裝思想,城市級聯操作,複雜表單回填等) 8-1 訂單模組的設計,功能拆分,互動資料介面解析 8-2 訂單確認頁的開發(UI)1 8-3 訂單確認頁的開發(UI)2 8-4 訂單確認頁的開發(UI)3 8-5 訂單確認頁的開發(邏輯)1 8-6 訂單確認頁的開發(邏輯)2 8-7 訂單確認頁的開發(邏輯)3 8-8 訂單確認頁的開發(邏輯)4 8-9 訂單列表的開發(UI) 8-10 訂單列表的開發(邏輯) 8-11 訂單詳情頁的開發(UI,邏輯) 8-12 程式碼提交與本章知識點總結 第9章 支付模組開發 本章我會帶著同學們分析,拆解支付模組的功能與技術點,並手把手帶大家使用支付寶沙箱環境,在沒有企業資質的情況下完成支付功能的真實接入,並完成支付功能的開發。(知識點:支付寶功能對接,支付狀態動態檢測,支付成功回執處理等)… 9-1 支付模組的設計,功能拆分,互動資料介面解析 9-2 支付頁面的開發 9-3 程式碼提交與本章知識點總結 第10章 資料統計和SEO優化 本章我們會做上線前的附加工作,包括訪問資料統計(知道活的怎麼樣),基本SEO優化(想活的更好)等。(知識點:PV/UV,流量來源監控,使用者特徵分析,SEO原理,關鍵詞設計,SEO監控等) 10-1 生產環境適配 10-2 基本的SEO優化 10-3 訪問資料統計 10-4 本章知識點總結 第11章 後臺管理系統介紹(附贈內容) 本章作為附贈內容,會為大家提供一套基於React技術後臺管理系統原始碼,並對關鍵程式碼與技術點進行講解,以方便大家能搭建起自己的後臺管理系統。(知識點:React專案結構的設計、router原理及React-Router簡介、React元件的封裝方法 sass等),後臺管理系統測試賬號和密碼(切勿修改,導致其他同學體驗不了) 賬號:admin … 11-1 後臺管理系統介紹 11-2 後臺管理系統功能演示 11-3 後臺管理系統程式碼演示 第12章 線上環境配置與專案自動化釋出 本章我會教同學們把我們之前開發完成的程式碼釋出到線上,包含線上域名的解析、線上nginx的配置、線上基於shell的自動化釋出指令碼的編寫等內容。讓我們開發出的專案跑在真實的生產環境上,成為自己的一款上線作品。(知識點:線上阿里雲伺服器環境搭建,自動化釋出指令碼編寫,域名規劃與nginx配置,可用性監控,外部監控原理,… 12-1 專案上線過程 12-2 線上伺服器環境搭建 12-3 釋出流程及釋出指令碼的開發 12-4 nginx配置和域名解析 12-5 網站可用性監控 12-6 本章知識點總結 第13章 課程總結與下期內容展望 本章會帶著大家一起對電商平臺相關知識點以及介面用到的相關技術點,框架等進行總結。同時也對下期內容進行一個展望,期待能一步步把這個專案不斷演進,最後非常感謝大家的支援,有你們的支援,我將更加有動力,並努力的把更多更好的課程做好,回饋給大家。… 13-1 課程總結與下期課程展望