我們不能給html5全世界，但是html5的世界全都

我們不能給html5全世界，但是html5的世界全都給了我們

TML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團隊。

2012年12月17日，萬維網聯盟（W3C）正式宣布凝結了大量網絡工作者心血的HTML5規范已經正式定稿。根據W3C的發言稿稱：“HTML5是開放的Web網絡平臺的奠基石。”

2013年5月6日， HTML 5.1正式草案公布。該規范定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的作者，努力提高新元素互操作性。HTML5添加了很多新元素及功能，比如：圖形的繪制，多媒體內容，更好的頁面結構，更好的形式處理，和幾個api拖放元素，定位，包括網頁應用程序緩存，存儲，網絡工作者，等。

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。

H5的出現，不僅僅帶來酷炫的效果。更多的是對未來創造了無限可能。現在它不僅僅適用于在傳統的PC網頁，在移動端，平板，微信，桌面應用，智能家居等方面都得到了廣泛的應用。所以近些年來，H5特別火。但是在公司招聘或者個人應聘的時候，往往用h5工程師的很少，通常都是前端工程師，web全棧工程師這樣的稱謂。薪資也是根據工作經驗和個人能力從5k、8k到30k、50k不等。那么如何才能進入這個最熱門的IT行業，學會乃至精通html5前端技術呢。

下面根據我個人的理解，總結了一下需要學習的技術：

基礎類：html,css,js,h5,css3常見特效

必須類：ajax（JSON&JSONP）,jquery(源碼和插件),bootstrap,DOM操作,web緩存（session，cookie, localStorage、sessionStorage）

晉級類：angularJs，reactJs,vueJs,meteor,wx-js-sdk,ionic,cordova,游戲(svg,webGL)

拓展類：版本控制（SVN/Git）構建工具（yoman/bower/grunt/gulp/webpack）,sass,less,stylus,Foundation,php,es6（promise,generator,co）,es7(await,async),cdn加速，SEO優化，http,模塊化（commonjs,seajs,requirejs）,zepto.js,Jquery.mobile,react Native，backboneJs，lodash,prototype,fis,webwork,websocket

高級類：js高級設計（作用域，原型鏈，閉包原型鏈面向對象、設計模式），nodejs(express,koa,..)，mysql(sequelize)，mongodb(mongoose),模板引擎（ejs/jade/handlebars）linux,redis,nginx/Apache,微信小程序,Ember，CoffeeScript,TypeScript,JSX,桌面應用（Electron）

工具類：webstrom，sublime，VSCode,Atom,Vim,Dreamweaver,postman，fiddler，Hbuilder,photoshop

學會了以上的70%，你就能成為一名合格的前端工程師了，如果上面的技能全都學會并精通了，那么恭喜你，你就從大前端全棧工程師，向全能爆棧工程師邁進了！

不多說先上效果圖演示

項目：http://112.74.164.107:9990/

1、安裝組建

redis: yum install redis/apt install redis

2、創建虛擬化環境并進入

python3/python -m venv venv

source venv\bin\active

3、安裝第三方庫

pip install -r requirements.txt

4、初始化

python manage.py makemigrations

python manage.py migrate

python manage.py collectstatic

5、啟動服務

gunicorn -w 5 -k gevent -b 0.0.0.0:9990 webchat.wsgi

6、訪問

瀏覽器訪問 http://ip:9990

整個項目中涉及的思路和知識點我們在這里都一一分解為大家詳細解說如下：

Django 基礎

Django ：一個可以使 Web 開發工作愉快并且高效的 Web 開發框架，能夠以最小的代價構建和維護高質量的 Web 應用

框架：軟件開發工程師從日常的重復勞動中總結出快速的、模塊化的、安全的軟件開發模式

Django 是 Python 開發者的最佳 Web 框架

MVC

ORM

Object Relation Mapping (關系對象映射)

用來把對象模型表示的對象映射到基于 SQL 的關系模型數據庫結構中去
在具體的操作實體對象的時候，就不需要再去和復雜的 SQL 語句打交道，只需簡單的操作實體對象的屬性和方法

Mail (通過郵箱和驗證碼方式進行用戶登錄驗證)

開發者可為使用 Django 提供的 send_mail 函數發送郵件

使用方法

配置郵箱(setting.py)

EMAIL_HOST='smtp-mail.outlook.com'
EMAIL_PORT=587
EMAIL_HOST_USER='imsilence@outlook.com'
EMAIL_HOST_PASSWORD=‘xxxxxx'
EMAIL_USE_TLS=True
EMAIL_FROM=EMAIL_HOST_USER

發送

send_mail(subject, message, from_email, recipient_list, fail_silently=False, auth_user=None, auth_password=None, connection=None, html_message=None)

注: django 發送郵件封裝 python smtplib 模塊，smtplib 使用方法: https://github.com/imsilence/packages/blob/master/python/mailclient.py

Session & Cookie

實現用戶認證機制

HTTP 協議為無狀態
Session 存儲在服務器
Cookie 存儲在客戶端

WebSocket 基礎(實現服務端消息主動推送客戶端)

是什么?

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議

為什么需要?

HTTP 協議是一種無狀態的、無連接的、單向的應用層協議。它采用了請

求/響應模型。通信請求只能由客戶端發起，服務端對請求做出應答處理

弊端: HTTP 協議無法實現服務器主動向客戶端發起消息。

傳統模式下， Web 應用程序通過頻繁的 ajax 請求實現長輪詢( 輪詢是在特定的時間間隔(如每1秒),由瀏覽器對服務器發出 HTTP 請求，然后由服務器返回最新的數據給客戶端的瀏覽器)

缺點:輪詢的效率低，非常浪費帶寬等資源(瀏覽器需要不斷的向服務器

發出請求)

如何工作?

Web 瀏覽器和服務器都必須實現 WebSockets 協議來建立和維護連接，由于 WebSockets 連接長期存在，與典型的 HTTP 連接不同，對服務器有重要的影響(任何 WebSockets 服務器都需要實現為異步服務器，基于多線程或多進程的服務器無法適用于 WebSockets，因為它旨在打開連接，盡可能快地處理請求，然后關閉連接)

在 WebSocket 協議中, 瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

如何使用?

客戶端 API (javascript)

1、創建 websocket 對象

var ws=new WebSocket(url, [protocol] );

2、屬性

ws.readyState 表示連接狀態

可選值:

0: 表示連接尚未建立。
1: 表示連接已建立，可以進行通信。
2: 表示連接正在進行關閉。
3: 表示連接已經關閉或者連接不能打開。

ws.bufferedAmount 表示已被 send() 方法放入正在隊列中等待傳輸，但是還沒有發出的 UTF-8 文本字節數

3、事件

open ws.onopen 建立連接時觸發
message ws.onmessage 客戶端接收服務端數據時觸發
error ws.onerror 通信發生錯誤時觸發
close ws.onclose 連接關閉時觸發

4、方法

send ws.send() 使用連接發送數據

close ws.close() 關閉連接

dwebsocket 使用

dwebsocket 模塊為 django 提供了 WebSocket 協議的實現

使用

1、安裝

pip install dwebsocket

2、用法

使用 accept_websocket 或 require_websocket 裝飾器修飾 view

accept_websocket: view 既可處理 websocket 協議又可處理普通 http協議
require_websocket: view 只處理 websocket 協議，拒絕處理普通 http協議

request.is_websocket 方法用于判斷是否為 websocket 協議

獲取 websocket 連接對象

request.websocket 對象

獲取數據

request.websocket.wait 方法, 阻塞性獲取客戶端數據
request.websocket.read 方法，非阻塞性獲取客戶端數據

發送數據

request.websocket.send(message): 發送消息給 websocket 客戶端

其他

request.websocket.count_messages()
request.websocket.has_messages()
request.websocket.__iter__()

redis 基礎

Redis 是一個開源的，基于內存的，可持久化的，K-V 數據庫

用途:

緩存
消息隊列
發布訂閱

發布訂閱:是一種消息通信模式，發送者(pub)發送消息，縮影訂閱者(sub)都可以接收消息并處理

1、在 redis 客戶端中使用

訂閱:subscribe channel
發布:publish channel message

2、在 python 中使用

redis 模塊

pip install redis
cli=redis.StrictRedis()

pubsub=cli.pubsub()
pubsub.subscribe(channel)
pubsub.get_message()

發布:

cli.publish(channel, message)

代碼解讀——項目啟動

代碼結構

app 定義（app.py）

配置（settings.py）

配置訪問地址

啟用 app

配置模版路徑

配置時區和國際化

配置靜態資源路徑

配置郵箱

配置 redis 緩存

代碼解讀——用戶認證流程

流程

1、打開登錄頁面

瀏覽器中輸入 http://ip:9990/login/, 瀏覽器發送 GET 請求到 login/
urls.py 處理 url login/ 到視圖 login
login 視圖打開 login.html 模板

2、發送驗證碼

填寫郵箱，點擊發送驗證碼按鈕，瀏覽器發送 ajax(GET) 請求到 login_code/
urls.py 處理 url login_code/ 到視圖 login_code
login 視圖調用 models 創建并記錄驗證碼，同時發送郵件給用戶，返回 json 數據

3、登錄

填寫驗證碼，點擊登陸按鈕，瀏覽器發送 ajax(POST) 請求到 login/
urls.py 處理 url login/ 到視圖 login
login 視圖調用 models 驗證郵箱和驗證碼，返回 json 數據，當驗證成功同時記錄 session 數據

路由（url.py）

視圖-view.py

視圖-models.py

視圖-templates/login.html

代碼解讀——websocket 處理流程

流程

創建 websocket 連接到 msg/，同時注冊 open, error, message 事件

當連接創建，調用 websocket.send 發送上線消息

用戶填寫消息，點擊按鈕，調用 websocket.send 方法發送聊天消息

urls.py 處理 url msg/ 到視圖 msg

msg 視圖接收和處理 websocket 消息，同時監聽和處理 redis 訂閱的消息

當接收到 websocket 消息，發布消息到 redis 通道
當接收到 redis 發布消息，則發送到 websocket 客戶端

獲取 websocket 連接和發送消息（index.html）

路由處理（view.py）

消息顯示處理（index.html）

代碼解讀——推出登陸流程

大家對此項目分享有什么疑問的請準備好在本周三晚上我們的 kk 大牛會為大家一一解答。

項目分享人：KK老師

多語言混搭開發工程師，多年 PHP、Python 項目開發經驗，曾就職 360、綠盟科技，7年工作經驗。擅長于 Web 安全開發、性能優化、分布式應用開發&設計等多方面，51Reboot 金牌講師。

分享的時間：2018-12-12 21:00-22:00

參與方式：添加小助手wechat：17801747114 備注：公開課，會拉入直播分享群

薦項目1、分布式多店鋪電商系統 goshop

使用技術：spring 、springmvc、mybatis、maven、html5、jquery、freemarker、Redis（緩存服務器）、Solr（搜索引擎）、Dubbo（調用系統服務）、Nginx（web服務器）、FastDFS（文件服務器）、Shiro（權限框架）、Zookeeper（分布式應用程序協調服務）

項目地址：https://gitee.com/guoy1206/goshop

推薦項目2、基于SOA架構的分布式電商購物商城 XMall

前后端分離前臺商城:Vue全家桶后臺管理系統:Dubbo/SSM/Elasticsearch/Redis/MySQL/ActiveMQ/Shiro/Zookeeper等，官網http://xmall.exrick.cn/

項目特點：

1.后臺管理系統：管理商品、訂單、類目、商品規格屬性、用戶、權限、系統統計、系統日志以及前臺內容等功能

2.前臺系統：用戶可以在前臺系統中進行注冊、登錄、瀏覽商品、首頁、下單等操作

3.會員系統：用戶可以在該系統中查詢已下的訂單、管理訂單、我的優惠券等信息

4.訂單系統：提供下單、查詢訂單、修改訂單狀態、定時處理訂單

5.搜索系統：提供商品的搜索功能

6.單點登錄系統：為多個系統之間提供用戶登錄憑證以及查詢登錄用戶的信息

項目地址：https://gitee.com/Exrick/xmall

在線咨詢

上一篇：css 之 position 屬性淺談
下一篇：制作翻頁電子版畫冊攻略：輕松掌握數字創作技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商