第一章前端页面
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、前端页面
一个登录页面，输入用户名和密码以后进入首页，在首页显示各项天气数据
二、使用步骤
1.登录页面
代码如下：v-model="loginForm.uPwd"实现双向绑定
v-on:click="onSubmit()注册登录事件
const { token } = response.data.data解构token
this.$store.commit('SET_TOKEN', token)将返回的token信息保存到store
<template>
<div>
<el-form ref="loginForm"
:model="loginForm"
label-width="60px"
class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号"
prop="uName">
<el-input type="text"
placeholder="请输入账号"
v-model="loginForm.uName" />
</el-form-item>
<el-form-item label="密码"
prop="uPwd">
<el-input type="password"
placeholder="请输入密码"
v-model="loginForm.uPwd" />
</el-form-item>
<el-form-item>
<el-space wrap
:size="60">
<el-button type="primary"
v-on:click="onSubmit()">登录</el-button>
<el-button type="warning"
v-on:click="onReset()">重置</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { ElMessage } from 'element-plus'
import { getToken } from '@/api/user'
import { setToken } from '@/utils/auth'
export default {
name: 'Login',
data() {
return {
loginBg: 'url(' + require('../assets/login.jpeg') + ')',
loginForm: {
uName: '',
uPwd: '',
},
}
},
methods: {
// 登录提交
onSubmit() {
this.$store.commit('setUName', this.loginForm.uName)
//传递用户名和密码参数
getToken({
loginName: this.loginForm.uName,
password: this.loginForm.uPwd,
})
.then((response) => {
//console.log(response)
// //解构出后端返回的数据
const { token } = response.data.data
//console.log(token)
// //将返回的token信息保存到store
// //设置token
this.$store.commit('SET_TOKEN', token)
console.log(token)
setToken(token)
this.$router.push('/')
})
.catch((error) => {
console.log(error)
})
},
// 重置输入
onReset() {
this.loginForm.uName = ''
this.loginForm.uPwd = ''
},
},
mounted() {
document.body.style.backgroundSize = '100%'
document.body.style.backgroundImage = this.loginBg
},
beforeUnmount() {
document.body.style.backgroundImage = ''
},
}
</script>
<style scoped>
.login-box {
border: 1px solid #dcdfe6;
width: 350px;
margin: 120px auto;
padding: 35px 35px 15px 35px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 0 25px black;
background-color: white;
}
.login-title {
text-align: center;
margin: 0 auto 30px auto;
color: #303133;
}
::v-deep .el-form-item__label {
font-size: 18px;
color: black;
}
</style>
2.数据显示页面
代码如下：import weatherApi from '@/api/weather'引入方法函数
let res = await weatherApi.getWeatherData(this.searchModel) 获取信息放入res
<template>
<div class="home">
<Head ref="Head"></Head>
<p>风力：{{ weather.windPower }}</p>
<p>风速：{{ weather.windSpeed }}</p>
<p>风向：{{ weather.windDirection }}</p>
<p>温度：{{ weather.temperature }}</p>
<p>湿度：{{ weather.humidness }}</p>
<p>光照：{{ weather.illumination }}</p>
<p>雨量：{{ weather.hyetal }}</p>
</div>
</template>
<script>
import weatherApi from '@/api/weather'
export default {
name: 'Home',
data() {
return {
weather: {
id: '21052438',
windPower: '', //风力
windSpeed: '', //风速
windDirection: '', //风向
temperature: '', //温度
humidness: '', //湿度
illumination: '', //光照
hyetal: '', //雨量
},
searchModel: {
deviceAddrs: '21052438', //部门名称
},
timer: null, //定时器名称
}
},
//初始化调用
created() {
//调用查询
this.search()
},
mounted() {
this.timer = setInterval(() => {
this.search()
}, 1000 * 5)
this.$refs.Head.msg = '测试页面'
},
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
},
methods: {
/**
* 查询部门列表
*/
async search() {
//发送查询请求
let res = await weatherApi.getWeatherData(this.searchModel)
this.weather.windPower = res.data.data[0].dataItem[0].registerItem[0].data
this.weather.windSpeed = res.data.data[0].dataItem[0].registerItem[1].data
this.weather.windDirection =
res.data.data[0].dataItem[1].registerItem[0].data
this.weather.temperature =
res.data.data[0].dataItem[2].registerItem[0].data
this.weather.humidness = res.data.data[0].dataItem[2].registerItem[1].data
this.weather.illumination =
res.data.data[0].dataItem[3].registerItem[0].data
this.weather.hyetal = res.data.data[0].dataItem[4].registerItem[0].data
await weatherApi.updateRealTimeData(this.weather)
//判断是否存在数据
// if (res.success) {
// //获取数据
// //this.tableData = res.data
// console.log(res)
// }
},
},
}
</script>
<style scoped>
.home {
width: 100%;
height: 500px;
background-color: antiquewhite;
}
</style>
该处使用的url网络请求的数据。
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，
本文含有隐藏内容，请 开通VIP 后查看