免费黄色成人网站在线观看,狼人综合色婷婷在线,婷婷丁香社区,操逼网站免费看无遮挡,91在线精品一区二区,超碰观看在线,操B视频动漫免费网站,亚洲第一永久网站

作者：梁小生0101
https://juejin.im/post/5c622fb5e51d457f9f2c2381

由于公司之前是寫 C# 的，現(xiàn)在要轉(zhuǎn) Java 分布式 + vue, 所以進(jìn)行一次前后端的簡單培訓(xùn)。

前端工具和環(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

demo 地址：http://101.132.124.171:8000/about

源代碼地址在下方?？梢缘脑挘o顆星星哦，謝謝?。?！

Spring Boot + Vue 代碼地址：https://github.com/liangwei0101/Spring-Boot-And-Vue.git

Dubbo-Spring-Boot 代碼地址：https://github.com/liangwei0101/Dubbo-Spring-Boot.git

前后端分離 (服務(wù)端渲染、瀏覽器渲染)

實現(xiàn)真正的前后端解耦。
核心思想是前端 html 頁面通過 ajax 調(diào)用后端的 restuful api 接口并使用 json 數(shù)據(jù)進(jìn)行交互。
前后端分離會為以后的大型分布式架構(gòu)、彈性計算架構(gòu)、微服務(wù)架構(gòu)、多端化服務(wù)（多種客戶端，例如：瀏覽器，安卓，IOS 等等）打下堅實的基礎(chǔ)。

Vue.js

在講 Vue 之前，需要大概了解下 HTML、CSS、JS 是什么？

HTML 是寫標(biāo)簽的；CSS 是寫樣式的；JS 是給網(wǎng)頁增加動態(tài)效果

HTML、CSS、JavaScript

Vue 介紹

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，網(wǎng)址：cn.vuejs.org/
Vue 在 Github 的歡迎度

不需要操作 Dom，實現(xiàn)了 MVVM

// jquery的操作
$("#test3").val("Dolly Duck");

// Vue的操作
MVVM，實現(xiàn)了雙向綁定

學(xué)習(xí)成本低，文檔淺顯易懂
搜索公縱號：MarkerHub，關(guān)注回復(fù)[?vue?]獲取前后端入門教程！

Vue 建項目

Vue 提供了一個官方的 CLI，為單頁面應(yīng)用 (SPA) 快速搭建繁雜的腳手架?；?Vue cli 項目腳手架，網(wǎng)址：cli.vuejs.org/zh/guide/
運行以下命令其一來創(chuàng)建一個新項目，有默認(rèn)選默認(rèn)即可

  vue create vue-hello-world (命令行)

  vue ui (界面)

在創(chuàng)建好項目以后，運行以下命令將能看到初次項目創(chuàng)建的界面

  cd vue-hello-world

  yarn serve

默認(rèn)情況下，在瀏覽器訪問 http://localhost:8080/?將能看到如下界面：

Vue 相關(guān)結(jié)構(gòu)和生命周期介紹

單個. vue 文件的組成部介紹

組件化應(yīng)用構(gòu)建

使用小型、獨立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用, 一個頁面如搭積木一樣

Vue 的生命周期如下圖：
鉤子方法:?模板方法的執(zhí)行結(jié)果，該方法就叫做鉤子方法，個人理解：影響了模板的執(zhí)行，把函數(shù)勾住了，這個方法就是鉤子函數(shù)。

鉤子函數(shù)	解釋
beforeCreate	實例初始化自動調(diào)用
created	實例創(chuàng)建后調(diào)用
beforeMounte	在 mount 之前運行, 元素已經(jīng)加載，但是屬性值沒渲染
mounted	并掛載到實例上去之后調(diào)用該鉤子
beforeDestroy	在開始銷毀實例時調(diào)用
destroyed	在實例銷毀后調(diào)用

Vue 常用指令

聲明式渲染


  {{ message }}

data: {
	message: 'Hello Vue!'
}

條件渲染


  if="seen">現(xiàn)在你看到我了

data: {
	seen: true
}

循環(huán)渲染


  
	for="todo in todos">
	  {{ todo.text }}

data: {
  todos: [
	{ text: '學(xué)習(xí) JavaScript' },
	{ text: '學(xué)習(xí) Vue' },
	{ text: '整個牛項目' }
  ]
}

監(jiān)聽事件

可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。

methods: {
  greet: function () {
	// `this` 在方法里指向當(dāng)前 Vue 實例
	alert('Hello ' + this.name + '!')
  }
}

計算屬性緩存 vs 方法


  Original message: "{{ message }}"

  Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: '#example',
  data: {
	message: 'Hello'
  },
  computed: {
	// 計算屬性的 getter
	reversedMessage: function () {
	  // `this` 指向 vm 實例
	  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)兩個值變化時，將會觸發(fā)此函數(shù)
	fullName: function () {
	  return this.firstName + ' ' + this.lastName
	}
  }
})

表單輸入綁定

"message" placeholder="edit me">
Message is: {{ message }}

縮寫

v-bind 縮寫


"url">...


"url">...

v-on 縮寫


"doSomething">...


@click="doSomething">...

路由

// 可提供懶加載
const router = new VueRouter({
routes: [
{
  path: '/user/:userId',
  name: 'user',
  component: User
}
]
})


"{ name: 'user', params: { userId: 123 }}">User

// js跳轉(zhuǎn)
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);
});

在學(xué)習(xí)完以上知識以后，將能使用 Vue 做出簡單的頁面運用

擴(kuò)展：TypeScript、Vue 組件間傳值、Mock、Vuex、調(diào)試、JavaScript 的同步異步, 作用域、ES6、部署 (打包、優(yōu)化、部署在靜態(tài)服務(wù)器上、node 中間層)、虛擬 DOM、Http 的 get 和 post 等。
梭哈?PC 端: iview、小程序：mpvue，移動端：muse-ui，桌面端：Electron + Vue JS 走天下。

Spring Boot

在講 Spring Boot 之前，需要大概了解下 Java 的一些相關(guān)

語法層面和 C# 差不多，這里略過
Java 的工作原理
JVM 虛擬機(jī)

區(qū)域	解釋
堆 (heap)	由所有線程共享；new 的對象的實例。
虛擬機(jī)棧 (Stack)	每個線程擁有獨立的棧；存放局部變量、對象引用。被調(diào)方法結(jié)束后，對應(yīng)棧區(qū)變量等立即銷毀
靜態(tài) / 方法區(qū)	方法區(qū)包含所有的 class 信息和 static 變量

介紹

Spring Boot 是所有基于 Spring 開發(fā)的項目的。Spring Boot 的設(shè)計是為了讓你盡可能快的跑起來 Spring 應(yīng)用程序并且盡可能減少你的配置文件。

使用 Spring Boot 開發(fā)單個 RESTful 服務(wù)

由于網(wǎng)上資源眾多，就不詳細(xì)編寫創(chuàng)建步驟了。這里找了一個網(wǎng)上的教程，大家可以按這個步驟去創(chuàng)建一個項目，能用瀏覽器能訪問就行。SpringBoot 新建 HelloWorld 工程：blog.csdn.net/small_mouse…

項目目錄結(jié)構(gòu)

和前端交互

前端的 Http 請求會到 controller 這一層，而 controller 層根據(jù)相應(yīng)路由信息注解會跳轉(zhuǎn)到相應(yīng)的類。

// 如：/api/user 的get請求將會被 UserQry() 函數(shù)處理

@RequestMapping("/api")
public class UserController {
    
    @RequestMapping(value ="/user", method = RequestMethod.GET)
    public List UserQry() {
        return userService.getUser();
    }
}

在框架經(jīng)過處理以后，最終調(diào)用的是 mapper 層。

  @Select("select * from user")
  List getUser();

在執(zhí)行相應(yīng)的 Sql 以后，將會依次返回到 controller 層，然后在 Http 的返回中將會以 Json 串對象返回給前端的調(diào)用方。
前端在 Http 的 response 中拿到返回的值，然后再進(jìn)行一些處理。
搜索公縱號：MarkerHub，關(guān)注回復(fù)[?vue?]獲取前后端入門教程！

概念

spring ioc 容器:，主要用來管理對象和依賴，以及依賴的注入
依賴注入:?不用 new，讓 Spring 控制 new 過程
控制反轉(zhuǎn):?不是用 new 方式實例化對象, 實質(zhì)的控制權(quán)已經(jīng)交由程序管理
面向切面：?把一些功能抽離出來，再通過 “動態(tài)織入” 的方式摻入到業(yè)務(wù)中

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
"customer" class="com.yiibai.common.Customer">
  


"person" class="com.yiibai.common.Person" />

// Spring 的注解方式
public class Customer 
{
  @Autowired
  private Person person;
}

注解

@SpringBootApplication

@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan 簡化程序的配置。

@Configuration

注解在類上，表示這是一個 IOC 容器，相當(dāng)于 spring 的配置文件，IOC 容器的配置類。

@ComponentScan

如果掃描到有 @Component @Controller @Service 等這些注解的類，則把這些類注冊為 bean。@Controller, @Service, @Repository 是 @Component 的細(xì)化，這三個注解比 @Component 帶有更多的語義，它們分別對應(yīng)了控制層、服務(wù)層、持久層的類。

@RestController

告訴 Spring 以 JSON 字符串的形式渲染結(jié)果，并直接返回給調(diào)用者。

@RequestMapping

告訴 Spring 這是一個用來處理請求地址映射的注解。

@Autowired

可以對類成員變量、方法及構(gòu)造函數(shù)進(jìn)行標(biāo)注。從 IoC 容器中去查找，并自動裝配。（去除 @Autowired 可以運行一下試試）

Mybatis 的?@Mapper

注解的接口生成一個實現(xiàn)類

跨域

瀏覽器從一個域名的網(wǎng)頁去請求另一個域名的資源時，域名、端口、協(xié)議任一不同，都是跨域。

跨域資源共享 (CORS) 是一種機(jī)制，它使用額外的 HTTP 頭來告訴瀏覽器讓運行的 Web 應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源。

RESTful 風(fēng)格

Rest 是 web 服務(wù)的一種架構(gòu)風(fēng)格，一種設(shè)計風(fēng)格，URL 只指定資源，以 HTTP 方法動詞進(jìn)行不同的操作。

// 非RESTful接口
api/getfile.php - 獲取文件信息，下載文件
api/uploadfile.php - 上傳創(chuàng)建文件
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 具有很強(qiáng)可讀性的，具有自描述性
規(guī)范化請求過程和返回結(jié)果
資源描述與視圖的松耦合
可提供 OpenAPI，便于第三方系統(tǒng)集成，提高互操作性
提供無狀態(tài)的服務(wù)接口，降低復(fù)雜度，可提高應(yīng)用的水平擴(kuò)展性

擴(kuò)展

JAVA 的內(nèi)存模型（非線程安全）、Linq、JWT、Redis、WebSocket、單點登錄 (SSO)、消息隊列

Spring Cloud 的分布式

其實在上面我們做的一個 Spring Boot 小的 demo 就是一個服務(wù)。若干個小的 Spring Boot 的模塊，合在一起。使用一些分布式的套件，將模塊集群化，讓模塊之間聯(lián)系和管理起來，其實就是 Spring Cloud 的基本的微服務(wù)。

Spring Boot 和 Spring Cloud 的關(guān)系

基于 Spring Boot 快速開發(fā)單個微服務(wù)，Spring Cloud 是一個基于 Spring Boot 實現(xiàn)的開發(fā)工具；Spring Boot 專注于快速、方便集成的單個微服務(wù)個體，Spring Cloud 關(guān)注全局的服務(wù)治理框架；Spring Boot 可以離開 Spring Cloud 獨立使用開發(fā)項目，但是 Spring Cloud 離不開 Spring Boot，屬于依賴的關(guān)系。

Dubbo

Dubbo 是一款高性能 Java RPC 框架, 地址：dubbo.apache.org/zh-cn/

Dubbo 的微服務(wù)的一些概念

生產(chǎn)者發(fā)布服務(wù)到服務(wù)注冊中心中
消費者在服務(wù)注冊中心中訂閱服務(wù)
消費者調(diào)用已經(jīng)注冊的服務(wù)

Dubbo 的實現(xiàn)單個微服務(wù)

// 定義服務(wù)接口標(biāo)準(zhǔn)
public interface DemoService {

    String sayHello(String name);
}

// 生產(chǎn)者項目引用并實現(xiàn)
@Service
public class DemoServiceImpl implements DemoService {

  @Override
  public String sayHello(String name) {
    return "Hello, " + name + " (from Spring Boot)";
  }
}

// 消費者引用然后調(diào)用
@RestController
public class DemoConsumerController {

  @Reference
  private DemoService demoService;

  @RequestMapping("/sayHello/{name}")
  public String sayHello(@PathVariable("name") String name) {
    return demoService.sayHello(name);
  }
}

Dubbo 監(jiān)控和接口展示

[圖片上傳失敗...(image-f1b5da-1549937296666)]

分布式的基礎(chǔ)套件介紹

eureka、zookeeper?服務(wù)注冊和發(fā)現(xiàn)模塊，服務(wù)注冊在服務(wù)中心，提供給消費者使用。
Hystrix?斷路器。為了保證其高可用，單個服務(wù)通常會集群部署。如果單個服務(wù)出現(xiàn)問題，調(diào)用這個服務(wù)就會出現(xiàn)線程阻塞，此時若有大量的請求涌入，Servlet 容器的線程資源會被消耗完畢，導(dǎo)致服務(wù)癱瘓。服務(wù)與服務(wù)之間的依賴性，故障會傳播，會對整個微服務(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ù)量巨多時，為了方便服務(wù)配置文件統(tǒng)一管理，實時更新，需要分布式配置中心組件。
Spring Cloud Sleuth?功能就是在分布式系統(tǒng)中提供追蹤解決方案。

Spring Cloud 和 Dubbo 對比

基礎(chǔ)套件對比?

Dubbo 只是實現(xiàn)了服務(wù)治理，而 Spring Cloud 子項目分別覆蓋了微服務(wù)架構(gòu)下的眾多部件，而服務(wù)治理只是其中的一個方面。Dubbo 提供了各種 Filter，對于上述中 “無” 的要素，可以通過擴(kuò)展 Filter 來完善。例如：

分布式配置：可以使用淘寶的 diamond、百度的 disconf 來實現(xiàn)分布式配置管理；服務(wù)跟蹤：可以使用京東開源的 Hydra，或者擴(kuò)展 Filter 用 Zippin 來做服務(wù)跟蹤；批量任務(wù)：可以使用當(dāng)當(dāng)開源的 Elastic-Job、tbschedule。

性能比較

服務(wù)依賴方式

Dubbo：服務(wù)提供方與消費方通過接口的方式依賴，因此需要為每個微服務(wù)定義了各自的 Interface 接口，并通過持續(xù)集成發(fā)布到私有倉庫中，調(diào)用方應(yīng)用對微服務(wù)提供的抽象接口存在強(qiáng)依賴關(guān)系，開發(fā)、測試、集成環(huán)境都需要嚴(yán)格的管理版本依賴。

Spring Cloud：服務(wù)提供方和服務(wù)消費方通過 JSON 方式交互，因此只需要定義好相關(guān) JSON 字段即可，消費方和提供方無接口依賴。

推薦一個vue前后端分離的開源項目和vue學(xué)習(xí)視頻

獲取方式：

掃下面二維碼直接回復(fù)：v01

記一次Spring boot 和Vue前后端分離的入門培訓(xùn)筆記

前后端分離 (服務(wù)端渲染、瀏覽器渲染)