Skip to content

M
myblogVue_django

yma16 / myblogVue_django

通知 5
Star 1
Fork 0
M
myblogVue_django
提交 b607b035 编写于 作者: Y yma16
浏览文件
操作

feat:版本迭代ip->改变

上级 dadf534b
展开全部 隐藏空白更改
内联 并排
Showing with 2280 addition and 2034 deletion
config/index.js
浏览文件 @ b607b035
...@@ -82,4 +82,4 @@ module.exports = { ...@@ -82,4 +82,4 @@ module.exports = {
// Set to `true` or `false` to always turn it on or off // Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report bundleAnalyzerReport: process.env.npm_config_report
} }
} }
\ No newline at end of file
src/App.vue
浏览文件 @ b607b035
此差异已折叠。
src/comment/ArticleComment.vue
浏览文件 @ b607b035
...@@ -45,7 +45,8 @@ export default { ...@@ -45,7 +45,8 @@ export default {
return { return {
noneMsg: "还没人评论>_<", noneMsg: "还没人评论>_<",
msg: "评论区", msg: "评论区",
baseurl: "http://yongma16.xyz/comment/", baseurl: "http://114.116.52.53/comment/",
// baseurl: "http://yongma16.xyz/comment/",
userImg: "", userImg: "",
username: "匿名", username: "匿名",
contentRes: [], contentRes: [],
......
src/components/Article.vue
浏览文件 @ b607b035
此差异已折叠。
src/components/Bilicom.vue
浏览文件 @ b607b035
...@@ -11,18 +11,16 @@ export default { ...@@ -11,18 +11,16 @@ export default {
name: 'Bilicom', name: 'Bilicom',
data () { data () {
return { return {
baseurl: 'http://yongma16.xyz/article/index/',
msg: '内容', msg: '内容',
md_data: [], md_data: [],
data: ['threejs加载模型'], data: ['threejs加载模型']
mychart: echarts.init(document.getElementById('bilicom'))
} }
}, },
methods: { methods: {
echartfunc: function (o) { echartfunc: function () {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('bilicom')) const myChart = echarts.init(document.getElementById('bilicom'))
var option = { const option = {
backgroundColor: 'rgba(0, 0, 0, 0.3)', backgroundColor: 'rgba(0, 0, 0, 0.3)',
title: { title: {
......
src/components/Csslearn.vue
浏览文件 @ b607b035
...@@ -37,7 +37,8 @@ export default { ...@@ -37,7 +37,8 @@ export default {
msg: "css练习：", msg: "css练习：",
css_length: "", css_length: "",
// baseurl: 'http://127.0.0.1:1998', // baseurl: 'http://127.0.0.1:1998',
baseurl: "http://yongma16.xyz", baseurl: "http://114.116.52.53/",
// baseurl: "http://yongma16.xyz/",
css_title: [], css_title: [],
css_path: [], css_path: [],
css_loc: 0, css_loc: 0,
...@@ -89,7 +90,7 @@ export default { ...@@ -89,7 +90,7 @@ export default {
let that = this; let that = this;
axios axios
.get(that.baseurl + "/css/") .get(that.baseurl + "css/")
.then((res) => { .then((res) => {
console.log("get返回", res); console.log("get返回", res);
let getdata = res.data; let getdata = res.data;
...@@ -126,7 +127,7 @@ export default { ...@@ -126,7 +127,7 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.container { .container {
position: relative; position: relative;
display: flex; display: flex;
......
src/components/Login.vue
浏览文件 @ b607b035
<template> <template>
<div class="login" style="text-align: center;"> <div class="login" style="text-align: center">
<el-card class="box-card" style="text-align: center;"> <el-card class="box-card" style="text-align: center">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: center;margin:0 auto;"> <el-form
<el-form-item><p style="font-size:30px">登录</p></el-form-item> :model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="text-align: center; margin: 0 auto"
>
<el-form-item><p style="font-size: 30px">登录</p></el-form-item>
<el-form-item label="账号" prop="name"> <el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input> <el-input v-model="ruleForm.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({path: '/register'})">没有账号？</el-link>
<el-link type="primary" @click="$router.push({path: '/register'})">去注册</el-link>
</el-form-item>
</el-form>
</el-card>
<el-form-item label="密码" prop="pass">
<el-input
type="password"
v-model="ruleForm.pass"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>登录</el-button
>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({ path: '/register' })"
>没有账号？</el-link
>
<el-link type="primary" @click="$router.push({ path: '/register' })"
>去注册</el-link
>
</el-form-item>
</el-form>
</el-card>
</div> </div>
</template> </template>
...@@ -68,59 +84,56 @@ export default { ...@@ -68,59 +84,56 @@ export default {
// }; // };
return { return {
// baseurl:"http://127.0.0.1/user/login/", // baseurl:"http://127.0.0.1/user/login/",
baseurl: 'http://yongma16.xyz/user/login/', baseurl: 'http://114.116.52.53/',
// baseurl: 'http://yongma16.xyz/user/login/',
ruleForm: { ruleForm: {
pass: '', pass: '',
// checkPass: '', // checkPass: '',
name: '' name: ''
}, },
rules: { rules: {
pass: [ pass: [{ validator: validatePass, trigger: 'blur' }],
{ validator: validatePass, trigger: 'blur' } checkPass: [{ validator: validatePass, trigger: 'blur' }],
], name: [{ validator: checkName, trigger: 'blur' }]
checkPass: [
{ validator: validatePass, trigger: 'blur' }
],
name: [
{ validator: checkName, trigger: 'blur' }
]
} }
} }
}, },
methods: { methods: {
submitForm (formName) { submitForm (formName) {
const that = this // this指向
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
// 提交数据 // 提交数据
let that = this// this指向 console.log(that.ruleForm.name, that.ruleForm.pass)
console.log(this.ruleForm.name, this.ruleForm.pass)
// axios提交数据 post // axios提交数据 post
const loginUrl = that.baseurl const loginUrl = that.baseurl + 'user/login/'
const userInfo={ const userInfo = {
name: that.ruleForm.name, name: that.ruleForm.name,
password: that.ruleForm.pass password: that.ruleForm.pass
} }
axios.post(loginUrl, userInfo).then(res => { axios
// alter('提交中'); .post(loginUrl, userInfo)
console.log(res.data) .then((res) => {
if (res.data.code == 1) { // alter('提交中');
localStorage.setItem("yma16siteUserInfoName", userInfo.name) console.log(res.data)
localStorage.setItem("yma16siteUserInfoPwd", userInfo.password) if (res.data.code == 1) {
store.commit('setUserInfo',userInfo)//store信息 localStorage.setItem('yma16siteUserInfoName', userInfo.name)
console.log('return login success!') localStorage.setItem('yma16siteUserInfoPwd', userInfo.password)
document.cookie = `user=${that.ruleForm.name}` store.commit('setUserInfo', userInfo) // store信息
that.$router.push({path: '/'}) console.log('return login success!')
// 添加cookie document.cookie = `user=${that.ruleForm.name}`
} else if (res.data.code == 0) { that.$router.push({ path: '/' })
// alter("失败！") // 添加cookie
console.log('失败', res) } else if (res.data.code == 0) {
} // alter("失败！")
// that.$cookies.set('') console.log('失败', res)
}).catch(res => { }
console.log('post失败') // that.$cookies.set('')
console.log(res) })
}) .catch((res) => {
console.log('post失败')
console.log(res)
})
} else { } else {
alert('请输入账号密码') alert('请输入账号密码')
console.log('请输入账号密码') console.log('请输入账号密码')
...@@ -136,41 +149,40 @@ export default { ...@@ -136,41 +149,40 @@ export default {
</script> </script>
<style scoped> <style scoped>
.login {
.login{
position: relative; position: relative;
width:100%; width: 100%;
height: auto; height: auto;
} }
.left{ .left {
position: relative; position: relative;
margin-top:50px; margin-top: 50px;
left:50%; left: 50%;
top:50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
}
.text {
align-content: center;
display: flex;
margin: 0 auto;
font-size: 14px;
} }
.text {
align-content: center;
display:flex;
margin: 0 auto;
font-size: 14px;
}
.item { .item {
display:flex; display: flex;
margin: 0 auto; margin: 0 auto;
/* width: 50%; */ /* width: 50%; */
} }
.box-card { .box-card {
align-self: center; align-self: center;
align-content: center; align-content: center;
display:flex; display: flex;
width: 450px; width: 450px;
/* padding-left:25%; */ /* padding-left:25%; */
margin:0 auto; margin: 0 auto;
opacity: 1; opacity: 1;
margin-top:80px; margin-top: 80px;
background-color: #ffffff; background-color: #ffffff;
} }
</style> </style>
src/components/Mavoneditor.vue
浏览文件 @ b607b035
<template> <template>
<div class="mavoneditor"> <div class="mavoneditor">
<div class="markdown-body" style="width:100%;height:100%;overflow:hidden;"> <div
<iframe src='http://yongma16.xyz/admin/' style="width:100%;height:100%;border:none;"></iframe> class="markdown-body"
style="width: 100%; height: 100%; overflow: hidden"
>
<iframe
:src="baseurl + basePath"
style="width: 100%; height: 100%; border: none"
></iframe>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import VueMarkdown from 'vue-markdown' import VueMarkdown from "vue-markdown";
import axios from 'axios' import axios from "axios";
export default { export default {
components: { components: {
VueMarkdown VueMarkdown,
}, },
name: 'Mavoneditor', name: "Mavoneditor",
data () { data() {
return { return {
baseurl: 'http://yongma16.xyz/admin/', baseurl: "http://114.116.52.53/",
md_data: [] basePath: "admin/",
} // baseurl: 'http://yongma16.xyz/',
md_data: [],
};
}, },
methods: { methods: {
getArticles: function () { getArticles: function () {
let that = this let that = this;
axios axios
.get(that.baseurl) .get(that.baseurl + "admin/")
.then((res) => { .then((res) => {
console.log('获取Article=>') console.log("获取Article=>");
// console.log(res.data.article); // console.log(res.data.article);
// let run_array=res.data.article.map(o=>{return that.data.md_data.push(o);}); //获取参数article // let run_array=res.data.article.map(o=>{return that.data.md_data.push(o);}); //获取参数article
// console.log(that.data.md_data); // console.log(that.data.md_data);
that.md_data = res.data.article that.md_data = res.data.article;
}) })
.catch((res) => { .catch((res) => {
console.log(res) console.log(res);
}) // get log }); // get log
} },
}, },
created () { created() {
try{ try {
console.log('domMain',document.getElementById('mainappid'),document.getElementById('mainappid').style); console.log(
document.getElementById('mainappid').style.padding='0'; "domMain",
document.getElementById('mainappid').style.margin='0'; document.getElementById("mainappid"),
}catch(e){ document.getElementById("mainappid").style
console.log('e',e) );
document.getElementById("mainappid").style.padding = "0";
document.getElementById("mainappid").style.margin = "0";
} catch (e) {
console.log("e", e);
throw Error(e);
} }
let that = this // let that = this;
console.log('测试created！') // console.log("测试created！");
axios // axios
.get(that.baseurl) // .get(that.baseurl + "admin/")
.then((res) => { // .then((res) => {
console.log('获取Article') // console.log("获取Article");
// console.log(res,res.data,res.data.msg); // // console.log(res,res.data,res.data.msg);
//
that.md_data.push(res.data.article) // markdown值传递 // that.md_data.push(res.data.article); // markdown值传递
}) // })
.catch((res) => { // .catch((res) => {
console.log(res) // console.log(res);
}) // get log // }); // get log
} },
} };
</script> </script>
<style scoped> <style scoped>
.mavoneditor{ .mavoneditor {
width:100%; width: 100%;
height:100%; height: 100%;
} }
</style> </style>
src/components/Onlinewebsocket.vue
浏览文件 @ b607b035
此差异已折叠。
src/components/Register.vue
浏览文件 @ b607b035
<template> <template>
<div class="register" style="text-align: center; margin: 0 auto"> <div class="register" style="text-align: center; margin: 0 auto">
<el-card class="box-card" style="text-align: center; margin: 60px auto"> <el-card class="box-card" style="text-align: center; margin: 60px auto">
<!-- 弹出一个警告框 --> <!-- 弹出一个警告框 -->
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: center; margin: 0 auto"> <el-form
<el-form-item> :model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="text-align: center; margin: 0 auto"
>
<el-form-item>
<!-- 弹出一个警告框 -->
<el-alert
title="这个用户名已经被使用！"
type="warning"
v-if="register_error"
>
</el-alert>
<!-- 成功注册！ -->
<!-- 弹出一个警告框 --> <el-alert title="欢迎！！！" type="success" v-if="register_success">
<el-alert title="这个用户名已经被使用！" type="warning" v-if='register_error'> </el-alert>
</el-alert> <p style="font-size: 30px">注册</p>
<!-- 成功注册！ --> <el-avatar
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
<el-alert title="欢迎！！！" type="success" v-if='register_success'> ></el-avatar>
</el-alert> <!-- <svg
<p style="font-size: 30px">注册</p>
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
<!-- <svg
class="icon" class="icon"
aria-hidden="true" aria-hidden="true"
> >
<use xlink:href="#iconshejitouxiangai"></use> <use xlink:href="#iconshejitouxiangai"></use>
</svg> --> </svg> -->
</el-form-item> </el-form-item>
<el-form-item label="账号" prop="name"> <el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input> <el-input v-model="ruleForm.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码" prop="pass"> <el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> <el-input
</el-form-item> type="password"
<el-form-item label="确认" prop="checkPass"> v-model="ruleForm.pass"
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input> autocomplete="off"
</el-form-item> ></el-input>
<el-form-item> </el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">注册</el-button> <el-form-item label="确认" prop="checkPass">
<el-button @click="resetForm('ruleForm')">清空</el-button> <el-input
</el-form-item> type="password"
<el-form-item> v-model="ruleForm.checkPass"
<el-link target="_blank" @click="$router.push({path: '/login'})">已有账号？</el-link> autocomplete="off"
<el-link type="primary" @click="$router.push({path: '/login'})">去登录</el-link> ></el-input>
</el-form-item> </el-form-item>
</el-form> <el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>注册</el-button
>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({ path: '/login' })"
>已有账号？</el-link
>
<el-link type="primary" @click="$router.push({ path: '/login' })"
>去登录</el-link
>
</el-form-item>
</el-form>
</el-card> </el-card>
</div> </div>
</template> </template>
<script> <script>
import axios from 'axios' import axios from "axios";
export default { export default {
name: 'Register', name: "Register",
data () { data() {
var checkName = (rule, value, callback) => { const checkName = (rule, value, callback) => {
if (!value) { if (!value) {
return callback(new Error('账号不能为空')) return callback(new Error("账号不能为空"));
} }
setTimeout(() => { setTimeout(() => {
// if (!Number.isInteger(value)) { // if (!Number.isInteger(value)) {
// callback(new Error('请输入密码')); // callback(new Error('请输入密码'));
// } if { // } if {
if (value.length < 2) { if (value.length < 2) {
callback(new Error('名字至少两位')) callback(new Error("名字至少两位"));
} else { } else {
callback() callback();
} }
}, 1000) }, 1000);
} };
var validatePass = (rule, value, callback) => { const validatePass = (rule, value, callback) => {
if (value === '') { if (value === "") {
callback(new Error('请输入密码')) callback(new Error("请输入密码"));
} else { } else {
if (this.ruleForm.checkPass !== '') { if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField('checkPass') this.$refs.ruleForm.validateField("checkPass");
} }
callback() callback();
} }
} };
var validatePass2 = (rule, value, callback) => { const validatePass2 = (rule, value, callback) => {
if (value === '') { if (value === "") {
callback(new Error('请再次输入密码')) callback(new Error("请再次输入密码"));
} else if (value !== this.ruleForm.pass) { } else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!')) callback(new Error("两次输入密码不一致!"));
} else { } else {
callback() callback();
} }
} };
return { return {
register_success: false, register_success: false,
register_error: false, register_error: false,
// baseurl: "http://127.0.0.1/", // baseurl: "http://127.0.0.1/",
baseurl: 'http://yongma16.xyz/', baseurl: "http://114.116.52.53/",
// baseurl: 'http://yongma16.xyz/',
ruleForm: { ruleForm: {
pass: '', pass: "",
checkPass: '', checkPass: "",
name: '' name: "",
}, },
rules: { rules: {
pass: [{ validator: validatePass, trigger: 'blur' }], pass: [{ validator: validatePass, trigger: "blur" }],
checkPass: [{ validator: validatePass2, trigger: 'blur' }], checkPass: [{ validator: validatePass2, trigger: "blur" }],
name: [{ validator: checkName, trigger: 'blur' }] name: [{ validator: checkName, trigger: "blur" }],
} },
} };
}, },
methods: { methods: {
submitForm (formName) { submitForm(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
const that = this;
if (valid) { if (valid) {
// 提交数据 // 提交数据
console.log(this.ruleForm.name, this.ruleForm.pass) console.log(this.ruleForm.name, this.ruleForm.pass);
// alert("yes submit!"); // alert("yes submit!");
let that = this that.register_success = false; // 初始化register的状态
that.register_success = false// 初始化register的状态 that.register_error = false;
that.register_error = false
axios axios
.post(that.baseurl + 'user/register/', .post(that.baseurl + "user/register/", {
{
// 传递的名字和密码 // 传递的名字和密码
name: that.ruleForm.name, name: that.ruleForm.name,
password: that.ruleForm.pass password: that.ruleForm.pass,
} })
)
.then(function (res) { .then(function (res) {
console.log('成功post', res) console.log("成功post", res);
console.log(res.data.code) console.log(res.data.code);
if (res.data.code === 0) { if (res.data.code === 0) {
console.log('重名') console.log("重名");
console.log(that.$cookies.get('user_session'))// 取出cookies的user_session console.log(that.$cookies.get("user_session")); // 取出cookies的user_session
console.log(that.$cookies)// 存在 console.log(that.$cookies); // 存在
document.cookie = `user=${that.ruleForm.name}` document.cookie = `user=${that.ruleForm.name}`;
that.register_error = true that.register_error = true;
that.$message({
message: "名称重复" + that.ruleForm.name + "!",
type: "error",
});
// console.log(this.$cookies) // console.log(this.$cookies)
} else { } else {
that.register_success = true that.register_success = true;
console.log('时间节点') console.log("时间节点");
that.$message({
message: "注册成功，欢迎您，" + that.ruleForm.name + "!",
type: "success",
});
// let token={'user':res.data.name};//传递主码用户名即可 // let token={'user':res.data.name};//传递主码用户名即可
// this.$cookie.set('token',token,1);//设置token // this.$cookie.set('token',token,1);//设置token
...@@ -146,22 +179,30 @@ export default { ...@@ -146,22 +179,30 @@ export default {
}) })
.catch(function (res) { .catch(function (res) {
// 获取res中的name // 获取res中的name
alert('后端的问题！') that.$message({
console.log('失败post', res) message: "注册失败" + that.ruleForm.name + "!",
}) type: "error",
});
alert("后端的问题！");
console.log("失败post", res);
});
} else { } else {
// alert("no submit!"); // alert("no submit!");
console.log('前端的问题！') console.log("前端的问题！");
that.$message({
message: "注册失败" + that.ruleForm.name + "!",
type: "error",
});
// console.log(this.$cookies); // console.log(this.$cookies);
return false return false;
} }
}) });
}, },
resetForm (formName) { resetForm(formName) {
this.$refs[formName].resetFields() this.$refs[formName].resetFields();
} },
} },
} };
</script> </script>
<style scoped> <style scoped>
......
src/weather/EchartWeather.vue
浏览文件 @ b607b035
<template> <template>
<div class="weather"> <div class="weather">
<div id="echart_weather"> <div id="echart_weather"></div>
</div>
<div class="weatherDiscribe"> <div class="weatherDiscribe">
<!-- 表格 --> <!-- 表格 -->
<el-table :data="tableData" border style="width: 100%"> <el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期"> <el-table-column prop="date" label="日期"> </el-table-column>
</el-table-column> <el-table-column prop="discrible" label="天气"> </el-table-column>
<el-table-column prop="discrible" label="天气"> <el-table-column prop="temperature" label="温度"> </el-table-column>
</el-table-column> <el-table-column prop="windem" label="风向"> </el-table-column>
<el-table-column prop="temperature" label="温度"> <el-table-column prop="windwl" label="风级"> </el-table-column>
</el-table-column> </el-table>
<el-table-column prop="windem" label="风向">
</el-table-column>
<el-table-column prop="windwl" label="风级">
</el-table-column>
</el-table>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import axios from 'axios' import axios from "axios";
import * as echarts from 'echarts' import * as echarts from "echarts";
export default { export default {
name: 'EchartWeather', name: "EchartWeather",
data() { data() {
return { return {
msg: '贵阳天气', msg: "贵阳天气",
baseurl: 'http://yongma16.xyz/article/weather/', baseurl: "http://114.116.52.53/",
// baseurl: 'api/article/weather/', // baseurl: 'http://yongma16.xyz/',
tabPosition: 'left', // baseurl: 'api/article/weather/',
weather_title: [], tabPosition: "left",
weather_high: [], weather_title: [],
weather_low: [], weather_high: [],
weather_discribe: [], weather_low: [],
weather_windem:[], weather_discribe: [],
weather_windwl:[], weather_windem: [],
tableData: [] weather_windwl: [],
} tableData: [],
}, };
mounted() { },
this.initWeatherLine() mounted() {
this.initWeatherLine();
},
methods: {
initWeatherLine() {
let that = this;
async function waitGetWeatherData() {
await that.getWeatherData();
await that.weatherInint();
}
waitGetWeatherData().then((o) => {
console.log(o);
}); // 同步
}, },
methods: { getWeatherData() {
initWeatherLine() { let that = this;
let that = this return new Promise((resolve) => {
async function waitGetWeatherData() { setTimeout(function () {
await that.getWeatherData() axios
await that.weatherInint() .get(that.baseurl + "article/weather/")
} .then((res) => {
waitGetWeatherData().then(o => { console.log("天气接口返回", res);
console.log(o) let resdata = res.data;
}) // 同步 let weather = resdata.weather;
}, let title = weather.title;
getWeatherData() { let high = weather.high;
let that = this let low = weather.low;
return new Promise(resolve => { let discribe = weather.discribe;
setTimeout(function () { let windem = weather.windem;
axios.get(that.baseurl).then(res => { let windwl = weather.windwl;
console.log('天气接口返回', res) that.tableData = [];
let resdata = res.data title.map((item) => {
let weather = resdata.weather that.weather_title.push(item);
let title = weather.title });
let high = weather.high high.map((o) => {
let low = weather.low let temp = parseInt(o);
let discribe = weather.discribe that.weather_high.push(temp);
let windem=weather.windem });
let windwl=weather.windwl low.map((o) => {
that.tableData = [] let temp = parseInt(o);
title.map((item) => { that.weather_low.push(temp);
that.weather_title.push(item) });
}) that.weather_windem = Array.from(...[windem]);
high.map((o) => { that.weather_windwl = Array.from(...[windwl]);
let temp = parseInt(o) discribe.map((item) => {
that.weather_high.push(temp) that.weather_discribe.push(item);
}) });
low.map((o) => { let weatherLength = title.length;
let temp = parseInt(o) for (let loc = 0; loc < weatherLength; ++loc) {
that.weather_low.push(temp) let discribeText = {
}) date: "",
that.weather_windem=Array.from(...[windem]) discrible: "",
that.weather_windwl=Array.from(...[windwl]) temperature: "",
discribe.map((item) => { };
that.weather_discribe.push(item) discribeText.date = that.weather_title[loc];
}) discribeText.discrible = that.weather_discribe[loc];
let weatherLength = title.length; discribeText.temperature =
for (let loc = 0; loc < weatherLength; ++loc) { that.weather_low[loc] + "/" + that.weather_high[loc] + "°C";
let discribeText = { discribeText.windem = that.weather_windem[loc];
"date": "", discribeText.windwl = that.weather_windwl[loc];
"discrible": "", that.tableData.push(discribeText);
"temperature": "" }
} console.log(that.tableData, "that.tableData");
discribeText.date=that.weather_title[loc]
discribeText.discrible=that.weather_discribe[loc]
discribeText.temperature=that.weather_low[loc]+'/'+that.weather_high[loc]+'°C'
discribeText.windem=that.weather_windem[loc]
discribeText.windwl=that.weather_windwl[loc]
that.tableData.push(discribeText)
}
console.log(that.tableData, 'that.tableData')
}).catch(r => {
console.log('r', r)
})
}, 1000)
resolve('获取后端天气成功的promise')
}) })
}, .catch((r) => {
weatherInint() { console.log("r", r);
// 基于准备好的dom，初始化echarts实例 });
console.log('echarts!') }, 1000);
var that = this // 传递 resolve("获取后端天气成功的promise");
return new Promise(resolve => { });
setTimeout(function () { },
let highData = Array.from(...[that.weather_high]) weatherInint() {
let lowData = Array.from(...[that.weather_low]) // 基于准备好的dom，初始化echarts实例
let titleData = Array.from(...[that.weather_title]) console.log("echarts!");
console.log('绘制折线图数据', titleData, highData, lowData) var that = this; // 传递
var dom = document.getElementById('echart_weather') return new Promise((resolve) => {
// console.log('dom', dom) setTimeout(function () {
var myChart = echarts.init(dom) let highData = Array.from(...[that.weather_high]);
// 绘制图表 let lowData = Array.from(...[that.weather_low]);
var option = { let titleData = Array.from(...[that.weather_title]);
title: { console.log("绘制折线图数据", titleData, highData, lowData);
text: that.msg, var dom = document.getElementById("echart_weather");
subtext: '气温°C' // console.log('dom', dom)
}, var myChart = echarts.init(dom);
tooltip: { // 绘制图表
trigger: 'axis' var option = {
}, title: {
// legend: { text: that.msg,
// data: ['最高', '最低'] subtext: "气温°C",
// }, },
toolbox: { tooltip: {
show: true, trigger: "axis",
feature: { },
dataZoom: { // legend: {
yAxisIndex: 'none' // data: ['最高', '最低']
}, // },
dataView: { toolbox: {
readOnly: false show: true,
}, feature: {
magicType: { dataZoom: {
type: ['bar', 'line'] yAxisIndex: "none",
}, },
restore: {}, dataView: {
saveAsImage: {} readOnly: false,
} },
}, magicType: {
xAxis: { type: ["bar", "line"],
type: 'category', },
boundaryGap: true, restore: {},
data: titleData saveAsImage: {},
}, },
yAxis: { },
type: 'value', xAxis: {
axisLabel: { type: "category",
formatter: '{value}' boundaryGap: true,
} data: titleData,
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value}",
},
},
series: [
{
name: "Highest",
type: "bar",
data: highData,
markPoint: {
data: [
{
type: "max",
name: "Max",
},
{
type: "min",
name: "Min",
},
],
},
markLine: {
data: [
{
type: "average",
name: "avg",
},
],
},
},
{
name: "Lowest",
type: "line",
data: lowData,
markPoint: {
data: [
{
name: "最低",
value: -2,
xAxis: 1,
yAxis: -1.5,
},
],
},
markLine: {
data: [
{
type: "average",
name: "Avg",
},
[
{
symbol: "circle",
x: "75%",
yAxis: "max",
},
{
symbol: "circle",
label: {
position: "start",
formatter: "Max",
}, },
series: [{ type: "max",
name: 'Highest', name: "最高点",
type: 'bar', },
data: highData, ],
markPoint: { ],
data: [{ },
type: 'max', },
name: 'Max' ],
}, };
{ myChart.setOption(option); // 画折线图
type: 'min', window.onresize = function () {
name: 'Min' myChart.resize();
} };
] }, 3000);
}, resolve("绘制折线图Promise");
markLine: { });
data: [{ // dom = null; //销毁
type: 'average',
name: 'avg'
}]
}
},
{
name: 'Lowest',
type: 'line',
data: lowData,
markPoint: {
data: [{
name: '最低',
value: -2,
xAxis: 1,
yAxis: -1.5
}]
},
markLine: {
data: [{
type: 'average',
name: 'Avg'
},
[{
symbol: 'circle',
x: '75%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
}
myChart.setOption(option) // 画折线图
window.onresize = function () {
myChart.resize()
}
}, 3000)
resolve('绘制折线图Promise')
})
// dom = null; //销毁
}
}, },
} },
};
</script> </script>
<style scoped> <style scoped>
.weather { .weather {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#echart_weather { #echart_weather {
position: relative; position: relative;
width: 100%; width: 100%;
height: 300px; height: 300px;
} }
.weatherDiscribe { .weatherDiscribe {
position: relative; position: relative;
margin-top: 5px; margin-top: 5px;
width: 100%; width: 100%;
height: auto; height: auto;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
#customers { #customers {
position: relative; position: relative;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translateX(-50%, -50%); transform: translateX(-50%, -50%);
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或