index.vue
4.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<!-- Import style -->
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.10.1/dist/index.css" />
<!-- Import Vue 3 -->
<script src="https://unpkg.com/vue@3.5.16/dist/vue.global.js" type="application/javascript"></script>
<!-- Import component library -->
<script src="https://unpkg.com/element-plus@2.10.1/dist/index.full.js" type="application/javascript"></script>
<script src="https://unpkg.com/@element-plus/icons-vue@2.3.1/dist/index.iife.min.js" type="application/javascript"></script>
<script src="https://unpkg.com/axios@1.9.0/dist/axios.min.js" type="application/javascript"></script>
<!--请不要删除下面注释代码-->
<!--{#link#}-->
</head>
<body>
<div id="app">
<component-main></component-main>
</div>
</body>
</html>
<!--请不要删除下面注释-->
<!--{#script.src#}-->
<style>
body{
margin: 0;
padding:0;
font-size: 12px;
font-weight: unset;
}
.el-table{width: 100%;}
.mr-2{margin-right: 2rem;}
.mr-1{margin-right: 1rem;}
.w-100{width: 100%;}
</style>
<!--请不要删除下面注释-->
<!--{#style#}-->
<script type="application/javascript">
// 针对谷歌浏览器调试是出现的 No resource with given URL found
//# sourceURL=dynamicScript.js
</script>
<!--请不要删除下面注释-->
<!--{#script#}-->
<script type="application/javascript">
const VueApp = {
data() {
return {
}
},
components:{
"component-main":"@component(<--{#component_main#}-->)"
}
,created(){
}
}
// 减少写法
const elMsg = ElementPlus.ElMessage;
const elMsgBox = ElementPlus.ElMessageBox;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
// config.headers['X-CSRF-TOKEN'] = _CSRF_TOKEN_;
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
// console.log(response);
// 是否弹出消息
if(response.data.message){
if(response.data.status === 200){
elMsg.success(response.data.message);
}else {
elMsg.error(response.data.message);
}
}
return response;
}, function (error) {
// console.log(error)
if(error.response.data && error.response.data.message){
elMsg.error(error.response.data.message);
}else {
elMsg.error(error.message);
}
// 对响应错误做点什么
return Promise.reject(error);
});
/**
* 对axios的再次封装
*/
class axiosPackage {
#startCall
start(call){
this.#startCall = call;
return this;
}
post(url, data = {}){
return this.#result(axios.post(url, data));
}
get(url){
return this.#result(axios.get(url))
}
delete(url){
return this.#result(axios.delete(url))
}
#result(res){
return res.then(response=> {
return response.data
}).catch(e=>{
let data = {status:500};
data.e = e;
return data;
})
}
}
// 使用函数 进行 实例
function ajax(){
return new axiosPackage()
}
/**
* 深拷贝
* @param obj
* @returns {*}
*/
function copy (obj) {
let newObj = null
if (typeof obj === 'object' && obj !== null) {
newObj = obj instanceof Array ? [] : {}
for (let i in obj) {
newObj[i] = typeof obj[i] === 'object' ? copy(obj[i]) : obj[i]
}
} else {
newObj = obj
}
return newObj
}
// 创建应用
const app = Vue.createApp(VueApp);
// 加载ele插件
app.use(ElementPlus);
// 使用图标
// app.use(ElementPlusIconsVue); // 这个加载方式不可以
// 下面是正确的加载方式，仅适用于 cdn方式
for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
app.component(name, comp);
}
const vmElm = app.mount('#app');
</script>