溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

Java前后端分離以及Vue.js的示例分析

發(fā)布時(shí)間：2021-09-09 11:35:36 來(lái)源：億速云 閱讀：202 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹Java前后端分離以及Vue.js的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

前后端不分

  1. 后端模板：Jsp、FreeMarker、Velocity

  2. 前端模板：Thymeleaf

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

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

前后端分離

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

Vue

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

React

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

Angular

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

Vue簡(jiǎn)介

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

  1. 只關(guān)注視圖層

  2. MVVM 框架

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

如下一個(gè)簡(jiǎn)單的九九乘法表讓大家感受一下 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>

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

SPA

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

Vue 使用方式大致上可以分為兩大類(lèi)：

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

  2. SPA應(yīng)用

基本環(huán)境搭建

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

  1. NodeJS

  2. npm

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

Java前后端分離以及Vue.js的示例分析

NodeJS 安裝成功之后，接下來(lái)安裝 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  # 下載依賴(lài)（如果在項(xiàng)目創(chuàng)建的最后一步選擇了自動(dòng)執(zhí)行npm install，則該步驟可以省略）
npm run dev # 啟動(dòng)項(xiàng)目 

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

Java前后端分離以及Vue.js的示例分析

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

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

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

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

Vue 項(xiàng)目創(chuàng)建完成后，使用 Web Storm 打開(kāi)項(xiàng)目，項(xiàng)目目錄如下：

Java前后端分離以及Vue.js的示例分析

  1. build 文件夾，用來(lái)存放項(xiàng)目構(gòu)建腳本

  2. config 中存放項(xiàng)目的一些基本配置信息，最常用的就是端口轉(zhuǎn)發(fā)

  3. node_modules 這個(gè)目錄存放的是項(xiàng)目的所有依賴(lài)，即 npm install 命令下載下來(lái)的文件

  4. src 這個(gè)目錄下存放項(xiàng)目的源碼，即開(kāi)發(fā)者寫(xiě)的代碼放在這里

  5. static 用來(lái)存放靜態(tài)資源

  6. index.html 則是項(xiàng)目的首頁(yè)，入口頁(yè)，也是整個(gè)項(xiàng)目唯一的HTML頁(yè)面

  7. package.json 中定義了項(xiàng)目的所有依賴(lài)，包括開(kāi)發(fā)時(shí)依賴(lài)和發(fā)布時(shí)依賴(lài)

對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，以后 99.99% 的工作都是在 src 中完成的，src 中的文件目錄如下：

Java前后端分離以及Vue.js的示例分析

  1. assets 目錄用來(lái)存放資產(chǎn)文件

  2. components 目錄用來(lái)存放組件（一些可復(fù)用，非獨(dú)立的頁(yè)面），當(dāng)然開(kāi)發(fā)者也可以在 components 中直接創(chuàng)建完整頁(yè)面。

  3. 推薦在 components 中存放組件，另外單獨(dú)新建一個(gè) page 文件夾，專(zhuān)門(mén)用來(lái)放完整頁(yè)面。

  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è)簡(jiǎn)化的寫(xiě)法，完整的寫(xiě)法是 router:router，如果 key/value 一模一樣，則可以簡(jiǎn)寫(xiě)。

  6. 聲明一個(gè)組件 App，App 這個(gè)組件在一開(kāi)始已經(jīng)導(dǎo)入到項(xiàng)目中了，但是直接導(dǎo)入的組件無(wú)法直接使用，必須要聲明。

  7. template 中定義了頁(yè)面模板，即將 App 組件中的內(nèi)容渲染到 '#app' 這個(gè)div 中。

因此，可以猜測(cè)，項(xiàng)目啟動(dòng)成功后，看到的頁(yè)面效果定義在 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.頁(yè)面模板（template）；2.頁(yè)面腳本（script）；3.頁(yè)面樣式（style）

  2. 頁(yè)面模板中，定義了頁(yè)面的 HTML 元素，這里定義了兩個(gè)，一個(gè)是一張圖片，另一個(gè)則是一個(gè) router-view

  3. 頁(yè)面腳本主要用來(lái)實(shí)現(xiàn)當(dāng)前頁(yè)面數(shù)據(jù)初始化、事件處理等等操作

  4. 頁(yè)面樣式就是針對(duì) template 中 HTML 元素的頁(yè)面美化操作

需要額外解釋的是，router-view，這個(gè)指展示路由頁(yè)面的位置，可以簡(jiǎn)單理解為一個(gè)占位符，這個(gè)占位符展示的內(nèi)容將根據(jù)當(dāng)前具體的 URL 地址來(lái)定。具體展示的內(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)行配置：

Java前后端分離以及Vue.js的示例分析

然后配置一下腳本 ：

Java前后端分離以及Vue.js的示例分析

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

 Java前后端分離以及Vue.js的示例分析

項(xiàng)目編譯

這么大一個(gè)前端項(xiàng)目，肯定沒(méi)法直接發(fā)布運(yùn)行，當(dāng)開(kāi)發(fā)者完成項(xiàng)目開(kāi)發(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 頁(yè)面就是我們 SPA 項(xiàng)目中唯一的 HTML 頁(yè)面了，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ā)布。

以上是“Java前后端分離以及Vue.js的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手