作者: 梁小生0101
鏈接:juejin.im/post/5c622fb5e51d457f9f2c2381
Spring Boot + Vue.js 前後端涉及基本概念介紹,搭建記錄,本文會列舉出用到環境和工具,並且提供源碼。
前端工具和環境:
- Node.js V10.15.0
- Vue.js V2.5.21
- yarn: V1.13.0
- IDE: VScode
後端工具和環境:
- Maven: 3.52
- jdk: 1.8
- MySql: 14.14
- IDE: IDEA
- Spring Boot: 2.0+
- Zookeeper:3.4.13
Demo 地址:http://101.132.124.171:8000/about
前後端分離(服務端渲染、瀏覽器渲染)
- 實現真正的前後端解耦。
- 核心思想是前端html頁面通過ajax調用後端的restuful api接口並使用json數據進行交互
- 前後端分離會為以後的大型分佈式架構、彈性計算架構、微服務架構、多端化服務(多種客戶端,例如:瀏覽器,安卓,IOS等等)打下堅實的基礎。
Vue.js
在講Vue之前,需要大概瞭解下 HTML、CSS、JS是什麼,想必大家都有這方面的知識儲備,如果還沒有移步下方三個鏈接,這裡不過多介紹。
1. https://www.runoob.com/html/html-tutorial.html
2. https://www.w3school.com.cn/css/index.asp
3. https://www.w3school.com.cn/js/index.asp
Vue介紹
1. Vue是一套用於構建用戶界面的漸進式框架,網址:cn.vuejs.org/
2. Vue在Github的歡迎度
3. 不需要操作Dom,實現了MVVM
<code>// jquery的操作 $("#test3").val("Dolly Duck"); // Vue的操作 MVVM,實現了雙向綁定/<code>
4. 學習成本低,文檔淺顯易懂
Vue 建項目
1. Vue 提供了一個官方的 CLI,為單頁面應用 (SPA) 快速搭建繁雜的腳手架。基於Vue cli項目腳手架,網址:cli.vuejs.org/zh/guide/
2. 運行以下命令其一來創建一個新項目,有默認選默認即可
<code>vue create vue-hello-world (命令行) vue ui (界面)/<code>
3. 在創建好項目以後,運行以下命令將能看到初次項目創建的界面
<code>cd vue-hello-world yarn serve/<code>
4. 默認情況下,在 瀏覽器訪問 http://localhost:8080/ 將能看到如下界面:
Vue 相關結構和生命週期介紹
目錄結構如下圖:
單個.vue文件的組成部介紹
<code> /<code>
組件化應用構建
使用小型、獨立和通常可複用的組件構建大型應用,一個頁面如搭積木一樣
Vue的生命週期如下圖:
鉤子方法: 模板方法的執行結果,該方法就叫做鉤子方法,個人理解:影響了模板的執行,把函數勾住了,這個方法就是鉤子函數。
鉤子函數
Vue 常用指令
聲明式渲染
<code>{{ message }}
data: { message: 'Hello Vue!' }/<code>
條件渲染
<code>現在你看到我了
/<code>
循環渲染
<code>/<code>
- {{ todo.text }}
監聽事件
可以用 v-on 指令監聽 DOM 事件,並在觸發時運行一些 JavaScript 代碼。
<code>methods: { greet: function () { // `this` 在方法裡指向當前 Vue 實例 alert('Hello ' + this.name + '!') } }/<code>
計算屬性緩存 vs 方法
<code>Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
/<code>
數據變化,watch
<code>var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { // 當兩個值變化時,將會觸發此函數 fullName: function () { return this.firstName + ' ' + this.lastName } } })/<code>
表單輸入綁定
<code>Message is: {{ message }}
/<code>
縮寫
v-bind 縮寫
v-on 縮寫
路由
<code>// 可提供懶加載 const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) User // js跳轉 router.push({ name: 'user', params: { userId: 123 }})/<code>
使用 axios 訪問 API
<code>// get請求 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // post 請求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });/<code>
在學習完以上知識以後,將能使用Vue做出簡單的頁面運用
擴展:TypeScript、Vue組件間傳值、Mock、Vuex、調試、JavaScript的同步異步,作用域、ES6、部署(打包、優化、部署在靜態服務器上、node中間層)、虛擬DOM、Http的get和post等。
梭哈 PC端:iview、小程序:mpvue,移動端:muse-ui,桌面端:Electron + Vue JS走天下。
ivied:https://www.iviewui.com/components/page
mpvue:http://mpvue.com/
muse-ui:https://muse-ui.org/#/zh-CN/list
Electron + Vue JS:https://github.com/SimulatedGREG/electron-vue
Spring Boot
在講Spring Boot之前,需要大概瞭解下Java的一些相關
Java的工作原理
JVM 虛擬機
介紹
Spring Boot 是所有基於 Spring 開發的項目的。Spring Boot 的設計是為了讓你儘可能快的跑起來 Spring 應用程序並且儘可能減少你的配置文件。
使用Spring Boot開發單個RESTful服務
由於網上資源眾多,就不詳細編寫創建步驟了。這裡找了一個網上的教程,大家可以按這個步驟去創建一個項目,能用瀏覽器能訪問就行。SpringBoot新建HelloWorld工程:https://blog.csdn.net/small_mouse0/article/details/77800737
項目目錄結構
和前端交互
1. 前端的Http請求會到controller這一層,而controller層根據相應路由信息註解會跳轉到相應的類。
<code>// 如:/api/user 的get請求將會被 UserQry() 函數處理 @RequestMapping("/api") public class UserController { @RequestMapping(value ="/user", method = RequestMethod.GET) public List UserQry() { return userService.getUser(); } }/<code>
2. 在框架經過處理以後,最終調用的是mapper層。
<code>@Select("select * from user") List getUser();/<code>
3. 在執行相應的Sql以後,將會依次返回到controller層,然後在Http的返回中將會以Json串對象返回給前端的調用方。
4. 前端在Http的response中拿到返回的值,然後再進行一些處理。
概念
- spring ioc容器:,主要用來管理對象和依賴,以及依賴的注入
- 依賴注入: 不用new,讓Spring控制new過程
- 控制反轉: 不是用new方式實例化對象,實質的控制權已經交由程序管理
- 面向切面:把一些功能抽離出來,再通過“動態織入”的方式摻入到業務中
Bean
bean是一個對象,由ioc容器生成的對象就是一個bean
配置VS註解
<code>// Spring 的操作 package com.yiibai.common; public class Customer { private Person person; public Customer(Person person) { this.person = person; } public void setPerson(Person person) { this.person = person; } //... } package com.yiibai.common; public class Person { //... } // Spring 的配置Bean的xml // Spring 的註解方式 public class Customer { @Autowired private Person person; }/<code>
註解
1. @SpringBootApplication
@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan 簡化程序的配置。
2. @Configuration
註解在類上,表示這是一個IOC容器,相當於spring的配置文件,IOC容器的配置類。
3. @ComponentScan
如果掃描到有@Component @Controller @Service等這些註解的類,則把這些類註冊為bean。@Controller, @Service, @Repository是@Component的細化,這三個註解比@Component帶有更多的語義,它們分別對應了控制層、服務層、持久層的類。
4. @RestController
告訴Spring以JSON字符串的形式渲染結果,並直接返回給調用者。
5. @RequestMapping
告訴Spring這是一個用來處理請求地址映射的註解。
6. @Autowired
可以對類成員變量、方法及構造函數進行標註。從IoC容器中去查找,並自動裝配。(去除@Autowired可以運行一下試試)
7. Mybatis的@Mapper
註解的接口生成一個實現類
跨域
瀏覽器從一個域名的網頁去請求另一個域名的資源時,域名、端口、協議任一不同,都是跨域。
跨域資源共享(CORS) 是一種機制,它使用額外的 HTTP 頭來告訴瀏覽器 讓運行的Web應用被准許訪問來自不同源服務器上的指定的資源。
RESTful風格
Rest是web服務的一種架構風格,一種設計風格,URL只指定資源,以HTTP方法動詞進行不同的操作。
推薦閱讀:1. 簡潔 RESTful API 設計規範!整個人都清爽了!
2. 前後端分離開發,RESTful 接口應該這樣設計
<code>// 非RESTful接口 api/getfile.php - 獲取文件信息,下載文件 api/uploadfile.php - 上傳創建文件 api/deletefile.php - 刪除文件 // 只需要api/users這一個接口 GET http://localhost:8080/api/users (查詢用戶) POST http://localhost:8080/api/users (新增用戶) PUT http://localhost:8080/api/users (更新用戶) DELETE http://localhost:8080/api/users (刪除用戶) /<code>
Restful好處:
- URL具有很強可讀性的,具有自描述性
- 規範化請求過程和返回結果
- 資源描述與視圖的松耦合
- 可提供OpenAPI,便於第三方系統集成,提高互操作性
- 提供無狀態的服務接口,降低複雜度,可提高應用的水平擴展性
擴展
JAVA的內存模型(非線程安全)、Linq、JWT、Redis、WebSocket、單點登錄(SSO)、消息隊列
Spring Cloud的分佈式
其實在上面我們做的一個Spring Boot小的demo就是一個服務。若干個小的Spring Boot的模塊,合在一起。使用一些分佈式的套件,將模塊集群化,讓模塊之間聯繫和管理起來,其實就是Spring Cloud的基本的微服務。
Spring Boot和 Spring Cloud的關係
基於Spring Boot 快速開發單個微服務,Spring Cloud是一個基於Spring Boot實現的開發工具;Spring Boot專注於快速、方便集成的單個微服務個體,Spring Cloud關注全局的服務治理框架;Spring Boot可以離開Spring Cloud獨立使用開發項目,但是Spring Cloud離不開Spring Boot,屬於依賴的關係。
Dubbo
Dubbo 是一款高性能Java RPC框架,地址:dubbo.apache.org/zh-cn/
Dubbo的微服務的一些概念
1. 生產者發佈服務到服務註冊中心中
2. 消費者在服務註冊中心中訂閱服務
3. 消費者調用已經註冊的服務
Dubbo的實現單個微服務
<code>// 定義服務接口標準 public interface DemoService { String sayHello(String name); } // 生產者項目引用並實現 @Service public class DemoServiceImpl implements DemoService { @Override public String sayHello(String name) { return "Hello, " + name + " (from Spring Boot)"; } } // 消費者引用然後調用 @RestController public class DemoConsumerController { @Reference private DemoService demoService; @RequestMapping("/sayHello/{name}") public String sayHello(@PathVariable("name") String name) { return demoService.sayHello(name); } }/<code>
分佈式的基礎套件介紹
eureka、zookeeper 服務註冊和發現模塊,服務註冊在服務中心,提供給消費者使用。
Hystrix 斷路器。為了保證其高可用,單個服務通常會集群部署。如果單個服務出現問題,調用這個服務就會出現線程阻塞,此時若有大量的請求湧入,Servlet容器的線程資源會被消耗完畢,導致服務癱瘓。服務與服務之間的依賴性,故障會傳播,會對整個微服務系統造成災難性的嚴重後果。
zuul 路由網關。Zuul的主要功能是路由轉發和過濾器。比如/api/user轉發到到user服務,/api/shop轉發到到shop服務
Spring Cloud Config 在服務數量巨多時,為了方便服務配置文件統一管理,實時更新,需要分佈式配置中心組件。
Spring Cloud Sleuth 功能就是在分佈式系統中提供追蹤解決方案。
Spring Cloud 和 Dubbo 對比
基礎套件對比
Dubbo 只是實現了服務治理,而 Spring Cloud 子項目分別覆蓋了微服務架構下的眾多部件,而服務治理只是其中的一個方面。Dubbo 提供了各種 Filter,對於上述中“無”的要素,可以通過擴展 Filter 來完善。例如:
分佈式配置:可以使用淘寶的 diamond、百度的 disconf 來實現分佈式配置管理;服務跟蹤:可以使用京東開源的 Hydra,或者擴展 Filter 用 Zippin 來做服務跟蹤;批量任務:可以使用噹噹開源的 Elastic-Job、tbschedule。
性能比較
服務依賴方式
Dubbo:服務提供方與消費方通過接口的方式依賴,因此需要為每個微服務定義了各自的 Interface接口,並通過持續集成發佈到私有倉庫中,調用方應用對微服務提供的抽象接口存在強依賴關係,開發、測試、集成環境都需要嚴格的管理版本依賴。
Spring Cloud:服務提供方和服務消費方通過 JSON 方式交互,因此只需要定義好相關 JSON 字段即可,消費方和提供方無接口依賴。
對了,在這裡說一下,我目前是在職Java開發,如果你現在正在學習Java,瞭解Java,渴望成為一名合格的Java開發工程師,在入門學習Java的過程當中缺乏基礎入門的視頻教程,可以關注並私信我:01。獲取。我這裡有最新的Java基礎全套視頻教程。