前言
雖然現在前後端分離已成大趨勢，java後端就不用寫頁面了，但是偶爾自己寫個小項目也是需要自己寫前端頁面的。不分離的時候頁面寫在templates或者static文件夾下，使用npm的方式就顯得有點麻煩了，那麼我們就用CDN引入的方式來寫。Vue官網推薦新手使用CDN的方式學習Vue。
項目結構如下圖
一、CDN引入
在index.html頁面引入Vue相關的js和css，請求後臺接口使用axios，UI我們使用餓了麼的element-ui。
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet" />
二、封裝axios請求工具
1、創建axios示例，添加請求攔截器和響應攔截器。
注意使用element-ui的message組件時，要使用 ELEMENT.Message，在這裏我們沒法和npm方式似的把message組件import進來。
request.js
// create an axios instance
const service = axios.create({
baseURL: 'http://localhost:8888',
timeout: 60000 // request timeout
});
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
return config
},
error => {
// do something with request error
console.log(error); // for debug
return Promise.reject(error)
}
);
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data;
const code = res.code;
if (code === undefined){
return response;
}
if (code !== 200) {
ELEMENT.Message({
message: res.msg || 'Error',
type: 'error',
duration: 5 * 1000
});
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error); // for debug
ELEMENT.Message({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error)
}
);
export default service
2、根據axios實例，添加請求。
注意函數的參數的區別，params是鍵值對的參數，是一個一個的，後臺可以用@RequestParam來接收，而data是json格式的參數，後臺可以用@RequestBody來接收。
import request from '../utils/request.js'
export function getDatabaseLink(params) {
return request({
url: 'link',
method: 'get',
params
})
}
export function addTables(data) {
return request({
url: 'tables',
method: 'post',
data
})
}
三、初始化
寫一個id爲app的div，然後初始化Vue，注意script標籤有一個type="module"的屬性，只有添加了這個屬性以後纔可以使用import，把前面寫好的請求接口工具import進來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<el-button @click="alert">{{message}}</el-button>
</div>
<script type="module">
import { getDatabaseLink, addTables } from "./api/database.js";
const app = new Vue({
el: '#app',
data: {
message：'按鈕',
data: ''
},
methos: {
alert() {
getDatabaseLink().then(response => {
this.data = response.data;
})
console.log('點擊了按鈕');
}
}
})
</script>
四、註冊icon組件
element-ui官方提供了很多圖標，但是總有一些是沒有的。所以，我們可以自定義一個icon組件，從https://www.iconfont.cn/找到我們想要的。
1、iconfont.js是從網站上下載的
2、icons/index.js
//全局註冊icon-svg
Vue.component('svg-icon', {
props: {
iconClass: {
type: String,
required: true
},
},
template: '<svg class="svg-icon" aria-hidden="true">\n' +
' <use :xlink:href="iconName"></use>\n' +
' </svg>',
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
}
});
3、再添加一個樣式，styles/svg-icon.css
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
4、使用
添加styles/svg-icon.css，icons/iconfont.js，icons/index.js
在頁面中添加<svg-icon :icon-class="" ></svg-icon>標籤即可
icon-class是從IconFont網站下載的實例中的Symbol中紅色方框內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet" />
<link href="styles/svg-icon.css" rel="stylesheet">
</head>
<body>
<div id="app">
<svg-icon :icon-class="iconName" ></svg-icon>
<el-button @click="alert">{{message}}</el-button>
</div>
<script src="icons/iconfont.js"></script>
<script src="icons/index.js"></script>
<script type="module">
import { getDatabaseLink, addTables } from "./api/database.js";
const app = new Vue({
el: '#app',
data: {
message：'按鈕',
data: '',
iconName: 'home'
},
methos: {
alert() {
getDatabaseLink().then(response => {
this.data = response.data;
})
console.log('點擊了按鈕');
}
}
})
</script>
寫在最後的話
個人感覺還是npm方式更好用，每一個小的組件可以寫成.vue文件，但是CDN的方式沒法這麼寫，而且CDN方式使用Vue Router比較麻煩，定義模板要把html代碼寫在字符串裏。可能是我沒找到簡單的方法，如果有更好的方法，可以留言告訴我。