记一次Spring boot 和Vue前后端分离的入门培训
點擊上方?好好學java?,選擇?星標?公眾號
重磅資訊、干貨,第一時間送達今日推薦:2020年7月程序員工資統計,平均14357元,又跌了,扎心個人原創100W+訪問量博客:點擊前往,查看更多作者:梁小生0101
juejin.im/post/5c622fb5e51d457f9f2c2381
由于公司之前是寫 C# 的,現在要轉 Java 分布式 + vue, 所以進行一次前后端的簡單培訓。
前端工具和環境:
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
源代碼地址在下方。可以的話,給顆星星哦,謝謝!!!
Spring Boot + Vue 代碼地址:https://github.com/liangwei0101/Spring-Boot-And-Vue.git
Dubbo-Spring-Boot 代碼地址:https://github.com/liangwei0101/Dubbo-Spring-Boot.git
前后端分離 (服務端渲染、瀏覽器渲染)
實現真正的前后端解耦。
核心思想是前端 html 頁面通過 ajax 調用后端的 restuful api 接口并使用 json 數據進行交互。
前后端分離會為以后的大型分布式架構、彈性計算架構、微服務架構、多端化服務(多種客戶端,例如:瀏覽器,安卓,IOS 等等)打下堅實的基礎。
Vue.js
在講 Vue 之前,需要大概了解下 HTML、CSS、JS 是什么?
HTML 是寫標簽的;CSS 是寫樣式的;JS 是給網頁增加動態效果
HTML、CSS、JavaScript
附上我歷時三個月總結的?Java 面試 + Java 后端技術學習指南,筆者這幾年及春招的總結,github 1.4k star,拿去不謝!
下載方式1.?首先掃描下方二維碼2.?后臺回復「Java面試」即可獲取Vue 介紹
Vue 是一套用于構建用戶界面的漸進式框架,網址:cn.vuejs.org/
Vue 在 Github 的歡迎度
不需要操作 Dom,實現了 MVVM
學習成本低,文檔淺顯易懂
搜索公縱號:MarkerHub,關注回復[?vue?]獲取前后端入門教程!
Vue 建項目
Vue 提供了一個官方的 CLI,為單頁面應用 (SPA) 快速搭建繁雜的腳手架。基于 Vue cli 項目腳手架,網址:cli.vuejs.org/zh/guide/
運行以下命令其一來創建一個新項目,有默認選默認即可
在創建好項目以后,運行以下命令將能看到初次項目創建的界面
默認情況下,在 瀏覽器訪問 http://localhost:8080/?將能看到如下界面:
Vue 相關結構和生命周期介紹
目錄結構如下圖:
單個. vue 文件的組成部介紹
組件化應用構建
使用小型、獨立和通常可復用的組件構建大型應用, 一個頁面如搭積木一樣
Vue 的生命周期如下圖:
鉤子方法:?模板方法的執行結果,該方法就叫做鉤子方法,個人理解:影響了模板的執行,把函數勾住了,這個方法就是鉤子函數。
| beforeCreate | 實例初始化自動調用 |
| created | 實例創建后調用 |
| beforeMounte | 在 mount 之前運行, 元素已經加載,但是屬性值沒渲染 |
| mounted | 并掛載到實例上去之后調用該鉤子 |
| beforeDestroy | 在開始銷毀實例時調用 |
| destroyed | 在實例銷毀后調用 |
Vue 常用指令
聲明式渲染
條件渲染
循環渲染
監聽事件
可以用 v-on 指令監聽 DOM 事件,并在觸發時運行一些 JavaScript 代碼。
<div> <!-- `greet` 是在下面定義的方法名 --> <button v-on:click="greet">Greet</button> </div> methods: {greet: function () {// `this` 在方法里指向當前 Vue 實例alert('Hello ' + this.name + '!')} }計算屬性緩存 vs 方法
數據變化,watch
表單輸入綁定
縮寫
v-bind 縮寫
<!-- 完整語法 --> <a v-bind:href="url">...</a><!-- 縮寫 --> <a :href="url">...</a>v-on 縮寫
<!-- 完整語法 --> <a v-on:click="doSomething">...</a><!-- 縮寫 --> <a @click="doSomething">...</a>路由
// 可提供懶加載 const router = new VueRouter({ routes: [ {path: '/user/:userId',name: 'user',component: User } ] }) <!--html跳轉--> <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> // js跳轉 router.push({ name: 'user', params: { userId: 123 }})使用 axios 訪問 API
// 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); });在學習完以上知識以后,將能使用 Vue 做出簡單的頁面運用
擴展:TypeScript、Vue 組件間傳值、Mock、Vuex、調試、JavaScript 的同步異步, 作用域、ES6、部署 (打包、優化、部署在靜態服務器上、node 中間層)、虛擬 DOM、Http 的 get 和 post 等。
梭哈?PC 端: iview、小程序:mpvue,移動端:muse-ui,桌面端:Electron + Vue JS 走天下。
Spring Boot
在講 Spring Boot 之前,需要大概了解下 Java 的一些相關
語法層面和 C# 差不多,這里略過
Java 的工作原理
JVM 虛擬機
| 堆 (heap) | 由所有線程共享;new 的對象的實例。 |
| 虛擬機棧 (Stack) | 每個線程擁有獨立的棧;存放局部變量、對象引用。被調方法結束后,對應棧區變量等立即銷毀 |
| 靜態 / 方法區 | 方法區包含所有的 class 信息和 static 變量 |
介紹
Spring Boot 是所有基于 Spring 開發的項目的。Spring Boot 的設計是為了讓你盡可能快的跑起來 Spring 應用程序并且盡可能減少你的配置文件。
使用 Spring Boot 開發單個 RESTful 服務
由于網上資源眾多,就不詳細編寫創建步驟了。這里找了一個網上的教程,大家可以按這個步驟去創建一個項目,能用瀏覽器能訪問就行。SpringBoot 新建 HelloWorld 工程:blog.csdn.net/small_mouse…
項目目錄結構
和前端交互
前端的 Http 請求會到 controller 這一層,而 controller 層根據相應路由信息注解會跳轉到相應的類。
在框架經過處理以后,最終調用的是 mapper 層。
在執行相應的 Sql 以后,將會依次返回到 controller 層,然后在 Http 的返回中將會以 Json 串對象返回給前端的調用方。
前端在 Http 的 response 中拿到返回的值,然后再進行一些處理。
搜索公縱號:MarkerHub,關注回復[?vue?]獲取前后端入門教程!
概念
spring ioc 容器:,主要用來管理對象和依賴,以及依賴的注入
依賴注入:?不用 new,讓 Spring 控制 new 過程
控制反轉:?不是用 new 方式實例化對象, 實質的控制權已經交由程序管理
面向切面:?把一些功能抽離出來,再通過 “動態織入” 的方式摻入到業務中
Bean
bean 是一個對象,由 ioc 容器生成的對象就是一個 bean
配置 VS 注解
// 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 <bean id="customer" class="com.yiibai.common.Customer"><property /> </bean><bean id="person" class="com.yiibai.common.Person" /> // Spring 的注解方式 public class Customer {@Autowiredprivate Person person; }注解
@SpringBootApplication
@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan 簡化程序的配置。
@Configuration
注解在類上,表示這是一個 IOC 容器,相當于 spring 的配置文件,IOC 容器的配置類。
@ComponentScan
如果掃描到有 @Component @Controller @Service 等這些注解的類,則把這些類注冊為 bean。@Controller, @Service, @Repository 是 @Component 的細化,這三個注解比 @Component 帶有更多的語義,它們分別對應了控制層、服務層、持久層的類。
@RestController
告訴 Spring 以 JSON 字符串的形式渲染結果,并直接返回給調用者。
@RequestMapping
告訴 Spring 這是一個用來處理請求地址映射的注解。
@Autowired
可以對類成員變量、方法及構造函數進行標注。從 IoC 容器中去查找,并自動裝配。(去除 @Autowired 可以運行一下試試)
Mybatis 的?@Mapper
注解的接口生成一個實現類
跨域
瀏覽器從一個域名的網頁去請求另一個域名的資源時,域名、端口、協議任一不同,都是跨域。
跨域資源共享 (CORS) 是一種機制,它使用額外的 HTTP 頭來告訴瀏覽器 讓運行的 Web 應用被準許訪問來自不同源服務器上的指定的資源。
RESTful 風格
Rest 是 web 服務的一種架構風格,一種設計風格,URL 只指定資源,以 HTTP 方法動詞進行不同的操作。
// 非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 (刪除用戶)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 的微服務的一些概念
生產者發布服務到服務注冊中心中
消費者在服務注冊中心中訂閱服務
消費者調用已經注冊的服務
Dubbo 的實現單個微服務
// 定義服務接口標準 public interface DemoService {String sayHello(String name); } // 生產者項目引用并實現 @Service public class DemoServiceImpl implements DemoService {@Overridepublic String sayHello(String name) {return "Hello, " + name + " (from Spring Boot)";} } // 消費者引用然后調用 @RestController public class DemoConsumerController {@Referenceprivate DemoService demoService;@RequestMapping("/sayHello/{name}")public String sayHello(@PathVariable("name") String name) {return demoService.sayHello(name);} }Dubbo 監控和接口展示
[圖片上傳失敗...(image-f1b5da-1549937296666)]
分布式的基礎套件介紹
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 后端技術學習指南,筆者這幾年及春招的總結,github 1.4k star,拿去不謝!
下載方式1.?首先掃描下方二維碼2.?后臺回復「Java面試」即可獲取總結
以上是生活随笔為你收集整理的记一次Spring boot 和Vue前后端分离的入门培训的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 如何将 Nginx 性能提升10倍?这1
- 下一篇: 你的 GitHub 代码已打包运往北极,