《數(shù)據(jù)可視化技術(shù)》課件吳勇15學(xué)生管理基礎(chǔ)網(wǎng)頁(yè)制作-23Flask Echarts Jinja可視化綜合應(yīng)用、24復(fù)習(xí)與測(cè)試

《數(shù)據(jù)可視化技術(shù)》《數(shù)據(jù)可視化技術(shù)》單元15學(xué)生管理基礎(chǔ)網(wǎng)頁(yè)制作項(xiàng)目介紹項(xiàng)目四：高校招生就業(yè)數(shù)據(jù)分析與可視化本項(xiàng)目采集了某高職院校的招生、就業(yè)數(shù)據(jù)。高職院校通過(guò)對(duì)招生數(shù)據(jù)的分析，了解不同專業(yè)的招生情況、招生分布、招生難易度等信息，從而更好地制訂招生計(jì)劃，提高招生效率。高職院校通過(guò)對(duì)歷年畢業(yè)生就業(yè)數(shù)據(jù)的分析，了解不同專業(yè)的就業(yè)情況、就業(yè)分布、就業(yè)難易度等信息，從而更好地調(diào)整專業(yè)設(shè)置、優(yōu)化課程設(shè)置，提高畢業(yè)生就業(yè)率01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)一：使用Flask制作學(xué)生管理基礎(chǔ)網(wǎng)頁(yè)現(xiàn)在需要使用Python開發(fā)一個(gè)簡(jiǎn)單的學(xué)生管理網(wǎng)站，當(dāng)使用瀏覽器訪問(wèn)網(wǎng)站的根“/”時(shí)指向index.html主頁(yè)，當(dāng)訪問(wèn)“/register”時(shí)指向register.html，當(dāng)訪問(wèn)“/manage”時(shí)指向manage.html。當(dāng)使用瀏覽器訪問(wèn)“/login?name=admin”時(shí)，頁(yè)面對(duì)name為admin的所有數(shù)據(jù)（用戶ID、性別、年齡、簽名、興趣）進(jìn)行對(duì)應(yīng)渲染。當(dāng)我們使用瀏覽器訪問(wèn)“/index?name=user”時(shí)，頁(yè)面對(duì)name為user的所有數(shù)據(jù)（用戶ID、性別、年齡、簽名、興趣）進(jìn)行對(duì)應(yīng)渲染任務(wù)1、Flask開發(fā)環(huán)境的安裝和使用任務(wù)2、使用Flask的路由功能任務(wù)3、使用Flask模板渲染學(xué)習(xí)目標(biāo)1、知識(shí)（1）了解Flask作用（2）掌握Flask的安裝運(yùn)行（3）理解Flask路由功能（4）掌握Flask模板渲染2、技能（1）能夠搭建Flask開發(fā)環(huán)境（2）能夠使用Flask路由功能（3）能夠使用Flask進(jìn)行模板渲染3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施學(xué)習(xí)內(nèi)容1、教師講解

Flask的使用

Flask路由、模板渲染2、學(xué)生討論（1）Flask功能有哪些？（2）什么是路由？3、明確任務(wù)（1）Flask開發(fā)環(huán)境的安裝和基本使用（2）使用Flask的路由功能（3）使用Flask模板渲染任務(wù)資訊1、Flask開發(fā)環(huán)境的安裝和使用Flask是一個(gè)基于Python開發(fā)并且依賴jinja2模板和WerkzeugWSGI服務(wù)的一個(gè)微型框架。其用于接收http請(qǐng)求并對(duì)請(qǐng)求進(jìn)行預(yù)處理，然后觸發(fā)Flask框架。（1）Flask安裝安裝Flask的命令：pipinstallflask如果想指定Flask的版本，那么就要使用以下命令：pipinstallflask==版本如果想升級(jí)Flask的版本，那么可以使用以下命令：pipinstall--upgradeflask==版本任務(wù)資訊（2）Flask的簡(jiǎn)單使用新建一個(gè)Python腳本，命名為app1.py

打開瀏覽器，在地址欄輸入:5000/index訪問(wèn)，可以看到“Hello,World!”字符任務(wù)資訊2、使用Flask的路由功能Flask路由就是對(duì)一個(gè)函數(shù)的映射，F(xiàn)lask的變量規(guī)則就是在路由URL中的一部分使用一個(gè)變量代替。（1）使用Flask的變量規(guī)則定制相應(yīng)的路由新建一個(gè)Python腳本app2.py可以分別訪問(wèn):8080/userByName/tom、:8080/userById/1驗(yàn)證效果。任務(wù)資訊（2）使用Flask的URL構(gòu)建完成相應(yīng)路由的編寫Flask的URL構(gòu)建就是使用url_for()函數(shù)動(dòng)態(tài)獲取路由中配置的URL，redirect可以實(shí)現(xiàn)網(wǎng)頁(yè)重定向：redirect(url)redirect(url_for("admin"))練一練

任務(wù)要求：定義一個(gè)這樣的路由，當(dāng)我們?cè)L問(wèn)/admin時(shí)，瀏覽器顯示管理員：Admin；定義一個(gè)這樣的路由，當(dāng)我們?cè)L問(wèn)/guest/alice時(shí)，瀏覽器顯示游客：alice；當(dāng)我們?cè)L問(wèn)/guest/iris時(shí)，瀏覽器顯示游客：iris；定義一個(gè)這樣的路由，當(dāng)我們?cè)L問(wèn)/user/admin時(shí)，頁(yè)面重定向到/admin；當(dāng)我們?cè)L問(wèn)/user/xxx，頁(yè)面重定向到/guest/xxx（這里xxx表示任意字符串）。任務(wù)資訊任務(wù)資訊3、Flask模板渲染（1）編寫一個(gè)獲取GET請(qǐng)求中的參數(shù)并完成個(gè)人信息的數(shù)據(jù)渲染搭建一個(gè)基本的Flask骨架，目錄結(jié)構(gòu)如下：static目錄：存放靜態(tài)資源文件，例如：CSS、JS、圖片、map3….等等；templates目錄：存放jinja2模板頁(yè)面，也就是HTML；app.py：Flask啟動(dòng)程序任務(wù)資訊flask模板渲染示例1、目錄2、test.html3、test.py任務(wù)實(shí)施本任務(wù)主要分成兩部分進(jìn)行開發(fā)：一部分是Flask后端程序，實(shí)現(xiàn)路由跳轉(zhuǎn)和數(shù)據(jù)發(fā)送的功能；另一部分是前端的網(wǎng)頁(yè)制作。任務(wù)實(shí)施map={

"admin":{

"userid":"1",

"sex":"男",

"age":"28",

"introduce":"生命不止，奮斗不息",

"power":"我是管理員，可以管理所有頁(yè)面。"

},

"user":{

"userid":"2",

"sex":"女",

"age":"20",

"introduce":"相信自己，一定能成功",

"power":"我是普通用戶，可以查閱信息和留言。"

}}任務(wù)實(shí)施本任務(wù)主要分成兩部分進(jìn)行開發(fā)：一部分是Flask后端程序，實(shí)現(xiàn)路由跳轉(zhuǎn)和數(shù)據(jù)發(fā)送的功能；另一部分是前端的網(wǎng)頁(yè)制作。1、編寫后端程序后端程序大概包括如下步驟：

1）導(dǎo)入相關(guān)包和依賴2）配置路由，實(shí)現(xiàn)不同頁(yè)面的跳轉(zhuǎn)3）創(chuàng)建用戶字典數(shù)據(jù)

4）獲取網(wǎng)址參數(shù)并取得變量，得到用戶數(shù)據(jù)，在通過(guò)模板渲染跳轉(zhuǎn)頁(yè)面時(shí)攜帶參數(shù)到前端網(wǎng)頁(yè)中去

5）創(chuàng)建啟動(dòng)代碼。2、編寫前端網(wǎng)頁(yè)前端網(wǎng)頁(yè)包括4個(gè)頁(yè)面任務(wù)實(shí)施3．驗(yàn)證1）通過(guò)瀏覽器直接訪問(wèn)站點(diǎn):5000/，顯示學(xué)生管理者頁(yè)2）通過(guò)瀏覽器訪問(wèn):5000/register，顯示注冊(cè)頁(yè)面3）通過(guò)瀏覽器訪問(wèn):5000/manage，顯示管理頁(yè)面4）通過(guò)瀏覽器訪問(wèn):5000/login?name=admin，顯示管理員賬戶信息5）通過(guò)瀏覽器訪問(wèn):5000/login?name=user，顯示普通用戶賬戶信息03整合活動(dòng)總結(jié)、知識(shí)點(diǎn)梳理學(xué)習(xí)總結(jié)拓展任務(wù)使用Jinja2完成表格的數(shù)據(jù)渲染任務(wù)要求：定義一個(gè)這樣的路由，當(dāng)我們?cè)L問(wèn)/index時(shí)，瀏覽器顯示List中遍歷的數(shù)據(jù)，渲染模板為index2.html。Python中List的內(nèi)容如下：app=Flask(__name__)List=[{"name":"alice","time":"2019-10-18",},{"name":"iris","time":"2019-10-18",},拓展任務(wù){(diào)"name":"Violet","time":"2019-10-18",}]通過(guò)Flask將List數(shù)據(jù)渲染到網(wǎng)頁(yè)中，并通過(guò)表格顯示出來(lái)，預(yù)期效果圖，如下：訪問(wèn)方法:5000/index《數(shù)據(jù)可視化技術(shù)》單元16招生數(shù)據(jù)增刪改查操作01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)：招生數(shù)據(jù)增刪改查：為了方便查詢學(xué)校各二級(jí)學(xué)院歷年招生數(shù)據(jù)，需要將招生數(shù)據(jù)保存在數(shù)據(jù)庫(kù)中。二級(jí)學(xué)院包括機(jī)械學(xué)院、電氣學(xué)院、汽車學(xué)院、信息學(xué)院、經(jīng)貿(mào)學(xué)院，需要存儲(chǔ)它們的數(shù)據(jù)到MySQL數(shù)據(jù)庫(kù)中，并使用Flask實(shí)現(xiàn)查詢、新增、刪除、修改等操作，實(shí)現(xiàn)招生數(shù)據(jù)的對(duì)比和管理本單元學(xué)習(xí)Flask操作數(shù)據(jù)庫(kù)，對(duì)數(shù)據(jù)庫(kù)進(jìn)行增刪改查操作。任務(wù)1、Flask獲取請(qǐng)求對(duì)象參數(shù)任務(wù)2、使用Flask創(chuàng)建表映射任務(wù)3、使用Flask對(duì)數(shù)據(jù)添刪改查學(xué)習(xí)目標(biāo)1、知識(shí)（1）了解Flask獲取請(qǐng)求參數(shù)的方法（2）掌握Flask創(chuàng)建表模型的方法（3）掌握Flask對(duì)數(shù)據(jù)庫(kù)增刪改查2、技能（1）能夠使用Flask獲取請(qǐng)求對(duì)象參數(shù)（2）能夠使用Flask創(chuàng)建表映射（3）能夠使用Flask對(duì)數(shù)據(jù)添刪改查3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施任務(wù)實(shí)施1、教師講解

Flask連接MySQL數(shù)據(jù)庫(kù)、創(chuàng)建表映射

Flask操縱數(shù)據(jù)庫(kù)2、學(xué)生討論（1）Flask怎樣連接MySQL？（2）什么是FlaskSQLAlchemy的表映射？3、明確任務(wù)（1）Flask獲取請(qǐng)求對(duì)象參數(shù)（2）使用Flask創(chuàng)建表映射（3）使用Flask對(duì)數(shù)據(jù)添刪改查任務(wù)資訊1、FlaskSQLAlchemy數(shù)據(jù)庫(kù)是按照一定規(guī)則保存程序數(shù)據(jù)，程序再發(fā)起查詢?nèi)』厮璧臄?shù)據(jù)，Web程序最常用基于關(guān)系模型的數(shù)據(jù)庫(kù)，這種數(shù)據(jù)庫(kù)也稱為SQL數(shù)據(jù)庫(kù)（關(guān)系型數(shù)據(jù)庫(kù)），關(guān)系型數(shù)據(jù)庫(kù)把數(shù)據(jù)存儲(chǔ)在表中，表模擬程序中不同的實(shí)體。如下所示：表的列數(shù)是固定的，行數(shù)是可變的，列定義表所示的實(shí)體的數(shù)據(jù)屬性。表中的行定義各列對(duì)應(yīng)的真實(shí)數(shù)據(jù)。ORM全稱ObjectRelationalMapping，中文意為對(duì)象-關(guān)系映射。其實(shí)它就是模型對(duì)象的概念把數(shù)據(jù)庫(kù)的信息映射稱一個(gè)個(gè)對(duì)象來(lái)操作。而不需要寫SQL語(yǔ)句，簡(jiǎn)單來(lái)說(shuō)就是面向?qū)ο缶幊?。IDUserEmailPassword1張三zhangsan@163.com1234562李四lisi@163.com654321任務(wù)資訊2、Flask操作數(shù)據(jù)庫(kù)Flask中的SQLAlchemy就是一個(gè)ORM框架，它依賴于pymysql，使用關(guān)系對(duì)象映射對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作。Flask操作數(shù)據(jù)庫(kù)主要步驟如下：安裝依賴庫(kù)。當(dāng)我們使用Flask進(jìn)行數(shù)據(jù)開發(fā)時(shí)，需要安裝一些相應(yīng)的依賴庫(kù)mysqlclient、flask_sqlalchemy、pymysql連接數(shù)據(jù)庫(kù)創(chuàng)建模型與表的映射數(shù)據(jù)庫(kù)的增刪改查等操作任務(wù)資訊（1）Flask連接數(shù)據(jù)庫(kù)任務(wù)資訊（2）創(chuàng)建模型類，關(guān)聯(lián)數(shù)據(jù)庫(kù)中的表如要關(guān)聯(lián)數(shù)據(jù)庫(kù)中的users表db.Model:創(chuàng)建模型db.Column:創(chuàng)建模型屬性可進(jìn)入MySQL中“flask_table”數(shù)據(jù)庫(kù)，查看是否存在“users”表先使用SQLAlchemy加載app并創(chuàng)建db實(shí)例，再創(chuàng)建模型類，關(guān)聯(lián)數(shù)據(jù)庫(kù)中的表users，id、name、email、pswd、role_id分別對(duì)應(yīng)users表的字段，db.Column表示列名，db.Integer表示該字段為整型數(shù)據(jù)，db.String表示該字段為字符串?dāng)?shù)據(jù)。這些字段需要設(shè)置一個(gè)主鍵。任務(wù)資訊（3）增、刪、改、查參考網(wǎng)址：/Mixtea/p/10678594.html在Flask-SQLAlchemy中，插入、修改、刪除操作，均由數(shù)據(jù)庫(kù)會(huì)話管理。*會(huì)話用db.session表示。在準(zhǔn)備把數(shù)據(jù)寫入數(shù)據(jù)庫(kù)前，要先將數(shù)據(jù)添加到會(huì)話中然后調(diào)用commit()方法提交會(huì)話。db.session.add(role):添加到數(shù)據(jù)庫(kù)的session中db.session.add_all([role1,role2]):添加多個(gè)信息到session中mit():提交數(shù)據(jù)庫(kù)的修改（包括增、改、刪）db.session.rollback():數(shù)據(jù)庫(kù)的回滾操作db.session.delete():刪除數(shù)據(jù)庫(kù)任務(wù)資訊（3）創(chuàng)建/刪除表創(chuàng)建表需要先創(chuàng)建表模型類，再執(zhí)行db.create_all()命令，表示創(chuàng)建模型類對(duì)應(yīng)的表?？梢栽趫?zhí)行創(chuàng)建表命令之前，使用db.drop_all()刪除所有的表。任務(wù)資訊（4）插入數(shù)據(jù)要插入一條數(shù)據(jù)，可用模型類User創(chuàng)建實(shí)例（對(duì)應(yīng)一條記錄），加載列屬性，再將該實(shí)例加入session事務(wù)，執(zhí)行該事務(wù)，代碼如下：要一次插入多條數(shù)據(jù)，則可先創(chuàng)建多個(gè)實(shí)例，再添加所有實(shí)例到session事務(wù)，執(zhí)行該事務(wù)，代碼如下：任務(wù)資訊（5）查詢數(shù)據(jù)通過(guò)模型類的query方法可以實(shí)現(xiàn)數(shù)據(jù)查詢。1）filter_by精確查詢。如要查詢名稱為chen的所有記錄信息，代碼如下：User.query.filter_by(name='chen').all()其中all()返回查詢到的所有對(duì)象，可以使用first()返回查詢到的第一個(gè)對(duì)象。2）filter模糊查詢。如要返回名字結(jié)尾字符為n的所有數(shù)據(jù)，代碼如下：User.query.filter(U.endswith('n')).all()3）get()查詢。通過(guò)get()，將其參數(shù)設(shè)置為主鍵，可以得到主鍵對(duì)應(yīng)的記錄。如果主鍵不存在，則沒(méi)有返回內(nèi)容。User.query.get(1)可以查詢主鍵值為1的記錄。任務(wù)資訊（5）查詢數(shù)據(jù)通過(guò)模型類的query方法可以實(shí)現(xiàn)數(shù)據(jù)查詢。4）邏輯條件查詢。①使用邏輯非條件查詢，返回名字不等于“zhou”的所有數(shù)據(jù)，代碼如下：User.query.filter(U!='zhou').all()②使用邏輯與條件查詢，需要導(dǎo)入and_依賴，返回and()條件滿足的所有數(shù)據(jù)，代碼如下：fromsqlalchemyimportand_User.query.filter(and_(U!='chen',User.email.endswith('163.com'))).all()③使用邏輯或條件查詢，需要導(dǎo)入or_依賴，返回or()條件滿足其一的所有數(shù)據(jù)，代碼如下：fromsqlalchemyimportor_User.query.filter(or_(U!='chen',User.email.endswith('163.com'))).all(任務(wù)資訊（6）刪除數(shù)據(jù)

一般會(huì)結(jié)合條件查詢進(jìn)行數(shù)據(jù)刪除。如要?jiǎng)h除User表的第一條數(shù)據(jù)，可執(zhí)行下面命令：user=User.query.first()db.session.delete(user)mit()最后可以使用User.query.all()查詢所有數(shù)據(jù)，檢驗(yàn)是否刪除了第一條記錄。任務(wù)資訊（7）更新數(shù)據(jù)更新數(shù)據(jù)一般也會(huì)結(jié)合條件進(jìn)行更新。如要將第一條記錄的姓名修改為“dong”，先查詢出第一條記錄，修改name列值，再執(zhí)行事務(wù)，代碼如下：user=User.query.first()='dong'mit()最后可以使用User.query.first()檢驗(yàn)是否修改成功。任務(wù)實(shí)施本任務(wù)主要使用Flask操作MySQL數(shù)據(jù)庫(kù)，創(chuàng)建表，將某高職院校2015—2022年招生數(shù)據(jù)插入表，對(duì)數(shù)據(jù)進(jìn)行查詢、修改、刪除等操作，并完成Web頁(yè)面數(shù)據(jù)展示。具體步驟：1．創(chuàng)建表提前在MySQL數(shù)據(jù)庫(kù)中創(chuàng)建名為“enroll”的數(shù)據(jù)庫(kù)。創(chuàng)建如下Python程序，實(shí)現(xiàn)項(xiàng)目4高校招生就業(yè)數(shù)據(jù)分析與可視化MySQL數(shù)據(jù)庫(kù)中表的創(chuàng)建。2．插入數(shù)據(jù)創(chuàng)建一個(gè)函數(shù)add_tb_data()，用模型類創(chuàng)建8個(gè)實(shí)例，插入8條記錄。3．將機(jī)械學(xué)院招生數(shù)(mechanics)大于1000，或者經(jīng)貿(mào)學(xué)院招生數(shù)(economy)小于500的記#錄刪除。4.查詢數(shù)據(jù)并通過(guò)Web頁(yè)面展示查詢出所有數(shù)據(jù)，通過(guò)渲染模板將數(shù)據(jù)傳遞到網(wǎng)頁(yè)中去。網(wǎng)頁(yè)通過(guò)Jinja語(yǔ)句獲取后端傳遞過(guò)來(lái)的數(shù)據(jù)03整合活動(dòng)總結(jié)、知識(shí)點(diǎn)梳理學(xué)習(xí)總結(jié)拓展任務(wù)1、在前面Flask操作數(shù)據(jù)庫(kù)的基礎(chǔ)上顯示數(shù)據(jù)到網(wǎng)頁(yè)P(yáng)ython代碼

拓展任務(wù)1、在前面Flask操作數(shù)據(jù)庫(kù)的基礎(chǔ)上顯示數(shù)據(jù)到網(wǎng)頁(yè)網(wǎng)頁(yè)代碼拓展任務(wù)2、使用flask_sqlalchemy創(chuàng)建用戶表user，并使用Flask將查詢結(jié)果顯示到網(wǎng)頁(yè)中。IDUserEmailPassword1張三zhangsan@163.com1234562李四lisi@163.com654321《數(shù)據(jù)可視化技術(shù)》單元17各專業(yè)招生錄取人數(shù)分析01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)：本任務(wù)主要利用Flask結(jié)合Web技術(shù)。要求使用Flask創(chuàng)建數(shù)據(jù)庫(kù)，讀出數(shù)據(jù)庫(kù)數(shù)據(jù)，通過(guò)Web頁(yè)面實(shí)現(xiàn)折線圖展示各專業(yè)計(jì)劃錄取與實(shí)際錄取人數(shù)對(duì)比情況。本單元學(xué)習(xí)前臺(tái)網(wǎng)頁(yè)結(jié)合后臺(tái)Flask實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的增刪改查。任務(wù)1、使用Flask連庫(kù)建表任務(wù)2、使用Flask查詢數(shù)據(jù)任務(wù)3、web頁(yè)面制作學(xué)習(xí)目標(biāo)1、知識(shí)（1）掌握mysql的數(shù)據(jù)導(dǎo)入（2）掌握Flask創(chuàng)建表模型的方法（3）掌握Flask對(duì)數(shù)據(jù)庫(kù)增刪改查（4）掌握Flask+Echarts的方法2、技能（1）能夠使用Flask連接MySQL數(shù)據(jù)庫(kù)和創(chuàng)建表映射（2）能夠使用FlaskSQLAlchemy查詢、插入、刪除、調(diào)整（3）能夠制作Echarts折線圖的網(wǎng)頁(yè)3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施任務(wù)資訊1、教師講解

Flask連庫(kù)建表查詢、添加、刪除、修改數(shù)據(jù)及對(duì)應(yīng)網(wǎng)頁(yè)制作2、學(xué)生討論（1）Flask怎樣結(jié)合web頁(yè)面開發(fā)？（2）前臺(tái)頁(yè)面怎樣傳遞數(shù)據(jù)到后臺(tái)？3、明確任務(wù)（1）使用Flask連庫(kù)建表（2）使用Flask查詢、添加、刪除、修改數(shù)據(jù)（3）制作主頁(yè)、插入頁(yè)面、修改頁(yè)面任務(wù)實(shí)施任務(wù)：使用Flask操作數(shù)據(jù)庫(kù)，實(shí)現(xiàn)志愿錄取數(shù)據(jù)匯總?cè)蝿?wù)主要步驟：定義視圖定義模板Sql文件導(dǎo)入數(shù)據(jù)庫(kù)Flask操作sqlalchemy創(chuàng)建數(shù)據(jù)庫(kù)查詢志愿錄取數(shù)據(jù)使用Echarts折線圖展示在web頁(yè)面上任務(wù)實(shí)施1、app.py后臺(tái)主程序（1）先在MySQL數(shù)據(jù)庫(kù)中創(chuàng)建“web”數(shù)據(jù)庫(kù)（2）Flask連接數(shù)據(jù)庫(kù)（3）創(chuàng)建表模型，對(duì)應(yīng)MySQL數(shù)據(jù)庫(kù)中的表（4）創(chuàng)建/show路由，查詢所有數(shù)據(jù)，并展示數(shù)據(jù)任務(wù)實(shí)施2、創(chuàng)建網(wǎng)頁(yè)（1）創(chuàng)建show.html網(wǎng)頁(yè)，實(shí)現(xiàn)數(shù)據(jù)展示功能03整合活動(dòng)總結(jié)、知識(shí)點(diǎn)梳理學(xué)習(xí)總結(jié)拓展任務(wù)志愿填報(bào)和各專業(yè)招生錄取人數(shù)分析：開發(fā)一個(gè)志愿填報(bào)系統(tǒng)，實(shí)現(xiàn)數(shù)據(jù)的增刪改查。首次運(yùn)行時(shí)向數(shù)據(jù)庫(kù)中創(chuàng)建表；訪問(wèn)根站點(diǎn)時(shí)進(jìn)入首頁(yè)，展示學(xué)生志愿填報(bào)的匯總數(shù)據(jù)。單擊“志愿填報(bào)：填寫專業(yè)志愿”，轉(zhuǎn)入志愿填報(bào)信息頁(yè)面，可以輸入省份、地級(jí)市、畢業(yè)學(xué)校，以及第一、第二、第三志愿，插入記錄到數(shù)據(jù)庫(kù)中，并返回志愿信息展示頁(yè)面；在首頁(yè)選擇某條記錄加以編輯，進(jìn)入編輯頁(yè)面，修改數(shù)據(jù)并提交后，完成記錄的修改，并返回展示頁(yè)面；在首頁(yè)選擇某條記錄加以刪除，則可以從數(shù)據(jù)庫(kù)中刪除相應(yīng)記錄信息。單擊“各專業(yè)錄取分析”，可以查看各專業(yè)計(jì)劃錄取與實(shí)際錄取人數(shù)對(duì)比圖?！稊?shù)據(jù)可視化技術(shù)》單元18學(xué)生就業(yè)數(shù)據(jù)分析01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)：為了直觀地查看學(xué)生在本省就業(yè)方面的數(shù)據(jù)，需要對(duì)就業(yè)數(shù)據(jù)進(jìn)行統(tǒng)計(jì)分析，繪制本省各地市就業(yè)分布圖。為了更詳細(xì)地了解不同月份就業(yè)分布情況，還需要繪制三維圖形來(lái)展示和對(duì)比分析。本單元學(xué)習(xí)Flask+Echarts+Jinja提取文件數(shù)據(jù)到網(wǎng)頁(yè)端，再繪制柱狀圖、3D柱狀圖。任務(wù)1、Python處理文件數(shù)據(jù)任務(wù)2、繪制學(xué)生在本省各地市就業(yè)分布圖任務(wù)3、繪制學(xué)生就業(yè)在不同月份各地市分布的三維柱狀圖學(xué)習(xí)目標(biāo)1、知識(shí)（1）掌握Python數(shù)據(jù)處理方法（2）掌握Flask渲染模板（3）掌握Echarts柱狀圖、3D柱狀圖的繪制2、技能（1）能夠使用Python處理數(shù)據(jù)（2）能夠使用Flask將數(shù)據(jù)傳遞到網(wǎng)頁(yè)（3）能夠使用Jinja獲取數(shù)據(jù)并通過(guò)Echarts展示出來(lái)3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施子任務(wù)一：繪制學(xué)生在本省各地市就業(yè)分布圖1、使用Pandas讀取“學(xué)生就業(yè)在本省分布情況.csv”文件，計(jì)算每個(gè)地市就業(yè)的總數(shù)，提取地區(qū)和就業(yè)總數(shù)數(shù)據(jù)，使用Flask模板渲染發(fā)送數(shù)據(jù)到Web前端，Web頁(yè)面通過(guò)Jinja2獲取數(shù)據(jù)，借助ECharts插件，繪制學(xué)生在本省各地市就業(yè)分布圖。主要步驟：使用Python讀取csv文件，提取“地區(qū)”一列疫情數(shù)據(jù)，提取“總數(shù)”一列數(shù)據(jù)使用flask渲染模板，同時(shí)將兩列數(shù)據(jù)傳遞到網(wǎng)頁(yè)中去在網(wǎng)頁(yè)中調(diào)用echarts，使用Jinja獲取數(shù)據(jù)，繪制柱狀圖任務(wù)實(shí)施效果圖如下子任務(wù)2繪制學(xué)生就業(yè)在不同月份各地區(qū)分布情況的三維圖2、本任務(wù)需要讀取JSON數(shù)據(jù)，繪制三維柱狀圖，來(lái)查看學(xué)生在本省不同月份各地區(qū)的就業(yè)分布情況。1）JSON數(shù)據(jù)：JSON（JavaScriptObjectNotation）是一種輕量級(jí)數(shù)據(jù)交換格式，是Web應(yīng)用中常見的一種數(shù)據(jù)格式。JSON是一個(gè)序列化的對(duì)象或數(shù)組。它由一套標(biāo)記符的序列組成，這套標(biāo)記符包含6個(gè)構(gòu)造字符（左右大括號(hào)、左右中括號(hào)、冒號(hào)、逗號(hào)）、對(duì)象、數(shù)組、字符串、數(shù)字和3個(gè)字面值（false、null、true）。知識(shí)準(zhǔn)備下列數(shù)據(jù)都是合法的JSON實(shí)例：其中由大括號(hào)括起來(lái)，中間使用逗號(hào)分隔鍵值對(duì)組成的字符串是最常見的JSON數(shù)據(jù)，JSON數(shù)據(jù)基本形式如下：2）JSON數(shù)據(jù)操作

Python中處理JSON數(shù)據(jù)的函數(shù)主要有json.dumps、json.dump、json.loads、json.load（1）json.dumps用于對(duì)數(shù)據(jù)進(jìn)行編碼，將Python中的字典數(shù)據(jù)轉(zhuǎn)換為JSON字符串。（2）Json.dump用于將Python數(shù)據(jù)寫入JSON文件知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備2）JSON數(shù)據(jù)操作（3）json.loads用于對(duì)數(shù)據(jù)進(jìn)行解碼，將JSON字符串轉(zhuǎn)換為Python中的字典數(shù)據(jù)。（4）json.loadjson.load用于打開JSON文件，并把字符串轉(zhuǎn)換為Python的字典數(shù)據(jù)。知識(shí)準(zhǔn)備2）ECharts三維柱狀圖

三維圖一般至少有3個(gè)方面的參數(shù)，形成3D立體結(jié)構(gòu)。在繪制三維圖時(shí)需要導(dǎo)入ECharts.js、ECharts-gl.js依賴包，在option參數(shù)設(shè)置中一般需要指定grid3D、xAxis3D、yAxis3D、zAxis3D等項(xiàng)目，在series中使用type指定三維圖類型，如：type：'bar3D'表示三維柱狀圖。

type：'scatter3D'表示三維散點(diǎn)圖。

type：'line3D'表示三維折線圖。

type：'map3D'表示三維地圖。知識(shí)準(zhǔn)備2）ECharts三維柱狀圖代碼先導(dǎo)入了echarts.min.js、echarts-gl.min.js兩個(gè)插件，再初始化ECharts實(shí)例，關(guān)聯(lián)id為“main”的DIV，配置option參數(shù)。option中列出了3D效果的一些參數(shù)，但沒(méi)有設(shè)置具體的值。運(yùn)行該網(wǎng)頁(yè)代碼，結(jié)果如圖4-4-1所示。任務(wù)實(shí)施本任務(wù)需要讀取JSON數(shù)據(jù)，繪制三維柱狀圖，來(lái)查看學(xué)生在本省不同月份各地區(qū)的就業(yè)分布情況。主要步驟：(1)使用Python讀取“學(xué)生就業(yè)在本省分布情況_3D數(shù)據(jù).json”文件，提取x_city作為x軸數(shù)據(jù)，提取y_date作為y軸數(shù)據(jù)，提取data_jobs列表數(shù)據(jù)作為z軸數(shù)據(jù)。(2)使用flask渲染模板，同時(shí)將三列數(shù)據(jù)傳遞到網(wǎng)頁(yè)中去(3)在網(wǎng)頁(yè)中調(diào)用echarts，使用Jinja獲取數(shù)據(jù)，繪制3D柱狀圖任務(wù)實(shí)施效果圖如下03整合活動(dòng)總結(jié)、知識(shí)點(diǎn)梳理學(xué)習(xí)總結(jié)拓展任務(wù)在上面繪制3D柱狀圖的任務(wù)中，改進(jìn)傳遞數(shù)據(jù)的結(jié)構(gòu)和參數(shù)個(gè)數(shù)，使用Jinja獲取數(shù)據(jù)，在echarts使用dataset方式顯示數(shù)據(jù)《數(shù)據(jù)可視化技術(shù)》單元19新生生源地分布分析01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)：為了在地理位置上分析學(xué)校在本省各地區(qū)的招生數(shù)量，更加直觀地查看新生生源空間分布，需要使用地圖來(lái)展示本省生源錄取分布情況。從MySQL數(shù)據(jù)庫(kù)中讀取數(shù)據(jù)，加載湖南省地圖，繪制新生數(shù)量地理位置分布圖。任務(wù):使用Ajax獲取數(shù)據(jù)并繪制地圖學(xué)習(xí)目標(biāo)1、知識(shí)（1）了解地圖數(shù)據(jù)的結(jié)構(gòu)（2）掌握Ajax獲取后臺(tái)數(shù)據(jù)的方法（3）掌握Echarts繪制地圖2、技能（1）能夠處理數(shù)據(jù)成地圖需要的形式（2）能夠使用Ajax獲取Flask傳遞的數(shù)據(jù)（3）能夠使用Echarts繪制地圖3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施任務(wù)實(shí)施任務(wù)分析：本任務(wù)將使用Flask、ECharts和Ajax技術(shù)，從MySQL數(shù)據(jù)庫(kù)中讀取數(shù)據(jù)，加載湖南省地圖，繪制新生數(shù)量地理位置分布圖知識(shí)準(zhǔn)備1．Ajax技術(shù)之前的任務(wù)在網(wǎng)頁(yè)端都是通過(guò)Jinja2獲取后端數(shù)據(jù)的，本任務(wù)使用Ajax技術(shù)來(lái)獲取后端的數(shù)據(jù)。Ajax是一種在無(wú)須重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)，可用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)。通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，這也意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)某部分的更新。傳統(tǒng)的網(wǎng)頁(yè)（不使用Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)知識(shí)準(zhǔn)備1．Ajax技術(shù)使用Ajax異步請(qǐng)求服務(wù)器后端發(fā)送的數(shù)據(jù)，需要先導(dǎo)入jQuery插件，導(dǎo)入方法為。jQuery是一個(gè)JavaScript函數(shù)庫(kù)，是一個(gè)輕量級(jí)“寫得少，做得多”的JavaScript庫(kù)，可實(shí)現(xiàn)HTML元素選取、元素操作、CSS操作、事件函數(shù)、特效、動(dòng)畫等。jQuery提供多個(gè)與Ajax有關(guān)的方法。通過(guò)jQueryAjax方法，能夠使用HTTPGET和HTTPPOST從服務(wù)器上請(qǐng)求文本、HTML、XML或JSON數(shù)據(jù)，同時(shí)能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁(yè)的被選元素中

如果要異步請(qǐng)求Flask后端數(shù)據(jù)，并加載到網(wǎng)頁(yè)當(dāng)中，步驟如下：

1）后端設(shè)置路由，發(fā)送數(shù)據(jù)方式設(shè)為“GET”或“POST”，執(zhí)行函數(shù)，返回序列化為JSON的數(shù)據(jù)。知識(shí)準(zhǔn)備1．Ajax技術(shù)2）在網(wǎng)頁(yè)端利用JQueryAjax請(qǐng)求數(shù)據(jù)。

$(document).ready(function(){});表示網(wǎng)頁(yè)加載成功后立即執(zhí)行function(){}函數(shù)，$即表示JQuery。在function(){}函數(shù)體內(nèi)，執(zhí)行JQuery的Ajax方法，發(fā)送數(shù)據(jù)請(qǐng)求，請(qǐng)求類型為POST方式；使用async（異步）方式請(qǐng)求；請(qǐng)求地址為/data，這里要匹配后端Flask路由的路徑；數(shù)據(jù)類型為“json”類型；請(qǐng)求數(shù)據(jù)成功后執(zhí)行success方法，得到數(shù)據(jù)，將數(shù)據(jù)放入result對(duì)象中，彈出成功提示框；請(qǐng)求數(shù)據(jù)失敗后執(zhí)行error方法，得到失敗信息，彈出失敗提示框。知識(shí)準(zhǔn)備2．Echarts地圖要繪制矢量地圖，首先要下載地圖數(shù)據(jù)文件，有JS格式文件，也有JSON格式文件，包括中國(guó)地圖、中國(guó)各省市地圖、世界地圖等。接下來(lái)需要引用地圖數(shù)據(jù)文件，JS文件導(dǎo)入直接用：<scriptsrc="china.js"></script>即可，JSON文件則使用：$.get('china.json',(chinaJson)=>{})。要使用地圖，在series參數(shù)中，指定type為‘map’，以及將mapType指定為地區(qū)或國(guó)家名稱，示例：知識(shí)準(zhǔn)備2．Echarts地圖地圖的數(shù)據(jù)源一般會(huì)使用字典數(shù)組形式，如下所示另外，創(chuàng)建地圖時(shí)一般會(huì)設(shè)置相關(guān)參數(shù)，如使用roam:true來(lái)支持地圖縮放效果，使用toolbox增加工具箱，使用visualMap增加視覺(jué)通道等。任務(wù)實(shí)施本任務(wù)需要讀取某高職學(xué)院在本省各地區(qū)的招生錄取數(shù)，將數(shù)據(jù)通過(guò)路由傳遞到Web前端，網(wǎng)頁(yè)端使用jQueryAjax方法獲取數(shù)據(jù)，并通過(guò)ECharts地圖展示出來(lái)，直觀地在地理位置分布圖中展示招生數(shù)據(jù)分布情況。具體步驟：1．編寫Python后端程序app1（1）讀取“新生本省生源分布情況.csv”文件（2）將列名稱的中文轉(zhuǎn)成英文df.rename(columns={'地區(qū)':'city','招生數(shù)':'enroll_num'},inplace=True)（3）連接數(shù)據(jù)庫(kù)，將新的數(shù)據(jù)寫入到mysq中任務(wù)實(shí)施2．編寫Python后端程序app2（1）關(guān)聯(lián)數(shù)據(jù)庫(kù)和表使用FlaskSQLAlchemy連接MySQL的students數(shù)據(jù)庫(kù)，創(chuàng)建表模型，選擇地區(qū)和招生數(shù)兩列數(shù)據(jù)。（2）創(chuàng)建路由創(chuàng)建根站點(diǎn)路由，渲染模板時(shí)轉(zhuǎn)向網(wǎng)頁(yè)；創(chuàng)建異步請(qǐng)求數(shù)據(jù)的路由，執(zhí)行函數(shù)，查詢出所需數(shù)據(jù)，JSON化數(shù)據(jù)并返回前端頁(yè)面。（3）創(chuàng)建app運(yùn)行語(yǔ)句3．編寫前端網(wǎng)頁(yè)腳本前端網(wǎng)頁(yè)創(chuàng)建ECharts地圖主要包括下面幾個(gè)步驟：引入JS文件；創(chuàng)建DIV容器；創(chuàng)建ECharts實(shí)例；創(chuàng)建jQueryAjax方法請(qǐng)求數(shù)據(jù)；設(shè)置EChartsoption參數(shù)，包括title、tooltip、legend、dataset、visualMap、toolbox、series等；ECharts實(shí)例關(guān)聯(lián)option參數(shù)。03整合活動(dòng)總結(jié)、知識(shí)點(diǎn)梳理學(xué)習(xí)總結(jié)《數(shù)據(jù)可視化技術(shù)》單元20招聘數(shù)據(jù)不同學(xué)歷的IT熱門職業(yè)平均薪資分析01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)：招聘數(shù)據(jù)薪資分析與可視化：隨著全球信息化進(jìn)程的不斷加快，信息產(chǎn)業(yè)的發(fā)展水平直接影響到了國(guó)家的綜合實(shí)力。我國(guó)IT行業(yè)的發(fā)展越來(lái)越受到國(guó)家管理層的重視，我國(guó)目前正在大力推行國(guó)民經(jīng)濟(jì)與社會(huì)信息化建設(shè)，這無(wú)疑為IT行業(yè)的發(fā)展提供了巨大的需求和更廣闊的空間，IT行業(yè)從業(yè)者的薪資待遇也隨之不斷攀升。這樣一個(gè)有前景的行業(yè)，也不外乎很多年輕人想要轉(zhuǎn)行到IT行業(yè)。本次訓(xùn)練將基于某招聘網(wǎng)站的招聘數(shù)據(jù)，完成數(shù)據(jù)可視化過(guò)程，并基于數(shù)據(jù)分析結(jié)果、編寫數(shù)據(jù)分析報(bào)告，提出IT行業(yè)人才培養(yǎng)方向若干建議等。學(xué)習(xí)內(nèi)容本單元學(xué)習(xí)使用FlaskSQLAlchemy進(jìn)行復(fù)雜的查詢，并將查詢的數(shù)據(jù)傳遞到網(wǎng)頁(yè)，用Echarts繪制多條折線圖。任務(wù)1、MySQL插入數(shù)據(jù)任務(wù)2、Flask查詢、處理數(shù)據(jù)任務(wù)3、Ajax獲取數(shù)據(jù)并使用Echarts繪制折線圖學(xué)習(xí)目標(biāo)1、知識(shí)（1）掌握MySQL的基本操作（2）掌握Flask創(chuàng)建表模型的方法（3）掌握Ajax獲取數(shù)據(jù)的方法（4）掌握Echarts繪制多條折線圖2、技能（1）能夠操作MySQL數(shù)據(jù)庫(kù)（2）能夠使用Flask讀取MySQL數(shù)據(jù)并傳遞到網(wǎng)頁(yè)前端（3）能夠使用Ajax+Echarts繪制折線圖3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施任務(wù)實(shí)施1、教師講解

MySQL插入數(shù)據(jù)

FlaskSQLAlchemy聯(lián)合查詢MySQL多個(gè)表的數(shù)據(jù)2、學(xué)生討論（1）怎樣快速向MySQL導(dǎo)入數(shù)據(jù)？（2）SQLAlchemy如何實(shí)現(xiàn)聯(lián)合查詢？3、明確任務(wù)（1）MySQL插入數(shù)據(jù)（2）Flask查詢、處理數(shù)據(jù)（3）Ajax獲取數(shù)據(jù)并使用Echarts繪制折線圖任務(wù)實(shí)施項(xiàng)目要求：招聘數(shù)據(jù)分析。使用Flask+Echarts+Ajax，對(duì)招聘數(shù)據(jù)不同學(xué)歷的IT熱門職業(yè)平均薪資進(jìn)行繪圖分析。任務(wù)實(shí)施項(xiàng)目背景：隨著全球信息化進(jìn)程的不斷加快，信息產(chǎn)業(yè)的發(fā)展水平直接影響到了國(guó)家的綜合實(shí)力。我國(guó)IT行業(yè)的發(fā)展越來(lái)越受到國(guó)家管理層的重視，我國(guó)目前正在大力推行國(guó)民經(jīng)濟(jì)與社會(huì)信息化建設(shè)，這無(wú)疑為IT行業(yè)的發(fā)展提供了巨大的需求和更廣闊的空間，IT行業(yè)從業(yè)者的薪資待遇也隨之不斷攀升。這樣一個(gè)有前景的行業(yè)，也不外乎很多年輕人想要轉(zhuǎn)行到IT行業(yè)。任務(wù)實(shí)施雖然IT行業(yè)對(duì)于人才的需求很大，但是我們想要進(jìn)入這個(gè)行業(yè)，難免會(huì)產(chǎn)生一些疑惑：（1）現(xiàn)在的IT市場(chǎng)中哪些職業(yè)最受歡迎；（2）學(xué)歷高低對(duì)自己所選職業(yè)的影響；（3）掌握哪些專業(yè)技能可以提高自己的就業(yè)幾率。本次訓(xùn)練將基于某招聘網(wǎng)站的招聘數(shù)據(jù)，完成數(shù)據(jù)可視化過(guò)程，并基于數(shù)據(jù)分析結(jié)果、編寫數(shù)據(jù)分析報(bào)告，提出IT行業(yè)人才培養(yǎng)方向若干建議等。任務(wù)實(shí)施【任務(wù)要求】1、在MySQL中創(chuàng)建recruit數(shù)據(jù)庫(kù)，在recruit數(shù)據(jù)庫(kù)下創(chuàng)建edulevelsalary、jobsalarylevel、recruitersnumbers三個(gè)表，三個(gè)表的結(jié)構(gòu)如下：（1）學(xué)歷與職位薪資的關(guān)系數(shù)據(jù)庫(kù)表：edulevelsalary表結(jié)構(gòu)：字段名類型是否為空說(shuō)明idint非空自增（主鍵）eduvarchar(255)非空學(xué)歷job_namevarchar(255)非空職位名稱salarydouble非空薪資任務(wù)實(shí)施【任務(wù)要求】（2）職位各薪資水平招聘人數(shù)數(shù)據(jù)庫(kù)表：jobsalarylevel表結(jié)構(gòu)：字段名類型是否為空說(shuō)明idint非空自增（主鍵）job_namevarchar(255)非空職位名稱salaryvarchar(255)非空薪資水平countint非空次數(shù)任務(wù)實(shí)施【任務(wù)要求】（3）職位招聘人數(shù)top10數(shù)據(jù)庫(kù)表：recruitersnumbers表結(jié)構(gòu)：字段名類型是否為空說(shuō)明idint非空自增（主鍵）job_namevarchar(255)非空職位名稱countint非空數(shù)量任務(wù)實(shí)施【任務(wù)要求】2、向三個(gè)表插入爬取到的和分析完的數(shù)據(jù)。插入語(yǔ)句見“recruit.sql”文件3、使用Flask+Echarts+Ajax進(jìn)行數(shù)據(jù)可視化繪圖，對(duì)招聘數(shù)據(jù)不同學(xué)歷的IT熱門職業(yè)平均薪資進(jìn)行繪圖分析。繪制折線圖，對(duì)各個(gè)學(xué)歷在最熱門的5種職業(yè)的平均薪資用折線圖表示。要求橫軸為“5種崗位名稱”，縱軸為“薪資”。任務(wù)實(shí)施【任務(wù)要求】效果圖如下：任務(wù)資訊本任務(wù)使用Flask從MySQL數(shù)據(jù)庫(kù)中提取數(shù)據(jù)，使用SQLAlchemy進(jìn)行多表聯(lián)合查詢，將“學(xué)歷-職位-薪資”數(shù)據(jù)組裝成JSON數(shù)據(jù)發(fā)送到Web前端，前端使用Ajax異步獲取數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換，并將數(shù)據(jù)嵌入ECharts中，繪制多條折線圖1．MySQL數(shù)據(jù)的導(dǎo)入導(dǎo)出

當(dāng)MySQL創(chuàng)建庫(kù)、表，插入數(shù)據(jù)后，可以將數(shù)據(jù)導(dǎo)出，備份數(shù)據(jù)庫(kù)。mysqldump是MySQL中一個(gè)常用的備份命令，執(zhí)行此命令會(huì)將包含數(shù)據(jù)的表結(jié)構(gòu)和數(shù)據(jù)內(nèi)容轉(zhuǎn)換成相應(yīng)創(chuàng)建語(yǔ)句和插入數(shù)據(jù)語(yǔ)句，保存為文本文件。將來(lái)若要還原，只需執(zhí)行該備份文件即可。另外，一般的MySQL連接管理工具都具備數(shù)據(jù)的備份和恢復(fù)功能。例如使用Navicat連接MySQL后，就可以對(duì)某個(gè)庫(kù)進(jìn)行備份和恢復(fù)任務(wù)資訊

2．SQLAlchemy高級(jí)查詢

前面已經(jīng)介紹過(guò)，SQLAlchemy查詢有兩種方式，一種是使用表模型類名查詢，一種是使用db.session查詢?，F(xiàn)有students表類，使用SQLAlchemy表模型關(guān)聯(lián)了MySQL對(duì)應(yīng)的表，利用該表類進(jìn)行高級(jí)查詢。（1）排序排序用到order_by方法，默認(rèn)為升序，加上desc()則為降序。示例1：查詢students表，按TotalScore字段升序排序。db.session.query(students).order_by(students.TotalScore).all()示例2：查詢students表，按TotalScore字段降序排序。db.session.query(students).order_by(students.TotalScore.desc()).all()任務(wù)資訊（2）限制記錄條數(shù)限制記錄條數(shù)可以使用limit、offset和切片等方法。limit：設(shè)置一個(gè)參數(shù)，限制取出前幾條記錄，如db.session.query(students).limit(5)，表示取出students表的前5條記錄。offset：設(shè)置一個(gè)參數(shù)，下標(biāo)從0開始，表示從第幾條數(shù)據(jù)開始，如db.session.query(students).offset(3)，表示從下標(biāo)為3的這條數(shù)據(jù)開始取出記錄。切片：在中括號(hào)中書寫下標(biāo)起始數(shù)字和結(jié)束數(shù)字，中間用冒號(hào)分隔，如db.session.query(students).all()[3:6]，表示取出第3、第4、第5條記錄。（3）分組分組使用group_by方法。示例：查詢students表，分別統(tǒng)計(jì)男生、女生人數(shù)。db.session.query(students.gender,func.count(students.id)).group_by(students.gender).all()任務(wù)資訊（4）having條件過(guò)濾having作用跟where類似，只不過(guò)having是用在group_by分組后面的條件判斷。示例：首先需要對(duì)students表數(shù)據(jù)按年齡進(jìn)行分組，統(tǒng)計(jì)每個(gè)分組分別有多少人。然后需要查看未成年人的各年齡段人數(shù)第一步：按年齡進(jìn)行分組，統(tǒng)計(jì)人數(shù)。

db.session.query(students.age,func.count(students.id)).group_by(students.age).all()第二步：在分組基礎(chǔ)上使用having條件過(guò)濾，保留年齡小于18歲的。db.session.query(students.age,func.count(students.id)).group_by(students.age).having(students.age<18).all()任務(wù)資訊（5）join連接多表查詢

在SQLAlchemy中，使用join來(lái)完成內(nèi)連接，另有左外連接（leftjoin），右外連接（rightjoin）。使用join連接時(shí)，如果不寫join條件，那么默認(rèn)將使用外鍵來(lái)作為條件連接。示例：連接students和course兩個(gè)表，查找出所有學(xué)生的選課情況，按照選課的數(shù)量降序排序。db.session.query(students,func.count(course.cid)).join(course).group_by(students.id).order_by(func.count(course.cid).desc()).all()任務(wù)分析本任務(wù)需要執(zhí)行SQL文件，向MySQL創(chuàng)建數(shù)據(jù)庫(kù)和表，并插入數(shù)據(jù)。使用FlaskSQLAlchemy連接MySQL數(shù)據(jù)庫(kù)，創(chuàng)建模型類并關(guān)聯(lián)3個(gè)表，查詢出5個(gè)熱門職位，對(duì)這些熱門職位在學(xué)歷與職位薪資的關(guān)系表中查出不同學(xué)歷對(duì)應(yīng)的平均薪資，然后將數(shù)據(jù)組裝成JSON數(shù)據(jù)發(fā)送到前端，前端使用Ajax獲取數(shù)據(jù)，再設(shè)置到ECharts數(shù)據(jù)項(xiàng)中，繪制多條折線圖。任務(wù)實(shí)施步驟如下：1．MySQL導(dǎo)入數(shù)據(jù)2．Flask關(guān)聯(lián)數(shù)據(jù)表3．創(chuàng)建路由，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)4．聯(lián)合表查詢數(shù)據(jù)5．創(chuàng)建Flask執(zhí)行代碼6．開發(fā)Web頁(yè)面03整合活動(dòng)總結(jié)、知識(shí)點(diǎn)梳理學(xué)習(xí)總結(jié)拓展任務(wù)在前面任務(wù)基礎(chǔ)上，使用Flask+Echarts+Ajax進(jìn)行數(shù)據(jù)可視化繪圖，對(duì)最熱門的5種職業(yè)的最高工資（不區(qū)分學(xué)歷）用柱狀圖表示出來(lái)。要求橫軸為“5種職業(yè)名稱”，縱軸為“工資”?！稊?shù)據(jù)可視化技術(shù)》單元21Vue.js開發(fā)基礎(chǔ)01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容本單元學(xué)習(xí)使用Vite創(chuàng)建Vue3項(xiàng)目。任務(wù)1、Node.js的下載和安裝任務(wù)2、創(chuàng)建Vue3項(xiàng)目任務(wù)3、使用組合式API開發(fā)項(xiàng)目學(xué)習(xí)目標(biāo)1、知識(shí)（1）了解Vue的特性，能夠說(shuō)出Vue的4個(gè)特性（2）掌握Node.js環(huán)境的搭建，能夠獨(dú)立完成Node.js的下載和安裝（3）掌握常見的包管理工具的使用方法，能夠應(yīng)用npm和yarn相關(guān)命令（4）掌握Vite的使用方法，能夠使用Vite創(chuàng)建Vue3項(xiàng)目（5）熟悉選項(xiàng)式API和組合式API，能夠說(shuō)出選項(xiàng)式API和組合式API的區(qū)別2、技能（1）能夠下載和安裝Node.js（2）能夠使用npm和yarn相關(guān)命令（3）能夠使用Vite創(chuàng)建Vue3項(xiàng)目（4）能夠使用組合式API開發(fā)3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施什么是Vue1為了提高開發(fā)效率，市面上出現(xiàn)了基于MVVM模式的前端開發(fā)框架，例如Angular、React、Vue等。這些框架以數(shù)據(jù)為核心，使用戶關(guān)注業(yè)務(wù)邏輯的處理，減少了手動(dòng)的DOM操作。這些框架還為開發(fā)者提供了一套開發(fā)規(guī)則，控制權(quán)在框架本身，用戶需要按照框架的規(guī)范進(jìn)行開發(fā)。與jQuery相比，使用框架開發(fā)的項(xiàng)目具有更高的開發(fā)效率、更好的可維護(hù)性、更強(qiáng)的可擴(kuò)展性和更高的性能。在Angular、React和Vue這3個(gè)框架中，Vue體積較小，在使用上更容易上手、更加靈活。1.1什么是Vue1.1什么是VueVue（讀音：/Vju?/）是一款用于構(gòu)建用戶界面的漸進(jìn)式框架。其中，“漸進(jìn)式”是指在使用Vue核心庫(kù)時(shí)，可以在核心庫(kù)的基礎(chǔ)上根據(jù)實(shí)際需要逐步增加功能。1.1什么是Vue使用Vue進(jìn)行項(xiàng)目開發(fā)具有以下優(yōu)勢(shì)。輕量級(jí)。Vue是一個(gè)輕量級(jí)的前端開發(fā)框架，文件體積小。Vue項(xiàng)目基于JavaScript語(yǔ)言開發(fā)，開發(fā)者不用單獨(dú)學(xué)一門陌生的語(yǔ)言，從而降低了學(xué)習(xí)的門檻。Vue在使用上比較靈活，開發(fā)人員可以選擇使用Vue開發(fā)一個(gè)全新項(xiàng)目，也可以將Vue引入現(xiàn)有項(xiàng)目。1.1什么是VueVue通過(guò)虛擬DOM技術(shù)減少對(duì)DOM的直接操作，并通過(guò)盡可能簡(jiǎn)單的API來(lái)實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定，可支持單向和雙向數(shù)據(jù)綁定。Vue支持組件化開發(fā)，可提高項(xiàng)目的開發(fā)效率和可維護(hù)性，使代碼更易于復(fù)用，便于團(tuán)隊(duì)的協(xié)同開發(fā)。Vue可以與前端開發(fā)中用到的一系列工具以及各種支持庫(kù)結(jié)合使用，以實(shí)現(xiàn)前端工程化開發(fā)，從而提高了項(xiàng)目的開發(fā)效率，降低了大型項(xiàng)目的開發(fā)難度。1.1什么是VueVue是基于MVVM模式的框架。MVVM主要包含Model（數(shù)據(jù)模型）、View（視圖）和ViewModel（視圖模型）。其中，Model是指數(shù)據(jù)部分，負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)的處理；View是指視圖部分，即用戶界面，負(fù)責(zé)視圖處理；ViewModel用于連接視圖與數(shù)據(jù)模型，負(fù)責(zé)監(jiān)聽Model或者View的改變。1.1什么是VueVue的基本工作原理如下圖所示。1.什么是VueView和Model不能直接通信，它們需要借助ViewModel才能進(jìn)行通信。ViewModel相當(dāng)于一個(gè)觀察者，監(jiān)控著View和Model的動(dòng)作，實(shí)現(xiàn)了View與Model的解耦。ViewModel包含DOMListeners和

DataBindings。其中，DOMListeners用于監(jiān)聽View中DOM變化，并在DOM變化時(shí)通知Model做出相應(yīng)的修改；DataBindings用于監(jiān)聽Model中的數(shù)據(jù)變化，并在數(shù)據(jù)變化時(shí)通知View做出相應(yīng)的修改。1.2Vue的特性Vue的4個(gè)特性。數(shù)據(jù)驅(qū)動(dòng)視圖雙向數(shù)據(jù)綁定插件指令1.2Vue的特性在使用Vue的頁(yè)面中，Vue會(huì)監(jiān)聽數(shù)據(jù)變化，當(dāng)頁(yè)面數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)自動(dòng)重新渲染頁(yè)面結(jié)構(gòu)，如下圖所示。1.數(shù)據(jù)驅(qū)動(dòng)視圖1.2Vue的特性Vue實(shí)現(xiàn)了雙向數(shù)據(jù)綁定，即當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，視圖也會(huì)發(fā)生變化；當(dāng)視圖發(fā)生變化時(shí)，數(shù)據(jù)也會(huì)跟著同步變化。例如，用戶在填寫表單時(shí)，雙向數(shù)據(jù)綁定可以輔助開發(fā)者在無(wú)須手動(dòng)操作DOM的前提下，自動(dòng)同步用戶填寫的內(nèi)容數(shù)據(jù)，從而獲取表單元素最新的值。2.雙向數(shù)據(jù)綁定1.2Vue的特性指令主要包括內(nèi)置指令和自定義指令，內(nèi)置指令是Vue本身自帶的指令，而自定義指令是由用戶自己定義的指令。指令的名稱以“v-”開頭，作用于HTML中的元素。將指令綁定在元素上時(shí)，指令會(huì)給綁定的元素添加一些特殊的行為。例如，v-bind指令用于實(shí)現(xiàn)單向數(shù)據(jù)綁定，v-if指令用于實(shí)現(xiàn)頁(yè)面條件渲染，v-for指令用于實(shí)現(xiàn)頁(yè)面列表渲染等。3.指令1.2Vue的特性Vue支持插件，通過(guò)加載插件可以實(shí)現(xiàn)更多的功能。常用的插件有VueRouter（路由）、Vuex（狀態(tài)管理庫(kù)）、Pinia（輕量級(jí)狀態(tài)管理庫(kù)）等，這些插件經(jīng)過(guò)簡(jiǎn)單配置就可以使用。4.插件1.3Vue的版本目前，Vue共有3個(gè)大版本，分別是Vue

1、Vue2和Vue3。其中，Vue1幾乎被淘汰，不建議學(xué)習(xí)與使用；Vue2和Vue3目前被廣泛應(yīng)用，并且Vue3將會(huì)逐步替代Vue2。1.3Vue的版本Vue3支持Vue2中絕大多數(shù)的API與特性，同時(shí)Vue3還新增了一些特有的功能，并廢棄了Vue2中的一些舊功能。Vue3新增的功能包括組合式（Composition）API、多根節(jié)點(diǎn)組件等；廢棄的舊功能包括過(guò)濾器（Filter）以及$on()、$off()和$once()實(shí)例方法等。雖然從表面上看，Vue3和Vue2的使用方式?jīng)]有太大的差異，但Vue3的底層代碼發(fā)生了很大變化，包括渲染、數(shù)據(jù)監(jiān)聽、雙向綁定、生命周期等。1.3Vue的版本Vue3的新特性如下。體積更小，采用按需編譯的方式編譯出來(lái)的文件體積比Vue2的小。性能提升，運(yùn)行速度比Vue2快1.5倍左右。具有更好的TypeScript支持。暴露了更底層的API，可以通過(guò)多種方式組織代碼，代碼使用上更加靈活。提供了更先進(jìn)的組件。Vue創(chuàng)建了一個(gè)虛擬的Fragment節(jié)點(diǎn)，允許組件中有多個(gè)根節(jié)點(diǎn)。提供組合式API，能夠更好地組合邏輯、封裝邏輯、復(fù)用邏輯。1.3Vue的版本為了提高開發(fā)效率，開發(fā)者可以在項(xiàng)目中添加UI組件庫(kù)。UI組件庫(kù)可以理解成一個(gè)可重復(fù)使用的界面設(shè)計(jì)元素的集合體，使用它可以更快速地開發(fā)用戶界面。目前，主流UI組件庫(kù)都已經(jīng)發(fā)布了支持Vue3的版本，常用的UI組件庫(kù)如下。Element

Plus組件庫(kù)：一款基于Vue3的桌面端組件庫(kù)。Vant組件庫(kù)：一款開源移動(dòng)端組件庫(kù)，它從3.0版本開始支持Vue3。Ant

Design

Vue組件庫(kù)：一款用于開發(fā)和服務(wù)企業(yè)級(jí)后臺(tái)產(chǎn)品的組件庫(kù)，它從2.0版本開始支持Vue3。Vue開發(fā)環(huán)境22.1VisualStudioCode編輯器VisualStudioCode（簡(jiǎn)稱VSCode）是由微軟公司推出的一款免費(fèi)、開源的代碼編輯器，一經(jīng)推出便受到開發(fā)者的歡迎。對(duì)于前端開發(fā)人員來(lái)說(shuō)，一個(gè)強(qiáng)大的編輯器可以使開發(fā)變得簡(jiǎn)單、便捷、高效。2.1VisualStudioCode編輯器VSCode編輯器具有以下特點(diǎn)。輕巧、極速，占用系統(tǒng)資源較少。具備代碼智能補(bǔ)全、語(yǔ)法高亮顯示、自定義快捷鍵和代碼匹配等功能。跨平臺(tái)，可用于macOS、Windows和Linux操作系統(tǒng)。主題界面的設(shè)計(jì)比較人性化。例如，可以快速查找文件并直接進(jìn)行開發(fā)，可以通過(guò)分屏顯示代碼，可以自定義主題顏色，以及可以快速查看已打開的項(xiàng)目文件和項(xiàng)目文件結(jié)構(gòu)。提供豐富的擴(kuò)展，用戶可根據(jù)需要自行下載和安裝擴(kuò)展。2.1VisualStudioCode編輯器將VSCode編輯器安裝完成后，該編輯器的默認(rèn)語(yǔ)言是英文。如果想要切換為中文，首先單擊VSCode編輯器的初始界面左側(cè)邊欄中的“”圖標(biāo)按鈕進(jìn)入擴(kuò)展界面，然后在搜索框中輸入關(guān)鍵詞“chinese”找到中文語(yǔ)言擴(kuò)展，單擊“Install”按鈕進(jìn)行安裝，如下圖所示。安裝中文語(yǔ)言擴(kuò)展2.1VisualStudioCode編輯器安裝成功后，需要重新啟動(dòng)VSCode編輯器，中文語(yǔ)言擴(kuò)展才可以生效。重新啟動(dòng)VSCode編輯器后，VSCode編輯器的中文界面如下圖所示。2.1VisualStudioCode編輯器Volar擴(kuò)展專門用于為“.vue”單文件組件（Single-FileComponent，SFC）提供代碼高亮顯示和語(yǔ)法支持。該擴(kuò)展僅適用于Vue3項(xiàng)目，不僅提供了語(yǔ)法高亮顯示、智能提示、錯(cuò)誤提示、格式化等功能，而且支持多根節(jié)點(diǎn)組件，例如支持將一個(gè)Vue文件中的<template>、<script>、<style>拆分成3個(gè)窗口，每個(gè)窗口負(fù)責(zé)各自的功能。

安裝Volar擴(kuò)展2.1VisualStudioCode編輯器Volar擴(kuò)展的安裝方法與中文語(yǔ)言擴(kuò)展的安裝方法類似。如果想要安裝Volar擴(kuò)展，可以在擴(kuò)展界面的搜索框中輸入關(guān)鍵詞“Volar”，搜索到“VueLanguageFeatures(Volar)”擴(kuò)展后進(jìn)行安裝。需要注意的是，Vue3的組件代碼與Vue2不同，使用的語(yǔ)法提示和高亮插件也不同。在Vue2中不能使用Volar擴(kuò)展，而是使用Vetur擴(kuò)展，可以在擴(kuò)展界面的搜索框中輸入關(guān)鍵詞“Vetur”，搜索到“Vetur”擴(kuò)展后進(jìn)行安裝。2.1VisualStudioCode編輯器在實(shí)際開發(fā)中，開發(fā)一個(gè)項(xiàng)目需要先創(chuàng)建項(xiàng)目文件夾，以便于保存項(xiàng)目中的文件。接下來(lái)演示如何創(chuàng)建項(xiàng)目文件夾，如何使用VSCode編輯器打開項(xiàng)目文件夾，以及如何創(chuàng)建一個(gè)HTML5文檔，具體步驟如下。使用VSCode編輯器2.1VisualStudioCode編輯器在D:\vue目錄下創(chuàng)建一個(gè)項(xiàng)目文件夾chapter01。創(chuàng)建項(xiàng)目文件夾步驟1步驟3步驟22.2 Node.js環(huán)境Node.js是一個(gè)基于V8引擎的JavaScript運(yùn)行環(huán)境，提供了一些功能性的API，例如文件操作API、網(wǎng)絡(luò)通信API等。2.2 Node.js環(huán)境打開Node.js官網(wǎng)，找到Node.js下載地址，如下圖所示。2.2 Node.js環(huán)境從Node.js官方網(wǎng)站可以看出，Node.js有兩個(gè)版本，分別是16.17.0LTS和18.9.0Current。其中，LTS（LongTermSupport）表示提供長(zhǎng)期支持的版本，只進(jìn)行Bug修復(fù)且版本穩(wěn)定，因此有很多用戶在使用；Current表示當(dāng)前發(fā)布的新版本，增加了一些新特性，有利于進(jìn)行新技術(shù)的開發(fā)使用。這里選擇下載16.17.0LTS版本。下載完成后會(huì)得到一個(gè)名稱為node-v16.17.0-x64.msi的安裝包文件。2.2 Node.js環(huán)境雙擊node-v16.17.0-x64.msi安裝包圖標(biāo)，會(huì)彈出安裝向?qū)Т翱?，如下圖所示。安裝過(guò)程全部使用默認(rèn)值。2.2 Node.js環(huán)境安裝完成后，測(cè)試一下Node.js是否安裝成功，具體步驟如下。2.2 Node.js環(huán)境按“Windows+R”組合鍵，打開“運(yùn)行”對(duì)話框，輸入“cmd”。在“運(yùn)行”對(duì)話框中輸入“cmd”后的效果如下圖所示。打開“運(yùn)行”對(duì)話框步驟1步驟3步驟22.2 Node.js環(huán)境單擊“確定”按鈕或者直接按“Enter”鍵，會(huì)打開命令提示符，如下圖所示。打開命令提示符步驟1步驟3步驟22.2 Node.js環(huán)境在命令提示符中，輸入命令“node-v”，其中v是version的簡(jiǎn)寫，表示版本。命令輸入完成后，按“Enter”鍵，查看當(dāng)前安裝的Node.js版本，如下圖所示。查看Node.js版本若想要退出命令提示符，可以輸入“exit”并按“Enter”鍵，或者單擊右上角的“×”關(guān)閉按鈕退出。步驟1步驟3步驟22.3常見的包管理工具什么是包呢？2.3常見的包管理工具在Vue項(xiàng)目開發(fā)中，經(jīng)常需要通過(guò)各種第三方的包（package）來(lái)擴(kuò)展項(xiàng)目的功能?！鞍笨梢岳斫鉃閷⒁幌盗心K化的代碼打包起來(lái)，形成一個(gè)包，以便于使用。項(xiàng)目中所用到的包稱為項(xiàng)目的依賴（dependency）。2.3常見的包管理工具什么是包管理工具呢？2.3常見的包管理工具為了方便管理第三方的包，需要用到包管理工具。包管理工具可以讓開發(fā)人員輕松地下載、升級(jí)、卸載包。假設(shè)在項(xiàng)目開發(fā)時(shí)，沒(méi)有包管理工具，若想使用第三方包，則每次都需要下載、解壓后才可以使用，非常煩瑣。而使用包管理工具，只需通過(guò)一條命令即可下載并安裝第三方包，非常方便，而且還可以指定下載的版本等。2.3常見的包管理工具npm是Node.js默認(rèn)的包管理工具，它可以安裝、共享、分發(fā)代碼，還可以管理項(xiàng)目的依賴關(guān)系。npmyarn是Node.js的包管理工具，它是一個(gè)高效、安全和可靠的包管理工具，yarn能夠提高包的安裝效率，節(jié)約安裝時(shí)間。yarn常見的包管理工具2.3常見的包管理工具在安裝Node.js時(shí)會(huì)自動(dòng)安裝相應(yīng)版本的npm，不需要單獨(dú)安裝，使用“npm-v”命令可以查看npm的版本，如下圖所示。1.npm2.3常見的包管理工具使用npm包管理工具可以解決以下場(chǎng)景的需求。從npm服務(wù)器下載別人編寫的第三方包到本地使用。從npm服務(wù)器下載并安裝別人編寫的命令行程序到本地來(lái)使用。將自己編寫的包或命令行程序上傳到npm服務(wù)器供別人使用。2.3常見的包管理工具npm提供了快速操作包的命令，只需要執(zhí)行簡(jiǎn)單的命令就可以很方便地對(duì)第三方包進(jìn)行管理。npm中常用的命令如下。npminstall包名：可簡(jiǎn)寫為“npmi包名”，用于為項(xiàng)目安裝指定名稱的包。如果加上-g選項(xiàng)，則會(huì)把包安裝為全局包，否則只安裝到本項(xiàng)目中。如果省略包名，則npm會(huì)根據(jù)當(dāng)前目錄下的package.json文件中保存的依賴信息為項(xiàng)目安裝所有的包。npmuninstall包名：用于卸載指定名稱的包。npmupdate包名：用于更新指定名稱的包。2.3常見的包管理工具在下載npm安裝包時(shí)，下載速度可能會(huì)比較慢，這是因?yàn)樘峁┌姆?wù)器在國(guó)外。為了加快包的下載速度，建議將下載源切換成國(guó)內(nèi)鏡像服務(wù)器。為npm設(shè)置鏡像地址的具體命令如下。npmconfigsetregistry為了驗(yàn)證鏡像地址是否設(shè)置成功，可以通過(guò)如下命令進(jìn)行驗(yàn)證。npmconfiggetregistry執(zhí)行上述命令后，若輸出了設(shè)置的鏡像地址，則表示設(shè)置成功。2.3常見的包管理工具在使用yarn之前，需要先確保計(jì)算機(jī)中已經(jīng)安裝了Node.js環(huán)境，再使用npm命令安裝yarn，安裝命令如下。npminstallyarn-g為了驗(yàn)證yarn是否安裝成功，可以通過(guò)“yarn-v”命令查看yarn的版本信息，如下圖所示。2.yarn2.3常見的包管理工具為了提高下載yarn安裝包的速度，也可以將yarn的下載源切換成國(guó)內(nèi)鏡像服務(wù)器。為yarn設(shè)置鏡像地址的具體命令如下。yarnconfigsetregistry為了驗(yàn)證鏡像地址是否設(shè)置成功，可以通過(guò)如下命令進(jìn)行驗(yàn)證。yarnconfiggetregistry執(zhí)行上述命令后，若輸出了設(shè)置的鏡像地址，則表示設(shè)置成功。2.3常見的包管理工具下面列舉yarn中一些常用的命令。yarninstall：可簡(jiǎn)寫為yarn，用于為項(xiàng)目安裝所有包。如果提供了-g選項(xiàng)，則會(huì)把包安裝為全局包，否則只安裝到本項(xiàng)目中。yarnremove包名：用于卸載指定名稱的包。yarnup包名：用于更新指定名稱的包。yarnadd包名：用于添加指定名稱的包。2.3常見的包管理工具yarn與npm包管理工具的區(qū)別使用npm安裝同一個(gè)包時(shí)，每次安裝都需要重新下載，而yarn會(huì)緩存每個(gè)下載過(guò)的包，再次使用時(shí)無(wú)須重復(fù)下載。npm按照隊(duì)列安裝每個(gè)包，也就是說(shuō)，必須要等到當(dāng)前包安裝完成后，才能繼續(xù)安裝后面的包，而yarn可以利用并行下載的方式提高資源利用率，安裝速度更快。npm的輸出信息比較冗長(zhǎng)，在執(zhí)行npminstall命令時(shí)，命令提示符里會(huì)輸出所有被安裝的包的信息。相比之下，yarn的輸出信息比較簡(jiǎn)潔，只輸出必要的信息，同時(shí)也提供了一些命令供開發(fā)者查詢額外的安裝信息。使用Vite創(chuàng)建Vue3項(xiàng)目33.1 什么是Vite什么是Vite？3.1 什么是ViteVite（讀音：/vit/）是一個(gè)輕量級(jí)、運(yùn)行速度快的前端構(gòu)建工具，它支持模塊熱替換（HotModuleReplacement，HMR），可以即時(shí)、準(zhǔn)確地更新模塊，當(dāng)代碼修改時(shí)無(wú)須重新加載頁(yè)面或清除應(yīng)用程序狀態(tài)。Vite默認(rèn)安裝的插件比較少，隨著開發(fā)過(guò)程中依賴的增多，需要額外進(jìn)行配置。3.1 什么是Vite在Vue3出現(xiàn)前，Vue2一般使用Vue

CLI創(chuàng)建。Vue

CLI基于Webpack構(gòu)建