第二篇来快速讲解vue,以及设计个抽象js,没有抽象的js是无法完成高效率的
我的主页: https://www.nuoyis.net
我的开源库: https://github.com/nuoyis/webpages
Vue每个页面的编写基本框架
1
2
3
4
5
6
7
8
9
| <template>
//你的网页内容
</template>
<script setup>
//你的脚本内容
</script>
<style scoped>
//页面的css
</style>
|
抽象的js就和main.js放在同个文件内,我这里命名为function.js,其中我写的抽象库参考如下:
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
| import { ref, onMounted, onUnmounted } from 'vue'
import axios from "axios";
import xmljs from 'xml-js';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; // 导入NProgress的样式
// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
// 被组合式函数封装和管理的状态
const x = ref(0)
const y = ref(0)
// 组合式函数可以随时更改其状态。
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
// 一个组合式函数也可以挂靠在所属组件的生命周期上
// 来启动和卸载副作用
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
// 通过返回值暴露所管理的状态
return { x, y }
}
export function nuotime() {
const nowdate = ref(null)
const currentTime = ref(null)
setInterval(() => {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
nowdate.value = year;
currentTime.value = `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
}, 1000);
return { nowdate, currentTime }
}
export function nuorequst(url) {
const nuostatus = ref(200);
const nuodata = ref(null);
const get = () => {
NProgress.start(); // 启动进度条
axios.get(url)
.then(response => {
handleResponse(response);
})
.catch(error => {
handleError(error);
})
.finally(() => {
NProgress.done(); // 无论请求成功或失败都停止进度条
});
};
const post = (data) => {
NProgress.start(); // 启动进度条
axios.post(url, data)
.then(response => {
handleResponse(response);
})
.catch(error => {
handleError(error);
})
.finally(() => {
NProgress.done(); // 无论请求成功或失败都停止进度条
});
};
const handleResponse = (response) => {
// 判断响应的Content-Type是否为XML
const contentType = response.headers['content-type'];
if (contentType && contentType.includes('xml')) {
// 如果是XML，则将其解析为JSON
const jsonResult = xmljs.xml2js(response.data, { compact: true, spaces: 4 });
nuodata.value = jsonResult;
} else {
// 如果是JSON，则直接使用响应数据
nuodata.value = response.data;
}
nuostatus.value = response.status;
};
const handleError = (error) => {
nuostatus.value = error.response ? error.response.status : 500;
nuodata.value = error.response ? error.response.data : error;
};
return { nuostatus, nuodata, get, post };
}
/**
* Parse the time to string
* @param {(Object|string|number)} time
* @param {string} cFormat
* @returns {string | null}
* from https://blog.csdn.net/LW0512/article/details/120287699
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
return value.toString().padStart(2, '0')
})
return time_str
}
/**
* @param {number} time
* @param {string} option
* @returns {string}
*/
export function formatTime(time, option) {
if (('' + time).length === 10) {
time = parseInt(time) * 1000
} else {
time = +time
}
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
if (diff < 30) {
return '刚刚'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time, option)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
)
}
}
/**
* @param {string} url
* @returns {Object}
*/
export function param2Obj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"')
.replace(/\+/g, ' ') +
'"}'
)
}
|
你需要安装以下内容(终端或cmd)
1
2
3
| pnpm i axios
pnpm i nprogress
pnpm i xml-js
|
引用axios方法
1
2
3
4
5
6
7
8
9
10
11
| <script setup>
import { nuorequst } from '@/function.js'
const { nuostatus, nuodata, get, post } = nuorequst('url')
//get方式
get();
//post方式
const postData = { canshu:'canshu' };
const fetchData = () => {
post(postData);
};
</script>
|
引用时间方法
1
2
| import { nuotime } from '@/function.js'
const { nowdate, currentTime } = nuotime()
|
与上面内容结合起来示例(api),其中v-if v-else是判断，想必写过代码的同学都很熟悉了，for循环和python也有很多相似之处。如果你想class类哪个标签带变量，就得加上一个冒号,如<a :href="nuodata.url"></a>
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
| <template>
<div class="nuoyis-api-main">
<p v-if=" nuostatus===200 ">api接口名单请求状态:正常</p>
<p v-else>api接口名单请求状态:异常<br/>请联系站长修复</p>
<p v-if=" nuostatus===200 ">目前推出的API调用</p>
<div class="nuoyis-api" id="nuoyis-api" v-if=" nuostatus===200 ">
<router-link class="nuoyis-api-url" v-for="api in nuodata" :to="{ path:'/apiquery',query:{id:api.id}}">
<i class="nuoyis-api-images"></i>
<div class="nuoyis-api-text">
<h2>{{ api.name }}</h2>
<p>
说明:无
<br />
状态:{{ api.state }}
</p>
</div>
</router-link>
</div>
</div>
<button @click="$router.push('/')" class="routerbtn">首页</button>
</template>
<script setup>
import nuotitle from '@/wabpages/nuotitle.vue'
import { nuorequst } from '@/function.js'
const { nuostatus, nuodata, get, post } = nuorequst('https://server-api.nuoyis.net/jiekou.json')
get();
</script>
<style scoped>
.nuoyis-api {
display: grid;
padding: 0px 8%;
color: #66CCFF;
grid-gap: 30px;
padding-bottom: 3rem;
text-decoration: none;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.nuoyis-api-url {
border-radius: 5px;
font-size: 14px;
cursor: pointer;
text-decoration: none;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
background-color:#f2f2f2;
box-shadow: 4px 6px 16px gray;
transition: transform 0.5s,background 0.5s;
}
.nuoyis-api-url i {
font-size: 40px;
margin-bottom: 10px;
color: #303ef7;
}
.nuoyis-api-url h2 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}
.nuoyis-api-url:hover {
background: #303ef7;
color: #fff;
transform: scale(1.05);
}
.nuoyis-api-url:hover i {
color: #fff;
}
.nuoyis-api-text{
color: black;
padding: 0 5px;
}
.nuoyis-api-text p{
margin:0;
font-size: 10px;
}
</style>
|
这一期就完成了，其他的在(三)中讲到
由诺依阁提供Hexo转Typecho软件支持
