欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一個(gè)Java程序猿眼中的前后端分離以及Vue.js入門(推薦)

 更新時(shí)間:2019年04月19日 10:32:07   作者:江南一點(diǎn)雨  
這篇文章主要介紹了前后端分離及Vue.js入門,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

松哥的書里邊,其實(shí)有涉及到 Vue,但是并沒有詳細(xì)說過,原因很簡單,Vue 的資料都是中文的,把 Vue.js 官網(wǎng)的資料從頭到尾瀏覽一遍該懂的基本就懂了,個(gè)人感覺這個(gè)是最好的 Vue.js 學(xué)習(xí)資料 ,因此在我的書里邊就沒有多說。但是最近總結(jié)小伙伴遇到的問題,感覺很多人對(duì)前后端分離開發(fā)還是兩眼一抹黑,所以今天松哥想和大家聊一下前后端分離以及 Vue.js 的一點(diǎn)事,算是一個(gè)簡單的入門科普吧。

前后端不分

  1. 后端模板:Jsp、FreeMarker、Velocity
  2. 前端模板:Thymeleaf

前后端不分,Jsp 是一個(gè)非常典型寫法,Jsp 將 HTML 和 Java 代碼結(jié)合在一起,剛開始的時(shí)候,確實(shí)提高了生產(chǎn)力,但是時(shí)間久了,大伙就發(fā)現(xiàn) Jsp 存在的問題了,對(duì)于后端工程師來說,可能不太精通 css ,所以流程一般是這樣前端設(shè)計(jì)頁面-->后端把頁面改造成 Jsp --> 后端發(fā)現(xiàn)問題 --> 頁面給前端 --> 前端不會(huì)Jsp。這種方式效率低下。特別是在移動(dòng)互聯(lián)網(wǎng)興起后,公司的業(yè)務(wù),一般除了 PC 端,還有手機(jī)端、小程序等,通常,一套后臺(tái)系統(tǒng)需要對(duì)應(yīng)多個(gè)前端,此時(shí)就不可以繼續(xù)使用前后端不分的開發(fā)方式了。

在前后端不分的開發(fā)方式中,一般來說,后端可能返回一個(gè) ModelAndView ,渲染成 HTML 之后,瀏覽器當(dāng)然可以展示,但是對(duì)于小程序、移動(dòng)端來說,并不能很好的展示 HTML(實(shí)際上移動(dòng)端也支持HTML,只不過運(yùn)行效率低下)。這種時(shí)候,后端和前端數(shù)據(jù)交互,主流方案就是通過 JSON 來實(shí)現(xiàn)。

前后端分離

前后端分離后,后端不再寫頁面,只提供 JSON 數(shù)據(jù)接口(XML數(shù)據(jù)格式現(xiàn)在用的比較少),前端可以移動(dòng)端、小程序、也可以是 PC 端,前端負(fù)責(zé) JSON 的展示,頁面跳轉(zhuǎn)等都是通過前端來實(shí)現(xiàn)的。前端后分離后,前端目前有三大主流框架:

Vue

作者尤雨溪,Vue本身借鑒了 Angular,目前GitHubstar數(shù)最多,建議后端工程師使用這個(gè),最大的原因是Vue上手容易,可以快速學(xué)會(huì),對(duì)于后端工程師來說,能快速搭建頁面解決問題即可,但是如果你是專業(yè)的前端工程師,我會(huì)推薦你三個(gè)都去學(xué)習(xí) 。就目前國內(nèi)前端框架使用情況來說,Vue 算是使用最多的。而且目前來說,有大量 Vue 相關(guān)的周邊產(chǎn)品,各種 UI 框架,開源項(xiàng)目,學(xué)習(xí)資料非常多。

React

Facebook 的產(chǎn)品。是一個(gè)用于構(gòu)建用戶界面的 js 庫,React 性能較好,代碼邏輯簡單。

Angular

AngularJS 是一款由 Google 維護(hù)的開源 JavaScript 庫,用來協(xié)助單一頁面應(yīng)用程序運(yùn)行。它的目標(biāo)是透過 MVC 模式(MVC)功能增強(qiáng)基于瀏覽器的應(yīng)用,使開發(fā)和測(cè)試變得更加容易。

Vue簡介

Vue (讀音 /vjuː/,類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是,Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層,不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí),Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。

  1. 只關(guān)注視圖層
  2. MVVM 框架

大家在使用 jQuery 過程中,摻雜了大量的 DOM 操作,修改視圖或者獲取 value ,都需要 DOM 操作,MVVM 是一種視圖和數(shù)據(jù)模型雙向綁定的框架,即數(shù)據(jù)發(fā)生變化,視圖會(huì)跟著變化,視圖發(fā)生變化,數(shù)據(jù)模型也會(huì)跟著變化,開發(fā)者再也不需要操作 DOM 節(jié)點(diǎn)。

如下一個(gè)簡單的九九乘法表讓大家感受一下 MVVM :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="num">
  <table border="1">
    <tr v-for="i in parseInt(num)">
      <td v-for="j in i">{{j}}*{{i}}={{i*j}}</td>
    </tr>
  </table>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      num:9
    }
  });
</script>
</body>
</html>

用戶修改輸入框中的數(shù)據(jù),引起變量的變化,進(jìn)而實(shí)現(xiàn)九九乘法表的更新。

SPA

SPA(single page web application),單頁面應(yīng)用,是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型,它通過動(dòng)態(tài)重寫當(dāng)前頁面來與用戶交互,而非傳統(tǒng)的從服務(wù)器重新加載整個(gè)新頁面。這種方法避免了頁面之間切換打斷用戶體驗(yàn),使應(yīng)用程序更像一個(gè)桌面應(yīng)用程序。在單頁應(yīng)用中,所有必要的代碼( HTML、JavaScript 和 CSS )都通過單個(gè)頁面的加載而檢索,或者根據(jù)需要(通常是為響應(yīng)用戶操作)動(dòng)態(tài)裝載適當(dāng)?shù)馁Y源并添加到頁面。SPA 有一個(gè)缺點(diǎn),因?yàn)?SPA 應(yīng)用部署后只有1個(gè)頁面,而且這個(gè)頁面只是一堆 js 、css 引用,沒有其他有效價(jià)值,因此,SPA 應(yīng)用不易被搜索引擎收錄,所以,一般來說,SPA 適合做大型企業(yè)后臺(tái)管理系統(tǒng)。

Vue 使用方式大致上可以分為兩大類:

  1. 直接將Vue在頁面中引入,不做 SPA 應(yīng)用
  2. SPA應(yīng)用

基本環(huán)境搭建

首先需要安裝兩個(gè)東西:

  1. NodeJS
  2. npm

直接搜索下載 NodeJS 即可,安裝成功之后,npm 也就有了。安裝成功之后,可以 在 cmd 命令哈驗(yàn)證是否安裝成功:

NodeJS 安裝成功之后,接下來安裝 Vue的工具:

npm install -g vue-cli   # 只需要第一次安裝時(shí)執(zhí)行
vue init webpack my-project  # 使用webpack模板創(chuàng)建一個(gè)vue項(xiàng)目
cd my-project #進(jìn)入到項(xiàng)目目錄中
npm install  # 下載依賴(如果在項(xiàng)目創(chuàng)建的最后一步選擇了自動(dòng)執(zhí)行npm install,則該步驟可以省略)
npm run dev # 啟動(dòng)項(xiàng)目 

 啟動(dòng)成功后,瀏覽器輸入 http://localhost:8080就能看到如下頁面:

執(zhí)行 npm install 命令時(shí),默認(rèn)使用的是國外的下載源 ,可以通過如下代碼配置為使用淘寶的鏡像:

npm config set registry https://registry.npm.taobao.org

修改完成后,就能有效提高下載的成功率。

Vue 項(xiàng)目結(jié)構(gòu)介紹

Vue 項(xiàng)目創(chuàng)建完成后,使用 Web Storm 打開項(xiàng)目,項(xiàng)目目錄如下:

  1. build 文件夾,用來存放項(xiàng)目構(gòu)建腳本
  2. config 中存放項(xiàng)目的一些基本配置信息,最常用的就是端口轉(zhuǎn)發(fā)
  3. node_modules 這個(gè)目錄存放的是項(xiàng)目的所有依賴,即 npm install 命令下載下來的文件
  4. src 這個(gè)目錄下存放項(xiàng)目的源碼,即開發(fā)者寫的代碼放在這里
  5. static 用來存放靜態(tài)資源
  6. index.html 則是項(xiàng)目的首頁,入口頁,也是整個(gè)項(xiàng)目唯一的HTML頁面
  7. package.json 中定義了項(xiàng)目的所有依賴,包括開發(fā)時(shí)依賴和發(fā)布時(shí)依賴

對(duì)于開發(fā)者來說,以后 99.99% 的工作都是在 src 中完成的,src 中的文件目錄如下:

  1. assets 目錄用來存放資產(chǎn)文件
  2. components 目錄用來存放組件(一些可復(fù)用,非獨(dú)立的頁面),當(dāng)然開發(fā)者也可以在 components 中直接創(chuàng)建完整頁面。
  3. 推薦在 components 中存放組件,另外單獨(dú)新建一個(gè) page 文件夾,專門用來放完整頁面。
  4. router 目錄中,存放了路由的js文件
  5. App.vue 是一個(gè)Vue組件,也是項(xiàng)目的第一個(gè)Vue組件
  6. main.js相當(dāng)于Java中的main方法,是整個(gè)項(xiàng)目的入口js

main.js 內(nèi)容如下:

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})
  1. 在main.js 中,首先導(dǎo)入 Vue 對(duì)象
  2. 導(dǎo)入 App.vue ,并且命名為 App
  3. 導(dǎo)入router,注意,由于router目錄下路由默認(rèn)文件名為 index.js ,因此可以省略
  4. 所有東西都導(dǎo)入成功后,創(chuàng)建一個(gè)Vue對(duì)象,設(shè)置要被Vue處理的節(jié)點(diǎn)是 '#app','#app' 指提前在index.html 文件中定義的一個(gè)div
  5. 將 router 設(shè)置到 vue 對(duì)象中,這里是一個(gè)簡化的寫法,完整的寫法是 router:router,如果 key/value 一模一樣,則可以簡寫。
  6. 聲明一個(gè)組件 App,App 這個(gè)組件在一開始已經(jīng)導(dǎo)入到項(xiàng)目中了,但是直接導(dǎo)入的組件無法直接使用,必須要聲明。
  7. template 中定義了頁面模板,即將 App 組件中的內(nèi)容渲染到 '#app' 這個(gè)div 中。

因此,可以猜測(cè),項(xiàng)目啟動(dòng)成功后,看到的頁面效果定義在 App.vue 中

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <router-view/>
 </div>
</template>
<script>
export default {
 name: 'App'
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>
  1. App.vue 是一個(gè)vue組件,這個(gè)組件中包含三部分內(nèi)容:1.頁面模板(template);2.頁面腳本(script);3.頁面樣式(style)
  2. 頁面模板中,定義了頁面的 HTML 元素,這里定義了兩個(gè),一個(gè)是一張圖片,另一個(gè)則是一個(gè) router-view
  3. 頁面腳本主要用來實(shí)現(xiàn)當(dāng)前頁面數(shù)據(jù)初始化、事件處理等等操作
  4. 頁面樣式就是針對(duì) template 中 HTML 元素的頁面美化操作

需要額外解釋的是,router-view,這個(gè)指展示路由頁面的位置,可以簡單理解為一個(gè)占位符,這個(gè)占位符展示的內(nèi)容將根據(jù)當(dāng)前具體的 URL 地址來定。具體展示的內(nèi)容,要參考路由表,即 router/index.js 文件,該文件如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})
  1. 這個(gè)文件中,首先導(dǎo)入了Vue對(duì)象、Router對(duì)象以及 HelloWorld 組件,
  2. 創(chuàng)建一個(gè)Router對(duì)象,并定義路由表
  3. 這里定義的路由表,path為 / ,對(duì)應(yīng)的組件為 HelloWorld,即瀏覽器地址為 / 時(shí),在router-view位置顯示 HelloWorld 組件

WebStorm 中啟動(dòng)Vue

也可以直接在 webstorm 中配置vue并啟動(dòng),點(diǎn)擊右上角進(jìn)行配置:

然后配置一下腳本 :

配置完成后,點(diǎn)擊右上角啟動(dòng)按鈕,就可以啟動(dòng)一個(gè) Vue 項(xiàng)目,如下:

 

項(xiàng)目編譯

這么大一個(gè)前端項(xiàng)目,肯定沒法直接發(fā)布運(yùn)行,當(dāng)開發(fā)者完成項(xiàng)目開發(fā)后,將 cmd 命令行定位到當(dāng)前項(xiàng)目目錄,然后執(zhí)行如下命令對(duì)項(xiàng)目進(jìn)行打包:

npm run build

打包成功后,當(dāng)前項(xiàng)目目錄下會(huì)生成一個(gè) dist 文件夾,這個(gè)文件夾中有兩個(gè)文件,分別是 index.html 和 static ,index.html 頁面就是我們 SPA 項(xiàng)目中唯一的 HTML 頁面了,static 中則保存了編譯后的 js、css等文件,項(xiàng)目發(fā)布時(shí),可以使用 nginx 獨(dú)立部署 dist 中的靜態(tài)文件,也可以將靜態(tài)文件拷貝到 Spring Boot 項(xiàng)目的 static 目錄下,然后對(duì) Spring Boot 項(xiàng)目進(jìn)行編譯打包發(fā)布。

總結(jié)

因?yàn)樗筛绲淖x者以后端程序猿居多,也有少量前端程序猿,因此本文松哥想從一個(gè)后端程序猿的角度來帶大家理解一下前后端分離以及 Vue 的一些基本用法,也歡迎專業(yè)的前端工程師出來拍磚。

以上所述是小編給大家介紹的前后端分離及Vue.js入門詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • vue生命周期與鉤子函數(shù)簡單示例

    vue生命周期與鉤子函數(shù)簡單示例

    這篇文章主要介紹了vue生命周期與鉤子函數(shù),結(jié)合簡單實(shí)例形式分析了vue.js生命周期及鉤子函數(shù)相關(guān)流程與實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-03-03
  • 在 Vue 應(yīng)用中使用 Netlify 表單功能的方法詳解

    在 Vue 應(yīng)用中使用 Netlify 表單功能的方法詳解

    Netlify 帶有內(nèi)置表單處理功能,可以用來存儲(chǔ)表單數(shù)據(jù),下載 csv 文件,同時(shí)可以在接收到新的提交時(shí)發(fā)送郵件通知或者通過配置 webhook 發(fā)送請(qǐng)求。這篇文章主要介紹了在 Vue 應(yīng)用中使用 Netlify 表單功能,需要的朋友可以參考下
    2019-06-06
  • Vue3 編譯流程-源碼解析

    Vue3 編譯流程-源碼解析

    今天將從 Vue 的入口文件開始,看看聲明了一個(gè) Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里,感興趣的小伙伴不要錯(cuò)過奧
    2021-09-09
  • vue跳轉(zhuǎn)頁面并且實(shí)現(xiàn)參數(shù)傳遞接受示例

    vue跳轉(zhuǎn)頁面并且實(shí)現(xiàn)參數(shù)傳遞接受示例

    這篇文章主要為大家介紹了vue跳轉(zhuǎn)頁面并且實(shí)現(xiàn)參數(shù)傳遞接受示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • Vue表單預(yù)校驗(yàn) validate方法不生效問題

    Vue表單預(yù)校驗(yàn) validate方法不生效問題

    這篇文章主要介紹了Vue表單預(yù)校驗(yàn) validate方法不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • vue實(shí)現(xiàn)加載頁面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))

    vue實(shí)現(xiàn)加載頁面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))

    這篇文章主要介紹了vue實(shí)現(xiàn)加載頁面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)問題及解決

    Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)問題及解決

    這篇文章主要介紹了Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue項(xiàng)目配置使用flow類型檢查的步驟

    vue項(xiàng)目配置使用flow類型檢查的步驟

    這篇文章主要介紹了vue項(xiàng)目配置使用flow類型檢查的步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • vue實(shí)現(xiàn)一個(gè)滾動(dòng)條樣式

    vue實(shí)現(xiàn)一個(gè)滾動(dòng)條樣式

    滾動(dòng)條能夠給用戶帶來極好的體驗(yàn)效果,今天通過本文給大家分享vue實(shí)現(xiàn)一個(gè)滾動(dòng)條樣式,代碼簡單易懂,需要的朋友參考下吧
    2021-07-07
  • 在Vant的基礎(chǔ)上實(shí)現(xiàn)添加表單驗(yàn)證框架的方法示例

    在Vant的基礎(chǔ)上實(shí)現(xiàn)添加表單驗(yàn)證框架的方法示例

    這篇文章主要介紹了在Vant的基礎(chǔ)上實(shí)現(xiàn)添加驗(yàn)證框架的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12

最新評(píng)論