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进来。

    
    
    
    
    
    
    


    

        {{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: '',
    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中红色方框内容。

    
    
    
    
    
    
    
    


    

        
        {{message}}
    

    
    
    

写在最后的话

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