download:分布式事务实践 解决数据一致性
基于微服务架构的分布式系统应用越来越多，而分布式系统下的事务，一直没有一个简单统一的实现方案。本课程从本地事务出发，介绍了分布式系统和Spring cloud框架及其使用，以及分布式事务的几种实现模式。课程中还提供了大量的实例，让同学们在实战过程中，掌握分布式事务实现方式与思路。
适合人群
中级Java开发者，致力于向架构师发展的有志青年
技术储备要求
Java Web开发基础，Spring框架基础，事务的基本概念
了解分布式系统基本概念
二、創立登錄頁面
把沒有用的初始化東西删掉！
1）在源码目錄中創立如下構造
assets：用於寄存資源文件
components：用於寄存 Vue 功用組件
views：用於寄存 Vue 視圖組件
router：用於寄存 vue-router 配置
![]()
2）創立首頁視圖：在 views 目錄下創立一個名爲 Main.vue 的視圖組件
3）創立登錄頁視圖：在 views 目錄下創立一個名爲 Login.vue 的視圖組件，其中 el-… 的元素爲 ElementUI 組件；
4）創立路由：在 router 目錄下創立一個名爲 index.js 的 vue-router 路由配置文件
import Vue from 'vue' // 導入Vue
import VueRouter from 'vue-router' // 導入路由
// 導入組件
import Main from "../views/Main"
import Login from "../views/Login"
// 裝置路由
Vue.use(VueRouter);
// 配置路由插件
export default new VueRouter({
/
mode - 路由形式
1)hash:途径帶#號 http://localhost/main#/
2)history:途径沒有# http://localhost/main
/
mode: 'history',
routes: [
{
/
首頁
/
path: '/main',
name: 'main',
component: Main,
},
{
/
登錄頁
/
path: '/login',
name: 'login',
component: Login
}
]
})
5）配置路由：修正入口代码，修正 main.js 入口代码
import Vue from 'vue' //Vue組件
import App from './App' //App組件
import VueRouter from 'vue-router' // 路由組件
import router from './router' // 自動掃描配置里面的路由
// 引入 ElementUI 與其 CSS
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 裝置路由
Vue.use(VueRouter)
Vue.use(ElementUI);
new Vue({
el: '#app',
router, // 配置路由
render: h => h(App) // 啟用ElementUI
});
6）修正 App.vue 組件代码
7）測試：在阅讀器翻開 http://localhost:8080/#/login
假如呈現錯誤: 可能是由於sass-loader的版本過高招致的編译錯誤，當前最高版本是8.x，需求退回到7.3.1 ；
去package.json文件里面的 "sass-loader"的版本改換成7.3.1，然後重新cnpm install就能夠了；
![]()
三、路由嵌套
嵌套路由又稱子路由，在實践應用中，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態途径也按某種構造對應嵌套的各層組件，例如：
/user/foo/profile /user/foo/list
+------------------+ +-----------------+
User
User
+--------------+
+-------------+
Profile
+------------>
list
+--------------+
+-------------+
+------------------+ +-----------------+
1）用戶信息組件，在 views/user 目錄下創立一個名爲 Profile.vue 的視圖組件；
2）用戶列表組件，在 views/user 目錄下創立一個名爲 List.vue 的視圖組件；
3）配置嵌套路由修正 router 目錄下的 index.js 路由配置文件，代码如
import Vue from 'vue' // 導入Vue
import VueRouter from 'vue-router' // 導入路由
// 導入組件
import Main from "../views/Main"
import Login from "../views/Login"
import UserList from "../views/user/List"
import UserProfile from "../views/user/Profile"
// 裝置路由
Vue.use(VueRouter);
// 配置路由插件
export default new VueRouter({
mode: 'history', // mode：路由形式
routes: [
{
/
主頁
/
path: '/main',
name: 'main',
component: Main,
children: [
/
用戶列表
/
{path: '/user/list', component: UserList},
/
用戶信息
/
{path: '/user/profile', component: UserProfile}
]
},
{
/
登錄頁
/
path: '/login',
name: 'login',
component: Login
}
]
})
阐明：主要在路由配置中增加了 children 數組配置，用於在該組件下設置嵌套路由
4）修正首頁視圖，我們修正 Main.vue 視圖組件，此處運用了 ElementUI 規劃容器組件，代码如下：
阐明：在 元素中配置了 用於展現嵌套路由，主要運用 個人信息展現嵌套路由内容
![]()
四、參數傳送
我們經常需求把某種形式匹配到的一切路由，全都映射到同個組件。例如，我們有一個 User 組件，關於一切 ID 各不相同的用戶，都要運用這個組件來渲染。此時我們就需求傳送參數了；
- 修正路由配置，主要是在 path 屬性中增加了 :id 這樣的佔位符
/
用戶信息
/
{path: '/user/profile/:id', name: 'user_profile', component: UserProfile}
- 傳送參數
將 to 改爲了 :to，是爲了將這一屬性當成對象運用，留意 router-link 中的 name 屬性稱號 一定要和路由中的 name 屬性稱號匹配，由於這樣 Vue 才幹找到對應的路由途径；
用戶信息
- 接纳參數，在目的組件中
用戶ID-1: {{$route.params.id }}
1）運用 props 方式
- 修正路由配置，主要增加了 props:true 屬性
{path: '/user/profile/:id', name: 'user_profile', component: UserProfile, props: true }
-
傳送參數和之前一樣
-
接纳參數爲目的組件增加 props 屬性
2）組件重定向
重定向的意義大家都明白，但 Vue 中的重定向是作用在途径不同但組件相同的狀況下，比方：
routes: [
{
/
首頁
/
path: '/main',
name: 'main',
component: Main,
},
{
/
回到首頁
/
path: '/goHome',
redirect: '/main'
},
]
阐明：這里定義了兩個途径，一個是 /main ，一個是 /goHome，其中 /goHome 重定向到了 /main 途径，由此能夠看出重定向不需求定義組件；
運用的話，只需求設置對應途径即可；
重定向->首頁
五、路由形式與404
1）路由形式
路由形式有兩種
hash：途径帶 # 符號，如 http://localhost/#/login
history：途径不帶 # 符號，如 http://localhost/login
修正路由配置，代码如下：index.js
export default new Router({
mode: 'history',
routes: [
]
});
2）處置 404
處置 404 創立一個名爲 NotFound.vue 的視圖組件，代码如下：
修正路由配置，代码如下：
import NotFound from '../views/NotFound'
{
path: '*',
component: NotFound
}
六、路由钩子與異步懇求
1）钩子函數
beforeRouteEnter：在進入路由前執行
beforeRouteLeave：在分開路由前執行
上代码：
export default {
props: ['id'],
name: "UserProfile",
/
進入路由之前
/
beforeRouteEnter: (to, from, next) => {
console.log("beforeRouteEnter 11111");
next();
},
/
進入路由之後
/
beforeRouteLeave: (to, from, next) => {
console.log("beforeRouteLeave 22222");
next();
}
}
參數阐明：
to：路由將要跳轉的途径信息
from：途径跳轉前的途径信息
next：路由的控製參數
next() 跳入下一個頁面
next(’/path’) 改動路由的跳轉方向，使其跳到另一個路由
next(false) 返回原來的頁面
next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實例
2）異步懇求：在钩子函數中運用異步懇求
-
裝置 Axios cnpm install axios -s
-
main.js援用 Axios
// 導入Axios
import axios from "axios";
import VueAxios from "vue-axios";
/
Vue分離Axios
/
Vue.use(VueAxios, axios)
