实验8软升本23-7蔡雨馨120233504303.zip
2401_85714221513.95KB需要积分:1资源文件列表:
实验8软升本23-7蔡雨馨120233504303.zip 大约有15个文件 
实验8软升本23-7蔡雨馨120233504303.doc 545KB 
src/- src/App.vue 2.87KB
- src/assets/
- src/assets/logo.png 6.69KB
- src/components/
- src/components/HelloWorld.vue 2.13KB
- src/main.js 350B
- src/router/
- src/router/index.js 590B
- src/store/
- src/store/index.js 157B
- src/views/
- src/views/AboutView.vue 89B
- src/views/HomeView.vue 327B
资源介绍:
实验8软升本23-7蔡雨馨120233504303.zip
实 验 报 告
辽宁科技大学_计算机与软件工程学院 2024 年 6 月 10 日
课名：Java 界面设计框架
实验项目名称： Ajax
班级：软升本 23-7
姓名：蔡雨馨
学号：120233504303
任课教师：吴杰
实验目的：
实现一个天气预报应用。
实验内容：
实验代码：
<template>
<el-container class="container">
<el-header>
<el-input placeholder="请输入" class="input" v-model="city">
<template #prepend>城市名：</template>
</el-input>
</el-header>
<el-main class="main">
<div class="today">
今天：
<span>{{this.todayData.weather ??
this.plc}}{{this.todayData.temperature ?? this.plc}}</span>
<span style="margin-left: 20px;">{{ this.todayData.direct ??
this.plc}}</span>
<span style="margin-left: 100px;">{{ this.todayData.date}}</span>
</div>
<div class="real">
<span class="temp">{{ this.realtime.temperature ?? this.plc}}</span>
<span class="realInfo">{{ this.realtime.info ?? this.plc}}</span>
<span class="realInfo" style="margin-left:
20px;">{{ this.realtime.direct ?? this.plc}}</span>
<span class="realInfo" style="margin-left:
20px;">{{ this.realtime.power ?? this.plc}}</span>
</div>
<div class="real">
<span class="realInfo">空气质量：{{ this.realtime.aqi ?? this.plc }}</span>
<span class="realInfo">湿度：{{ this.realtime.humidity ?? this.plc }}</span>
</div>
<div class="future">
<div class="header">5 日天气预报</div>
<el-table :data="futureData" style="margin-top: 30px">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="temperature" label="湿度"></el-table-column>
<el-table-column prop="weather" label="天气"></el-table-column>
<el-table-column prop="direct" label="风向"></el-table-column>
</el-table>
</div>
</el-main>
</el-container>
</template>
<style lang="less">
.container{
background: linear-gradient(rgb(13,104,188),rgb(54,121,195));
}
.input{
width: 300px;
margin-top: 20px;
}
.today{
font-size: 20px;
color: white;
}
.temp{
font-size: 79px;
color: white;
}
.realInfo{
color: white;
}
.future{
margin-top: 40px;
}
.header{
color: white;
font-size: 27px;
}
xnymjc
weixin_52019990
meishengjie111
u014445459
hhtt19820919
weixin_42038807
weixin_55940903
weixin_37576193