Vue 是一套用於構建用戶界面的漸進式框架，它的核心庫只關注視圖層，便於與第三方庫或既有項目整合。其次，與工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。
一、路由簡介
一般認爲，路由就是菜單，不同路由跳轉到不同的URL地址，不同的 URL 訪問不同的內容。
實現步驟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 注意加載js的順序先vue再router -->
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<router-link to="/">首頁</router-link>
<router-link to="/student">會員管理</router-link>
<router-link to="/teacher">講師管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>
</div>
<script>
//1 定義顯示內容
const Welcomde = {template:'<div>首頁....</div>'}
const Student = {template:'<div>會員....</div>'}
const Teacher = {template:'<div>講師....</div>'}
//2 指定路由對應內容
const routes = [
{path:'/',component:Welcomde},
{path:'/student',component:Student},
{path:'/teacher',component:Teacher}
]
//3 把路由實例化
const router = new VueRouter({
routes // （縮寫）相當於 routes: routes
})
//4 把路由在vue聲明（掛載）
new Vue({
el: '#app',
router
})
</script>
</body>
</html>
瀏覽器界面
二、axios案例
axios是獨立於vue的一個項目，可以用於瀏覽器和node.js中發送ajax請求！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="teacher in teacherList">
{{teacher.name}} -- {{teacher.intro}}
</div>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data () {//定義變量和初始值
return {
//定義所有講師數組變量
teacherList:[]
}
},
created () {//vue生命週期方法，頁面渲染之前執行
//調用methods定義的方法
this.getTeacherList()
},
methods: {//定義具體的方法
//查詢所有的講師的方法
getTeacherList() {
//axios發送ajax請求得到
axios.get('http://localhost:8001/eduservice/edu-teacher')
.then(response => {
this.teacherList =response.data.data.items
console.log( this.teacherList)
}) //請求接口成功，執行then方法
.catch(error =>{
console.log(error)
})//請求接口失敗，執行catch方法
}
}
})
</script>
</body>
</html>
運行js
SpringBoot項目片段
啓動、訪問SpringBoot項目
♚學習、實戰、總結、分享，讓生活變得更美好！
☞林大俠博客：https://coding0110lin.blog.csdn.net/ 歡迎轉載，一起技術交流探討！