java程序员如何使用CDN的方式写Vue_cdn type="module

作者：我家小花儿 | 2024-02-29 11:57:30

踩

cdn type="module

前言

虽然现在前后端分离已成大趋势，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代码写在字符串里。可能是我没找到简单的方法，如果有更好的方法，可以留言告诉我。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/165460?site