整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊。
2012年12月17日，萬維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺的奠基石?！?/p>
2013年5月6日， HTML 5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬維網(wǎng)的核心語言：超文本標(biāo)記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性。HTML5添加了很多新元素及功能，比如： 圖形的繪制，多媒體內(nèi)容，更好的頁面結(jié)構(gòu)，更好的形式 處理，和幾個api拖放元素，定位，包括網(wǎng)頁 應(yīng)用程序緩存，存儲，網(wǎng)絡(luò)工作者，等。
支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內(nèi)的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。
H5的出現(xiàn)，不僅僅帶來酷炫的效果。更多的是對未來創(chuàng)造了無限可能?，F(xiàn)在它不僅僅適用于在傳統(tǒng)的PC網(wǎng)頁，在移動端，平板，微信，桌面應(yīng)用，智能家居等方面都得到了廣泛的應(yīng)用。所以近些年來，H5特別火。但是在公司招聘或者個人應(yīng)聘的時候，往往用h5工程師的很少，通常都是前端工程師，web全棧工程師這樣的稱謂。薪資也是根據(jù)工作經(jīng)驗和個人能力從5k、8k到30k、50k不等。那么如何才能進(jìn)入這個最熱門的IT行業(yè)，學(xué)會乃至精通html5前端技術(shù)呢。
下面根據(jù)我個人的理解，總結(jié)了一下需要學(xué)習(xí)的技術(shù)：
基礎(chǔ)類：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）構(gòu)建工具（yoman/bower/grunt/gulp/webpack）,sass,less,stylus,Foundation,php,es6（promise,generator,co）,es7(await,async),cdn加速，SEO優(yōu)化，http,模塊化（commonjs,seajs,requirejs）,zepto.js,Jquery.mobile,react Native，backboneJs，lodash,prototype,fis,webwork,websocket
高級類：js高級設(shè)計（作用域，原型鏈，閉包原型鏈面向?qū)ο?、設(shè)計模式），nodejs(express,koa,..)，mysql(sequelize)，mongodb(mongoose),模板引擎（ejs/jade/handlebars）linux,redis,nginx/Apache,微信小程序,Ember，CoffeeScript,TypeScript,JSX,桌面應(yīng)用（Electron）
工具類：webstrom，sublime，VSCode,Atom,Vim,Dreamweaver,postman，fiddler，Hbuilder,photoshop
學(xué)會了以上的70%，你就能成為一名合格的前端工程師了，如果上面的技能全都學(xué)會并精通了，那么恭喜你，你就從大前端全棧工程師，向全能爆棧工程師邁進(jìn)了！
不多說先上效果圖演示
項目：http://112.74.164.107:9990/
1、安裝組建
redis: yum install redis/apt install redis
2、創(chuàng)建虛擬化環(huán)境并進(jìn)入
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、啟動服務(wù)
gunicorn -w 5 -k gevent -b 0.0.0.0:9990 webchat.wsgi
6、訪問
瀏覽器訪問 http://ip:9990
整個項目中涉及的思路和知識點我們在這里都一一分解為大家詳細(xì)解說如下：
Django 基礎(chǔ)
Django ：一個可以使 Web 開發(fā)工作愉快并且高效的 Web 開發(fā)框架，能夠以最小的代價構(gòu)建和維護(hù)高質(zhì)量的 Web 應(yīng)用
框架：軟件開發(fā)工程師從日常的重復(fù)勞動中總結(jié)出快速的、模塊化的、安全的軟件開發(fā)模式
Django 是 Python 開發(fā)者的最佳 Web 框架
MVC
ORM
Object Relation Mapping (關(guān)系對象映射)
Mail (通過郵箱和驗證碼方式進(jìn)行用戶登錄驗證)
開發(fā)者可為使用 Django 提供的 send_mail 函數(shù)發(fā)送郵件
使用方法
配置郵箱(setting.py)
發(fā)送
send_mail(subject, message, from_email, recipient_list, fail_silently=False, auth_user=None, auth_password=None, connection=None, html_message=None)
注: django 發(fā)送郵件封裝 python smtplib 模塊，smtplib 使用方 法: https://github.com/imsilence/packages/blob/master/python/mailclient.py
Session & Cookie
實現(xiàn)用戶認(rèn)證機(jī)制
是什么?
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議
為什么需要?
HTTP 協(xié)議是一種無狀態(tài)的、無連接的、單向的應(yīng)用層協(xié)議。它采用了請
求/響應(yīng)模型。通信請求只能由客戶端發(fā)起，服務(wù)端對請求做出應(yīng)答處理
弊端: HTTP 協(xié)議無法實現(xiàn)服務(wù)器主動向客戶端發(fā)起消息。
傳統(tǒng)模式下， Web 應(yīng)用程序通過頻繁的 ajax 請求實現(xiàn)長輪詢( 輪詢是在 特定的時間間隔(如每1秒),由瀏覽器對服務(wù)器發(fā)出 HTTP 請求，然后由 服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器)
缺點:輪詢的效率低，非常浪費帶寬等資源(瀏覽器需要不斷的向服務(wù)器
發(fā)出請求)
如何工作?
Web 瀏覽器和服務(wù)器都必須實現(xiàn) WebSockets 協(xié)議來建立和維護(hù)連 接，由于 WebSockets 連接長期存在，與典型的 HTTP 連接不同，對 服務(wù)器有重要的影響(任何 WebSockets 服務(wù)器都需要實現(xiàn)為異步服 務(wù)器，基于多線程或多進(jìn)程的服務(wù)器無法適用于 WebSockets，因為 它旨在打開連接，盡可能快地處理請求，然后關(guān)閉連接)
在 WebSocket 協(xié)議中, 瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
如何使用?
客戶端 API (javascript)
1、創(chuàng)建 websocket 對象
var ws=new WebSocket(url, [protocol] );
2、屬性
ws.readyState 表示連接狀態(tài)
可選值:
ws.bufferedAmount 表示已被 send() 方法放入正在隊列中等待傳輸，但是還沒有發(fā) 出的 UTF-8 文本字節(jié)數(shù)
3、事件
4、方法
send ws.send() 使用連接發(fā)送數(shù)據(jù)
close ws.close() 關(guān)閉連接
dwebsocket 模塊為 django 提供了 WebSocket 協(xié)議的實現(xiàn)
使用
1、安裝
pip install dwebsocket
2、用法
使用 accept_websocket 或 require_websocket 裝飾器修飾 view
request.is_websocket 方法用于判斷是否為 websocket 協(xié)議
獲取 websocket 連接對象
獲取數(shù)據(jù)
發(fā)送數(shù)據(jù)
其他
Redis 是一個開源的，基于內(nèi)存的，可持久化的，K-V 數(shù)據(jù)庫
用途:
發(fā)布訂閱:是一種消息通信模式，發(fā)送者(pub)發(fā)送消息，縮 影訂閱者(sub)都可以接收消息并處理
1、在 redis 客戶端中使用
2、在 python 中使用
redis 模塊
訂閱
發(fā)布:
代碼結(jié)構(gòu)
app 定義（app.py）
配置（settings.py）
流程
1、打開登錄頁面
2、發(fā)送驗證碼
3、登錄
路由（url.py）
視圖-view.py
視圖-models.py
視圖-templates/login.html
流程
創(chuàng)建 websocket 連接到 msg/，同時注冊 open, error, message 事件
當(dāng)連接創(chuàng)建，調(diào)用 websocket.send 發(fā)送上線消息
用戶填寫消息，點擊按鈕，調(diào)用 websocket.send 方法發(fā)送聊天消息
urls.py 處理 url msg/ 到視圖 msg
msg 視圖接收和處理 websocket 消息，同時監(jiān)聽和處理 redis 訂閱的 消息
獲取 websocket 連接和發(fā)送消息（index.html）
路由處理（view.py）
消息顯示處理（index.html）
大家對此項目分享有什么疑問的請準(zhǔn)備好在本周三晚上我們的 kk 大牛會為大家一一解答。
項目分享人：KK老師
多語言混搭開發(fā)工程師，多年 PHP、Python 項目開發(fā)經(jīng)驗，曾就職 360、綠盟科技，7年工作經(jīng)驗。擅長于 Web 安全開發(fā)、性能優(yōu)化、分布式應(yīng)用開發(fā)&設(shè)計等多方面，51Reboot 金牌講師。
分享的時間：2018-12-12 21:00-22:00
參與方式：添加小助手wechat：17801747114 備注：公開課，會拉入直播分享群
薦項目1、分布式多店鋪電商系統(tǒng) goshop
使用技術(shù)：spring 、springmvc、mybatis、maven、html5、jquery、freemarker、Redis（緩存服務(wù)器）、Solr（搜索引擎）、Dubbo（調(diào)用系統(tǒng)服務(wù)）、Nginx（web服務(wù)器）、FastDFS（文件服務(wù)器）、Shiro（權(quán)限框架）、Zookeeper（分布式應(yīng)用程序協(xié)調(diào)服務(wù)）
項目地址：https://gitee.com/guoy1206/goshop
推薦項目2、基于SOA架構(gòu)的分布式電商購物商城 XMall
前后端分離 前臺商城:Vue全家桶 后臺管理系統(tǒng):Dubbo/SSM/Elasticsearch/Redis/MySQL/ActiveMQ/Shiro/Zookeeper等，官網(wǎng)http://xmall.exrick.cn/
項目特點：
1.后臺管理系統(tǒng)：管理商品、訂單、類目、商品規(guī)格屬性、用戶、權(quán)限、系統(tǒng)統(tǒng)計、系統(tǒng)日志以及前臺內(nèi)容等功能
2.前臺系統(tǒng)：用戶可以在前臺系統(tǒng)中進(jìn)行注冊、登錄、瀏覽商品、首頁、下單等操作
3.會員系統(tǒng)：用戶可以在該系統(tǒng)中查詢已下的訂單、管理訂單、我的優(yōu)惠券等信息
4.訂單系統(tǒng)：提供下單、查詢訂單、修改訂單狀態(tài)、定時處理訂單
5.搜索系統(tǒng)：提供商品的搜索功能
6.單點登錄系統(tǒng)：為多個系統(tǒng)之間提供用戶登錄憑證以及查詢登錄用戶的信息
項目地址：https://gitee.com/Exrick/xmall
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
