目錄
一、Axios網(wǎng)絡(luò)請求
?中文文檔：
?安裝：
?導(dǎo)入：
使用方法：
基本語法：
?生命周期函數(shù)：
二、前端路由VueRouter
視頻：12.前端路由VueRouter_嗶哩嗶哩_bilibili
安裝：
聲明路由鏈接和占位標(biāo)簽
?創(chuàng)建路由模塊
?路由重定向
?動態(tài)路由
路由守衛(wèi)
參考文檔:
三、狀態(tài)管理VueX
視頻：13.狀態(tài)管理VueX_嗶哩嗶哩_bilibili
State?
Getter
?Mutation
參考文檔:
四、前端數(shù)據(jù)模擬MockJS
視頻：14.前端數(shù)據(jù)模擬MockJS_嗶哩嗶哩_bilibili
參考文檔:
五、JWT跨域認(rèn)證
視頻：16.JWT跨域認(rèn)證_嗶哩嗶哩_bilibili
pom.xml
?JwtUtils類
Result類
ResultCode接口類
UserController類
參考文檔:
六、后臺前端解決方案
官網(wǎng)文檔：介紹 | vue-element-admin
七、部署
視頻：18.阿里云服務(wù)器使用_嗶哩嗶哩_bilibili
參考文檔：
一、Axios網(wǎng)絡(luò)請求
?中文文檔：
起步 |?Axios 中文文檔 | Axios 中文網(wǎng)
?安裝：
npm install axios?導(dǎo)入：
可以在任意組件中通過import導(dǎo)入。
import axios from 'axios'使用方法：
基本語法：
?
?
?
?生命周期函數(shù)：
每個組件都有生命周期，同時也有生命周期函數(shù)，這些函數(shù)在script中是與data、method同級的。created()：（組件創(chuàng)建時調(diào)用）
created:function(){
console.log("Vue組件被創(chuàng)建！");
},在每個組件里寫一個created函數(shù)，打開網(wǎng)頁控制臺，可以看到（在組件創(chuàng)建時）打印出每個組件里的消息。
?mounted()：（組件掛載時調(diào)用）
mounted:function(){
console.log("Vue組件掛載完畢！");
},
注意前后端同時啟動時不能占用同一個端口!!!
?前端默認(rèn)占用8080端口，
那么我們將后端端口改為8088
這樣就可以同時啟動了。
?訪問瀏覽器
?http://localhost:8088/user/findAll
可以看到后端傳遞來的數(shù)據(jù)
?前端在created函數(shù)里使用axios接收后端網(wǎng)絡(luò)請求：
Table.vue
import axios from "axios"
created:function(){
axios.get("http://localhost:8088/user/findAll").then(function(response){//回調(diào)函數(shù)
console.log(response)
})
},但是訪問會發(fā)生錯誤 ：
……has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
這就是跨域問題導(dǎo)致的。
?
?
?
?
?
?
解決跨域問題直接在SpringBoot的控制器中加上注解：@CrossOrigin
或者在配置包里創(chuàng)建配置類實現(xiàn)全局可跨域
?重啟后端，刷新前端，我們拿到了正常的從后端傳遞來的數(shù)據(jù)
?將返回的data渲染到界面
將response.data傳給script模塊中的data
使用箭頭函數(shù)繼承了父級的作用域
Table.vue?
<template>
<el-table
:data="tableData"
style="width: 100%"
max-height="250">
<el-table-column
prop="birthday"
label="出生日期"
width="300">
</el-table-column>
<el-table-column
prop="username"
label="用戶名"
width="300">
</el-table-column>
<el-table-column
prop="password"
label="用戶密碼"
width="300">
</el-table-column>
<el-table-column
fixed
prop="id"
label="用戶ID"
width="100">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<el-button
@click.native.prevent="play()"
type="text"
size="small">
詳情
</el-button>
</el-table-column>
</el-table>
</template>
<script>
import axios from "axios"
export default {
methods: {
play(){
alert("^V^")
}
},
created:function(){
axios.get("http://localhost:8088/user/findAll").then((response)=>{//回調(diào)函數(shù)
this.tableData = response.data
})
},
data() {
return {
value: null,
texts:['1分','2分','3分','4分','5分',],
tableData: []
}
}
}
</script>
?
?main.js
import axios from 'axios'//導(dǎo)入
axios.defaults.baseURL="http://localhost:8088"http://設(shè)置后端接口
Vue.prototype.$http = axios//定義屬性$http并掛載到VueTable.vue修改部分
created:function(){
this.$http.get("/user/findAll").then((response)=>{//回調(diào)函數(shù)
this.tableData = response.data
})
},效果不變：
二、前端路由VueRouter
視頻：12.前端路由VueRouter_嗶哩嗶哩_bilibili
?
Vue路由vue-router是官方的路由插件，能夠輕松的管理 SPA 項目中組件的切換。 Vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。
通過路由，我們可以給組件設(shè)置不同的路徑來進行訪問。
官網(wǎng)：Vue Router
安裝：
vue2使用@3，vue3使用@4
npm install vue-router@3在項目中定義 Discover.vue、Friends.vue、My.vue 三個組件，將來要使用 vue-router 來控制它們的
展示與切換：
Discover.vue：
<template>
<div>
<h1>
發(fā)現(xiàn)
</h1>
</div>
</template>Friends.vue:
<template>
<div>
<h1>
關(guān)注
</h1>
</div>
</template>My.vue:
<template>
<div>
<h1>
我的
</h1>
</div>
</template>聲明路由鏈接和占位標(biāo)簽
可以使用 <router-link> 標(biāo)簽來聲明路由鏈接，并使用 <router-view> 標(biāo)簽來聲明路由占位符。示例
代碼如下：
App.vue：
<template>
<div>
<h1>APP組件</h1>
<!-- 聲明路由鏈接 -->
<router-link to="/discover">發(fā)現(xiàn)音樂</router-link>
<router-link to="/my">我的音樂</router-link>
<router-link to="/friends">關(guān)注</router-link>
<!-- 聲明路由占位標(biāo)簽 -->
<router-view></router-view>
</div>
</template>?創(chuàng)建路由模塊
在項目中創(chuàng)建 index.js 路由模塊，加入以下代碼：
import VueRouter from 'vue-router'
import Vue from 'vue'
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'
//將VueRouter設(shè)置為Vue的插件
Vue.use(VueRouter)
const router = new VueRouter({
// 指定hash屬性與組件的對應(yīng)關(guān)系
routes: [
{ path: '/discover', component: Discover },
{ path: '/friends', component: Friends },
{ path: '/my', component: My },
]
})
export default router//導(dǎo)出在index.js導(dǎo)出后，在main.js里進行導(dǎo)入
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'font-awesome/css/font-awesome.min.css';
import axios from 'axios'//導(dǎo)入
import router from './router'//index.js默認(rèn)導(dǎo)入，其他名字要補全
axios.defaults.baseURL="http://localhost:8088"http://設(shè)置后端接口
Vue.prototype.$http = axios//定義屬性$http并掛載到Vue
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
render: h => h(App),
router//等價于 router:router，因為屬性名和值相同
}).$mount('#app')
?啟動項目可以看到通過點擊鏈接可以調(diào)用不同的路由組件的頁面
：http://localhost:8080/#/discover
?路由重定向
路由重定向指的是：用戶在訪問地址 A 的時候，強制用戶跳轉(zhuǎn)到地址 C ，從而展示特定的組件頁面。通過路由規(guī)則的 redirect 屬性，指定一個新的路由地址，可以很方便地設(shè)置路由的重定向：
import VueRouter from 'vue-router'
import Vue from 'vue'
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'
//將VueRouter設(shè)置為Vue的插件
Vue.use(VueRouter)
const router = new VueRouter({
// 指定hash屬性與組件的對應(yīng)關(guān)系
routes: [
// 當(dāng)用戶訪問 / 時，跳轉(zhuǎn)到 /discover
{ path: '/', redirect: '/discover'},
{ path: '/discover', component: Discover },
{ path: '/friends', component: Friends },
{ path: '/my', component: My },
]
})
export default router這樣我們每次進入首頁都會自動跳轉(zhuǎn)到發(fā)現(xiàn)頁面
?在 Discover.vue 組件中，聲明 toplist和 playlist的子路由鏈接以及子路由占位符。示例代碼如下：
<template>
<div>
<h1>
發(fā)現(xiàn)
</h1>
<router-link to="/discover/toplist">推薦</router-link>
<router-link to="/discover/playlist">歌單</router-link>
<hr>
<router-view></router-view>
</div>
</template>在創(chuàng)建兩個組件toplist.vue和playlist.vue,并在index.js下配置子路由
import VueRouter from 'vue-router'
import Vue from 'vue'
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'
import toplist from '@/components/toplist.vue'
import playlist from '@/components/playlist.vue'
//將VueRouter設(shè)置為Vue的插件
Vue.use(VueRouter)
const router = new VueRouter({
// 指定hash屬性與組件的對應(yīng)關(guān)系
routes: [
{ path: '/', redirect: '/discover'},
{
path: '/discover',
component: Discover,
// 通過children屬性，嵌套聲明子路由
children: [
{path:"toplist",component:toplist},
{path:"playlist",component:playlist},
]
},
{ path: '/friends', component: Friends },
{ path: '/my', component: My },
//{ path: '/discover/toplist', component: TopList },
//{ path: '/discover/playlist', component: playlist },
]
})
export default router
?動態(tài)路由
創(chuàng)建Producet.vue組件
<template>
<h3>商品</h3>
</template>在My組件中引入商品路由?
<template>
<div>
<h1>
我的
</h1>
<router-link to="/my/1">商品1</router-link>
<router-link to="/my/2">商品2</router-link>
<router-link to="/my/3">商品3</router-link>
<router-view></router-view>
</div>
</template>?在index.js中配置/my的子路由
import VueRouter from 'vue-router'
import Vue from 'vue'
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'
import toplist from '@/components/toplist.vue'
import playlist from '@/components/playlist.vue'
import Product from '@/components/Product.vue'
//將VueRouter設(shè)置為Vue的插件
Vue.use(VueRouter)
const router = new VueRouter({
// 指定hash屬性與組件的對應(yīng)關(guān)系
routes: [
{ path: '/', redirect: '/discover'},
{
path: '/discover',
component: Discover,
// 通過children屬性，嵌套聲明子路由
children: [
{path:"toplist",component:toplist},
{path:"playlist",component:playlist},
]
},
{ path: '/friends', component: Friends },
{ path: '/my', component: My ,
children:[
{ path: ':id', component: Product }
// { path: '/product/1', component: Product },
// {path: '/product/2', component: Product },
// { path: '/product/3', component: Product },
]
},
//{ path: '/discover/toplist', component: TopList },
//{ path: '/discover/playlist', component: playlist },
]
})
export default router可以看到，點擊不同的商品會跳轉(zhuǎn)到不同的路由都指向Product組件界面，而動態(tài)路由的寫法將我們原本的三行代碼壓縮到了兩行
?
?獲取動態(tài)id值
<template>
<h3>商品<!-- 獲取動態(tài)的id值 -->
<p>{{$route.params.id}}</p></h3>
</template>
另外一種傳值的方式是通過屬性傳值
<template>
<h1>商品{{ id }}</h1>
</template>
<script>
export default{
props:["id"]
}
</script>?index.js也要表明屬性傳值的參數(shù)
{ path: ':id', component: Product, props:true }路由守衛(wèi)
（類似攔截）
?導(dǎo)航守衛(wèi)可以控制路由的訪問權(quán)限。示意圖如下：
全局導(dǎo)航守衛(wèi)會攔截每個路由規(guī)則，從而對每個路由進行訪問權(quán)限的控制。
你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi)：
router.beforeEach((to, from, next) => {
if (to.path === '/main' && !isAuthenticated) {
next('/login')
}
else {
next()
}
})?
參考文檔:
鏈接：https://pan.baidu.com/s/1AM7UYhR32uUMuIJnalVAyg?
提取碼：9p1f?
--來自百度網(wǎng)盤超級會員V3000的分享
三、狀態(tài)管理VueX
視頻：13.狀態(tài)管理VueX_嗶哩嗶哩_bilibili
官方文檔：?Vuex 是什么？ | Vuex
安裝：
vue2對應(yīng)版本vuex@3
?vue3對應(yīng)版本vuex@4
npm install vuex@3?新建文件夾store下新建index.js
import Vue from "vue";
import vuex from 'vuex'
Vue.use(vuex)
// 創(chuàng)建一個新的 store 實例
const store = new({
state () {
return {
count: 0
}
},
mutations: {
increment (state) {
state.count++
}
}
})
export default store//將store對象導(dǎo)出在main.js中導(dǎo)入
import store from './store'//index.js可以省略
new Vue({
render: h => h(App),
store
}).$mount('#app')State?
?在HelloWorld.vue組件中導(dǎo)入store數(shù)據(jù)并進行操作
<template>
<div class="hello">
{{ this.$store.state.count }}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods:{
add(){
//this.$store.state.count =this.$store.state.count + 1;
this.$store.commit("increment")
}
}
}
</script>
也有更簡單的寫法，使用計算屬性
<template>
<div class="hello">
{{ count }}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
computed: {
count () {
return this.$store.state.count
}
},
methods:{
add(){
//this.$store.state.count =this.$store.state.count + 1;
this.$store.commit("increment")
}
}
}
</script>
?或者用mapState(導(dǎo)入函數(shù))
<template>
<div class="hello">
{{ count }}
<button @click="add">+1</button>
</div>
</template>
<script>
// 在單獨構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from 'vuex'
export default {
name: 'HelloWorld',
computed: mapState([
// 映射 this.count 為 store.state.count
'count'
]),
methods:{
add(){
//this.$store.state.count =this.$store.state.count + 1;
this.$store.commit("increment")
}
}
}
</script>
Getter
?index.js添加列表
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
todos: [
{ id: 1, text: '111', done: true },
{ id: 2, text: '222', done: false }
]
},
mutations: {
increment (state) {
state.count++
}
}
})
export default store?HelloWorld.vue顯示
<template>
<div class="hello">
{{ count }}
<button @click="add">+1</button>
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>
<script>
// 在單獨構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from 'vuex'
export default {
name: 'HelloWorld',
computed: mapState([
// 映射 this.count 為 store.state.count
'count','todos'
]),
methods:{
add(){
//this.$store.state.count =this.$store.state.count + 1;
this.$store.commit("increment")
}
}
}
</script>
過濾數(shù)據(jù)
index.js?
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
todos: [
{ id: 1, text: '111', done: true },
{ id: 2, text: '222', done: false }
]
},
mutations: {
increment (state) {
state.count++
}
},
getters: {
// ...
doneTodos: (state) => {
return state.todos.filter(todo => todo.done)
}
}
}
)
export default store?HelloWorld.vue
<template>
<div class="hello">
{{ count }}
<button @click="add">+1</button>
<ul>
<li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>
<script>
// 在單獨構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState,mapGetters } from 'vuex'
export default {
name: 'HelloWorld',
computed: {
...mapState([
'count',
'todos',
// ...
]),
// 使用對象展開運算符將 getter 混入 computed 對象中
...mapGetters([
'doneTodos',
// ...
]),
},
methods:{
add(){
//this.$store.state.count =this.$store.state.count + 1;
this.$store.commit("increment")
}
}
}
</script>
?Mutation
提交載荷（函數(shù)參數(shù)）
mutations: {
increment (state, n) {
state.count += n
}
},methods:{
add(){
//this.$store.state.count =this.$store.state.count + 1;
this.$store.commit("increment",2)
}
}
參考文檔:
鏈接：https://pan.baidu.com/s/1cIUW0aV830wsmgzOK8PCuQ?
提取碼：ohwp?
--來自百度網(wǎng)盤超級會員V3000的分享
四、前端數(shù)據(jù)模擬MockJS
?
?
?
?
視頻：14.前端數(shù)據(jù)模擬MockJS_嗶哩嗶哩_bilibili
參考文檔:
鏈接：https://pan.baidu.com/s/1hiZxbbSndy0hzo0Cxm7gOg?
提取碼：zhsn?
--來自百度網(wǎng)盤超級會員V3000的分享
五、JWT跨域認(rèn)證
視頻：16.JWT跨域認(rèn)證_嗶哩嗶哩_bilibili
pom.xml
?JwtUtils類
Result類
?
?
ResultCode接口類
UserController類
參考文檔:
鏈接：https://pan.baidu.com/s/1TGeMS_7pfFbJPi4RTzTLvQ?
提取碼：e7vg?
--來自百度網(wǎng)盤超級會員V3000的分享
六、后臺前端解決方案
官網(wǎng)文檔：介紹 | vue-element-admin
?Github：GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template
?
在項目文件下輸入cmd進入命令窗輸入指令下載：
# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git
# enter the project directory
cd vue-admin-template
#使用淘寶鏡像源
npm install --registry=https://registry.npm.taobao.org
# install dependency
npm install
# develop
npm run dev運行一下，還是很香的?
http://localhost:9528/#/login?redirect=%2Fdashboard
七、部署
視頻：18.阿里云服務(wù)器使用_嗶哩嗶哩_bilibili
參考文檔：
鏈接：https://pan.baidu.com/s/1G3fNqoJ8YFlxe0nNqeTmFg?
提取碼：t381?
--來自百度網(wǎng)盤超級會員V3000的分享
本次學(xué)習(xí)筆記已全部整理完畢，由于時間原因，后面沒有總結(jié)完全，但是老師給的文檔記錄詳細，結(jié)合視頻教程事半功倍，接下來我將準(zhǔn)備項目實戰(zhàn)。感謝老師的教導(dǎo)，真的學(xué)到了很多！同時感謝評論區(qū)的大神指點迷津。
參考鏈接：
1天搞定SpringBoot+Vue全棧開發(fā)_嗶哩嗶哩_bilibili文章來源：http://www.zghlxwxcb.cn/news/detail-497961.html
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.文章來源地址http://www.zghlxwxcb.cn/news/detail-497961.html
到了這里，關(guān)于【Java-SpringBoot+Vue+MySql】Day5-前端進階的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
