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
src/App.vue
浏览文件 @ b607b035
<template>
<div id="app">
<div id="app">
<el-container>
<el-aside v-if="navigate_flag ? false : true">
<router-link to="/">
<svg class="icon" aria-hidden="true" style="width: auto; height: auto; padding-top: 5%">
<svg
class="icon"
aria-hidden="true"
style="width: auto; height: auto; padding-top: 5%"
>
<use xlink:href="#iconshejitouxiangai"></use>
</svg>
</router-link>
<el-menu default-active="" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-menu
default-active=""
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-user-solid"></i>
......@@ -26,14 +35,17 @@
</el-submenu>
<el-submenu index="1-2">
<template slot="title">location</template>
<el-menu-item index="1-2-1" @click="jumpRouter('Home')">guiyang</el-menu-item>
<el-menu-item index="1-2-1" @click="jumpRouter('Home')"
>guiyang</el-menu-item
>
</el-submenu>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-setting"></i>管理后台</template>
<i class="el-icon-setting"></i>管理后台</template
>
<el-menu-item-group>
<el-submenu index="2-1">
<template slot="title">登录</template>
......@@ -46,20 +58,35 @@
<el-submenu index="3">
<template slot="title">
<i class="el-icon-chat-line-round" :click="onlinewebsocket"></i>线上聊天</template>
<i class="el-icon-chat-line-round" :click="onlinewebsocket"></i
>线上聊天</template
>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header>
<a v-on:click="changeNavigate" style="cursor: pointer;"><i class="el-icon-s-promotion"></i>管理员</a>
<i style="font-weight: bold; font-style: normal;" v-if="chat_flag">&nbsp;&nbsp;在线聊天室</i>
<div style="float:right;overflow:hidden;align-height:60px;">
<a href="https://codechina.csdn.net/qq_38870145/myblogvue"><img src="@/assets/img/code-china.png" style="cursor: pointer;height:24px;"></a>
<a href="https://github.com/yongma16"><img src="@/assets/img/github-fill.png" style="cursor: pointer;height:24px;"></a>
<a v-on:click="changeNavigate" style="cursor: pointer"
><i class="el-icon-s-promotion"></i>&nbsp;&nbsp;<span
style="font-weight: bold"
>{{ authSlogan }}</span
></a
>
<i style="font-weight: bold; font-style: normal" v-if="chat_flag"
>&nbsp;&nbsp;在线聊天室</i
>
<div style="float: right; overflow: hidden; align-height: 60px">
<a href="https://codechina.csdn.net/qq_38870145/myblogvue"
><img
src="@/assets/img/code-china.png"
style="cursor: pointer; height: 24px"
/></a>
<a href="https://github.com/yongma16"
><img
src="@/assets/img/github-fill.png"
style="cursor: pointer; height: 24px"
/></a>
</div>
<!-- <a v-on:click="changeNavigate"><i class="el-icon-menu"></i></a> -->
......@@ -72,141 +99,163 @@
<el-footer>
<div class="footer_font">
<div style="float:left;">
</div>
Copyright &copy;2021 yongma16.xyz&nbsp;&nbsp;&nbsp;浏览量:{{readCount}}
<div style="float: left"></div>
Copyright &copy;2022 yongma16.xyz&nbsp;&nbsp;&nbsp;浏览量:{{
readCount
}}
</div>
</el-footer>
</el-container>
</el-container>
<!-- <img src="./assets/logo.png"> -->
</div>
</div>
</template>
<script>
import axios from 'axios'
import axios from "axios";
export default {
name: 'App',
name: "App",
data() {
return {
authSlogan: "Yma16",
chat_flag: false,
msg: 'yma16',
msg: "yma16",
navigate_flag: true,
value: new Date(),
// baseurl: 'http://localhost:8006/',
baseurl: 'http://yongma16.xyz/',
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
url: '/image/logo/logo.jpg',
baseurl: "http://114.116.52.53/",
// baseurl: 'http://yongma16.xyz/',
src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
url: "/image/logo/logo.jpg",
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
],
headerData: ['从现在开始，种一棵树', '从现在开始，种一棵树'],
readCount: 0
}
headerData: ["从现在开始，种一棵树", "从现在开始，种一棵树"],
readCount: 0,
};
},
mounted() {
this.addReadCountFun()
this.readCountFun()
this.addReadCountFun();
this.readCountFun();
},
methods: {
addReadCountFun: function () {
console.log('addfun')
let clientip = '未知'
console.log("addfun");
let clientip = "未知";
try {
console.log('ip待定')
console.log("ip待定");
} catch (e) {
console.log(e)
console.log(e);
}
console.log('最终ip', clientip)
axios.post(this.baseurl + 'count/add/', {
'ip': clientip
}).then((res) => {
console.log(res)
}).catch((e) => {
console.log(e)
console.log("最终ip", clientip);
axios
.post(this.baseurl + "count/add/", {
ip: clientip,
})
.then((res) => {
console.log(res);
})
.catch((e) => {
console.log(e);
});
},
readCountFun: function () {
let that = this
axios.get(that.baseurl + 'count/get/').then((res) => {
console.log(res, 'count')
this.readCount = res.data.num
}).catch((error) => {
console.log(error)
let that = this;
axios
.get(that.baseurl + "count/get/")
.then((res) => {
console.log(res, "count");
this.readCount = res.data.num;
})
.catch((error) => {
console.log(error);
});
},
changeNavigate: function () {
this.navigate_flag = !this.navigate_flag // 取反
this.navigate_flag = !this.navigate_flag; // 取反
},
handleOpen(key, keyPath) {
console.log(key, keyPath)
if (key === '3') {
console.log('打开3号')
this.chat_flag = true
this.onlinewebsocket() // 调用跳转
console.log(key, keyPath);
if (key === "3") {
console.log("打开3号");
this.chat_flag = true;
this.onlinewebsocket(); // 调用跳转
}
if (key === '2-1') {
this.loginAction() // 调用跳转
if (key === "2-1") {
this.chat_flag = false;
this.loginAction(); // 调用跳转
}
if (key === '2-2') {
this.registerAction() // 调用跳转
if (key === "2-2") {
this.chat_flag = false;
this.registerAction(); // 调用跳转
}
},
handleClose(key, keyPath) {
console.log(key, keyPath)
console.log('关闭')
if (key === '3') {
this.chat_flag = false
console.log(key, keyPath);
console.log("关闭");
if (key === "3") {
this.chat_flag = false;
}
},
jumpRouter: function (params) {
this.$router.push({
name: `${params}`
}).catch((error) => {
console.log(error)
this.$router
.push({
name: `${params}`,
})
.catch((error) => {
console.log(error);
});
},
onlinewebsocket: function () {
// console.log(this.$router);
this.$router.push({
path: '/onlinewebsocket'
}).catch((error) => {
console.log(error)
this.$router
.push({
path: "/onlinewebsocket",
})
.catch((error) => {
console.log(error);
});
},
toecharts: function () {
// console.log(this.$router);
this.$router.push({
path: '/bilicom'
}).catch((error) => {
console.log(error)
this.$router
.push({
path: "/bilicom",
})
.catch((error) => {
console.log(error);
});
},
toadmin: function () {
this.$router.push({
path: '/mavoneditor'
}).catch((error) => {
console.log(error)
this.$router
.push({
path: "/mavoneditor",
})
.catch((error) => {
console.log(error);
});
},
loginAction: function () {
this.$router.push({
path: '/login'
}).catch((error) => {
console.log(error)
this.$router
.push({
path: "/login",
})
.catch((error) => {
console.log(error);
});
},
registerAction: function () {
this.$router.push({
path: '/register'
}).catch((error) => {
console.log(error)
this.$router
.push({
path: "/register",
})
}
}
}
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<style>
......@@ -244,7 +293,6 @@ body {
}
.el-footer {
height: 100%;
background-color: #bba8a4;
color: #333;
......@@ -289,10 +337,9 @@ body {
.mainappclass::-webkit-scrollbar {
display: none;
;
}
body>.el-container {
body > .el-container {
color: #475669;
opacity: 0.5;
padding: 0%;
......@@ -350,7 +397,7 @@ body>.el-container {
}
.heart::before {
content: '';
content: "";
width: 30px;
height: 30px;
background: pink;
......@@ -360,7 +407,7 @@ body>.el-container {
}
.heart::after {
content: '';
content: "";
width: 30px;
height: 30px;
background: pink;
......
src/comment/ArticleComment.vue
浏览文件 @ b607b035
......@@ -45,7 +45,8 @@ export default {
return {
noneMsg: "还没人评论>_<",
msg: "评论区",
baseurl: "http://yongma16.xyz/comment/",
baseurl: "http://114.116.52.53/comment/",
// baseurl: "http://yongma16.xyz/comment/",
userImg: "",
username: "匿名",
contentRes: [],
......
src/components/Article.vue
浏览文件 @ b607b035
此差异已折叠。
src/components/Bilicom.vue
浏览文件 @ b607b035
......@@ -11,18 +11,16 @@ export default {
name: 'Bilicom',
data () {
return {
baseurl: 'http://yongma16.xyz/article/index/',
msg: '内容',
md_data: [],
data: ['threejs加载模型'],
mychart: echarts.init(document.getElementById('bilicom'))
data: ['threejs加载模型']
}
},
methods: {
echartfunc: function (o) {
echartfunc: function () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('bilicom'))
var option = {
const myChart = echarts.init(document.getElementById('bilicom'))
const option = {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
title: {
......
src/components/Csslearn.vue
浏览文件 @ b607b035
......@@ -37,7 +37,8 @@ export default {
msg: "css练习：",
css_length: "",
// baseurl: 'http://127.0.0.1:1998',
baseurl: "http://yongma16.xyz",
baseurl: "http://114.116.52.53/",
// baseurl: "http://yongma16.xyz/",
css_title: [],
css_path: [],
css_loc: 0,
......@@ -89,7 +90,7 @@ export default {
let that = this;
axios
.get(that.baseurl + "/css/")
.get(that.baseurl + "css/")
.then((res) => {
console.log("get返回", res);
let getdata = res.data;
......
src/components/Login.vue
浏览文件 @ b607b035
<template>
<div class="login" 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-item><p style="font-size:30px">登录</p></el-form-item>
<div class="login" 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-item><p style="font-size: 30px">登录</p></el-form-item>
<el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
<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 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-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>
</el-card>
</div>
</template>
......@@ -68,56 +84,53 @@ export default {
// };
return {
// 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: {
pass: '',
// checkPass: '',
name: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass, trigger: 'blur' }
],
name: [
{ validator: checkName, trigger: 'blur' }
]
pass: [{ validator: validatePass, trigger: 'blur' }],
checkPass: [{ validator: validatePass, trigger: 'blur' }],
name: [{ validator: checkName, trigger: 'blur' }]
}
}
},
methods: {
submitForm (formName) {
const that = this // this指向
this.$refs[formName].validate((valid) => {
if (valid) {
// 提交数据
let that = this// this指向
console.log(this.ruleForm.name, this.ruleForm.pass)
console.log(that.ruleForm.name, that.ruleForm.pass)
// axios提交数据 post
const loginUrl = that.baseurl
const userInfo={
const loginUrl = that.baseurl + 'user/login/'
const userInfo = {
name: that.ruleForm.name,
password: that.ruleForm.pass
}
axios.post(loginUrl, userInfo).then(res => {
axios
.post(loginUrl, userInfo)
.then((res) => {
// alter('提交中');
console.log(res.data)
if (res.data.code == 1) {
localStorage.setItem("yma16siteUserInfoName", userInfo.name)
localStorage.setItem("yma16siteUserInfoPwd", userInfo.password)
store.commit('setUserInfo',userInfo)//store信息
localStorage.setItem('yma16siteUserInfoName', userInfo.name)
localStorage.setItem('yma16siteUserInfoPwd', userInfo.password)
store.commit('setUserInfo', userInfo) // store信息
console.log('return login success!')
document.cookie = `user=${that.ruleForm.name}`
that.$router.push({path: '/'})
that.$router.push({ path: '/' })
// 添加cookie
} else if (res.data.code == 0) {
// alter("失败！")
console.log('失败', res)
}
// that.$cookies.set('')
}).catch(res => {
})
.catch((res) => {
console.log('post失败')
console.log(res)
})
......@@ -136,41 +149,40 @@ export default {
</script>
<style scoped>
.login{
.login {
position: relative;
width:100%;
width: 100%;
height: auto;
}
.left{
.left {
position: relative;
margin-top:50px;
left:50%;
top:50%;
transform: translate(-50%,-50%);
margin-top: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.text {
.text {
align-content: center;
display:flex;
display: flex;
margin: 0 auto;
font-size: 14px;
}
}
.item {
display:flex;
.item {
display: flex;
margin: 0 auto;
/* width: 50%; */
}
}
.box-card {
.box-card {
align-self: center;
align-content: center;
display:flex;
display: flex;
width: 450px;
/* padding-left:25%; */
margin:0 auto;
margin: 0 auto;
opacity: 1;
margin-top:80px;
margin-top: 80px;
background-color: #ffffff;
}
}
</style>
src/components/Mavoneditor.vue
浏览文件 @ b607b035
<template>
<div class="mavoneditor">
<div class="markdown-body" style="width:100%;height:100%;overflow:hidden;">
<iframe src='http://yongma16.xyz/admin/' style="width:100%;height:100%;border:none;"></iframe>
<div
class="markdown-body"
style="width: 100%; height: 100%; overflow: hidden"
>
<iframe
:src="baseurl + basePath"
style="width: 100%; height: 100%; border: none"
></iframe>
</div>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown'
import axios from 'axios'
import VueMarkdown from "vue-markdown";
import axios from "axios";
export default {
components: {
VueMarkdown
VueMarkdown,
},
name: 'Mavoneditor',
data () {
name: "Mavoneditor",
data() {
return {
baseurl: 'http://yongma16.xyz/admin/',
md_data: []
}
baseurl: "http://114.116.52.53/",
basePath: "admin/",
// baseurl: 'http://yongma16.xyz/',
md_data: [],
};
},
methods: {
getArticles: function () {
let that = this
let that = this;
axios
.get(that.baseurl)
.get(that.baseurl + "admin/")
.then((res) => {
console.log('获取Article=>')
console.log("获取Article=>");
// console.log(res.data.article);
// let run_array=res.data.article.map(o=>{return that.data.md_data.push(o);}); //获取参数article
// console.log(that.data.md_data);
that.md_data = res.data.article
that.md_data = res.data.article;
})
.catch((res) => {
console.log(res)
}) // get log
}
console.log(res);
}); // get log
},
created () {
try{
console.log('domMain',document.getElementById('mainappid'),document.getElementById('mainappid').style);
document.getElementById('mainappid').style.padding='0';
document.getElementById('mainappid').style.margin='0';
}catch(e){
console.log('e',e)
}
let that = this
console.log('测试created！')
axios
.get(that.baseurl)
.then((res) => {
console.log('获取Article')
// console.log(res,res.data,res.data.msg);
that.md_data.push(res.data.article) // markdown值传递
})
.catch((res) => {
console.log(res)
}) // get log
},
created() {
try {
console.log(
"domMain",
document.getElementById("mainappid"),
document.getElementById("mainappid").style
);
document.getElementById("mainappid").style.padding = "0";
document.getElementById("mainappid").style.margin = "0";
} catch (e) {
console.log("e", e);
throw Error(e);
}
}
// let that = this;
// console.log("测试created！");
// axios
// .get(that.baseurl + "admin/")
// .then((res) => {
// console.log("获取Article");
// // console.log(res,res.data,res.data.msg);
//
// that.md_data.push(res.data.article); // markdown值传递
// })
// .catch((res) => {
// console.log(res);
// }); // get log
},
};
</script>
<style scoped>
.mavoneditor{
width:100%;
height:100%;
.mavoneditor {
width: 100%;
height: 100%;
}
</style>
src/components/Onlinewebsocket.vue
浏览文件 @ b607b035
<template>
<div class="container">
<div class="container">
<div class="selectName" id="selectNameId">
<div class="selectInput">
<h1>欢迎进入聊天室</h1>
......@@ -9,13 +9,15 @@
<!-- &nbsp; -->
<!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
</div>
<div class="btn_fx"> <a @click="registerUsername()">
<div class="btn_fx">
<a @click="registerUsername()">
<span></span>
<span></span>
<span></span>
<span></span>
<p>进入聊天室</p>
</a></div>
</a>
</div>
</div>
</div>
<div class="left">
......@@ -23,11 +25,18 @@
<p>聊天室</p>
<!-- <p>人数:{{personCount}}</p> -->
<p>消息:{{ chatCount }}</p>
<div v-for="(item, index) in room_name" :key="index" class="roomNameClass">
<div v-bind:class="[
<div
v-for="(item, index) in room_name"
:key="index"
class="roomNameClass"
>
<div
v-bind:class="[
{ room_active: index == room_loc },
room_defaultClass,
]" @click="changeRoom(item, index)">
]"
@click="changeRoom(item, index)"
>
{{ item }}
</div>
</div>
......@@ -37,28 +46,49 @@
<el-card class="input_chat1" shadow="always" cellpadding="1px">
<div class="right_header" style="display: flex; width: 100%">
<h1 class="roomName">{{ room_select }}</h1>
<h1 class="clearFont" style="width: 100%; right: 0; text-align: right; cursor: pointer" @click="clearChat()">
<h1
class="clearFont"
style="width: 100%; right: 0; text-align: right; cursor: pointer"
@click="clearChat()"
>
清屏
</h1>
</div>
<el-input type="textarea" v-model="send_info"> </el-input>
<el-button type="success" round style="margin-top: 2%" @click="websocketOpen(send_info)">发送</el-button>
<el-button
type="success"
round
style="margin-top: 2%"
@click="websocketOpen(send_info)"
>发送</el-button
>
</el-card>
</div>
<!-- 聊天信息 -->
<div class="right" id="idChat" style="opacity: 0.8">
<el-card shadow="hover" style="line-height: 10px">
<div class="blockChat">
<div v-for="(item, index) in chat_info" :key="index" class="text item">
<div
v-for="(item, index) in chat_info"
:key="index"
class="text item"
>
<!-- {{item}} -->
<template v-if="item.room == room_select">
<div v-for="(item2, index2) in item.content" :key="index2" class="msgClass" v-bind:class="[
<div
v-for="(item2, index2) in item.content"
:key="index2"
class="msgClass"
v-bind:class="[
{ info_active: ws_flag == true },
info_defaultClass,
]">
]"
>
<div class="msgUser">
<i class="el-icon-user">{{ item2.user }} &nbsp;{{ item2.create_time }}</i>
<i class="el-icon-user"
>{{ item2.user }} &nbsp;{{ item2.create_time }}</i
>
</div>
<div class="msgMessage">
<p>{{ item2.message }}</p>
......@@ -71,17 +101,27 @@
<el-card class="input_chat2" shadow="always" cellpadding="1px">
<div class="right_header" style="display: flex; width: 100%">
<h1 class="roomName">{{ room_select }}</h1>
<h1 class="clearFont" style="width: 100%; right: 0; text-align: right; cursor: pointer" @click="clearChat()">
<h1
class="clearFont"
style="width: 100%; right: 0; text-align: right; cursor: pointer"
@click="clearChat()"
>
清屏
</h1>
</div>
<el-input type="textarea" v-model="send_info"> </el-input>
<el-button type="success" round style="margin-top: 2%" @click="websocketOpen(send_info)">发送</el-button>
<el-button
type="success"
round
style="margin-top: 2%"
@click="websocketOpen(send_info)"
>发送</el-button
>
</el-card>
</el-card>
</div>
</div>
</div>
</template>
<script>
......@@ -101,9 +141,10 @@ export default {
room_name: ["DjangoVue"],
room_select: "",
// baseUrl: "http://localhost:8006/webchat/index/",
baseUrl: 'http://yongma16.xyz/webchat/index/',
// websocketUrl: "127.0.0.1:8006/ws/webchat/",
websocketUrl: 'yongma16.xyz/ws/webchat/',
baseurl: "http://114.116.52.53/",
// baseUrl: "http://yongma16.xyz/",
websocketUrl: "ws://114.116.52.53/",
// websocketUrl: "yongma16.xyz/ws/webchat/",
websocket: null,
// room 存房间名字，content保存聊天信息的数组
chat_info: new Array(),
......@@ -216,7 +257,7 @@ export default {
this.room_loc = room_loc;
console.log("获取房间");
axios
.get(this.baseUrl)
.get(this.baseUrl + "webchat/index/")
.then((res) => {
console.log("返回", res);
})
......@@ -246,9 +287,9 @@ export default {
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1 ?
o[k] :
("00" + o[k]).substr(("" + o[k]).length)
RegExp.$1.length == 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt;
};
......@@ -269,7 +310,7 @@ export default {
this.websocket.close();
}
} catch (e) {
console.log('关闭失败！', e)
console.log("关闭失败！", e);
}
// 触发+1
this.personCount++;
......@@ -294,7 +335,7 @@ export default {
let roomObject = {
room: room,
content: []
content: [],
};
this.chat_info.push(roomObject);
console.log("创建房间", this.chat_info);
......@@ -303,8 +344,8 @@ export default {
console.log("创建房间出错", e);
}
this.chatRoomIndex = chatRoomIndex;
let wsurl = this.websocketUrl;
this.websocket = new WebSocket("ws://" + wsurl + room + "/"); // 连接
const wsUrl = this.websocketUrl + "ws/webchat/";
this.websocket = new WebSocket(wsUrl + room + "/"); // 连接
console.log(this.websocket, "聊天室");
this.websocket.onmessage = this.websocketMessage; // 函数指向
this.websocket.onopen = this.websocketOpen;
......@@ -325,20 +366,20 @@ export default {
}
if (true) {
// 房间计数
this.personCount = res.message.person_count ?
res.message.person_count :
0;
this.personCount = res.message.person_count
? res.message.person_count
: 0;
let getUser = res.message.user;
let getinfo = res.message.info.isTrusted ?
`欢迎${getUser}加入聊天室` :
res.message.info;
let getinfo = res.message.info.isTrusted
? `欢迎${getUser}加入聊天室`
: res.message.info;
this.getmsg = getinfo;
this.msg = this.sendmsg == this.getmsg ? "连接聊天室成功" : "";
let getTime = res.message.create_time;
let message = {
user: getUser,
message: getinfo,
create_time: getTime
create_time: getTime,
};
// 添加信息
......@@ -394,7 +435,7 @@ export default {
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "block";
window.alert('websocket连接失败！')
window.alert("websocket连接失败！");
// this.initWebsocket()// 重连
},
websocketClose: function (e) {
......@@ -428,13 +469,9 @@ export default {
transform: translate(-50%, -50%);
background: #005aa7;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right,
#fffde4,
#005aa7);
background: -webkit-linear-gradient(to right, #fffde4, #005aa7);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right,
#fffde4,
#005aa7);
background: linear-gradient(to right, #fffde4, #005aa7);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: 400%;
animation: sendInfo 20s linear infinite;
......@@ -483,13 +520,9 @@ export default {
/* background: rgba(135, 187, 222,.6); */
background: #4ca1af;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left,
#c4e0e5,
#4ca1af);
background: -webkit-linear-gradient(to left, #c4e0e5, #4ca1af);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left,
#c4e0e5,
#4ca1af);
background: linear-gradient(to left, #c4e0e5, #4ca1af);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: 400%;
......@@ -785,7 +818,6 @@ export default {
height: 100%;
line-height: 50px;
font-size: 1em;
}
.selectInput h1 {
......
src/components/Register.vue
浏览文件 @ b607b035
<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-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: center; margin: 0 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-item>
<!-- 弹出一个警告框 -->
<el-alert title="这个用户名已经被使用！" type="warning" v-if='register_error'>
<el-alert
title="这个用户名已经被使用！"
type="warning"
v-if="register_error"
>
</el-alert>
<!-- 成功注册！ -->
<el-alert title="欢迎！！！" type="success" v-if='register_success'>
<el-alert title="欢迎！！！" type="success" v-if="register_success">
</el-alert>
<p style="font-size: 30px">注册</p>
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
<el-avatar
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
></el-avatar>
<!-- <svg
class="icon"
aria-hidden="true"
......@@ -28,112 +41,132 @@
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
<el-input
type="password"
v-model="ruleForm.pass"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="确认" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
<el-input
type="password"
v-model="ruleForm.checkPass"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
<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-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>
</div>
</div>
</template>
<script>
import axios from 'axios'
import axios from "axios";
export default {
name: 'Register',
data () {
var checkName = (rule, value, callback) => {
name: "Register",
data() {
const checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error('账号不能为空'))
return callback(new Error("账号不能为空"));
}
setTimeout(() => {
// if (!Number.isInteger(value)) {
// callback(new Error('请输入密码'));
// } if {
if (value.length < 2) {
callback(new Error('名字至少两位'))
callback(new Error("名字至少两位"));
} else {
callback()
callback();
}
}, 1000)
}
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
}, 1000);
};
const validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass')
}
callback()
if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass");
}
callback();
}
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
};
const validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'))
callback(new Error("两次输入密码不一致!"));
} else {
callback()
}
callback();
}
};
return {
register_success: false,
register_error: false,
// baseurl: "http://127.0.0.1/",
baseurl: 'http://yongma16.xyz/',
baseurl: "http://114.116.52.53/",
// baseurl: 'http://yongma16.xyz/',
ruleForm: {
pass: '',
checkPass: '',
name: ''
pass: "",
checkPass: "",
name: "",
},
rules: {
pass: [{ validator: validatePass, trigger: 'blur' }],
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
name: [{ validator: checkName, trigger: 'blur' }]
}
}
pass: [{ validator: validatePass, trigger: "blur" }],
checkPass: [{ validator: validatePass2, trigger: "blur" }],
name: [{ validator: checkName, trigger: "blur" }],
},
};
},
methods: {
submitForm (formName) {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
const that = this;
if (valid) {
// 提交数据
console.log(this.ruleForm.name, this.ruleForm.pass)
console.log(this.ruleForm.name, this.ruleForm.pass);
// alert("yes submit!");
let that = this
that.register_success = false// 初始化register的状态
that.register_error = false
that.register_success = false; // 初始化register的状态
that.register_error = false;
axios
.post(that.baseurl + 'user/register/',
{
.post(that.baseurl + "user/register/", {
// 传递的名字和密码
name: that.ruleForm.name,
password: that.ruleForm.pass
}
)
password: that.ruleForm.pass,
})
.then(function (res) {
console.log('成功post', res)
console.log(res.data.code)
console.log("成功post", res);
console.log(res.data.code);
if (res.data.code === 0) {
console.log('重名')
console.log(that.$cookies.get('user_session'))// 取出cookies的user_session
console.log(that.$cookies)// 存在
document.cookie = `user=${that.ruleForm.name}`
that.register_error = true
console.log("重名");
console.log(that.$cookies.get("user_session")); // 取出cookies的user_session
console.log(that.$cookies); // 存在
document.cookie = `user=${that.ruleForm.name}`;
that.register_error = true;
that.$message({
message: "名称重复" + that.ruleForm.name + "!",
type: "error",
});
// console.log(this.$cookies)
} else {
that.register_success = true
console.log('时间节点')
that.register_success = true;
console.log("时间节点");
that.$message({
message: "注册成功，欢迎您，" + that.ruleForm.name + "!",
type: "success",
});
// let token={'user':res.data.name};//传递主码用户名即可
// this.$cookie.set('token',token,1);//设置token
......@@ -146,22 +179,30 @@ export default {
})
.catch(function (res) {
// 获取res中的name
alert('后端的问题！')
console.log('失败post', res)
})
that.$message({
message: "注册失败" + that.ruleForm.name + "!",
type: "error",
});
alert("后端的问题！");
console.log("失败post", res);
});
} else {
// alert("no submit!");
console.log('前端的问题！')
console.log("前端的问题！");
that.$message({
message: "注册失败" + that.ruleForm.name + "!",
type: "error",
});
// console.log(this.$cookies);
return false
return false;
}
})
});
},
resetForm (formName) {
this.$refs[formName].resetFields()
}
}
}
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped>
......
src/weather/EchartWeather.vue
浏览文件 @ b607b035
<template>
<div class="weather">
<div id="echart_weather">
</div>
<div class="weather">
<div id="echart_weather"></div>
<div class="weatherDiscribe">
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期">
</el-table-column>
<el-table-column prop="discrible" label="天气">
</el-table-column>
<el-table-column prop="temperature" label="温度">
</el-table-column>
<el-table-column prop="windem" label="风向">
</el-table-column>
<el-table-column prop="windwl" label="风级">
</el-table-column>
<el-table-column prop="date" label="日期"> </el-table-column>
<el-table-column prop="discrible" label="天气"> </el-table-column>
<el-table-column prop="temperature" label="温度"> </el-table-column>
<el-table-column prop="windem" label="风向"> </el-table-column>
<el-table-column prop="windwl" label="风级"> </el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import * as echarts from 'echarts'
import axios from "axios";
import * as echarts from "echarts";
export default {
name: 'EchartWeather',
name: "EchartWeather",
data() {
return {
msg: '贵阳天气',
baseurl: 'http://yongma16.xyz/article/weather/',
msg: "贵阳天气",
baseurl: "http://114.116.52.53/",
// baseurl: 'http://yongma16.xyz/',
// baseurl: 'api/article/weather/',
tabPosition: 'left',
tabPosition: "left",
weather_title: [],
weather_high: [],
weather_low: [],
weather_discribe: [],
weather_windem:[],
weather_windwl:[],
tableData: []
}
weather_windem: [],
weather_windwl: [],
tableData: [],
};
},
mounted() {
this.initWeatherLine()
this.initWeatherLine();
},
methods: {
initWeatherLine() {
let that = this
let that = this;
async function waitGetWeatherData() {
await that.getWeatherData()
await that.weatherInint()
await that.getWeatherData();
await that.weatherInint();
}
waitGetWeatherData().then(o => {
console.log(o)
}) // 同步
waitGetWeatherData().then((o) => {
console.log(o);
}); // 同步
},
getWeatherData() {
let that = this
return new Promise(resolve => {
let that = this;
return new Promise((resolve) => {
setTimeout(function () {
axios.get(that.baseurl).then(res => {
console.log('天气接口返回', res)
let resdata = res.data
let weather = resdata.weather
let title = weather.title
let high = weather.high
let low = weather.low
let discribe = weather.discribe
let windem=weather.windem
let windwl=weather.windwl
that.tableData = []
axios
.get(that.baseurl + "article/weather/")
.then((res) => {
console.log("天气接口返回", res);
let resdata = res.data;
let weather = resdata.weather;
let title = weather.title;
let high = weather.high;
let low = weather.low;
let discribe = weather.discribe;
let windem = weather.windem;
let windwl = weather.windwl;
that.tableData = [];
title.map((item) => {
that.weather_title.push(item)
})
that.weather_title.push(item);
});
high.map((o) => {
let temp = parseInt(o)
that.weather_high.push(temp)
})
let temp = parseInt(o);
that.weather_high.push(temp);
});
low.map((o) => {
let temp = parseInt(o)
that.weather_low.push(temp)
})
that.weather_windem=Array.from(...[windem])
that.weather_windwl=Array.from(...[windwl])
let temp = parseInt(o);
that.weather_low.push(temp);
});
that.weather_windem = Array.from(...[windem]);
that.weather_windwl = Array.from(...[windwl]);
discribe.map((item) => {
that.weather_discribe.push(item)
})
that.weather_discribe.push(item);
});
let weatherLength = title.length;
for (let loc = 0; loc < weatherLength; ++loc) {
let discribeText = {
"date": "",
"discrible": "",
"temperature": ""
}
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)
date: "",
discrible: "",
temperature: "",
};
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')
console.log(that.tableData, "that.tableData");
})
.catch((r) => {
console.log("r", r);
});
}, 1000);
resolve("获取后端天气成功的promise");
});
},
weatherInint() {
// 基于准备好的dom，初始化echarts实例
console.log('echarts!')
var that = this // 传递
return new Promise(resolve => {
console.log("echarts!");
var that = this; // 传递
return new Promise((resolve) => {
setTimeout(function () {
let highData = Array.from(...[that.weather_high])
let lowData = Array.from(...[that.weather_low])
let titleData = Array.from(...[that.weather_title])
console.log('绘制折线图数据', titleData, highData, lowData)
var dom = document.getElementById('echart_weather')
let highData = Array.from(...[that.weather_high]);
let lowData = Array.from(...[that.weather_low]);
let titleData = Array.from(...[that.weather_title]);
console.log("绘制折线图数据", titleData, highData, lowData);
var dom = document.getElementById("echart_weather");
// console.log('dom', dom)
var myChart = echarts.init(dom)
var myChart = echarts.init(dom);
// 绘制图表
var option = {
title: {
text: that.msg,
subtext: '气温°C'
subtext: "气温°C",
},
tooltip: {
trigger: 'axis'
trigger: "axis",
},
// legend: {
// data: ['最高', '最低']
......@@ -136,99 +135,107 @@ export default {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
yAxisIndex: "none",
},
dataView: {
readOnly: false
readOnly: false,
},
magicType: {
type: ['bar', 'line']
type: ["bar", "line"],
},
restore: {},
saveAsImage: {}
}
saveAsImage: {},
},
},
xAxis: {
type: 'category',
type: "category",
boundaryGap: true,
data: titleData
data: titleData,
},
yAxis: {
type: 'value',
type: "value",
axisLabel: {
formatter: '{value}'
}
formatter: "{value}",
},
},
series: [{
name: 'Highest',
type: 'bar',
series: [
{
name: "Highest",
type: "bar",
data: highData,
markPoint: {
data: [{
type: 'max',
name: 'Max'
data: [
{
type: "max",
name: "Max",
},
{
type: 'min',
name: 'Min'
}
]
type: "min",
name: "Min",
},
],
},
markLine: {
data: [{
type: 'average',
name: 'avg'
}]
}
data: [
{
type: "average",
name: "avg",
},
],
},
},
{
name: 'Lowest',
type: 'line',
name: "Lowest",
type: "line",
data: lowData,
markPoint: {
data: [{
name: '最低',
data: [
{
name: "最低",
value: -2,
xAxis: 1,
yAxis: -1.5
}]
yAxis: -1.5,
},
],
},
markLine: {
data: [{
type: 'average',
name: 'Avg'
data: [
{
type: "average",
name: "Avg",
},
[{
symbol: 'circle',
x: '75%',
yAxis: 'max'
[
{
symbol: "circle",
x: "75%",
yAxis: "max",
},
{
symbol: 'circle',
symbol: "circle",
label: {
position: 'start',
formatter: 'Max'
position: "start",
formatter: "Max",
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
}
myChart.setOption(option) // 画折线图
type: "max",
name: "最高点",
},
],
],
},
},
],
};
myChart.setOption(option); // 画折线图
window.onresize = function () {
myChart.resize()
}
}, 3000)
resolve('绘制折线图Promise')
})
myChart.resize();
};
}, 3000);
resolve("绘制折线图Promise");
});
// dom = null; //销毁
}
},
}
},
};
</script>
<style scoped>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或