基于金融科技應(yīng)用的《Web前端框架》課程開(kāi)發(fā)與實(shí)踐

楊偉櫻 蘭 天 呂阿璐 蔣張飛

1．陜西工業(yè)職業(yè)技術(shù)學(xué)院，陜西 咸陽(yáng) 712000；2．西部現(xiàn)代職業(yè)教育研究院，陜西 咸陽(yáng) 712000；3．浙江同花順金融科技公司，浙江 杭州 310006

近年來(lái)，伴隨著中國(guó)科技迅猛發(fā)展，金融產(chǎn)業(yè)發(fā)生了巨大變革，金融與科技結(jié)合，不僅顛覆了銀行、保險(xiǎn)、證券和資產(chǎn)管理等細(xì)分領(lǐng)域原有的商業(yè)模式和邏輯，重構(gòu)了傳統(tǒng)金融的戰(zhàn)略、運(yùn)營(yíng)、產(chǎn)品服務(wù)渠道和風(fēng)控等各個(gè)環(huán)節(jié)。同時(shí)，金融科技企業(yè)不斷推進(jìn)數(shù)字化科技創(chuàng)新服務(wù)方式、豐富金融服務(wù)場(chǎng)景、優(yōu)化金融服務(wù)體驗(yàn)，尤其引起人們關(guān)注的是，金融科技產(chǎn)業(yè)正在經(jīng)歷著與傳統(tǒng)金融機(jī)構(gòu)搶奪市場(chǎng)，到為傳統(tǒng)金融機(jī)構(gòu)賦能的全方位改革與轉(zhuǎn)變。2020、2021年是中國(guó)金融科技發(fā)展極其不平凡的兩年，突如其來(lái)的新冠肺炎疫情，對(duì)金融業(yè)既是一場(chǎng)考驗(yàn)，也注入了強(qiáng)勁的驅(qū)動(dòng)力，彰顯了“互聯(lián)網(wǎng)+金融科技”創(chuàng)新的重要性，從而加速了傳統(tǒng)金融機(jī)構(gòu)的數(shù)字化轉(zhuǎn)型進(jìn)程[1]。同時(shí)，國(guó)家對(duì)于“互聯(lián)網(wǎng)+金融科技”的監(jiān)管也提出了很多新要求，在鼓勵(lì)通過(guò)“監(jiān)管沙盤(pán)”創(chuàng)新試點(diǎn)的同時(shí)，出臺(tái)多項(xiàng)新規(guī)，全力保障消費(fèi)者權(quán)益，確保市場(chǎng)公平競(jìng)爭(zhēng)，引導(dǎo)傳統(tǒng)金融機(jī)構(gòu)與金融科技公司在不斷規(guī)范的基礎(chǔ)上開(kāi)展“互聯(lián)網(wǎng)+數(shù)字化技術(shù)”創(chuàng)新。

當(dāng)前，引領(lǐng)中國(guó)“互聯(lián)網(wǎng)+金融科技”改革的公司，如螞蟻金服、京東金融等，均已開(kāi)始使用“Web+原生界面”的模式開(kāi)發(fā)移動(dòng)互聯(lián)，金融科技公司重點(diǎn)關(guān)注可擴(kuò)展性強(qiáng)、上線速度快，在出現(xiàn)重大事故的情況下安全可靠，且能及時(shí)回退等問(wèn)題，而Web前端技術(shù)發(fā)布和回退的即時(shí)性，完美符合了金融科技需要快速開(kāi)發(fā)、快速迭代、迅速回退的需求[2]。市場(chǎng)上，尤其是金融科技行業(yè)，對(duì)于前端開(kāi)發(fā)人員的需求量非常之大，據(jù)2020年的不完全統(tǒng)計(jì)，前端技術(shù)人才需求量在全國(guó)軟件市場(chǎng)開(kāi)發(fā)人才需求中排前茅，僅次于Java開(kāi)發(fā)。而前端語(yǔ)言，作為一種標(biāo)簽語(yǔ)言，從上手的難易程度，更注重于技術(shù)技能操作的崗位職業(yè)能力，從對(duì)算法及邏輯的要求來(lái)看，更側(cè)重于應(yīng)用技術(shù)開(kāi)發(fā)能力的培養(yǎng)，更適合于職業(yè)院校的高技能及應(yīng)用性人才培養(yǎng)的規(guī)格要求。

一、基于金融科技產(chǎn)業(yè)需求的《Web前端框架》課程開(kāi)發(fā)與實(shí)踐

（一）現(xiàn)代金融科技企業(yè)前端框架構(gòu)建的崗位職業(yè)能力分析

隨著前端技術(shù)的不斷推進(jìn)，各個(gè)金融科技公司都在使用開(kāi)發(fā)更為規(guī)范，功能更加強(qiáng)大的前端框架技術(shù)，針對(duì)國(guó)家對(duì)金融科技企業(yè)前端技術(shù)安全可靠性要求，統(tǒng)一使用由我國(guó)自主研發(fā)的vue．js框架實(shí)施技術(shù)開(kāi)發(fā)，并提供中文文檔說(shuō)明，極大減少了初學(xué)者的學(xué)習(xí)成本，更容易學(xué)習(xí)和理解。在調(diào)研國(guó)內(nèi)各大金融科技公司對(duì)前端技術(shù)人才崗位職業(yè)能力要求分析得知，該崗位重點(diǎn)培養(yǎng)基于vue．js框架前端技術(shù)框架的開(kāi)發(fā)、推廣和應(yīng)用能力。基于以上需求及調(diào)研分析，可將市場(chǎng)上對(duì)前端開(kāi)發(fā)人才的職業(yè)能力確立為：一是，掌握VUE框架或React框架；二是，擁有良好的javascript，Jquery，Bootstrap技術(shù)能力，熟練掌握WEB技術(shù)標(biāo)準(zhǔn)（H5，ES6，CSS3）；三是，熟練掌握常見(jiàn)前端構(gòu)建工具（如webpack，gulp，babel）等；四是，在掌握一定的HTML和CSS基礎(chǔ)上，尚需掌握一定的前端框架技術(shù)設(shè)計(jì)和分析能力。同時(shí)，對(duì)于前端技術(shù)開(kāi)發(fā)崗位而言，如能有一定的行業(yè)新技術(shù)、新知識(shí)儲(chǔ)備，更易贏得企業(yè)的青睞。

（二）基于金融科技企業(yè)典型前端框架構(gòu)建的技術(shù)支持分析

基于以上現(xiàn)代金融科技Web前端框架技術(shù)需求分析，在搭建Web框架的基本結(jié)構(gòu)和功能設(shè)計(jì)基礎(chǔ)上，利用我國(guó)自主開(kāi)發(fā)的Vue．js框架前端技術(shù)，進(jìn)行Web前端組件化開(kāi)發(fā)的技術(shù)分析，通過(guò)Vue開(kāi)發(fā)環(huán)境的搭建、Vue實(shí)例對(duì)象、內(nèi)置指令、組件、事件、生命周期、全局API以及實(shí)例屬性、過(guò)渡動(dòng)畫(huà)、路由、狀態(tài)管理等實(shí)現(xiàn)Web前端框架的技術(shù)需求和功能模塊。

（三）基于金融科技企業(yè)典型前端框架構(gòu)建典型案例實(shí)施項(xiàng)目化教學(xué)設(shè)計(jì)與開(kāi)發(fā)

基于軟件技術(shù)快速發(fā)展對(duì)前端技術(shù)人才職業(yè)能力需求，《Web前端框架》作為新開(kāi)發(fā)的專(zhuān)業(yè)核心課程，大部分院校課程教學(xué)內(nèi)容的開(kāi)設(shè)還處于前端入門(mén)簡(jiǎn)單的語(yǔ)言介紹，學(xué)校也仍處在摸索階段，尚未有效的基于產(chǎn)業(yè)發(fā)展新需求，嚴(yán)格的互聯(lián)網(wǎng)技術(shù)規(guī)范，按照產(chǎn)業(yè)崗位職業(yè)能力要求開(kāi)發(fā)前端進(jìn)階課程體系和教學(xué)內(nèi)容[3]。針對(duì)《Web前端框架》課程教學(xué)目標(biāo)，市場(chǎng)的高要求，選取金融科技企業(yè)Web前端要求的規(guī)范性強(qiáng)、技術(shù)要求高、安全性高、可靠性高、穩(wěn)定性高及快速實(shí)時(shí)反應(yīng)能力強(qiáng)等特點(diǎn)，以金融科技企業(yè)最新Web前端框架搭建的新技術(shù)案例為載體，實(shí)施崗位職業(yè)能力的知識(shí)、能力、素質(zhì)需求分析及課程思政元素挖掘[4]。對(duì)接現(xiàn)代Web前端框架技術(shù)需求，通過(guò)項(xiàng)目化教學(xué)設(shè)計(jì)，從Vue的基本概念入手，在Vue開(kāi)發(fā)環(huán)境的搭建、Vue實(shí)例對(duì)象、內(nèi)置指令、組件、事件、生命周期、全局API以及實(shí)例屬性、過(guò)渡動(dòng)畫(huà)、路由、狀態(tài)管理等實(shí)施Web前端框架搭建的教學(xué)任務(wù)分解，讓學(xué)生掌握在使用Vue快速創(chuàng)建單頁(yè)面應(yīng)用的同時(shí)，學(xué)懂弄通如何實(shí)現(xiàn)頁(yè)面的交互效果以及交易功能等。

（四）基于金融科技企業(yè)典型Web前端框架構(gòu)建的項(xiàng)目化教學(xué)實(shí)踐

基于以上技術(shù)需求和教學(xué)設(shè)計(jì)與開(kāi)發(fā)，通過(guò)構(gòu)建基于現(xiàn)代金融科技產(chǎn)品真實(shí)的Web前端框架搭建和運(yùn)營(yíng)實(shí)踐，通過(guò)做中學(xué)，學(xué)中練，讓學(xué)生能夠根據(jù)金融業(yè)務(wù)需求開(kāi)發(fā)出不同的功能，如組件過(guò)渡效果、金融交易頁(yè)面等，掌握現(xiàn)代金融科技企業(yè)Web前端框架的開(kāi)發(fā)技術(shù)，實(shí)現(xiàn)其穩(wěn)定、安全、可靠及實(shí)時(shí)響應(yīng)的功能需求等，培養(yǎng)實(shí)際操作能力。

二、基于金融科技產(chǎn)業(yè)需求的《Web前端框架》課程開(kāi)發(fā)路徑及技術(shù)路線

（一）開(kāi)發(fā)路徑設(shè)計(jì)

一是以現(xiàn)代金融科技企業(yè)Web前端技術(shù)開(kāi)發(fā)典型案例為載體，實(shí)施崗位職業(yè)能力分析，實(shí)施知識(shí)、能力、素質(zhì)需求分析，確立崗位職業(yè)能力培養(yǎng)目標(biāo)及教學(xué)重點(diǎn)，開(kāi)展項(xiàng)目化教學(xué)；二是，基于我國(guó)自主研制Vue．js框架進(jìn)行Web前端組件化開(kāi)發(fā)的新標(biāo)準(zhǔn)，構(gòu)建前端技術(shù)框架。通過(guò)課內(nèi)課外問(wèn)卷調(diào)研分析學(xué)生學(xué)情，確立崗位職業(yè)能力培養(yǎng)中的教學(xué)難點(diǎn)和技術(shù)堵點(diǎn)；三是，結(jié)合現(xiàn)代金融科技信息安全、技術(shù)可靠、便捷實(shí)用等用戶(hù)需求，全程融入互聯(lián)網(wǎng)金融科技安全等課程思政元素，給予開(kāi)發(fā)者愛(ài)崗敬業(yè)，創(chuàng)新設(shè)計(jì)的時(shí)代工匠精神。培養(yǎng)新時(shí)代高科技技術(shù)領(lǐng)域Web前端框架設(shè)計(jì)與開(kāi)發(fā)的高素質(zhì)技術(shù)技能人才。

（二）技術(shù)路線選擇

基于金融科技應(yīng)用的《Web前端框架》課程開(kāi)發(fā)技術(shù)路線。一是基于專(zhuān)業(yè)人才培養(yǎng)方案中對(duì)Web技術(shù)的教學(xué)目標(biāo)和課程標(biāo)準(zhǔn)要求，結(jié)合Vue．js框架進(jìn)行Web前端組件化開(kāi)發(fā)的新標(biāo)準(zhǔn)要求，圍繞現(xiàn)代金融科技企業(yè)Web前端崗位職業(yè)能力需求，精選現(xiàn)代金融科技企業(yè)Web前端框架開(kāi)發(fā)的經(jīng)典典型案例；二是對(duì)標(biāo)教學(xué)目標(biāo)的知識(shí)、能力、素質(zhì)需求，融入課程思政元素優(yōu)化教學(xué)內(nèi)容，設(shè)計(jì)教學(xué)項(xiàng)目；三是基于開(kāi)發(fā)的教學(xué)內(nèi)容以真實(shí)項(xiàng)目為引領(lǐng)，開(kāi)展教學(xué)實(shí)踐，并通過(guò)實(shí)踐成果分析確立教學(xué)及學(xué)習(xí)目標(biāo)的達(dá)成。其基本技術(shù)路線如下圖所示。

圖1 基于金融科技應(yīng)用的《Web前端框架》課程開(kāi)發(fā)技術(shù)路線圖

三、基于產(chǎn)業(yè)需求的《Web前端框架》課程開(kāi)發(fā)成果

（一）以同花順金融科技公司為例，通過(guò)H5的應(yīng)用，大大提升了用戶(hù)體驗(yàn)。HTML5技術(shù)應(yīng)用在移動(dòng)端，能夠讓?xiě)?yīng)用程序回歸到網(wǎng)頁(yè)，并對(duì)網(wǎng)頁(yè)的功能進(jìn)行擴(kuò)展，用戶(hù)無(wú)需下載客戶(hù)端或插件，只需點(diǎn)開(kāi)，即可使用，操作更加便捷，用戶(hù)體驗(yàn)更好?；?dòng)性強(qiáng)，視覺(jué)效果佳，用戶(hù)的感官體驗(yàn)好。從開(kāi)發(fā)者角度出發(fā)具備跨平臺(tái)應(yīng)用的優(yōu)勢(shì)，實(shí)現(xiàn)了“三低”：制作成本低，傳播成本低，維護(hù)成本低?？梢约啥喾N技術(shù)，實(shí)現(xiàn)了多元的視覺(jué)特效，豐富了頁(yè)面表現(xiàn)形式。從企業(yè)角度出發(fā)H5的跨平臺(tái)優(yōu)勢(shì)，大大提高了傳播效率，無(wú)需下載，只需要點(diǎn)開(kāi)即可使用，無(wú)需換設(shè)備、無(wú)需下載，簡(jiǎn)化了用戶(hù)使用流程。在傳播的效率上得到了很大的提升。

（二）建立以H5技術(shù)開(kāi)發(fā)的行情交易系統(tǒng)，脫離APP的行情交易框架?？梢赃M(jìn)行豐富的跨平臺(tái)應(yīng)用，可快速發(fā)布應(yīng)用于不同的渠道，無(wú)需用戶(hù)下載，大大降低了用戶(hù)的使用成本。

（三）在金融科技領(lǐng)域使用H5頁(yè)面進(jìn)行推廣?？梢杂行椭髽I(yè)進(jìn)行三方平臺(tái)的渠道拓展，提升獲客效率，拓寬獲客來(lái)源，盤(pán)活存量用戶(hù)的運(yùn)營(yíng)觸達(dá)效率，助力企業(yè)管理自身的渠道運(yùn)營(yíng)，并且提供了豐富的行情功能和全量的交易業(yè)務(wù)，有效的替代了APP的金融服務(wù)功能，提供了優(yōu)質(zhì)的用戶(hù)體驗(yàn)，讓用戶(hù)在不同的平臺(tái)均能便捷享受金融服務(wù)。

四、結(jié)論

（一）利用我國(guó)自主開(kāi)發(fā)的Vue．js框架進(jìn)行Web前端組件化開(kāi)發(fā)，培養(yǎng)學(xué)生的愛(ài)國(guó)情懷，熟知現(xiàn)代金融科技管理的規(guī)范性、安全性、穩(wěn)定性、可靠性及快速適應(yīng)現(xiàn)代數(shù)字經(jīng)濟(jì)發(fā)展的需要，確保國(guó)家金融經(jīng)濟(jì)的穩(wěn)定和安全。

（二）課程教學(xué)引入現(xiàn)代金融科技企業(yè)的Web前端框架技術(shù)開(kāi)發(fā)案例，以當(dāng)前的新技術(shù)、新規(guī)范、新方法實(shí)施教學(xué)設(shè)計(jì)和教學(xué)開(kāi)發(fā)，實(shí)現(xiàn)了產(chǎn)業(yè)崗位職業(yè)能力需求與教學(xué)內(nèi)容的有機(jī)融合。