Skip to content

Commit 2e18a40

Browse files
jackfruedjackfrued
committed
更新了部分文档和代码
1 parent 5bf23a2 commit 2e18a40

11 files changed

+960
-330
lines changed

‎Day21-30/code/垃圾分类查询/harmful-waste.png

28.7 KB
Loading

‎Day21-30/code/垃圾分类查询/kitchen-waste.png

27.7 KB
Loading

‎Day21-30/code/垃圾分类查询/other-waste.png

19.3 KB
Loading

‎Day21-30/code/垃圾分类查询/recyclable.png

27.5 KB
Loading

‎Day21-30/code/垃圾分类查询/垃圾分类.html

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!--
2+
HTML - 超文本标记语言 - 可以在浏览器中运行出网页的编程语言
3+
1. 标签 - 承载网页上显示的内容
4+
2. 层叠样式表 - 负责网页的显示
5+
3. JavaScript - 负责交互行为
6+
-->
7+
<!DOCTYPE html>
8+
<html lang="en">
9+
<head>
10+
<meta charset="utf-8">
11+
<title>垃圾分类查询助手</title>
12+
<!--
13+
0. 可回收物（如：玻璃类、牛奶盒、金属类、塑料类、废纸类、织物类）
14+
1. 有害垃圾（如：废电池、废墨盒、废油漆桶、过期药品、废灯管、杀虫剂）
15+
2. 厨余垃圾（如：骨骼内脏、菜梗菜叶、果皮、茶叶渣、残枝落叶、剩菜剩饭）
16+
3. 其他垃圾（如：宠物粪便、烟头、污染纸张、破旧陶瓷品、灰土、一次性餐具）
17+
-->
18+
<!-- 层叠样式表 -->
19+
<style>
20+
.search, .result {
21+
width: 720px;
22+
margin: 50px auto;
23+
}
24+
.search > input {
25+
width: 520px;
26+
border: none;
27+
outline: none;
28+
text-align: center;
29+
font-size: 36px;
30+
line-height: 36px;
31+
border-bottom: 1px solid gray;
32+
margin: 0 20px;
33+
}
34+
.search button {
35+
background-color: red;
36+
color: white;
37+
font-size: 28px;
38+
border: none;
39+
outline: none;
40+
width: 120px;
41+
}
42+
.result > p, .result > div {
43+
width: 640px;
44+
margin: 0 auto;
45+
}
46+
.result > p, .result span {
47+
text-align: left;
48+
font-size: 28px;
49+
}
50+
.result img {
51+
vertical-align: middle;
52+
}
53+
.explain {
54+
font-size: 12px;
55+
color: darkgray;
56+
}
57+
.result .pre {
58+
font-size: 16px;
59+
}
60+
</style>
61+
</head>
62+
<body>
63+
<!-- div 是代表一个逻辑区域的块标签 -->
64+
<div id="app">
65+
<div class="search">
66+
<!-- type属性是text的input标签代表文本框 可以接收用户输入 -->
67+
<!-- placeholder是文本框的输入提示 -->
68+
<input type="text" placeholder="请输入垃圾名字" v-model="word" @keydown.enter="search()">
69+
<!-- button代表按钮 点击可以开始查询 -->
70+
<button @click="search()">查询</button>
71+
</div>
72+
<div class="result">
73+
<!-- p代表一个段落 -->
74+
<p v-if="searched && !results">没有对应的查询结果</p>
75+
<div v-for="result in results">
76+
<p>
77+
<!-- img是图像标签 可以用来实现图片-->
78+
<img :src="pictures[result.type]" width="56" :alt="types[result.type]">
79+
&nbsp;&nbsp;
80+
<!-- span是跨度标签 代表一个逻辑区域（不分段）-->
81+
<span>{{ result.name }}</span>
82+
&nbsp;&nbsp;
83+
<span class="pre" v-if="result.aipre == 1">（预测结果）</span>
84+
</p>
85+
<p class="explain">说明：{{ result.explain }}</p>
86+
</div>
87+
</div>
88+
</div>
89+
<!-- JavaScript代码 可以负责在用户点击查询按钮时联网获取垃圾分类结果 -->
90+
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
91+
<script>
92+
new Vue({
93+
el: '#app',
94+
data: {
95+
word: '',
96+
searched: false,
97+
types: ['可回收物', '有害垃圾', '厨余垃圾', '其他垃圾'],
98+
pictures: ['recyclable.png', 'harmful-waste.png', 'kitchen-waste.png', 'other-waste.png'],
99+
results: []
100+
},
101+
methods: {
102+
// 查询垃圾分类的函数
103+
search() {
104+
if (this.word.trim().length > 0) {
105+
let key = '9aeb28ee8858a167c1755f856f830e22'
106+
let url = `http://api.tianapi.com/txapi/lajifenlei/?key=${key}&word=${this.word}`
107+
fetch(url)
108+
.then(resp => resp.json())
109+
.then(json => {
110+
// 处理返回的JSON格式数据
111+
this.searched = true
112+
this.results = json.newslist
113+
})
114+
}
115+
}
116+
}
117+
})
118+
</script>
119+
</body>
120+
</html>

‎Day91-100/92.Docker在项目中的应用.md

Lines changed: 0 additions & 251 deletions
This file was deleted.

0 commit comments

Comments
 (0)