java如何使用cdn_java程序员如何使用CDN的方式写Vue

前言

虽然现在前后端分离已成大趋势，java后端就不用写页面了，但是偶尔自己写个小项目也是需要自己写前端页面的。不分离的时候页面写在templates或者static文件夹下，使用npm的方式就显得有点麻烦了，那么我们就用CDN引入的方式来写。Vue官网推荐新手使用CDN的方式学习Vue。

项目结构如下图

一、CDN引入

在index.html页面引入Vue相关的js和css，请求后台接口使用axios，UI我们使用饿了么的element-ui。

二、封装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进来。

Title

{{message}}

四、注册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: '\n' +

' \n' +

'',

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

在页面中添加标签即可

icon-class是从IconFont网站下载的实例中的Symbol中红色方框内容。

Title

{{message}}

写在最后的话

个人感觉还是npm方式更好用，每一个小的组件可以写成.vue文件，但是CDN的方式没法这么写，而且CDN方式使用Vue Router比较麻烦，定义模板要把html代码写在字符串里。可能是我没找到简单的方法，如果有更好的方法，可以留言告诉我。