后端視角下的前端框架之Vue.js初探

背景

作為常年搞后端的自己來說,除了多年前學習的一點關于HTML的皮毛,對現在的前端技術棧可謂是一竅不通。但是因為最近在做的內部業務全鏈路監控系統,負責前端的同事做到一半去搞別的項目了,為了把項目落地不得不硬著頭皮學一下前端知識。
項目采用了比較流行的Vue.js(以下簡稱Vue)框架,所以做了一些學習,有一些小的感悟,所以做個記錄。對沒有搞過前端的后端同學來說可能有點收獲。

前后端分離

現在前后端主流的合作方式還是前后分離。我理解的前后端分離,從宏觀上講:前端負責發送請求到后端獲取或者推送數據然后根據響應結果進行渲染。
關于后端,負責提供數據讀寫API供前端調用,此處不談。
本文主要談一下在前端如何使用Vue做渲染。當然Vue.js也可以不用在前后分離的場景,但是這樣

Vue如何工作的

從三個方面入手:

  1. 實現原理
  2. Vue使用方式
  3. 生產實踐

實現原理 - MVVM (Model - View - ViewModel)模式

關于MVVM的理解:視圖層的變化會更新到Model,Model層的變化會更新到View,即所謂的雙向綁定(data-binding)。
Vue基于MVVM模式實現。
維基百科定義:https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel

Vue使用方式 - 如何編碼

Vue跟Java一樣有自己的語法,可以像引用jar一樣依賴第三方的JS庫。官方文檔:https://cn.vuejs.org/v2/guide/

生產實踐 - 工程化

與Java工程一樣,我們要構建一個可以發布的包,我們需要依賴管理工具來處理負責的依賴的關系,要使用構建工具來幫我們把Vue源文件編譯成能被瀏覽器解釋渲染的文件,比如js、css、png等。比如Maven、Gradle、Ivy,管理依賴,并調用Java編譯器完成.java到.class的過程一樣。Vue使用的構建工具是npm,基于nodejs的包管理工具,npm應該是js相關腳手架下公認的依賴管理工具。

Vue適用場景

Vue是當前很火的一個框架,其解放了前端同學手動綁定數據的大量操作,有利于更快速的寫出穩定的功能代碼。因為其前后分離的特性,真正的業務數據都是通過異步的方式來拉取,對搜索引擎的收錄有影響。針對這種場景,Vue作者提供了一種ssr的解決方案,推薦nuxt.js在服務端完成html代碼的渲染,嗯,這個需要nodejs的支持,也意味著額外的維護成本,也意味著多了一次轉發,這種方案是否還有其他影響暫時不知。
個人認為,Vue做后臺是一個非常棒的方案。

轉載于:https://www.cnblogs.com/liushijie/p/10534250.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/387245.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/387245.shtml
英文地址,請注明出處:http://en.pswp.cn/news/387245.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

機器學習12推薦系統

推薦系統(Recommender Systems) 推薦系統根據瀏覽用戶過去買過什么書,或過去評價過什么電影來判斷并推薦新產品給用戶。 這些系統會為像亞馬遜和網飛這樣的公司帶來很大一部分收入。 因此,對推薦系統性能的改善,將對這些企業的有實質性和…

使用Apriori進行關聯分析(二)

使用Apriori進行關聯分析(二)書接上文(使用Apriori進行關聯分析(一)),介紹如何挖掘關聯規則。發現關聯規則我們的目標是通過頻繁項集挖掘到隱藏的關聯規則。所謂關聯規則,指通過某個…

Apache Tomcat 7 Configuration BIO NIO AIO APR ThreadPool

Apache Tomcat 7 Configuration Reference (7.0.93) - The Executor (thread pool)https://tomcat.apache.org/tomcat-7.0-doc/config/executor.html Tomat組件研究之ThreadPool - 老碼農的專欄 - CSDN博客https://blog.csdn.net/chen77716/article/details/344764 Tomcat中的線…

數學筆記3——導數3(隱函數的導數)

數學筆記3——導數3(隱函數的導數)冪函數的擴展形式f(x) xn的導數:f’(x) nxn-1,n是整數,該公式對f(x) xm/n, m,n 是整數同樣適用。推導過程:什么是隱函數引自知乎:“如果方程F(x,y)0能確定y…

機器學習13大規模數據集

大型數據集的學習(Learning With Large Datasets) 如果我們有一個低方差的模型, 增加數據集的規模可以幫助你獲得更好的結果。 我們應該怎樣應對一個有 100 萬條記錄的訓練集? 以線性回歸模型為例,每一次梯度下降…

svn認證失敗,解決方案

在svnserve.conf:文件中去掉authz-db authz前面的#號,會出現的認證失敗。 造成此原因的主要問題就是authz文件中權限沒有配置好。 例如: 創建prj1庫 svnadmin create prj1 修改配置文件 svnserve.conf: [general] anon-access read auth-access write…

Python機器學習庫sklearn的安裝

Python機器學習庫sklearn的安裝 scikit-learn是Python的一個開源機器學習模塊,它建立在NumPy,SciPy和matplotlib模塊之上能夠為用戶提供各種機器學習算法接口,可以讓用戶簡單、高效地進行數據挖掘和數據分析。 Ubuntu14.04系統上安裝 安裝num…

Java07多線程

14 多線程 操作系統的多任務(multitasking):在同一時刻運行多個程序的能力。 多線程在較低的層次上擴展了多任務的概念:一個程序同時執行多個任務。 通常,每一個任務稱為一個線程(tread)&…

MySQL字段拼接Concat

有時候,從數據庫中拿出的數據并不是我們想要的格式,比如,有以下的vendors表 如果,想以 name (location)的格式展現出來,那么就要用到MySQL的Concat了。 Concat()拼接串,即把多個串連接起來形成一個較長的串…

使用pycharm調用模塊后字體變灰 是什么原因呢?

使用pycharm調用模塊后字體變灰 是什么原因呢?點擊小燈泡提示出現以下內容:This inspection detects names that should resolve but dont. Due to dynamic dispatch and duck typing, this is possible in a limited but useful number of cases. Top-l…

操作系統01概述

第一章 概論 《Operating System Internals and Design Principles》 《Applied Operating System Concepts》 操作系統——裸機上的第一層軟件,它是對硬件系統功能的首次擴充,填補人與機器之間的鴻溝。 1.1 操作系統與計算機同在 1.2 對操作系統的…

CNN訓練模型 花卉

一、CNN訓練模型 模型尺寸分析:卷積層全都采用了補0,所以經過卷積層長和寬不變,只有深度加深。池化層全都沒有補0,所以經過池化層長和寬均減小,深度不變。http://download.tensorflow.org/example_images/flower_photo…

Linux re

正則表達式并不是一個工具程序,而是一個字符串處理的標準依據,如果想要以正則表達式的方式處理字符串,就得使用支持正則表達式的工具,例如grep、vi、sed、asw等。 注意:ls不支持正則表達式。 grep 正則表達式: 注意gr…

操作系統02進程管理Process_Description_and_Control

作業的基本概念:用戶再一次計算過程中或一次事務處理過程中,要求計算機系統所做的工作的集合。 包含多個程序、多個數據、作業控制說明書 系統調用時操作系統提供給編程人員的唯一接口。 1、文件操作類; 2、進程控制類; 3、資…

藍橋杯 方格填數(全排列+圖形補齊)

方格填數 如下的10個格子 填入0~9的數字,同一數字不能重復填。要求:連續的兩個數字不能相鄰。(左右、上下、對角都算相鄰) 一共有多少種可能的填數方案? 請填寫表示方案數目的整數。注意:你提交的應該是一個…

操作系統03進程管理Process_Scheduling

2 Process Scheduling >Type of scheduling >Scheduling Criteria (準則) >Scheduling Algorithm >Real-Time Scheduling (嵌入式系統) 2.1 Learning Objectives By the end of this lecture you should be able to Explain what is Response Time 響應時間-…

花卉分類CNN

tensorflow升級到1.0之后,增加了一些高級模塊: 如tf.layers, tf.metrics, 和tf.losses,使得代碼稍微有些簡化。 任務:花卉分類 版本:tensorflow 1.3 數據:http://download.tensorflow.org/example_images/f…

【模板】可持久化線段樹

可持久化線段樹/主席樹: 顧名思義,該數據結構是可以訪問歷史版本的線段樹。用于解決需要查詢歷史信息的區間問題。 在功能與時間復雜度上與開n棵線段樹無異,然而空間復雜度從$O(n\times nlogn)$降到了$O(nlogn)$。 實現方法: 每次…

skimage庫需要依賴 numpy+mkl 和scipy

skimage庫需要依賴 numpymkl 和scipy1、打開運行,輸入cmd回車,輸入python回車,查看python版本2、在https://www.lfd.uci.edu/~gohlke/pythonlibs/#numpy 中,根據自己python版本下載需要的包 (因為我的是python 2.7.13 …

操作系統04進程同步與通信

4.1 進程間的相互作用 4.1.1 進程間的聯系資源共享關系相互合作關系臨界資源應互斥訪問。臨界區:不論是硬件臨界資源,還是軟件臨界資源,多個進程必須互斥地對它們進行訪問。把在每個進程中訪問臨界資源的那段代碼稱為臨界資源區。顯然&#x…