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 = {
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
\ No newline at end of file
}
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%">
<use xlink:href="#iconshejitouxiangai"></use>
</svg>
</router-link>
<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>
<span slot="title">开发人员</span>
</template>
<el-menu-item-group>
<el-submenu index="1-1">
<template slot="title">yma16</template>
<el-menu-item index="1-1-1">stay hungry</el-menu-item>
<a @click="toecharts">
<el-menu-item index="1-1-2">echarts</el-menu-item>
</a>
<a @click="toadmin">
<el-menu-item index="1-1-3">superuser</el-menu-item>
</a>
</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-submenu>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-setting"></i>管理后台</template>
<el-menu-item-group>
<el-submenu index="2-1">
<template slot="title">登录</template>
</el-submenu>
<el-submenu index="2-2">
<template slot="title">注册</template>
</el-submenu>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<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>
</div>
<!-- <a v-on:click="changeNavigate"><i class="el-icon-menu"></i></a> -->
</el-header>
<el-main id="mainappid" class="mainappclass">
<!-- 路由 -->
<router-view />
</el-main>
<el-footer>
<div class="footer_font">
<div style="float:left;">
</div>
Copyright &copy;2021 yongma16.xyz&nbsp;&nbsp;&nbsp;浏览量:{{readCount}}
</div>
</el-footer>
</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%"
>
<use xlink:href="#iconshejitouxiangai"></use>
</svg>
</router-link>
<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>
<span slot="title">开发人员</span>
</template>
<el-menu-item-group>
<el-submenu index="1-1">
<template slot="title">yma16</template>
<el-menu-item index="1-1-1">stay hungry</el-menu-item>
<a @click="toecharts">
<el-menu-item index="1-1-2">echarts</el-menu-item>
</a>
<a @click="toadmin">
<el-menu-item index="1-1-3">superuser</el-menu-item>
</a>
</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-submenu>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-setting"></i>管理后台</template
>
<el-menu-item-group>
<el-submenu index="2-1">
<template slot="title">登录</template>
</el-submenu>
<el-submenu index="2-2">
<template slot="title">注册</template>
</el-submenu>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<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>&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> -->
</el-header>
<el-main id="mainappid" class="mainappclass">
<!-- 路由 -->
<router-view />
</el-main>
<el-footer>
<div class="footer_font">
<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',
data() {
return {
chat_flag: false,
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',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
],
headerData: ['从现在开始，种一棵树', '从现在开始，种一棵树'],
readCount: 0
}
name: "App",
data() {
return {
authSlogan: "Yma16",
chat_flag: false,
msg: "yma16",
navigate_flag: true,
value: new Date(),
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",
],
headerData: ["从现在开始，种一棵树", "从现在开始，种一棵树"],
readCount: 0,
};
},
mounted() {
this.addReadCountFun();
this.readCountFun();
},
methods: {
addReadCountFun: function () {
console.log("addfun");
let clientip = "未知";
try {
console.log("ip待定");
} 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);
});
},
mounted() {
this.addReadCountFun()
this.readCountFun()
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);
});
},
methods: {
addReadCountFun: function () {
console.log('addfun')
let clientip = '未知'
try {
console.log('ip待定')
} 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)
})
},
changeNavigate: function () {
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() // 调用跳转
}
if (key === '2-1') {
this.loginAction() // 调用跳转
}
if (key === '2-2') {
this.registerAction() // 调用跳转
}
},
handleClose(key, keyPath) {
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)
})
},
onlinewebsocket: function () {
// console.log(this.$router);
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)
})
},
toadmin: function () {
this.$router.push({
path: '/mavoneditor'
}).catch((error) => {
console.log(error)
})
},
loginAction: function () {
this.$router.push({
path: '/login'
}).catch((error) => {
console.log(error)
})
},
registerAction: function () {
this.$router.push({
path: '/register'
}).catch((error) => {
console.log(error)
})
}
}
}
changeNavigate: function () {
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(); // 调用跳转
}
if (key === "2-1") {
this.chat_flag = false;
this.loginAction(); // 调用跳转
}
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;
}
},
jumpRouter: function (params) {
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);
});
},
toecharts: function () {
// console.log(this.$router);
this.$router
.push({
path: "/bilicom",
})
.catch((error) => {
console.log(error);
});
},
toadmin: function () {
this.$router
.push({
path: "/mavoneditor",
})
.catch((error) => {
console.log(error);
});
},
loginAction: function () {
this.$router
.push({
path: "/login",
})
.catch((error) => {
console.log(error);
});
},
registerAction: function () {
this.$router
.push({
path: "/register",
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<style>
......@@ -214,180 +263,178 @@ html,
body,
#app,
.el-container {
margin: 0px;
padding: 0%;
border: 0px;
height: 100%;
/* background: url(../static/utils/fx_background/image/gg.jpg) center top no-repeat; */
/* background: url(/image/snow/gg.jpg) center top no-repeat; */
margin: 0px;
padding: 0%;
border: 0px;
height: 100%;
/* background: url(../static/utils/fx_background/image/gg.jpg) center top no-repeat; */
/* background: url(/image/snow/gg.jpg) center top no-repeat; */
}
body {
background-color: #2f214b;
/* background: url(/image/snow/gg.jpg) center top no-repeat; */
background-color: #2f214b;
/* background: url(/image/snow/gg.jpg) center top no-repeat; */
}
.el-header {
background-color: #d4beb4;
/* color: rgb(48, 76, 77); */
text-align: left;
line-height: 60px;
/* background: url(/image/snow/gg.jpg) center top no-repeat; */
background-color: #d4beb4;
/* color: rgb(48, 76, 77); */
text-align: left;
line-height: 60px;
/* background: url(/image/snow/gg.jpg) center top no-repeat; */
}
.footer_font {
position: relative;
top: 25%;
/* height: 100%; */
margin: 0;
padding: 0;
position: relative;
top: 25%;
/* height: 100%; */
margin: 0;
padding: 0;
}
.el-footer {
height: 100%;
background-color: #bba8a4;
color: #333;
text-align: center;
/* line-height: 60px; */
box-sizing: border-box;
height: 100%;
background-color: #bba8a4;
color: #333;
text-align: center;
/* line-height: 60px; */
box-sizing: border-box;
}
.el-aside {
background-color: #be9a90;
color: #333;
text-align: center;
line-height: 80px;
width: 80px;
min-height: 60px;
background-color: #be9a90;
color: #333;
text-align: center;
line-height: 80px;
width: 80px;
min-height: 60px;
}
.activeleft {
transform: translateX(-100vw);
/* 左移100 */
transform: translateX(-100vw);
/* 左移100 */
}
.activeright {
transform: translateX(100vw);
/* 右移100 */
transform: translateX(100vw);
/* 右移100 */
}
.el-main {
/* background-color: #e9eef3; */
text-align: left;
opacity: 1;
/* background: url(../static/utils/fx_background/image/gg.jpg) center top no-repeat; */
margin: 0;
padding: 0;
/* background-color: #e9eef3; */
text-align: left;
opacity: 1;
/* background: url(../static/utils/fx_background/image/gg.jpg) center top no-repeat; */
margin: 0;
padding: 0;
}
.mainappclass {
margin: 0;
padding: 0;
overflow: auto;
margin: 0;
padding: 0;
overflow: auto;
}
.mainappclass::-webkit-scrollbar {
display: none;
;
display: none;
}
body>.el-container {
color: #475669;
opacity: 0.5;
padding: 0%;
margin-bottom: 40px;
body > .el-container {
color: #475669;
opacity: 0.5;
padding: 0%;
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
line-height: 320px;
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.5;
line-height: 150px;
margin: 0;
color: #475669;
font-size: 14px;
opacity: 0.5;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
/* background-image: url("/image/navigation/previewFix.jpg"); */
transition-duration: 2s;
/* background-image: url("/image/navigation/previewFix.jpg"); */
transition-duration: 2s;
}
.el-carousel__item:nth-child(2n + 1) {
/* background-image: url("/image/navigation/original.jpg"); */
transition-duration: 2s;
/* background-image: url("/image/navigation/original.jpg"); */
transition-duration: 2s;
}
.footerclass {
position: relative;
display: flex;
position: relative;
display: flex;
}
.midfooter {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%, -50%);
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%, -50%);
}
.heart {
width: 30px;
height: 30px;
position: relative;
background: pink;
transform: rotate(45deg);
animation-name: change;
animation-duration: 2s;
animation-iteration-count: infinite;
width: 30px;
height: 30px;
position: relative;
background: pink;
transform: rotate(45deg);
animation-name: change;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.heart::before {
content: '';
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
position: absolute;
transform: translateX(-15px);
content: "";
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
position: absolute;
transform: translateX(-15px);
}
.heart::after {
content: '';
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
position: absolute;
/* 定位 */
transform: translate(0px, -15px);
/* transform: translateX(-100px); */
content: "";
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
position: absolute;
/* 定位 */
transform: translate(0px, -15px);
/* transform: translateX(-100px); */
}
@keyframes change {
0% {
transform: rotate(45deg) scale(0.25);
}
0% {
transform: rotate(45deg) scale(0.25);
}
50% {
transform: rotate(45deg) scale(0.5);
}
50% {
transform: rotate(45deg) scale(0.5);
}
100% {
transform: rotate(45deg) scale(0.25);
}
100% {
transform: rotate(45deg) scale(0.25);
}
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
50% {
background: #ffe6f2;
}
}
</style>
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
/* eslint-disable vue/no-duplicate-attributes */
<template>
<div class="article" style="text-align: left; with: 100%; height: 100%">
<div class="article" style="text-align: left; with: 100%; height: 100%">
<!-- 左侧 -->
<div class="leftclass">
<el-card shadow="always" cellpadding="1px" style="position: static; line-height: 20px">
<div class="article_box">
<h1>{{ slogan }}</h1>
<ul v-for="(item, index) in md_title" :key="item" class="ul_style">
<div v-bind:class="[{ li_active:index==article_loc },li_errorClass]">
<li @click="getArticles(index)">{{ item }}</li>
</div>
</ul>
</div>
<!-- 分页 -->
<div class="block">
<!-- <span class="demonstration">完整功能</span> -->
<el-pagination :current-page="currentPage" :page-sizes="pageArray" :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
<el-card
shadow="always"
cellpadding="1px"
style="position: static; line-height: 20px"
>
<div class="article_box">
<h1>{{ slogan }}</h1>
<ul v-for="(item, index) in md_title" :key="item" class="ul_style">
<div
v-bind:class="[
{ li_active: index == article_loc },
li_errorClass,
]"
>
<li @click="getArticles(index)">{{ item }}</li>
</div>
</el-card>
<!-- 评论 -->
<el-card cellpadding="1px" shadow="always" style="position: static; margin-top: 2%">
<h1>{{ commmentSlogan }}</h1>
<ArticleComment v-bind:articleId="postcomment.articleId" ref="commentRef">
</ArticleComment>
</el-card>
<!-- 挑战榜 -->
<el-card class="challenge_title1" cellpadding="1px" shadow="always" style="position: static; margin-top: 2%">
<h1>{{ day_challenge }}</h1>
<ul v-for="(item, index) in challenge_data" :key="item" class="ul_style">
<div v-bind:class="[{ li_active:index==challenge_loc },li_errorClass]">
<li @click="cssPage(index)">{{item}}</li>
</div>
</ul>
</el-card>
<!-- 爬虫天气接口 -->
<el-card class="weather_class1" cellpadding="1px" shadow="always" style="position: static; margin-top: 2%">
<div style="positon:relative;width:100%;height:100%;">
<EchartWeather>
</EchartWeather>
</div>
</el-card>
<!-- csdn头像 -->
<el-card class="user_img1" style="
position: static;
margin: 2% auto auto auto;
line-height: 10px;
text-align: center;
"><a href="https://blog.csdn.net/qq_38870145">
<img class="image" src="@/assets/img/csdn.jpg" /></a>
</el-card>
</ul>
</div>
<!-- 分页 -->
<div class="block">
<!-- <span class="demonstration">完整功能</span> -->
<el-pagination
:current-page="currentPage"
:page-sizes="pageArray"
:page-size="pageSize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</el-card>
<!-- 评论 -->
<el-card
cellpadding="1px"
shadow="always"
style="position: static; margin-top: 2%"
>
<h1>{{ commmentSlogan }}</h1>
<ArticleComment
v-bind:articleId="postcomment.articleId"
ref="commentRef"
>
</ArticleComment>
</el-card>
<!-- 挑战榜 -->
<el-card
class="challenge_title1"
cellpadding="1px"
shadow="always"
style="position: static; margin-top: 2%"
>
<h1>{{ day_challenge }}</h1>
<ul
v-for="(item, index) in challenge_data"
:key="item"
class="ul_style"
>
<div
v-bind:class="[
{ li_active: index == challenge_loc },
li_errorClass,
]"
>
<li @click="cssPage(index)">{{ item }}</li>
</div>
</ul>
</el-card>
<!-- 爬虫天气接口 -->
<el-card
class="weather_class1"
cellpadding="1px"
shadow="always"
style="position: static; margin-top: 2%"
>
<div style="positon: relative; width: 100%; height: 100%">
<EchartWeather> </EchartWeather>
</div>
</el-card>
<!-- csdn头像 -->
<el-card
class="user_img1"
style="
position: static;
margin: 2% auto auto auto;
line-height: 10px;
text-align: center;
"
><a href="https://blog.csdn.net/qq_38870145">
<img class="image" src="@/assets/img/csdn.jpg"
/></a>
</el-card>
</div>
<!-- 中间 markdown-->
<div class="midclass">
<a name="home" id="hometitle" style="transition: 1s;"></a>
<el-card shadow="hover" style="line-height: 10px">
<div class="block" style="line-height: 20px">
<h1>{{ the_title }}</h1>
<div class="markdown-body" style="text-align: left">
<VueMarkdown :source="md_data[index_page]" v-highlight style="width: 100%; text-align: left"></VueMarkdown>
</div>
</div>
</el-card>
<div class="commitCard">
<!-- -->
<a name="home" id="hometitle" style="transition: 1s"></a>
<el-card shadow="hover" style="line-height: 10px">
<div class="block" style="line-height: 20px">
<h1>{{ the_title }}</h1>
<div class="markdown-body" style="text-align: left">
<VueMarkdown
:source="md_data[index_page]"
v-highlight
style="width: 100%; text-align: left"
></VueMarkdown>
</div>
</div>
<!-- 挑战榜 -->
<el-card class="challenge_title2" cellpadding="1px" shadow="always" style="position: static; margin-top: 2%">
<h1>{{ day_challenge }}</h1>
<ul v-for="(item, index) in challenge_data" :key="item" class="ul_style">
<div v-bind:class="[{ li_active:index==challenge_loc },li_errorClass]">
<li @click="cssPage(index)">{{item}}</li>
</div>
</ul>
</el-card>
<!-- 爬虫天气接口 -->
<!-- <el-card class="weather_class2"
</el-card>
<div class="commitCard">
<!-- -->
</div>
<!-- 挑战榜 -->
<el-card
class="challenge_title2"
cellpadding="1px"
shadow="always"
style="position: static; margin-top: 2%"
>
<h1>{{ day_challenge }}</h1>
<ul
v-for="(item, index) in challenge_data"
:key="item"
class="ul_style"
>
<div
v-bind:class="[
{ li_active: index == challenge_loc },
li_errorClass,
]"
>
<li @click="cssPage(index)">{{ item }}</li>
</div>
</ul>
</el-card>
<!-- 爬虫天气接口 -->
<!-- <el-card class="weather_class2"
cellpadding="1px"
shadow="always"
style="position: static; margin-top: 2%"
>
</el-card> -->
<!-- csdn头像 -->
<el-card class="user_img2" style="
position: static;
margin: 2% auto auto auto;
line-height: 10px;
text-align: center;
"><a href="https://blog.csdn.net/qq_38870145">
<img class="image" src="@/assets/img/csdn.jpg" /></a>
</el-card>
<!-- csdn头像 -->
<el-card
class="user_img2"
style="
position: static;
margin: 2% auto auto auto;
line-height: 10px;
text-align: center;
"
><a href="https://blog.csdn.net/qq_38870145">
<img class="image" src="@/assets/img/csdn.jpg"
/></a>
</el-card>
</div>
<!-- 上滑滚动图标 -->
<div class="rightclass">
<div class="righticon">
<el-card shadow="never" style="
<div class="righticon">
<el-card
shadow="never"
style="
align-content: center;
background-color: rgba(0, 0, 0, 0);
border: rgba(0, 0, 0, 0);
">
<div id="topiconid">
<el-button @click="toTop" type="info" icon="el-icon-top" style="transition: 1s;background:rgb(255, 94, 0);border:none;color:#fff;" circle></el-button>
</div>
<br /><br />
<div>
<el-button type="info" icon="el-icon-message" circle @click="open_message" style="background:rgb(255, 94, 0);border:none;">
</el-button>
</div>
<br /><br />
</el-card>
</div>
"
>
<div id="topiconid">
<el-button
@click="toTop"
type="info"
icon="el-icon-top"
style="
transition: 1s;
background: rgb(255, 94, 0);
border: none;
color: #fff;
"
circle
></el-button>
</div>
<br /><br />
<div>
<el-button
type="info"
icon="el-icon-message"
circle
@click="open_message"
style="background: rgb(255, 94, 0); border: none"
>
</el-button>
</div>
<br /><br />
</el-card>
</div>
</div>
</div>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown'
import ArticleComment from '@/comment/ArticleComment'
import EchartWeather from '@/weather/EchartWeather'
import axios from 'axios'
import VueMarkdown from "vue-markdown";
import ArticleComment from "@/comment/ArticleComment";
import EchartWeather from "@/weather/EchartWeather";
import axios from "axios";
export default {
components: {
VueMarkdown, //显示markdown的组件
ArticleComment, //子组件评论
EchartWeather //天气
components: {
VueMarkdown, //显示markdown的组件
ArticleComment, //子组件评论
EchartWeather, //天气
},
name: "Article",
data() {
return {
// baseurl: '/api/',
baseurl: "http://114.116.52.53/",
// baseurl: "http://yongma16.xyz/",
msg: "内容",
commmentSlogan: "评论区",
day_challenge: "训练营",
challenge_data: [
"css挑战",
"websocket聊天",
"echarts地图配置",
"vue3测试平台",
"更新中",
],
md_data: [],
md_title: [],
the_title: "",
sear_page: 0,
index_page: 0,
data: ["threejs加载模型"],
slogan: "记忆碎片",
tabPosition: "left",
weather_title: [],
weather_high: [],
weather_low: [],
toTopIsShow: false,
article_loc: 0,
challenge_loc: -1,
topshow: false,
userImg: "",
username: "匿名",
articleCommit: "评论区",
// 分页实现 page1 page2 指向数组
pageAnalys: {},
currentPage: 1,
splitLength: 6, //划分条数
total: 0,
pageSize: 4,
pageArray: [6, 8, 10],
postcomment: {
articleId: 1,
articleCommit: null,
},
articleId: [], //文章的id
};
},
watch: {
topshow: function (newvalue, oldvalue) {
console.log("侦听");
console.log("new", newvalue, "old", oldvalue);
if (newvalue === true) {
document.getElementById("topiconid").style.display = "none";
} else {
document.getElementById("topiconid").style.display = "block";
}
},
name: 'Article',
data() {
return {
// baseurl: '/api/',
baseurl: 'http://yongma16.xyz/',
msg: '内容',
commmentSlogan: '评论区',
day_challenge: '每日一练',
challenge_data: ['css挑战', 'websocket聊天', 'echarts地图配置', '表情包搜索', '更新中'],
md_data: [],
md_title: [],
the_title: '',
sear_page: 0,
index_page: 0,
data: ['threejs加载模型'],
slogan: 'markdown笔记',
tabPosition: 'left',
weather_title: [],
weather_high: [],
weather_low: [],
toTopIsShow: false,
article_loc: 0,
challenge_loc: -1,
topshow: false,
userImg: '',
username: '匿名',
articleCommit: '评论区',
// 分页实现 page1 page2 指向数组
pageAnalys: {},
currentPage: 1,
splitLength: 6, //划分条数
total: 0,
pageSize: 4,
pageArray: [6, 8, 10],
postcomment: {
articleId: 1,
articleCommit: null,
},
articleId: [] //文章的id
}
},
beforeDestroy() {
window.removeEventListener("onload", this.topvisible());
},
mounted() {
this.initPageSpliteFun();
window.addEventListener("onload", this.topvisible());
},
methods: {
initPageSpliteFun() {
this.splitLength = this.pageArray[0];
},
handleSizeChange(val) {
// 转到第一页md_title
let that = this;
console.log(`每页 ${val} 条`);
that.pageAnalysFun(that.pageAnalys.allTitle, val); //触发修改
},
watch: {
topshow: function (newvalue, oldvalue) {
console.log('侦听')
console.log('new', newvalue, 'old', oldvalue)
if (newvalue === true) {
document.getElementById('topiconid').style.display = 'none'
} else {
document.getElementById('topiconid').style.display = 'block'
}
handleCurrentChange(val) {
let that = this;
console.log(that.currentPage, "currentPage", that.pageAnalys.allTitle);
//触发md_title的修改
that.currentPage = val;
that.pageAnalysFun(that.pageAnalys.allTitle); //触发修改
console.log(`当前页: ${val}`);
},
pageAnalysFun(allTitleArray, selectListLength) {
let that = this;
that.total = allTitleArray.length; //总数
let splitLength = that.splitLength;
if (!selectListLength) {
that.splitLength = that.splitLength;
} else {
this.currentPage = 1;
that.splitLength = selectListLength; //划分长度
}
splitLength = that.splitLength;
console.log("一页几条", splitLength);
let splitNum = Math.ceil(that.total / splitLength); //向上取整
that.pageAnalys.childNum = splitNum; //子数组个数
that.pageAnalys.allTitle = allTitleArray; //所有标题
that.pageAnalys.titleArray = new Array(); //子数组个数
var locSplit = 0;
var locLength = splitLength; //每一页的条数
while (splitNum--) {
// 循环获取子数组
if (splitNum >= 1) {
let childArray = [];
for (
let temp = locSplit;
temp < locLength && temp < that.total;
++temp, ++locSplit
) {
childArray.push(that.pageAnalys.allTitle[temp]);
}
that.pageAnalys.titleArray.push(childArray);
locLength += splitLength; //分割数组长度后移
} else {
// 最后一个数组
let childArray = [];
for (let temp = locSplit; temp < that.total; ++temp) {
childArray.push(that.pageAnalys.allTitle[temp]);
}
that.pageAnalys.titleArray.push(childArray);
break;
}
}
try {
that.md_title = that.pageAnalys.titleArray[this.currentPage - 1];
} catch (e) {
console.log(e);
}
console.log("总数", that.pageAnalys.titleArray);
console.log("分页数据", that.pageAnalys.titleArray[this.currentPage - 1]);
console.log("当前页", that.md_title);
},
beforeDestroy() {
window.removeEventListener('onload', this.topvisible())
increment: function () {
this.$store.commit("increment");
console.log(this.$store.state.count);
},
mounted() {
this.initPageSpliteFun();
window.addEventListener('onload', this.topvisible());
topvisible: function () {
let dom = document.getElementById("hometitle");
this.topshow = this.elementIsVisibleInViewport(dom);
// console.log('this.topshow', this.topshow)
setTimeout(this.topvisible);
},
methods: {
initPageSpliteFun() {
this.splitLength = this.pageArray[0]
},
handleSizeChange(val) {
// 转到第一页md_title
let that = this
console.log(`每页 ${val} 条`)
that.pageAnalysFun(that.pageAnalys.allTitle, val) //触发修改
},
handleCurrentChange(val) {
let that = this
console.log(that.currentPage, 'currentPage', that.pageAnalys.allTitle)
//触发md_title的修改
that.currentPage = val
that.pageAnalysFun(that.pageAnalys.allTitle) //触发修改
console.log(`当前页: ${val}`)
},
pageAnalysFun(allTitleArray, selectListLength) {
let that = this
that.total = allTitleArray.length; //总数
let splitLength = that.splitLength
if (!selectListLength) {
that.splitLength = that.splitLength
} else {
this.currentPage = 1
that.splitLength = selectListLength //划分长度
}
splitLength = that.splitLength
console.log('一页几条', splitLength)
let splitNum = Math.ceil(that.total / splitLength) //向上取整
that.pageAnalys.childNum = splitNum; //子数组个数
that.pageAnalys.allTitle = allTitleArray; //所有标题
that.pageAnalys.titleArray = new Array(); //子数组个数
var locSplit = 0
var locLength = splitLength; //每一页的条数
while (splitNum--) {
// 循环获取子数组
if (splitNum >= 1) {
let childArray = []
for (let temp = locSplit; temp < locLength && temp < that.total; ++temp, ++locSplit) {
childArray.push(that.pageAnalys.allTitle[temp])
}
that.pageAnalys.titleArray.push(childArray)
locLength += splitLength; //分割数组长度后移
} else {
// 最后一个数组
let childArray = []
for (let temp = locSplit; temp < that.total; ++temp) {
childArray.push(that.pageAnalys.allTitle[temp])
}
that.pageAnalys.titleArray.push(childArray)
break;
}
}
try {
that.md_title = that.pageAnalys.titleArray[this.currentPage - 1]
} catch (e) {
console.log(e)
}
console.log('总数', that.pageAnalys.titleArray)
console.log('分页数据', that.pageAnalys.titleArray[this.currentPage - 1])
console.log('当前页', that.md_title)
},
increment: function () {
this.$store.commit('increment')
console.log(this.$store.state.count)
},
topvisible: function () {
let dom = document.getElementById('hometitle')
this.topshow = this.elementIsVisibleInViewport(dom)
// console.log('this.topshow', this.topshow)
setTimeout(this.topvisible)
},
elementIsVisibleInViewport: function (el, partiallyVisible = false) {
const {
top,
left,
bottom,
right
} = el.getBoundingClientRect()
return partiallyVisible ?
((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) :
top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth
},
li_errorClass: function () {
console.log('选择文章')
},
cssPage: function (index) {
this.challenge_loc = index
let name = this.challenge_data[index]
switch (name) {
case 'css挑战':
this.$router.push({
path: '/css'
}).catch((error) => {
console.log(error)
})
break;
case 'echarts地图配置':
this.$router.push({
path: '/home'
}).catch((error) => {
console.log(error)
})
break;
case 'websocket聊天':
this.$router.push({
path: '/onlinewebsocket'
}).catch((error) => {
console.log(error)
})
break;
case '表情包搜索':
window.open('http://yongma16.xyz/emoji/index/')
break;
default:
console.log('case name没找到')
break;
}
},
open_message: function () {
this.$notify({
title: '欢迎合作',
message: '邮箱：1432448610@qq.com',
position: 'bottom-right'
})
},
toTop: function () {
location.href = '#home' // 定位
document.getElementById('mainappid').scrollTop = 0
}, // 返回天气相当于返回顶部
getCommentsFromArticle(id) {
this.$refs.commentRef.getComments(id); //触发子组件的方法
},
getArticles: function (page) {
let that = this // this指向转化
that.article_loc = page
// 查找文章id 从1开始
that.postcomment.articleId = that.articleId[parseInt(page + ((that.currentPage - 1) * that.splitLength))]
// 提交数据 page从0开始
axios
.post(that.baseurl + 'article/index/', {
value: page + ((that.currentPage - 1) * that.splitLength)
// 传入索引
})
.then((res) => {
// alter('提交中');
// console.log(res.data)
if (res.data.code === 1) {
console.log('success return home!')
// that.$router.push({path:'/home'})
// 无需跳转
// document.cookie= `user=${that.ruleForm.name}`
// 添加cookie
console.log('获取Article')
let respdata = res.data
let content = respdata.article
that.md_data = [] // 清空
// console.log(that.md_data)
content.map((o) => {
that.md_data.push(o) // 传入一个文章
})
that.the_title = respdata.the_title
} else if (res.data.code === 0) {
// alter("失败！")
console.log('post 失败')
}
})
.catch((res) => {
console.log(res)
})
console.log('that.postcomment.articleId', that.postcomment.articleId)
that.getCommentsFromArticle(that.postcomment.articleId)
},
elementIsVisibleInViewport: function (el, partiallyVisible = false) {
const { top, left, bottom, right } = el.getBoundingClientRect();
return partiallyVisible
? ((top > 0 && top < innerHeight) ||
(bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) ||
(right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
},
li_errorClass: function () {
console.log("选择文章");
},
// mounted() {
// console.log('document滚动',document.documentElement.scrollTop);
// window.addEventListener("scroll", this.handleScroll);
// window.addEventListener("echarts", this.datasetfunc);
// },
// watch(){
// console.log('watch事件！');
// console.log('document滚动',document.documentElement.scrollTop);
// },
// destroyed() {
// console.log('document滚动',document.documentElement.scrollTop);
// // window.removeEventListener("echarts", this.datasetfunc);
// },
created: function () {
// 初始化
console.log('初始化')
let that = this
// window.οnscrοll = function () {
// //鼠标滚轮滚动距离超过10像素时，回到顶部按钮才显示
// if (document.documentElement.scrollTop > 10) {
// that.toTopIsShow = true;
// } else {
// that.toTopIsShow = false;
// }
// };
console.log('测试created！')
axios
.get(that.baseurl + 'article/index/')
.then((res) => {
console.log('获取Article', res)
let resdata = res.data
let content = resdata.article // 传递过来的文章 进行处理
let title = resdata.title
that.articleId = resdata.articleObjectId
console.log('获取ArticleId', that.articleId)
// console.log('content', content, 'title', title)
content.map((o) => {
that.md_data.push(o)
})
let titleAllArray = title.map((o) => {
return o
})
that.the_title = resdata.the_title
console.log('分页实现')
this.pageAnalysFun(titleAllArray) //分页
// that.md_data.push(res.data.article); //markdown值传递
// let weather = resdata.weather
// let high = weather.high
// let low = weather.low
// console.log('weather', weather)
// weather.title.map((o) => {
// that.weather_title.push(o)
// })
// high.map((o) => {
// that.weather_high.push(o)
// })
// low.map((o) => {
// that.weather_low.push(o)
// })
// try {
// this.datasetfunc() // 等待dom和文件加载完之后执行dataserfunc,加载天气
// } catch (e) {
// console.log(e)
// window.onload = this.datasetfunc // 等待dom
// }
cssPage: function (index) {
this.challenge_loc = index;
let name = this.challenge_data[index];
switch (name) {
case "css挑战":
this.$router
.push({
path: "/css",
})
.catch((res) => {
console.log(res)
}) // get log
}
}
.catch((error) => {
console.log(error);
});
break;
case "echarts地图配置":
this.$router
.push({
path: "/home",
})
.catch((error) => {
console.log(error);
});
break;
case "websocket聊天":
this.$router
.push({
path: "/onlinewebsocket",
})
.catch((error) => {
console.log(error);
});
break;
case "vue3测试平台":
window.open(this.baseurl + "emoji/index/");
break;
default:
console.log("case name没找到");
break;
}
},
open_message: function () {
this.$notify({
title: "欢迎合作",
message: "邮箱：1432448610@qq.com",
position: "bottom-right",
});
},
toTop: function () {
location.href = "#home"; // 定位
document.getElementById("mainappid").scrollTop = 0;
}, // 返回天气相当于返回顶部
getCommentsFromArticle(id) {
this.$refs.commentRef.getComments(id); //触发子组件的方法
},
getArticles: function (page) {
let that = this; // this指向转化
that.article_loc = page;
// 查找文章id 从1开始
that.postcomment.articleId =
that.articleId[
parseInt(page + (that.currentPage - 1) * that.splitLength)
];
// 提交数据 page从0开始
axios
.post(that.baseurl + "article/index/", {
value: page + (that.currentPage - 1) * that.splitLength,
// 传入索引
})
.then((res) => {
// alter('提交中');
// console.log(res.data)
if (res.data.code === 1) {
console.log("success return home!");
// that.$router.push({path:'/home'})
// 无需跳转
// document.cookie= `user=${that.ruleForm.name}`
// 添加cookie
console.log("获取Article");
let respdata = res.data;
let content = respdata.article;
that.md_data = []; // 清空
// console.log(that.md_data)
content.map((o) => {
that.md_data.push(o); // 传入一个文章
});
that.the_title = respdata.the_title;
} else if (res.data.code === 0) {
// alter("失败！")
console.log("post 失败");
}
})
.catch((res) => {
console.log(res);
});
console.log("that.postcomment.articleId", that.postcomment.articleId);
that.getCommentsFromArticle(that.postcomment.articleId);
},
},
// mounted() {
// console.log('document滚动',document.documentElement.scrollTop);
// window.addEventListener("scroll", this.handleScroll);
// window.addEventListener("echarts", this.datasetfunc);
// },
// watch(){
// console.log('watch事件！');
// console.log('document滚动',document.documentElement.scrollTop);
// },
// destroyed() {
// console.log('document滚动',document.documentElement.scrollTop);
// // window.removeEventListener("echarts", this.datasetfunc);
// },
created: function () {
// 初始化
console.log("初始化");
let that = this;
// window.οnscrοll = function () {
// //鼠标滚轮滚动距离超过10像素时，回到顶部按钮才显示
// if (document.documentElement.scrollTop > 10) {
// that.toTopIsShow = true;
// } else {
// that.toTopIsShow = false;
// }
// };
console.log("测试created！");
axios
.get(that.baseurl + "article/index/")
.then((res) => {
console.log("获取Article", res);
let resdata = res.data;
let content = resdata.article; // 传递过来的文章 进行处理
let title = resdata.title;
that.articleId = resdata.articleObjectId;
console.log("获取ArticleId", that.articleId);
// console.log('content', content, 'title', title)
content.map((o) => {
that.md_data.push(o);
});
let titleAllArray = title.map((o) => {
return o;
});
that.the_title = resdata.the_title;
console.log("分页实现");
this.pageAnalysFun(titleAllArray); //分页
// that.md_data.push(res.data.article); //markdown值传递
// let weather = resdata.weather
// let high = weather.high
// let low = weather.low
// console.log('weather', weather)
// weather.title.map((o) => {
// that.weather_title.push(o)
// })
// high.map((o) => {
// that.weather_high.push(o)
// })
// low.map((o) => {
// that.weather_low.push(o)
// })
// try {
// this.datasetfunc() // 等待dom和文件加载完之后执行dataserfunc,加载天气
// } catch (e) {
// console.log(e)
// window.onload = this.datasetfunc // 等待dom
// }
})
.catch((res) => {
console.log(res);
}); // get log
},
};
</script>
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
background-color: #99a9bf;
background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #b0b3b6;
background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
background-color: #b0b3b6;
background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
}
.text {
/* align-content: center; */
display: flex;
margin: 0 auto;
font-size: 14px;
/* align-content: center; */
display: flex;
margin: 0 auto;
font-size: 14px;
}
.item {
display: inline-block;
/* margin: 0 auto; */
width: 900px;
display: inline-block;
/* margin: 0 auto; */
width: 900px;
}
.box-card {
align-self: center;
align-content: center;
display: inline-block;
width: 80%;
/* padding-left:25%; */
margin: 0 auto;
/* opacity: 0.95; */
margin-top: 0px;
background-color: #ffffff;
align-self: center;
align-content: center;
display: inline-block;
width: 80%;
/* padding-left:25%; */
margin: 0 auto;
/* opacity: 0.95; */
margin-top: 0px;
background-color: #ffffff;
}
.box-cardtext {
align-self: center;
align-content: center;
display: inline-block;
width: 20%;
/* padding-left:25%; */
margin: 0 auto;
opacity: 0.9;
margin-top: 80px;
background-color: #ffffff;
align-self: center;
align-content: center;
display: inline-block;
width: 20%;
/* padding-left:25%; */
margin: 0 auto;
opacity: 0.9;
margin-top: 80px;
background-color: #ffffff;
}
.article {
opacity: 1;
/* background-color: aliceblue; */
align-content: inherit;
display: flex;
margin: 5px;
padding: 5px;
opacity: 1;
/* background-color: aliceblue; */
align-content: inherit;
display: flex;
margin: 5px;
padding: 5px;
}
/* 取消滚动并且隐藏 */
el-col::-webkit-scrollbar {
display: none;
display: none;
}
.leftclass {
position: relative;
width: 30%;
height: 100%;
overflow: auto;
margin: 5px;
position: relative;
width: 30%;
height: 100%;
overflow: auto;
margin: 5px;
}
.leftclass::-webkit-scrollbar {
display: none;
display: none;
}
.midclass {
position: relative;
width: 65%;
height: 100%;
overflow: auto;
margin: 5px;
/* scrollbar-face-color: coral; */
/* scrollbar-track-color: darkslategrey; */
position: relative;
width: 65%;
height: 100%;
overflow: auto;
margin: 5px;
/* scrollbar-face-color: coral; */
/* scrollbar-track-color: darkslategrey; */
}
.midclass::-webkit-scrollbar {
width:10px;
/* height:5px; */
/* display: none; */
}
.midclass::-webkit-scrollbar-track{
background: rgba(226, 247, 255,.5);
border-radius: 2px;
/* display: none; */
}
.midclass::-webkit-scrollbar-track-piece{
background: rgba(255, 255, 255,.1);
border-radius: 2px;
/* display: none; */
}
.midclass::-webkit-scrollbar-thumb{
background: #ff995e;
height:2px;
border-radius: 2px;
/* display: none; */
width: 10px;
/* height:5px; */
/* display: none; */
}
.midclass::-webkit-scrollbar-track {
background: rgba(226, 247, 255, 0.5);
border-radius: 2px;
/* display: none; */
}
.midclass::-webkit-scrollbar-track-piece {
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
/* display: none; */
}
.midclass::-webkit-scrollbar-thumb {
background: #ff995e;
height: 2px;
border-radius: 2px;
/* display: none; */
}
/* 评论区 */
.commitCard {
position: relative;
width: 100%;
height: 80px;
margin-top: 10px;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
margin-left: 0;
margin-right: 0;
position: relative;
width: 100%;
height: 80px;
margin-top: 10px;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
margin-left: 0;
margin-right: 0;
}
.rightclass {
position: relative;
width: 5%;
height: 100%;
overflow: hidden;
position: relative;
width: 5%;
height: 100%;
overflow: hidden;
}
.rightclass::-webkit-scrollbar {
display: none;
display: none;
}
.righticon {
position: relative;
width: 100%;
height: 100%;
top: 70%;
position: relative;
width: 100%;
height: 100%;
top: 70%;
}
.image {
width: 100%;
display: block;
width: 100%;
display: block;
}
.li_active li {
color: rgb(255, 94, 0);
color: rgb(255, 94, 0);
}
li:active {
color: rgb(245, 182, 10);
color: rgb(245, 182, 10);
}
li:link {
color: rgb(255, 94, 0);
color: rgb(255, 94, 0);
}
li:visited {
color: gold;
color: gold;
}
li:hover {
color: rgb(255, 72, 0);
cursor: pointer;
color: rgb(255, 72, 0);
cursor: pointer;
}
h1 {
color: rgb(255, 102, 0);
text-align: center;
color: rgb(255, 102, 0);
text-align: center;
}
h1:hover {
font-weight: bolder;
color: rgb(255, 72, 0);
/* color: gold; */
cursor: pointer;
font-weight: bolder;
color: rgb(255, 72, 0);
/* color: gold; */
cursor: pointer;
}
.article_box {
position: relative;
width: 100%;
height: 100%;
position: relative;
width: 100%;
height: 100%;
}
.ul_style {
position: relative;
width: 100%;
height: 100%;
position: relative;
width: 100%;
height: 100%;
}
.weather_class2 {
display: none;
display: none;
}
.user_img2 {
display: none;
display: none;
}
.challenge_title2 {
display: none;
display: none;
}
.weather_class1 {
display: block;
display: block;
}
.user_img1 {
display: block;
display: block;
}
.challenge_title1 {
display: block;
display: block;
}
@media screen and (max-width: 450px) {
.article {
display: inline-block;
max-width: 350px;
}
.leftclass {
width: 100%;
height: 50%;
max-width: 350px;
}
.midclass {
width: 100%;
max-width: 350px;
}
.rightclass {
width: 80px;
position: fixed;
float: right;
bottom: 20px;
right: -10px;
}
.article {
display: inline-block;
max-width: 350px;
}
.weather_class2 {
display: block;
}
.leftclass {
width: 100%;
height: 50%;
max-width: 350px;
}
.user_img2 {
display: block;
}
.midclass {
width: 100%;
max-width: 350px;
}
.rightclass {
width: 80px;
position: fixed;
float: right;
bottom: 20px;
right: -10px;
}
.weather_class2 {
display: block;
}
.challenge_title2 {
display: block;
}
.user_img2 {
display: block;
}
.weather_class1 {
display: none;
}
.challenge_title2 {
display: block;
}
.user_img1 {
display: none;
}
.weather_class1 {
display: none;
}
.challenge_title1 {
display: none;
}
.user_img1 {
display: none;
}
.challenge_title1 {
display: none;
}
}
</style>
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;
......@@ -126,7 +127,7 @@ export default {
};
</script>
<style scoped>
<style scoped>
.container {
position: relative;
display: flex;
......
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-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="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-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>
</template>
......@@ -68,59 +84,56 @@ 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 => {
// 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信息
console.log('return login success!')
document.cookie = `user=${that.ruleForm.name}`
that.$router.push({path: '/'})
// 添加cookie
} else if (res.data.code == 0) {
// alter("失败！")
console.log('失败', res)
}
// that.$cookies.set('')
}).catch(res => {
console.log('post失败')
console.log(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信息
console.log('return login success!')
document.cookie = `user=${that.ruleForm.name}`
that.$router.push({ path: '/' })
// 添加cookie
} else if (res.data.code == 0) {
// alter("失败！")
console.log('失败', res)
}
// that.$cookies.set('')
})
.catch((res) => {
console.log('post失败')
console.log(res)
})
} else {
alert('请输入账号密码')
console.log('请输入账号密码')
......@@ -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 {
align-content: center;
display: flex;
margin: 0 auto;
font-size: 14px;
}
.text {
align-content: center;
display:flex;
margin: 0 auto;
font-size: 14px;
}
.item {
display:flex;
margin: 0 auto;
/* width: 50%; */
}
.item {
display: flex;
margin: 0 auto;
/* width: 50%; */
}
.box-card {
align-self: center;
align-content: center;
display:flex;
width: 450px;
/* padding-left:25%; */
margin:0 auto;
opacity: 1;
margin-top:80px;
background-color: #ffffff;
}
.box-card {
align-self: center;
align-content: center;
display: flex;
width: 450px;
/* padding-left:25%; */
margin: 0 auto;
opacity: 1;
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)
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)
.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
}
}
// 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>
<div style="display: flex; height: 20%">
<el-input placeholder="请输入昵称进入聊天室" v-model="user" clearable>
</el-input>
<!-- &nbsp; -->
<!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
</div>
<div class="btn_fx"> <a @click="registerUsername()">
<span></span>
<span></span>
<span></span>
<span></span>
<p>进入聊天室</p>
</a></div>
<div class="selectInput">
<h1>欢迎进入聊天室</h1>
<div style="display: flex; height: 20%">
<el-input placeholder="请输入昵称进入聊天室" v-model="user" clearable>
</el-input>
<!-- &nbsp; -->
<!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
</div>
<div class="btn_fx">
<a @click="registerUsername()">
<span></span>
<span></span>
<span></span>
<span></span>
<p>进入聊天室</p>
</a>
</div>
</div>
</div>
<div class="left">
<el-card class="left_top">
<p>聊天室</p>
<!-- <p>人数:{{personCount}}</p> -->
<p>消息:{{ chatCount }}</p>
<div v-for="(item, index) in room_name" :key="index" class="roomNameClass">
<div v-bind:class="[
<el-card class="left_top">
<p>聊天室</p>
<!-- <p>人数:{{personCount}}</p> -->
<p>消息:{{ chatCount }}</p>
<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)">
{{ item }}
</div>
</div>
<p>{{ msg }}</p>
</el-card>
<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>
</div>
]"
@click="changeRoom(item, index)"
>
{{ item }}
</div>
</div>
<p>{{ msg }}</p>
</el-card>
<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>
</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-card>
<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-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">
<!-- {{item}} -->
<template v-if="item.room == room_select">
<div v-for="(item2, index2) in item.content" :key="index2" class="msgClass" v-bind:class="[
<el-card shadow="hover" style="line-height: 10px">
<div class="blockChat">
<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="[
{ info_active: ws_flag == true },
info_defaultClass,
]">
<div class="msgUser">
<i class="el-icon-user">{{ item2.user }} &nbsp;{{ item2.create_time }}</i>
</div>
<div class="msgMessage">
<p>{{ item2.message }}</p>
</div>
</div>
</template>
]"
>
<div class="msgUser">
<i class="el-icon-user"
>{{ item2.user }} &nbsp;{{ item2.create_time }}</i
>
</div>
</div>
<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>
<div class="msgMessage">
<p>{{ item2.message }}</p>
</div>
</div>
</template>
</div>
</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-card>
<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>
</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-card>
</el-card>
</div>
</div>
</div>
</template>
<script>
......@@ -89,751 +129,743 @@ import VueMarkdown from "vue-markdown";
import axios from "axios";
export default {
components: {
VueMarkdown,
components: {
VueMarkdown,
},
name: "Onlinewebsocket",
data() {
return {
ws_flag: false,
msg: "连接中",
send_info: "hello world!",
room_name: ["DjangoVue"],
room_select: "",
// baseUrl: "http://localhost:8006/webchat/index/",
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(),
chat_room: null,
room_loc: 0,
user: "",
cookieValue: document.cookie,
chatCount: 0,
personCount: 0,
sendmsg: "",
getmsg: "",
// 房间索引0
chatRoomIndex: 0,
// msg='连接成功'
};
},
watch() {
// cookieValue:function(newValue,oldValue){
// this.user=newValue
// console.log(newValue,oldValue)
// return newValue
// }
},
beforeDestroy() {
// window.removeEventListener("onload",this.initWebsocket());
},
mounted() {
// 判断是否登录
this.judeIsLogin();
// window.addEventListener("onload",this.initWebsocket());
},
methods: {
judeIsLogin() {
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("cookie");
// let strcookie = document.cookie; //获取cookie字符串
// let arrcookie = strcookie.split(";"); //分割
// let length = arrcookie.length;
// //遍历匹配
// for (let i = 0; i < length; i++) {
// let arr = arrcookie[i].split("=");
// let arrname = arr[0].replace(" ", "");
// // 划分为两个
// if (arrname == "user") {
// that.user = arr[1];
// let selectNameDom = document.getElementById("selectNameId");
// console.log(selectNameDom);
// selectNameDom.style.display = "none";
// }
// console.log(arrname == "user", arrname + "：" + arr[1]);
// }
},
name: "Onlinewebsocket",
data() {
return {
ws_flag: false,
msg: "连接中",
send_info: "hello world!",
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/',
websocket: null,
// room 存房间名字，content保存聊天信息的数组
chat_info: new Array(),
chat_room: null,
room_loc: 0,
user: "",
cookieValue: document.cookie,
chatCount: 0,
personCount: 0,
sendmsg: "",
getmsg: "",
// 房间索引0
chatRoomIndex: 0,
// msg='连接成功'
registerUsername() {
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "none";
//
this.initWebsocket();
this.getRoom(this.room_loc);
this.initRoom();
// this.cookiePrint(); //打印cookie
},
clearChat() {
// 清空消息
this.chatCount = 0;
this.chat_info = new Array();
// console.log('this.websocket.chat_info',this.websocket.chat_info)
// console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
this.websocket.chat_info[this.chatRoomIndex].content = [];
// console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
// this.websocket.chat_info=null;
// this.websocket.chat_info=new Array()
},
cookiePrint() {
let that = this;
console.log("cookie");
let strcookie = document.cookie; //获取cookie字符串
let arrcookie = strcookie.split(";"); //分割
let length = arrcookie.length;
//遍历匹配
for (let i = 0; i < length; i++) {
let arr = arrcookie[i].split("=");
let arrname = arr[0].replace(" ", "");
// 划分为两个
if (arrname == "user") {
that.user = arr[1];
}
console.log(arrname == "user", arrname + "：" + arr[1]);
}
},
info_defaultClass: function () {
console.log("发送消息的css");
},
room_defaultClass: function () {
console.log("选中房间的css");
},
getRoom: function (room_loc) {
// 更新index
this.room_loc = room_loc;
console.log("获取房间");
axios
.get(this.baseUrl + "webchat/index/")
.then((res) => {
console.log("返回", res);
})
.catch((error) => {
console.log("error", error);
});
},
initRoom: function () {
// 用户信息
// 日期格式化
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
S: this.getMilliseconds(), //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt;
};
this.room_select = this.room_name[0];
},
changeRoom: function (roomName, roomLoc) {
this.room_loc = roomLoc;
this.room_select = roomName;
// 新建连接
// this.initWebsocket(roomName)
console.log("选择房间", roomName);
// console.log(that)
},
initWebsocket: function (roomName) {
try {
if (this.websocket) {
this.websocket.close();
}
} catch (e) {
console.log("关闭失败！", e);
}
// 触发+1
this.personCount++;
// 默认第一个房间
let room = roomName != undefined ? roomName : this.room_name[0];
// 判断房间是否存在，不存在则创建房间
let chatRoomIndex = 0;
try {
//判断房间是否存在
let roomFlag = false;
this.chat_info.map((o, index) => {
if (o.room == roomName) {
// 房间存在
console.log("房间存在", roomName);
roomFlag = true;
chatRoomIndex = index;
}
});
if (!roomFlag) {
// 房间不存在，创建
let roomObject = {
room: room,
content: [],
};
this.chat_info.push(roomObject);
console.log("创建房间", this.chat_info);
}
} catch (e) {
console.log("创建房间出错", e);
}
this.chatRoomIndex = chatRoomIndex;
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;
this.websocket.onerror = this.websocketError;
this.websocket.onclose = this.websocketClose;
// 保存数据 临时容器 房间号
this.websocket.chat_info = JSON.parse(JSON.stringify(this.chat_info));
this.websocket.chatRoomIndex = chatRoomIndex;
console.log("实例websocket", this.websocket);
},
watch() {
// cookieValue:function(newValue,oldValue){
// this.user=newValue
// console.log(newValue,oldValue)
// return newValue
// }
websocketMessage: function (e) {
console.log("聊天信息", JSON.parse(JSON.stringify(e.data)));
let res = JSON.parse(e.data);
if (res.message.info.isTrusted) {
console.log("accsee right!");
// 人数记录,只会后加入的
}
if (true) {
// 房间计数
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;
this.getmsg = getinfo;
this.msg = this.sendmsg == this.getmsg ? "连接聊天室成功" : "";
let getTime = res.message.create_time;
let message = {
user: getUser,
message: getinfo,
create_time: getTime,
};
// 添加信息
this.websocket.chat_info[this.websocket.chatRoomIndex].content.push(
message
);
// 交换数据
this.chat_info = this.websocket.chat_info;
this.chatCount++;
console.log("信息", this.chat_info);
setTimeout((o) => {
try {
let dom = document.getElementById("idChat");
console.log("滚动前", dom.scrollTop, dom.scrollHeight);
dom.scrollTop = parseInt(dom.scrollHeight);
console.log("滚动后", dom.scrollTop, dom.scrollHeight);
dom.scrollTop = dom.scrollHeight;
// document.getElementById('idChat').scrollTop+=20
} catch (e) {
console.log(e);
}
}, 100);
}
},
beforeDestroy() {
// window.removeEventListener("onload",this.initWebsocket());
websocketOpen: function (info) {
this.websocketSend(info);
// this.send_info=''//清空
},
mounted() {
// 判断是否登录
this.judeIsLogin();
// window.addEventListener("onload",this.initWebsocket());
websocketSend: function (data) {
this.sendmsg = data;
// 名字，消息，时间
let sendData = {
person_count: this.personCount,
user: this.user,
info: data,
create_time: new Date().Format("yyyy-MM-dd HH:mm:ss"),
};
// this.msg='消息发送中'
console.log("消息发送中");
let info = JSON.stringify({
message: sendData,
});
try {
this.websocket.send(info);
// this.msg=''
} catch (e) {
console.log("消息发送失败", e);
this.msg = "连接失败";
}
},
methods: {
judeIsLogin() {
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("cookie");
// let strcookie = document.cookie; //获取cookie字符串
// let arrcookie = strcookie.split(";"); //分割
// let length = arrcookie.length;
// //遍历匹配
// for (let i = 0; i < length; i++) {
// let arr = arrcookie[i].split("=");
// let arrname = arr[0].replace(" ", "");
// // 划分为两个
// if (arrname == "user") {
// that.user = arr[1];
// let selectNameDom = document.getElementById("selectNameId");
// console.log(selectNameDom);
// selectNameDom.style.display = "none";
// }
// console.log(arrname == "user", arrname + "：" + arr[1]);
// }
},
registerUsername() {
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "none";
//
this.initWebsocket();
this.getRoom(this.room_loc);
this.initRoom();
// this.cookiePrint(); //打印cookie
},
clearChat() {
// 清空消息
this.chatCount = 0;
this.chat_info = new Array();
// console.log('this.websocket.chat_info',this.websocket.chat_info)
// console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
this.websocket.chat_info[this.chatRoomIndex].content = [];
// console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
// this.websocket.chat_info=null;
// this.websocket.chat_info=new Array()
},
cookiePrint() {
let that = this;
console.log("cookie");
let strcookie = document.cookie; //获取cookie字符串
let arrcookie = strcookie.split(";"); //分割
let length = arrcookie.length;
//遍历匹配
for (let i = 0; i < length; i++) {
let arr = arrcookie[i].split("=");
let arrname = arr[0].replace(" ", "");
// 划分为两个
if (arrname == "user") {
that.user = arr[1];
}
console.log(arrname == "user", arrname + "：" + arr[1]);
}
},
info_defaultClass: function () {
console.log("发送消息的css");
},
room_defaultClass: function () {
console.log("选中房间的css");
},
getRoom: function (room_loc) {
// 更新index
this.room_loc = room_loc;
console.log("获取房间");
axios
.get(this.baseUrl)
.then((res) => {
console.log("返回", res);
})
.catch((error) => {
console.log("error", error);
});
},
initRoom: function () {
// 用户信息
// 日期格式化
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
S: this.getMilliseconds(), //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1 ?
o[k] :
("00" + o[k]).substr(("" + o[k]).length)
);
return fmt;
};
this.room_select = this.room_name[0];
},
changeRoom: function (roomName, roomLoc) {
this.room_loc = roomLoc;
this.room_select = roomName;
// 新建连接
// this.initWebsocket(roomName)
console.log("选择房间", roomName);
// console.log(that)
},
initWebsocket: function (roomName) {
try {
if (this.websocket) {
this.websocket.close();
}
} catch (e) {
console.log('关闭失败！', e)
}
// 触发+1
this.personCount++;
// 默认第一个房间
let room = roomName != undefined ? roomName : this.room_name[0];
// 判断房间是否存在，不存在则创建房间
let chatRoomIndex = 0;
try {
//判断房间是否存在
let roomFlag = false;
this.chat_info.map((o, index) => {
if (o.room == roomName) {
// 房间存在
console.log("房间存在", roomName);
roomFlag = true;
chatRoomIndex = index;
}
});
if (!roomFlag) {
// 房间不存在，创建
let roomObject = {
room: room,
content: []
};
this.chat_info.push(roomObject);
console.log("创建房间", this.chat_info);
}
} catch (e) {
console.log("创建房间出错", e);
}
this.chatRoomIndex = chatRoomIndex;
let wsurl = this.websocketUrl;
this.websocket = new WebSocket("ws://" + wsurl + room + "/"); // 连接
console.log(this.websocket, "聊天室");
this.websocket.onmessage = this.websocketMessage; // 函数指向
this.websocket.onopen = this.websocketOpen;
this.websocket.onerror = this.websocketError;
this.websocket.onclose = this.websocketClose;
// 保存数据 临时容器 房间号
this.websocket.chat_info = JSON.parse(JSON.stringify(this.chat_info));
this.websocket.chatRoomIndex = chatRoomIndex;
console.log("实例websocket", this.websocket);
},
websocketMessage: function (e) {
console.log("聊天信息", JSON.parse(JSON.stringify(e.data)));
let res = JSON.parse(e.data);
if (res.message.info.isTrusted) {
console.log("accsee right!");
// 人数记录,只会后加入的
}
if (true) {
// 房间计数
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;
this.getmsg = getinfo;
this.msg = this.sendmsg == this.getmsg ? "连接聊天室成功" : "";
let getTime = res.message.create_time;
let message = {
user: getUser,
message: getinfo,
create_time: getTime
};
// 添加信息
this.websocket.chat_info[this.websocket.chatRoomIndex].content.push(
message
);
// 交换数据
this.chat_info = this.websocket.chat_info;
this.chatCount++;
console.log("信息", this.chat_info);
setTimeout((o) => {
try {
let dom = document.getElementById("idChat");
console.log("滚动前", dom.scrollTop, dom.scrollHeight);
dom.scrollTop = parseInt(dom.scrollHeight);
console.log("滚动后", dom.scrollTop, dom.scrollHeight);
dom.scrollTop = dom.scrollHeight;
// document.getElementById('idChat').scrollTop+=20
} catch (e) {
console.log(e);
}
}, 100);
}
},
websocketOpen: function (info) {
this.websocketSend(info);
// this.send_info=''//清空
},
websocketSend: function (data) {
this.sendmsg = data;
// 名字，消息，时间
let sendData = {
person_count: this.personCount,
user: this.user,
info: data,
create_time: new Date().Format("yyyy-MM-dd HH:mm:ss"),
};
// this.msg='消息发送中'
console.log("消息发送中");
let info = JSON.stringify({
message: sendData,
});
try {
this.websocket.send(info);
// this.msg=''
} catch (e) {
console.log("消息发送失败", e);
this.msg = "连接失败";
}
},
websocketError: function () {
this.msg = "连接失败";
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "block";
window.alert('websocket连接失败！')
// this.initWebsocket()// 重连
},
websocketClose: function (e) {
// 人数减一
this.personCount = this.personCount > 0 ? this.personCount-- : 0;
this.msg = "离开";
console.log("离开", e);
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "block";
// 触发减一
},
websocketError: function () {
this.msg = "连接失败";
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "block";
window.alert("websocket连接失败！");
// this.initWebsocket()// 重连
},
destroyed() {
this.websocketClose(); // 关闭
websocketClose: function (e) {
// 人数减一
this.personCount = this.personCount > 0 ? this.personCount-- : 0;
this.msg = "离开";
console.log("离开", e);
let selectNameDom = document.getElementById("selectNameId");
console.log(selectNameDom);
selectNameDom.style.display = "block";
// 触发减一
},
},
destroyed() {
this.websocketClose(); // 关闭
},
};
</script>
<style scoped>
.selectName {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
/* display: fixed; */
top: 50%;
left: 50%;
z-index: 3;
/* border-radius: 10px; */
transform: translate(-50%, -50%);
background: #005aa7;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right,
#fffde4,
#005aa7);
/* Chrome 10-25, Safari 5.1-6 */
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;
opacity: 0.9;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
/* display: fixed; */
top: 50%;
left: 50%;
z-index: 3;
/* border-radius: 10px; */
transform: translate(-50%, -50%);
background: #005aa7;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fffde4, #005aa7);
/* Chrome 10-25, Safari 5.1-6 */
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;
opacity: 0.9;
}
.selectInput {
position: relative;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
position: relative;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.selectInput h1 {
font-size: 3em;
color: #fb7248;
font-size: 3em;
color: #fb7248;
}
.btn_fx {
position: relative;
padding: 20px;
/* margin:20px; */
position: relative;
padding: 20px;
/* margin:20px; */
}
.blockChat {
position: relative;
width: 100%;
display: block;
position: relative;
width: 100%;
display: block;
}
.blockChat h1 {
color: rgb(135, 187, 222);
font-size: 20px;
font-weight: bold;
color: rgb(135, 187, 222);
font-size: 20px;
font-weight: bold;
}
.msgClass {
position: relative;
width: 100%;
text-align: left;
margin-bottom: 30px;
padding-bottom: 30px;
/* background: rgba(135, 187, 222,.6); */
background: #4ca1af;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left,
#c4e0e5,
#4ca1af);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left,
#c4e0e5,
#4ca1af);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: 400%;
animation: sendInfo 20s linear infinite;
/* -webkit-background-clip: text;
position: relative;
width: 100%;
text-align: left;
margin-bottom: 30px;
padding-bottom: 30px;
/* background: rgba(135, 187, 222,.6); */
background: #4ca1af;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #c4e0e5, #4ca1af);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #c4e0e5, #4ca1af);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: 400%;
animation: sendInfo 20s linear infinite;
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.msgUser {
position: relative;
margin: 5px;
padding: 5px;
top: 50%;
width: 100%;
height: 30px;
color: rgb(0, 0, 0);
/* background: rgb(135, 187, 222); */
position: relative;
margin: 5px;
padding: 5px;
top: 50%;
width: 100%;
height: 30px;
color: rgb(0, 0, 0);
/* background: rgb(135, 187, 222); */
}
.msgMessage {
position: relative;
position: relative;
width: 100%;
height: 50px;
font-size: 20px;
color: rgb(0, 0, 0);
/* background: rgb(135, 187, 222); */
width: 100%;
height: 50px;
font-size: 20px;
color: rgb(0, 0, 0);
/* background: rgb(135, 187, 222); */
}
.msgMessage p {
position: relative;
/* left:50%; */
margin: 5px;
padding: 5px;
top: 50%;
position: relative;
/* left:50%; */
margin: 5px;
padding: 5px;
top: 50%;
}
.left_top {
position: relative;
cursor: pointer;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
cursor: pointer;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left_top p {
font-size: 20px;
margin-bottom: 5px;
padding-bottom: 5px;
font-size: 20px;
margin-bottom: 5px;
padding-bottom: 5px;
}
.roomNameClass {
position: relative;
cursor: pointer;
position: relative;
cursor: pointer;
}
.room_active {
appearance: none;
position: relative;
text-align: left;
width: 100%;
height: 100%;
font-weight: bold;
color: rgb(135, 187, 222);
text-shadow: 0 5px 20px #fff;
background: transparent;
cursor: pointer;
line-height: 20px;
/* padding-top:10px; */
/* transition: 0.5s; */
appearance: none;
position: relative;
text-align: left;
width: 100%;
height: 100%;
font-weight: bold;
color: rgb(135, 187, 222);
text-shadow: 0 5px 20px #fff;
background: transparent;
cursor: pointer;
line-height: 20px;
/* padding-top:10px; */
/* transition: 0.5s; */
}
.room_defaultClass {
appearance: none;
position: relative;
text-align: left;
width: 100%;
height: 100%;
font-weight: bold;
color: rgb(0, 140, 255);
background: transparent;
cursor: pointer;
line-height: 20px;
/* padding-top:10px; */
/* transition: 0.5s; */
appearance: none;
position: relative;
text-align: left;
width: 100%;
height: 100%;
font-weight: bold;
color: rgb(0, 140, 255);
background: transparent;
cursor: pointer;
line-height: 20px;
/* padding-top:10px; */
/* transition: 0.5s; */
}
.info_active {
position: relative;
width: 100%;
text-align: left;
margin-bottom: 30px;
padding-bottom: 30px;
background: #5d4157;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #a8caba, #5d4157);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #a8caba, #5d4157);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: 400%;
animation: sendInfo 2s linear infinite;
position: relative;
width: 100%;
text-align: left;
margin-bottom: 30px;
padding-bottom: 30px;
background: #5d4157;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #a8caba, #5d4157);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #a8caba, #5d4157);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: 400%;
animation: sendInfo 2s linear infinite;
}
.info_defaultClass {
position: relative;
width: 100%;
text-align: left;
margin-bottom: 30px;
padding-bottom: 30px;
background: rgba(135, 187, 222, 0.6);
background-image: linear-gradient(to right, #9b63ff, #462188);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
width: 100%;
text-align: left;
margin-bottom: 30px;
padding-bottom: 30px;
background: rgba(135, 187, 222, 0.6);
background-image: linear-gradient(to right, #9b63ff, #462188);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes sendInfo {
0% {
background-position: 0% 50%;
}
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
position: relative;
height: 100%;
width: 100%;
opacity: 1;
/* overflow: hidden; */
/* background-color: aliceblue; */
align-content: inherit;
display: flex;
margin: 0;
padding: 0;
background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
/* background-size: cover; */
background-repeat: repeat-y;
position: relative;
height: 100%;
width: 100%;
opacity: 1;
/* overflow: hidden; */
/* background-color: aliceblue; */
align-content: inherit;
display: flex;
margin: 0;
padding: 0;
background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
/* background-size: cover; */
background-repeat: repeat-y;
}
/* 取消滚动并且隐藏 */
.container::-webkit-scrollbar,
.left::-webkit-scrollbar .right::-webkit-scrollbar {
display: none;
display: none;
}
.left {
position: relative;
width: 30%;
height: 100%;
overflow: auto;
margin: 5px;
padding: 5px;
position: relative;
width: 30%;
height: 100%;
overflow: auto;
margin: 5px;
padding: 5px;
}
.right {
position: relative;
width: 70%;
height: 100%;
overflow: auto;
margin: 5px;
padding: 5px;
position: relative;
width: 70%;
height: 100%;
overflow: auto;
margin: 5px;
padding: 5px;
}
.text {
font-size: 14px;
font-size: 14px;
}
.item {
padding: 18px 0;
padding: 18px 0;
}
.box-card {
width: 100%;
width: 100%;
}
.input_chat1 {
/* position: static; */
margin-top: 5%;
text-align: letf;
line-height: 50px;
/* background: cadetblue; */
/* position: static; */
margin-top: 5%;
text-align: letf;
line-height: 50px;
/* background: cadetblue; */
}
.input_chat2 {
/* position: static; */
margin-top: 5%;
text-align: letf;
line-height: 50px;
background: cadetblue;
display: none;
/* position: static; */
margin-top: 5%;
text-align: letf;
line-height: 50px;
background: cadetblue;
display: none;
}
.selectName a {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 80px;
overflow: hidden;
margin: 0;
padding: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 80px;
overflow: hidden;
margin: 0;
padding: 0;
}
.selectName a p {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
line-height: 80px;
appearance: none;
font-size: 2em;
text-transform: uppercase;
color: #fb7248;
border: 1px solid #fb7248;
box-sizing: border-box;
z-index: 1;
transition: 0.5s;
margin: 0;
padding: 0;
position: absolute;
text-align: center;
width: 100%;
height: 100%;
line-height: 80px;
appearance: none;
font-size: 2em;
text-transform: uppercase;
color: #fb7248;
border: 1px solid #fb7248;
box-sizing: border-box;
z-index: 1;
transition: 0.5s;
margin: 0;
padding: 0;
}
.selectName a:hover p {
color: #fff;
color: #fff;
}
.selectName a span {
position: absolute;
width: 100%;
height: 100%;
background: #fb7248;
opacity: 0.5;
z-index: -1;
transition: 0.5s;
position: absolute;
width: 100%;
height: 100%;
background: #fb7248;
opacity: 0.5;
z-index: -1;
transition: 0.5s;
}
.selectName a span:nth-child(1) {
top: -100%;
left: -100%;
top: -100%;
left: -100%;
}
.selectName a span:nth-child(2) {
bottom: -100%;
left: -100%;
bottom: -100%;
left: -100%;
}
.selectName a span:nth-child(3) {
top: -100%;
right: -100%;
top: -100%;
right: -100%;
}
.selectName a span:nth-child(4) {
bottom: -100%;
right: -100%;
bottom: -100%;
right: -100%;
}
.selectName a:hover span:nth-child(1) {
top: 0px;
left: 0px;
top: 0px;
left: 0px;
}
.selectName a:hover span:nth-child(2) {
bottom: 0px;
left: 0px;
bottom: 0px;
left: 0px;
}
.selectName a:hover span:nth-child(3) {
top: 0px;
right: 0px;
top: 0px;
right: 0px;
}
.selectName a:hover span:nth-child(4) {
bottom: 0px;
right: 0px;
bottom: 0px;
right: 0px;
}
@media screen and (max-width: 450px) {
.selectName a {
width: 100px;
height: 50px;
}
.selectName a p {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
line-height: 50px;
font-size: 1em;
}
.selectInput h1 {
font-size: 2em;
color: #fb7248;
}
.container {
background-color: lightblue;
display: inline-block;
box-sizing: border-box;
background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
background-repeat: repeat-y;
/* overflow: hidden; */
}
.left {
/* top:60%; */
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin: 5px;
padding: 5px;
}
.right {
/* top:5%; */
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin: 5px;
padding: 5px;
}
.input_chat1 {
display: none;
}
.input_chat2 {
/* position: static; */
margin-top: 5%;
width: 100%;
text-align: letf;
line-height: 50px;
background: cadetblue;
display: inline-block;
}
.selectName a {
width: 100px;
height: 50px;
}
.selectName a p {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
line-height: 50px;
font-size: 1em;
}
.selectInput h1 {
font-size: 2em;
color: #fb7248;
}
.container {
background-color: lightblue;
display: inline-block;
box-sizing: border-box;
background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
background-repeat: repeat-y;
/* overflow: hidden; */
}
.left {
/* top:60%; */
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin: 5px;
padding: 5px;
}
.right {
/* top:5%; */
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin: 5px;
padding: 5px;
}
.input_chat1 {
display: none;
}
.input_chat2 {
/* position: static; */
margin-top: 5%;
width: 100%;
text-align: letf;
line-height: 50px;
background: cadetblue;
display: inline-block;
}
}
</style>
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-item>
<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>
<!-- 成功注册！ -->
<!-- 弹出一个警告框 -->
<el-alert title="这个用户名已经被使用！" type="warning" v-if='register_error'>
</el-alert>
<!-- 成功注册！ -->
<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>
<!-- <svg
<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>
<!-- <svg
class="icon"
aria-hidden="true"
>
<use xlink:href="#iconshejitouxiangai"></use>
</svg> -->
</el-form-item>
</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="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-form-item>
<el-form-item label="确认" prop="checkPass">
<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 @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-form-item label="密码" prop="pass">
<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-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: '/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')
if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass");
}
callback()
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
}
)
name: that.ruleForm.name,
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>
<!-- 表格 -->
<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>
</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',
data() {
return {
msg: '贵阳天气',
baseurl: 'http://yongma16.xyz/article/weather/',
// baseurl: 'api/article/weather/',
tabPosition: 'left',
weather_title: [],
weather_high: [],
weather_low: [],
weather_discribe: [],
weather_windem:[],
weather_windwl:[],
tableData: []
}
},
mounted() {
this.initWeatherLine()
name: "EchartWeather",
data() {
return {
msg: "贵阳天气",
baseurl: "http://114.116.52.53/",
// baseurl: 'http://yongma16.xyz/',
// baseurl: 'api/article/weather/',
tabPosition: "left",
weather_title: [],
weather_high: [],
weather_low: [],
weather_discribe: [],
weather_windem: [],
weather_windwl: [],
tableData: [],
};
},
mounted() {
this.initWeatherLine();
},
methods: {
initWeatherLine() {
let that = this;
async function waitGetWeatherData() {
await that.getWeatherData();
await that.weatherInint();
}
waitGetWeatherData().then((o) => {
console.log(o);
}); // 同步
},
methods: {
initWeatherLine() {
let that = this
async function waitGetWeatherData() {
await that.getWeatherData()
await that.weatherInint()
}
waitGetWeatherData().then(o => {
console.log(o)
}) // 同步
},
getWeatherData() {
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 = []
title.map((item) => {
that.weather_title.push(item)
})
high.map((o) => {
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])
discribe.map((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)
}
console.log(that.tableData, 'that.tableData')
}).catch(r => {
console.log('r', r)
})
}, 1000)
resolve('获取后端天气成功的promise')
getWeatherData() {
let that = this;
return new Promise((resolve) => {
setTimeout(function () {
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);
});
high.map((o) => {
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]);
discribe.map((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);
}
console.log(that.tableData, "that.tableData");
})
},
weatherInint() {
// 基于准备好的dom，初始化echarts实例
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')
// console.log('dom', dom)
var myChart = echarts.init(dom)
// 绘制图表
var option = {
title: {
text: that.msg,
subtext: '气温°C'
},
tooltip: {
trigger: 'axis'
},
// legend: {
// data: ['最高', '最低']
// },
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['bar', 'line']
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: titleData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
}
.catch((r) => {
console.log("r", r);
});
}, 1000);
resolve("获取后端天气成功的promise");
});
},
weatherInint() {
// 基于准备好的dom，初始化echarts实例
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");
// console.log('dom', dom)
var myChart = echarts.init(dom);
// 绘制图表
var option = {
title: {
text: that.msg,
subtext: "气温°C",
},
tooltip: {
trigger: "axis",
},
// legend: {
// data: ['最高', '最低']
// },
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: "none",
},
dataView: {
readOnly: false,
},
magicType: {
type: ["bar", "line"],
},
restore: {},
saveAsImage: {},
},
},
xAxis: {
type: "category",
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: [{
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'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
}
myChart.setOption(option) // 画折线图
window.onresize = function () {
myChart.resize()
}
}, 3000)
resolve('绘制折线图Promise')
})
// dom = null; //销毁
}
type: "max",
name: "最高点",
},
],
],
},
},
],
};
myChart.setOption(option); // 画折线图
window.onresize = function () {
myChart.resize();
};
}, 3000);
resolve("绘制折线图Promise");
});
// dom = null; //销毁
},
}
},
};
</script>
<style scoped>
.weather {
position: relative;
width: 100%;
height: 100%;
position: relative;
width: 100%;
height: 100%;
}
#echart_weather {
position: relative;
width: 100%;
height: 300px;
position: relative;
width: 100%;
height: 300px;
}
.weatherDiscribe {
position: relative;
margin-top: 5px;
width: 100%;
height: auto;
left: 50%;
transform: translateX(-50%);
position: relative;
margin-top: 5px;
width: 100%;
height: auto;
left: 50%;
transform: translateX(-50%);
}
#customers {
position: relative;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
left: 50%;
top: 50%;
transform: translateX(-50%, -50%);
position: relative;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
left: 50%;
top: 50%;
transform: translateX(-50%, -50%);
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或