前端工具和環(huán)境：
Node.js V10.15.0
Vue.js V2.5.21
yarn: V1.13.0
IDE:VScode
后端工具和環(huán)境：
Maven: 3.52
jdk: 1.8
MySql: 14.14
IDE: IDEA
Spring Boot: 2.0+
Zookeeper：3.4.13
前后端分離(服務(wù)端渲染尖滚、瀏覽器渲染)
實(shí)現(xiàn)真正的前后端解耦。
核心思想是前端html頁面通過ajax調(diào)用后端的restuful api接口并使用json數(shù)據(jù)進(jìn)行交互谒获。
前后端分離會(huì)為以后的大型分布式架構(gòu)扳埂、彈性計(jì)算架構(gòu)业簿、微服務(wù)架構(gòu)、多端化服務(wù)（多種客戶端阳懂，例如：瀏覽器梅尤，安卓柜思，IOS等等）打下堅(jiān)實(shí)的基礎(chǔ)。
Vue.js
在講Vue之前巷燥，需要大概了解下 HTML赡盘、CSS、JS是什么缰揪？
HTML是寫標(biāo)簽的陨享；CSS是寫樣式的；JS是給網(wǎng)頁增加動(dòng)態(tài)效果
Vue介紹
1,Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架钝腺，網(wǎng)址：cn.vuejs.org/
2,Vue在Github的歡迎度
3,不需要操作Dom抛姑，實(shí)現(xiàn)了MVVM
// jquery的操作
$("#test3").val("Dolly Duck");
// Vue的操作
MVVM，實(shí)現(xiàn)了雙向綁定
4,學(xué)習(xí)成本低艳狐，文檔淺顯易懂
Vue 建項(xiàng)目
1,Vue 提供了一個(gè)官方的 CLI定硝，為單頁面應(yīng)用 (SPA) 快速搭建繁雜的腳手架〗┏郏基于Vue cli項(xiàng)目腳手架喷斋，網(wǎng)址：cli.vuejs.org/zh/guide/
2,運(yùn)行以下命令其一來創(chuàng)建一個(gè)新項(xiàng)目，有默認(rèn)選默認(rèn)即可
vue create vue-hello-world (命令行)
vue ui (界面)
3,在創(chuàng)建好項(xiàng)目以后蒜茴，運(yùn)行以下命令將能看到初次項(xiàng)目創(chuàng)建的界面
cd vue-hello-world
yarn serve
4,默認(rèn)情況下星爪，在 瀏覽器訪問 http://localhost:8080/ 將能看到如下界面：
Vue 相關(guān)結(jié)構(gòu)和生命周期介紹
1,目錄結(jié)構(gòu)如下圖：
2,單個(gè).vue文件的組成部介紹
<template>
<!--html-->
</template>
<script>
//js
</script>
<style>
/* css style */
</style>
3,組件化應(yīng)用構(gòu)建
使用小型、獨(dú)立和通撤鬯剑可復(fù)用的組件構(gòu)建大型應(yīng)用,一個(gè)頁面如搭積木一樣
4,Vue的生命周期如下圖：
鉤子方法: 模板方法的執(zhí)行結(jié)果顽腾，該方法就叫做鉤子方法，個(gè)人理解：影響了模板的執(zhí)行诺核，把函數(shù)勾住了抄肖，這個(gè)方法就是鉤子函數(shù)。
Vue 常用指令
聲明式渲染
<div id="app">
{{ message }}
</div>
data: {
message: 'Hello Vue!'
}
條件渲染
<div id="app-3">
<p v-if="seen">現(xiàn)在你看到我了</p>
</div>
data: {
seen: true
}
循環(huán)渲染
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
data: {
todos: [
{ text: '學(xué)習(xí) JavaScript' },
{ text: '學(xué)習(xí) Vue' },
{ text: '整個(gè)牛項(xiàng)目' }
]
}
監(jiān)聽事件
可以用 v-on 指令監(jiān)聽 DOM 事件窖杀，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼漓摩。
<div id="example-2">
<!-- `greet` 是在下面定義的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
methods: {
greet: function () {
// `this` 在方法里指向當(dāng)前 Vue 實(shí)例
alert('Hello ' + this.name + '!')
}
}
計(jì)算屬性緩存 vs 方法
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
},
methods: {
// 方法
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
數(shù)據(jù)變化，watch
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
// 當(dāng)兩個(gè)值變化時(shí)入客，將會(huì)觸發(fā)此函數(shù)
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
表單輸入綁定
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
縮寫
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跳轉(zhuǎn)-->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// js跳轉(zhuǎn)
router.push({ name: 'user', params: { userId: 123 }})
使用 axios 訪問 API
// get請(qǐng)求
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// post 請(qǐng)求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
在學(xué)習(xí)完以上知識(shí)以后管毙，將能使用Vue做出簡單的頁面運(yùn)用
擴(kuò)展：
TypeScript、Vue組件間傳值桌硫、Mock夭咬、Vuex、調(diào)試铆隘、JavaScript的同步異步,作用域卓舵、ES6、部署(打包膀钠、優(yōu)化掏湾、部署在靜態(tài)服務(wù)器上裹虫、node中間層)、虛擬DOM忘巧、Http的get和post等恒界。
相關(guān):
https://github.com/SimulatedGREG/electron-vue
https://muse-ui.org/#/zh-CN/list
http://mpvue.com/
https://www.iviewui.com/components/page
Spring Boot
在講Spring Boot之前，需要大概了解下Java的一些相關(guān)
Java的工作原理
JVM 虛擬機(jī)
介紹
Spring Boot 是所有基于 Spring 開發(fā)的項(xiàng)目的砚嘴。Spring Boot 的設(shè)計(jì)是為了讓你盡可能快的跑起來 Spring 應(yīng)用程序并且盡可能減少你的配置文件十酣。系統(tǒng)學(xué)習(xí)springboot,可以在Java知音公眾號(hào)回復(fù)關(guān)鍵字"Springboot聚合" ，網(wǎng)羅優(yōu)質(zhì)教程际长。
使用Spring Boot開發(fā)單個(gè)RESTful服務(wù)
由于網(wǎng)上資源眾多耸采，就不詳細(xì)編寫創(chuàng)建步驟了。這里找了一個(gè)網(wǎng)上的教程工育，大家可以按這個(gè)步驟去創(chuàng)建一個(gè)項(xiàng)目虾宇，能用瀏覽器能訪問就行。SpringBoot新建HelloWorld工程：
https://blog.csdn.net/small_mouse0/article/details/77800737
項(xiàng)目目錄結(jié)構(gòu)
和前端交互
1,前端的Http請(qǐng)求會(huì)到controller這一層如绸，而controller層根據(jù)相應(yīng)路由信息注解會(huì)跳轉(zhuǎn)到相應(yīng)的類嘱朽。
// 如： /api/user 的get請(qǐng)求將會(huì)被 UserQry() 函數(shù)處理
@RequestMapping("/api")
public class UserController {
@RequestMapping(value ="/user", method = RequestMethod.GET)
public List<User> UserQry() {
return userService.getUser();
}
}
2,在框架經(jīng)過處理以后，最終調(diào)用的是mapper層怔接。
@Select("select * from user")
List<User> getUser();
3,在執(zhí)行相應(yīng)的Sql以后搪泳，將會(huì)依次返回到controller層，然后在Http的返回中將會(huì)以Json串對(duì)象返回給前端的調(diào)用方扼脐。
4,前端在Http的response中拿到返回的值岸军，然后再進(jìn)行一些處理。
概念
spring ioc容器:瓦侮，主要用來管理對(duì)象和依賴艰赞，以及依賴的注入
依賴注入: 不用new，讓Spring控制new過程
控制反轉(zhuǎn): 不是用new方式實(shí)例化對(duì)象,實(shí)質(zhì)的控制權(quán)已經(jīng)交由程序管理
面向切面：把一些功能抽離出來肚吏，再通過“動(dòng)態(tài)織入”的方式摻入到業(yè)務(wù)中
Bean
bean是一個(gè)對(duì)象方妖，由ioc容器生成的對(duì)象就是一個(gè)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 name="person" ref="person" />
</bean>
<bean id="person" class="com.yiibai.common.Person" />
// Spring 的注解方式
public class Customer
{
@Autowired
private Person person;
}
注解
@SpringBootApplication
@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan 簡化程序的配置。
@Configuration
注解在類上罚攀，表示這是一個(gè)IOC容器吁断，相當(dāng)于spring的配置文件，IOC容器的配置類坞生。
@ComponentScan
如果掃描到有@Component @Controller @Service等這些注解的類，則把這些類注冊(cè)為bean掷伙。@Controller, @Service, @Repository是@Component的細(xì)化是己，這三個(gè)注解比@Component帶有更多的語義，它們分別對(duì)應(yīng)了控制層任柜、服務(wù)層卒废、持久層的類沛厨。
@RestController
告訴Spring以JSON字符串的形式渲染結(jié)果，并直接返回給調(diào)用者摔认。
@RequestMapping
告訴Spring這是一個(gè)用來處理請(qǐng)求地址映射的注解逆皮。
@Autowired
可以對(duì)類成員變量、方法及構(gòu)造函數(shù)進(jìn)行標(biāo)注参袱。從IoC容器中去查找电谣，并自動(dòng)裝配。（去除@Autowired可以運(yùn)行一下試試）
Mybatis的@Mapper
注解的接口生成一個(gè)實(shí)現(xiàn)類
跨域
瀏覽器從一個(gè)域名的網(wǎng)頁去請(qǐng)求另一個(gè)域名的資源時(shí)抹蚀，域名剿牺、端口、協(xié)議任一不同环壤，都是跨域晒来。
跨域資源共享(CORS) 是一種機(jī)制，它使用額外的 HTTP 頭來告訴瀏覽器 讓運(yùn)行的Web應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源
RESTful風(fēng)格
Rest是web服務(wù)的一種架構(gòu)風(fēng)格郑现，一種設(shè)計(jì)風(fēng)格湃崩，URL只指定資源，以HTTP方法動(dòng)詞進(jìn)行不同的操作接箫。
// 非RESTful接口
api/getfile.php - 獲取文件信息攒读，下載文件
api/uploadfile.php - 上傳創(chuàng)建文件
api/deletefile.php - 刪除文件
// 只需要api/users這一個(gè)接口
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具有很強(qiáng)可讀性的，具有自描述性
規(guī)范化請(qǐng)求過程和返回結(jié)果
資源描述與視圖的松耦合
可提供OpenAPI列牺，便于第三方系統(tǒng)集成整陌，提高互操作性
提供無狀態(tài)的服務(wù)接口，降低復(fù)雜度瞎领，可提高應(yīng)用的水平擴(kuò)展性
擴(kuò)展
JAVA的內(nèi)存模型（非線程安全）泌辫、Linq、JWT九默、Redis震放、WebSocket、單點(diǎn)登錄(SSO)驼修、消息隊(duì)列
Spring Cloud的分布式
其實(shí)在上面我們做的一個(gè)Spring Boot小的demo就是一個(gè)服務(wù)殿遂。若干個(gè)小的Spring Boot的模塊，合在一起乙各。使用一些分布式的套件墨礁，將模塊集群化，讓模塊之間聯(lián)系和管理起來耳峦，其實(shí)就是Spring Cloud的基本的微服務(wù)恩静。
Spring Boot和 Spring Cloud的關(guān)系
基于Spring Boot 快速開發(fā)單個(gè)微服務(wù)，Spring Cloud是一個(gè)基于Spring Boot實(shí)現(xiàn)的開發(fā)工具；Spring Boot專注于快速驶乾、方便集成的單個(gè)微服務(wù)個(gè)體邑飒，Spring Cloud關(guān)注全局的服務(wù)治理框架；Spring Boot可以離開Spring Cloud獨(dú)立使用開發(fā)項(xiàng)目级乐，但是Spring Cloud離不開Spring Boot，屬于依賴的關(guān)系风科。
Dubbo
Dubbo 是一款高性能Java RPC框架,地址：dubbo.apache.org/zh-cn/
Dubbo的微服務(wù)的一些概念
生產(chǎn)者發(fā)布服務(wù)到服務(wù)注冊(cè)中心中
消費(fèi)者在服務(wù)注冊(cè)中心中訂閱服務(wù)
消費(fèi)者調(diào)用已經(jīng)注冊(cè)的服務(wù)
Dubbo的實(shí)現(xiàn)單個(gè)微服務(wù)
// 定義服務(wù)接口標(biāo)準(zhǔn)
public interface DemoService {
String sayHello(String name);
}
// 生產(chǎn)者項(xiàng)目引用并實(shí)現(xiàn)
@Service
public class DemoServiceImpl implements DemoService {
@Override
public String sayHello(String name) {
return "Hello, " + name + " (from Spring Boot)";
}
}
// 消費(fèi)者引用然后調(diào)用
@RestController
public class DemoConsumerController {
@Reference
private DemoService demoService;
@RequestMapping("/sayHello/{name}")
public String sayHello(@PathVariable("name") String name) {
return demoService.sayHello(name);
}
}
分布式的基礎(chǔ)套件介紹
eureka、zookeeper 服務(wù)注冊(cè)和發(fā)現(xiàn)模塊丐重，服務(wù)注冊(cè)在服務(wù)中心，提供給消費(fèi)者使用崖蜜。
Hystrix 斷路器。為了保證其高可用豫领，單個(gè)服務(wù)通常會(huì)集群部署等恐。如果單個(gè)服務(wù)出現(xiàn)問題洲劣，調(diào)用這個(gè)服務(wù)就會(huì)出現(xiàn)線程阻塞，此時(shí)若有大量的請(qǐng)求涌入课蔬，Servlet容器的線程資源會(huì)被消耗完畢囱稽，導(dǎo)致服務(wù)癱瘓。服務(wù)與服務(wù)之間的依賴性二跋，故障會(huì)傳播战惊，會(huì)對(duì)整個(gè)微服務(wù)系統(tǒng)造成災(zāi)難性的嚴(yán)重后果。
zuul 路由網(wǎng)關(guān)扎即。Zuul的主要功能是路由轉(zhuǎn)發(fā)和過濾器吞获。比如/api/user轉(zhuǎn)發(fā)到到user服務(wù)，/api/shop轉(zhuǎn)發(fā)到到shop服務(wù)
Spring Cloud Config 在服務(wù)數(shù)量巨多時(shí)谚鄙，為了方便服務(wù)配置文件統(tǒng)一管理各拷，實(shí)時(shí)更新，需要分布式配置中心組件闷营。
Spring Cloud Sleuth 功能就是在分布式系統(tǒng)中提供追蹤解決方案烤黍。
Spring Cloud 和 Dubbo 對(duì)比
基礎(chǔ)套件對(duì)比
Dubbo 只是實(shí)現(xiàn)了服務(wù)治理，而 Spring Cloud 子項(xiàng)目分別覆蓋了微服務(wù)架構(gòu)下的眾多部件，而服務(wù)治理只是其中的一個(gè)方面蚊荣。Dubbo 提供了各種 Filter，對(duì)于上述中“無”的要素莫杈，可以通過擴(kuò)展 Filter 來完善互例。例如：
分布式配置：可以使用淘寶的 diamond、百度的 disconf 來實(shí)現(xiàn)分布式配置管理筝闹；
服務(wù)跟蹤：可以使用京東開源的 Hydra媳叨，或者擴(kuò)展 Filter 用 Zippin 來做服務(wù)跟蹤；
批量任務(wù)：可以使用當(dāng)當(dāng)開源的 Elastic-Job关顷、tbschedule糊秆。
性能比較
服務(wù)依賴方式
Dubbo：服務(wù)提供方與消費(fèi)方通過接口的方式依賴，因此需要為每個(gè)微服務(wù)定義了各自的 Interface接口议双，并通過持續(xù)集成發(fā)布到私有倉庫中痘番，調(diào)用方應(yīng)用對(duì)微服務(wù)提供的抽象接口存在強(qiáng)依賴關(guān)系，開發(fā)平痰、測試汞舱、集成環(huán)境都需要嚴(yán)格的管理版本依賴。
Spring Cloud：服務(wù)提供方和服務(wù)消費(fèi)方通過 JSON 方式交互宗雇，因此只需要定義好相關(guān) JSON 字段即可昂芜，消費(fèi)方和提供方無接口依賴。
