先後端項目對接流程梳理

 

課程目標

掌握一個電商網站從設計到上線的整個過程所涉及的流程 
具有獨立開發一個前端項目的能力

 

架構設計

先後端徹底分離
分層架構
模塊化

 

技術選型

HTMl CSS JS jQery

 

輔助工具

Webpack NodeJs NPM Shell

 

效率工具

Sublime Chrome Charles Git

 

課程安排

//基礎框架的搭建 雙平臺的開發環境安裝 git倉庫規範化用法 webpack腳手架搭建實戰 //通用模塊 可高複用工具類設計與封裝 通用模塊設計與獨立打包方法 高逼格UI開發經驗與技巧 //用戶模塊 數據安全性處理方案 表單同步/異步驗證 小型SPA開發 //商品模塊 jQuery 插件模塊改造 獨立組建抽離技巧 多功能列表開發 //購物車模塊 商品狀態隨時驗證方案 模塊內部方法調用方式 非Form提交時的數據驗證 //訂單模塊 Modal式組件封裝思想 城市聯動操做 複雜表單回填 //支付模塊 支付寶支付功能對接 支付狀態動態監測 支付成功回執處理 //後臺管理 管理後臺的實現思路 React框架及組件化 React-Router的使用 //訪問數據分析 pv/uv 流量來源監控 用戶特徵分析 //SEO優化 SEO原理 關鍵詞設計 SEO監控 //線上部署 線上服務器的搭建 自動化腳本編寫 域名規劃與nginx配置 //可用性監控 外部監控原理 第三方監控設置 更高級監控方式

 

電商平臺需求分析

//需求拆分原則 單個迭代不宜太大 需求可交付 ，可以造成功能閉環 有成本意識，遵循二八原則 有預期的價值體現 //提煉核心需求 用戶端（展現 購物車 下單 支付 訂單 用戶） 後臺管理（商品管理 品類管理 訂單管理 管理員登錄） //電商功能拆分--用戶端 商品 》 首頁 商品列表 商品詳情 購物車 》 購物車梳理阿哥，添加刪除商品 購物車提交 訂單 》 訂單確認（地址管理）,訂單提交，訂單列表，訂單詳情 支付 》 支付 用戶 》 登錄 註冊 我的信息 找回密碼 修改密碼 //電商功能拆分--管理後臺 商品管理 》 添加/編輯商品 查看商品 ，下架 品類管理 》 添加品類 查看品類 訂單管理 》 訂單列表 訂單詳情 發貨 權限 》 管理員登錄 //參與感 更深刻了解業務和需求 豐富其餘領域的知識 堤防不靠譜的需求

 

1-3 架構設計及技術選型

//架構設計--分層架構 定義： 把功能類似 ，抽吸那個級別相近的實現進行分層隔離 優點：鬆散耦合（易維護 易複用 易擴展） 常見的分層方式： MVC MVVM //架構設計--模塊化 定義：解決一個複雜問題時，自頂向下逐層把系統劃分紅若干模塊的過程 意義：解耦 可並行開發 模塊化方案： AMD CMD CommonJS ES6

 

//技術選型 軟件過程 軟件過程選擇--敏捷開發 定義：以用戶需求進化爲核心 ，採用迭代，按部就班的方法進行軟甲開發 是一種迭代的意識和方法，而不是概念和工具 優勢：可以應對知足不斷變化的需求 不足：對團隊成員的能力要求比較高 先後端分離 先後端分離方式--不分離 先後端公用一項項目目錄，甚至頁面內嵌js，css 本地開發環境搭建成本高 共同維護成本高 發佈風險高 先後端分離方式--部分分離 後段負責頁面模版（JSP／Velocity／Freemarker） 本地開發環境搭建成本較高 更新頁面模板仍須要後段協助 ，效率不夠高 須要先後端同時發佈 先後端分離方式--徹底分離1 方案1 ：velocity 發佈的時候同步到後段 優勢 徹底分離 ，能直接生成動態的模版，利於SEO 缺點：系統複雜度高 ，須要先後端同時發佈 先後端分離方式--徹底分離2 方案2 ：純靜態html 徹底經過接口作數據交互 優勢：徹底脫離後段模版，系統複雜程度低 缺點：不利於seo 優化方案：Server Render ／ 蜘蛛定製頁面 框架 jQuery Angular Avalon Vue React css Less Sass 用戶端（求穩 用戶類多樣 有SEO要求 多頁應用）選用jQuery css 管理系統（求快 用戶類型單一 無SEO要求） 選用 React Sass 構建工具 Grunt Gulp Webpack 選用Webpack 版本控制 svn git 選用git 發佈方式 拉取代發佈代碼 》 編譯大包 》 發佈到線上機器 發佈方式--域名規劃 html > www./admin.com js+css > s. image > img. 技術選型總結 軟件過程：敏捷開發 先後端分離： 徹底分離，純靜態方式 模塊發方案：CommonJS + Webpack 框架選擇：用戶端jQuery + css 管理系統React 版本控制： git 發佈過程：拉去代碼 》 編譯打包 》 發佈到線上機器

 

1-4 先後端配合方式及數據接口定義

先後端配合方式及數據接口的定義
 //職責範圍 後端（數據存儲 文件服務 數據接口） 前端（數據請求 數據處理 頁面展現）  //接口文檔規範--格式 模板 -- 接口名稱 ／product.do --接口地址 request --請求信息 reponse --響應信息

接口文檔規範–請求和響應

2-1開發環境的搭建

語言環境

jQuery Webpack node.js git

node.js簡介

定義：js的服務端運行環境
用途：構建工具webpack的環境依賴
特色：單線程，異步編程
應用場景：低運算，高I/O

node.js包管理工具--npm  //git的安裝和配置 git簡介 介紹：git是一款免費，開源的分佈式版本控制系統，用於敏捷搞笑處理任何或大或小的項目 下載地址：https://git-scm.com/download/mac git經常使用命令 git init git commit -am '註釋' git checkout branch git merge git pull / git push git配置 --gitconfig

 

開發工具

sublime Chrome Charles

//sublime 快捷鍵
cmd + shift + d 複製行 cmd + shift + k 刪除行 cmd + ；註釋 cmd + w 關閉當前標籤 cmd + n 打開新標籤 cmd + shift + t 恢復關閉的標籤 cmd + d 查找並選擇 cmd + f 當前頁查找 cmd + shift + f 在文件夾中查找 

 

3-1 項目初始化基於模塊化的腳手架搭建 
3-1-1 項目目錄 
3-1-2 項目工具

3-2 項目目錄的搭建 
3-2-1git倉庫的創建

3-2-1-1git項目創建 
目錄結構的設計 
src(page+view service util image) 
dist(View Js Css resource )

登錄碼雲：https://gitee.com （建立一個新的項目）

1: git clone git@gitee.com:jjsnc/jjsnc.git 
若是出現如下錯誤 Permission denied (publickey) 須要配置用戶名和密碼

2 git config –global user.name [username] 
git config –global user.email [email]

3: 如何生成SSH key 
3-1 檢查ssh key 是否存在 id_rsa.pub 或 id_dsa.pub 
命令： ls -al ~/.ssh 
3-2：若是沒有ssh key 生成新的ssh key （一直點擊回車便可）

ssh-keygen -t rsa -C "your_email@example.com"

 

3-3 ：將ssh key 添加到github 中 
複製：id_rsa.pub文件 裏面的文字信息 
Mac 命令：pbcopy < ~/.ssh/id_rsa.pub

目前爲止git倉庫已經建立完成 
下一步須要把本地的git倉庫和遠程的關聯在一塊兒 
命令: rm-rf jjsnc (刪除此文件夾) 
命令：mkdir jjsnc (建立文件夾) 
命令：cd jjsnc (在此文件夾下建立test.html 文件做爲測試) 
命令：git init （在jjsnc 目錄下進行初始化） 
命令：ls -al (這時候會出現.git 文件夾) 
命令：git remote add origin git@gitee.com:jjsnc/jjsnc.git 
(origin 跟的是項目的ssh) 
命令：git pull origin master (拉取遠程服務器上面的master 分支) 
命令：git status （查看當前狀態 目前test.html 是爲提交狀態） 
命令: git add . (把文件追蹤上) 
命令：git commit -am ‘這裏改動的備註’ （該改動的代碼提交） 
命令：git push ( 把本地的東西都推送到遠程的服務器上面) 
命令：git push –set-upstream origin master ( 肯定推送到遠程服務器那個分支上面 ，就第一次推送到遠程服務器的時候使用)

//目前爲止 本地文件夾和遠程的數據庫就對應起來了

3-2-1-2git權限配置 
3-2-1-3gitignore的配置

//此文件夾會設置一個規則 被匹配到的文件都不會被跟蹤
命令： vim .gitignore (建立此文件) .gitignore 文件內容 .DS_Store /node_modules/ /dist/ 命令： git status (查看是否.gitignore 文件是否成功) 命令：ls -al (查看全部文件) 命令：touch .DS_Store (建立此文件 測試.gitignore 是否成功) 命令：git status (發現 .DS_Store 並無被追蹤到) 

 

3-2-1-4 git 切換建立分支命令

命令：git checkout -b jjsnc_v1.0 (checkout 是切換分支 -b表示這個分支尚未 總結：建立這個分枝而且切換到這個新建立的分支上) 命令：git branch (查看全部分支 帶* 表示當前的分支) //而後在該分支下面建立 對應src 及其相對應的目錄 git 對空文件夾是不進行追蹤的 

 

3-3 腳手架搭建

npm init  會生成 package.json 文件 安裝依賴包 npm install XXX 卸載依賴包 nom uninstall XXX 參數： -g 參數 --registry=https://registry.npm.taobao.org webpack 設計思想 -- require anything (任何需求) 加載方式：各類loader 插件 編譯方式：commonjs模塊->function 類型模塊 官方文檔：http://webpack.github.io/docs/ //webpack安裝 npm install web pack -g nom install webpack@1.15.0 --save-dev (當前版本項目依賴) webpack -v （查看版本） 僅限此項目 爲什麼全局安裝不用版本號 （npm 加載原理 會優先使用本地的npm包） 爲何用1.15.0 官網上不是建議升級2.x了？（爲什麼兼容IE8） 什麼是 --save-dev？ （把安裝包的信息 存放在package.json devDependencies 下面） webpack.config.js entry:js 的入口文件 externals: 外部依賴的聲明 output：目標文件 resolve: 配置別名 module: 各類文件 各類loader plugins： 插件 Webpack Loaders html: html-webpack-plugin /html-loader js: babel-loader + babel-preset-es2015 css:style-loader+ css-loader image+font :url-loader Webpack 經常使用命令 webpack 異步壓縮文件 webpack -p 作線上發佈時候的壓縮打包 webpack --watch 實時監聽文件 壓縮文件 webpack-dev-server 做用：前端開發服務器 特點：能夠在文件改變時，自動刷新瀏覽器 安裝：npm install webpack-dev-server --save-dev 配置：webpack-dev-server/click? http://localhost:8088 實用：webpack-dev-server --port 8088 --inline 

 

3-4 npm和wbpack 初始化

命令： npm init （一直點擊enter） 命令： npm install webpack@1.15.0 --save-dev （安裝此項目對應的版本webpack 主要是爲了兼容性） index.js cats = require('./cats.js'); console.log(cats); cats.js var cats = ['dave','henry','martha']; module.exprots = cats; webpack.config.js module.exports = { entry:'./src/page/index/index.js', output: { path:'./dist', filename:'app.bundle.js' } } 命令：webpack 

3-5 webpack 對腳本和樣式的處理

//sublime 新插件 
FileHeader 
第一步：command+Shift+p 
第二步：installPackage 
第三步：FileHeader 
實用快捷鍵：command+option+a 而後enter

js用什麼loader 加載？ 
官方文檔上的例子中entry 只有一個js ，咱們有多個怎麼辦？ 
output 裏面要分文件夾存放目標文件，怎麼設置？

var config = { entry:{ 'index' : ['./src/page/index/index.js'], 'login' : ['./src/page/login/index.js'] }, output: { path:'./dist', filename:'js/[name].js' } }; module.exports = config;

 

 

jquery 引入方法？

npm installe jquery --save var $ = require('jquery'); $('body').html('Hello jQuery' //這種方式是能夠的 可是隻是局部不是全局 npm uninstall jquery --save //全局安裝jquery 在index.html 中引入 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> //在全局引入的基礎上 模塊化引入jquery 在web pack.config.js 配置 externals : { 'jquery': 'window.jQuery' } //單頁面 模塊化引入 var $$= require('jquery'); $$('body').html('hello jquery 這裏是全局的函數'); 

 

我想提取公共模塊 怎麼處理？

CommonsChunkPlugin

var webpack = require('webpack'); entry:{ 'common' : ['./src/page/common/index.js'], 'index' : ['./src/page/index/index.js'], 'login' : ['./src/page/login/index.js'] }, plugins:[ // 獨立通用模塊到js/base.js new webpack.optimize.CommonsChunkPlugin({ name : 'common', filename : 'js/base.js' }) ]

 

 

樣式使用怎樣的loader？ 
webpack打包的css怎麼獨立成單獨的文件？

var ExtractTextPlugin = require('extract-text-webpack-plugin'); module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") } ] }, plugins: [ // 獨立通用模塊到js/base.js new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'js/base.js' }), // 把css單獨打包到文件裏 new ExtractTextPlugin("css/[name].css") ] 

 

 

3-6 webpack 對html模版的處理

npm install html-webpack-plugin --save-dev 

/ 獲取html-webpack-plugin 參數的方法

var getHtmlConfig = function(name) { return { template: './src/view/'+name+'.html', filename: 'view/'+name+'.html', inject: true, hash: true, chunks: ['common', name] //chunks 肯定當前頁面加載哪些js文件 能夠查此插件API //html 模版的處理 new HtmlWebpackPlugin(getHtmlConfig('index')), new HtmlWebpackPlugin(getHtmlConfig('login')) //使用 在src view 新建layout html-head.html 文件 在 src view idnex.html 文件內容添加 <%= require('html-loader!./layout/html-head.html') %> npm install html-loader --save-dev

 

3-7 webpack-對icon-font 和圖片的處理

npm install url-loader --save-dev npm install file-loader --save-dev //webpack.config.js loader 配置 { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' } //css文件路徑中注意相對路徑層級 

 

3-8 webpack-dev-sertver

npm install webpack-dev-server@1.16.5 --save-dev //全局安裝 sudo npm install webpack-dev-server WEBPACK_ENV='dev' webpack-dev-server --inline --port 8088 

 

3-9 項目初始化代碼提交與本章知識總結

git add . git commit -am '備註' git push git tag tag-dev-initial git push origin tag-dev-initial //總結 新建git項目 git權限配置 gitignore配置 文件目錄的劃分 git分支使用規範 npm 使用 npm初始化 安裝 ／ 卸載npm包 npm經常使用機制 npm自定義命令的使用 webpack webopack 設計思想 webpack 編譯原理 webpack的安裝 wbpack.config.js 進化過程 webpack對腳本的處理 js的loader js多入口配置 目標文件按文件類別分別存放 jquery引入方法 提取通用模塊 對樣式的處理 css文件使用loader css打包成單獨的文件 webpack 對html模版的處理 html-webpack-plugin 多頁應用裏html的處理 通用html模塊的抽離 webpack對圖片和icon-font 處理 靜態資源使用loader url-loader 裏參數的配置 ewbpack-dev-server 安裝和配置 飲用場景和使用方式 環境變量的設置和讀取方法 webpack命令和npm 自定義命令的結合 代碼的提交 代碼的提交過程 git 的tag用法 

 

5-1 用戶模塊的設計，功能拆分 加護數據接口分析

用戶涉及的頁面 
登陸

//肯定功能點和接口 字段驗證 ，經過後提交後段接口 接口成功失敗的處理

 

 

註冊

對用戶名異步驗證
字段驗證，經過後提交後段接口
接口成功失敗的處理
接口
判斷用戶名是否存在的接口
體積哦啊註冊的接口

 

找回密碼

輸入密碼 獲取密碼提示問題
輸入密碼提示問題的答案進行驗證
提交修改後的密碼 //接口 根據用戶名獲取密碼提示的問題接口 根據用戶名，問題和答案獲取認證的token接口 根據用戶名和認證的token 重置密碼接口

 

我的中心

顯示我的信息
我的信息的修改
//接口 獲取用戶信息接口 修改用戶信息接口

 

修改密碼

根據原密碼和新密碼來更新用戶密碼
//接口 更新密碼的接口

 

支付寶支付–return_url

支付寶支付–notify_url

經常使用seo優化技巧

1：增長頁面數量
2：減小頁面層級
3：關鍵詞密度
4：高質量友鏈
5：分析競對
6：SEO數據監控

訪問數據的統計經常使用指標
訪問領 PV UV VV
流量來源
搜索關鍵詞
設備信息

項目上線流程

生產環境配置

安裝nodejs
安裝webpack
安裝ruby && sass
安裝 git 並配置權限

發佈腳本的編寫

拉去最新代碼
項目初始化
執行打包編譯
複製dist目錄到目標目錄


nginx和域名的配置


存活監控

監控主戰地址
監控第三方內容地址
腳本一場監控，性能監控，自定義監控