Skip to content

M
myblogVue_django

yma16 / myblogVue_django

通知 5
Star 1
Fork 0
M
myblogVue_django
提交 85d0cec1 编写于 作者: yma16's avatar yma16
浏览文件
操作

feat:反馈邮件功能

上级 d4dcc8a9
隐藏空白更改
内联 并排
Showing with 346 addition and 146 deletion
src/components/Article.vue
浏览文件 @ 85d0cec1
......@@ -197,7 +197,7 @@
type="info"
icon="el-icon-message"
circle
@click="open_message"
@click="openDraw"
style="background: rgb(255, 94, 0); border: none"
>
</el-button>
......@@ -206,44 +206,54 @@
</el-card>
</div>
</div>
<template>
<Email v-if="drawObj.show" :drawObj="drawObj"></Email>
</template>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown'
import ArticleComment from '@/comment/ArticleComment'
import EchartWeather from '@/weather/EchartWeather'
import axios from 'axios'
import Email from '@/components/email/Email'
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 // 天气
EchartWeather, // 天气
Email
},
name: 'Article',
data () {
name: "Article",
data() {
return {
msgDrawTitle:'~邮件沟通~',
direction:'rtl',
drawObj: {
show:false
},
// baseurl: '/api/',
baseurl: '/api/',
baseurl: "/api/",
// baseurl: "http://yongma16.xyz/",
msg: '内容',
commmentSlogan: '评论区',
day_challenge: '训练营',
msg: "内容",
commmentSlogan: "评论区",
day_challenge: "训练营",
challenge_data: [
'css挑战',
'websocket聊天',
'echarts地图配置',
'vue3测试平台',
'更新中'
"css挑战",
"websocket聊天",
"echarts地图配置",
"vue3测试平台",
"更新中",
],
md_data: [],
md_title: [],
the_title: '',
the_title: "",
sear_page: 0,
index_page: 0,
data: ['threejs加载模型'],
slogan: '记忆碎片',
tabPosition: 'left',
data: ["threejs加载模型"],
slogan: "记忆碎片",
tabPosition: "left",
weather_title: [],
weather_high: [],
weather_low: [],
......@@ -251,9 +261,9 @@ export default {
article_loc: 0,
challenge_loc: -1,
topshow: false,
userImg: '',
username: '匿名',
articleCommit: '评论区',
userImg: "",
username: "匿名",
articleCommit: "评论区",
// 分页实现 page1 page2 指向数组
pageAnalys: {},
currentPage: 1,
......@@ -263,225 +273,231 @@ export default {
pageArray: [6, 8, 10],
postcomment: {
articleId: undefined,
articleCommit: null
articleCommit: null,
},
articleId: [] // 文章的id
}
articleId: [], // 文章的id
};
},
watch: {
topshow: function (newvalue, oldvalue) {
if (newvalue === true) {
document.getElementById('topiconid').style.display = 'none'
document.getElementById("topiconid").style.display = "none";
} else {
document.getElementById('topiconid').style.display = 'block'
document.getElementById("topiconid").style.display = "block";
}
}
},
},
beforeDestroy () {
window.removeEventListener('onload', this.topvisible())
beforeDestroy() {
window.removeEventListener("onload", this.topvisible());
},
mounted () {
this.initPageSpliteFun()
window.addEventListener('onload', this.topvisible())
mounted() {
this.initPageSpliteFun();
window.addEventListener("onload", this.topvisible());
},
methods: {
initPageSpliteFun () {
this.splitLength = this.pageArray[0]
initPageSpliteFun() {
this.splitLength = this.pageArray[0];
},
handleSizeChange (val) {
handleSizeChange(val) {
// 转到第一页md_title
let that = this
that.pageAnalysFun(that.pageAnalys.allTitle, val) // 触发修改
let that = this;
that.pageAnalysFun(that.pageAnalys.allTitle, val); // 触发修改
},
handleCurrentChange (val) {
let that = this
handleCurrentChange(val) {
let that = this;
// 触发md_title的修改
that.currentPage = val
that.pageAnalysFun(that.pageAnalys.allTitle) // 触发修改
that.currentPage = val;
that.pageAnalysFun(that.pageAnalys.allTitle); // 触发修改
},
pageAnalysFun (allTitleArray, selectListLength) {
let that = this
that.total = allTitleArray.length // 总数
let splitLength = that.splitLength
pageAnalysFun(allTitleArray, selectListLength) {
let that = this;
that.total = allTitleArray.length; // 总数
let splitLength = that.splitLength;
if (!selectListLength) {
that.splitLength = that.splitLength
that.splitLength = that.splitLength;
} else {
this.currentPage = 1
that.splitLength = selectListLength // 划分长度
this.currentPage = 1;
that.splitLength = selectListLength; // 划分长度
}
splitLength = that.splitLength
let splitNum = Math.ceil(that.total / splitLength) // 向上取整
that.pageAnalys.childNum = splitNum // 子数组个数
that.pageAnalys.allTitle = allTitleArray // 所有标题
that.pageAnalys.titleArray = new Array() // 子数组个数
let locSplit = 0
let locLength = splitLength // 每一页的条数
splitLength = that.splitLength;
let splitNum = Math.ceil(that.total / splitLength); // 向上取整
that.pageAnalys.childNum = splitNum; // 子数组个数
that.pageAnalys.allTitle = allTitleArray; // 所有标题
that.pageAnalys.titleArray = new Array(); // 子数组个数
let locSplit = 0;
let locLength = splitLength; // 每一页的条数
while (splitNum--) {
// 循环获取子数组
if (splitNum >= 1) {
let childArray = []
let childArray = [];
for (
let temp = locSplit;
temp < locLength && temp < that.total;
++temp, ++locSplit
) {
childArray.push(that.pageAnalys.allTitle[temp])
childArray.push(that.pageAnalys.allTitle[temp]);
}
that.pageAnalys.titleArray.push(childArray)
locLength += splitLength // 分割数组长度后移
that.pageAnalys.titleArray.push(childArray);
locLength += splitLength; // 分割数组长度后移
} else {
// 最后一个数组
let childArray = []
let childArray = [];
for (let temp = locSplit; temp < that.total; ++temp) {
childArray.push(that.pageAnalys.allTitle[temp])
childArray.push(that.pageAnalys.allTitle[temp]);
}
that.pageAnalys.titleArray.push(childArray)
break
that.pageAnalys.titleArray.push(childArray);
break;
}
}
try {
that.md_title = that.pageAnalys.titleArray[this.currentPage - 1]
that.md_title = that.pageAnalys.titleArray[this.currentPage - 1];
} catch (e) {
throw Error(e)
throw Error(e);
}
},
increment: function () {
this.$store.commit('increment')
this.$store.commit("increment");
},
topvisible: function () {
let dom = document.getElementById('hometitle')
this.topshow = this.elementIsVisibleInViewport(dom)
setTimeout(this.topvisible)
let dom = document.getElementById("hometitle");
this.topshow = this.elementIsVisibleInViewport(dom);
setTimeout(this.topvisible);
},
elementIsVisibleInViewport: function (el, partiallyVisible = false) {
try {
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
if (el && el.getBoundingClientRect instanceof Function) {
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;
}
} catch (r) {
throw Error(r)
throw Error(r);
}
},
li_errorClass: function () {},
cssPage: function (index) {
this.challenge_loc = index
let name = this.challenge_data[index]
this.challenge_loc = index;
let name = this.challenge_data[index];
switch (name) {
case 'css挑战':
case "css挑战":
this.$router
.push({
path: '/css'
path: "/css",
})
.catch((error) => {
throw Error(error)
})
break
case 'echarts地图配置':
throw Error(error);
});
break;
case "echarts地图配置":
this.$router
.push({
path: '/home'
path: "/home",
})
.catch((error) => {
throw Error(error)
})
break
case 'websocket聊天':
throw Error(error);
});
break;
case "websocket聊天":
this.$router
.push({
path: '/onlinewebsocket'
path: "/onlinewebsocket",
})
.catch((error) => {
throw Error(error)
})
break
case 'vue3测试平台':
window.open('http://yongma16.xyz/emoji_api/')
break
throw Error(error);
});
break;
case "vue3测试平台":
window.open("http://yongma16.xyz/emoji_api/");
break;
default:
break
break;
}
},
open_message: function () {
this.$notify({
title: '欢迎合作',
message: '邮箱：1432448610@qq.com',
position: 'bottom-right'
})
title: "欢迎合作",
message: "邮箱：1432448610@qq.com",
position: "bottom-right",
});
},
openDraw() {
this.drawObj.show = true;
},
toTop: function () {
location.href = '#home' // 定位
document.getElementById('mainappid').scrollTop = 0
location.href = "#home"; // 定位
document.getElementById("mainappid").scrollTop = 0;
}, // 返回天气相当于返回顶部
getCommentsFromArticle (id) {
this.$refs.commentRef.getComments(id) // 触发子组件的方法
getCommentsFromArticle(id) {
this.$refs.commentRef.getComments(id); // 触发子组件的方法
},
getArticles: function (page) {
let that = this // this指向转化
that.article_loc = 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
.post(that.baseurl + "article/index/", {
value: page + (that.currentPage - 1) * that.splitLength,
// 传入索引
})
.then((res) => {
if (res.data.code === 1) {
let respdata = res.data
let content = respdata.article
that.md_data = [] // 清空
let respdata = res.data;
let content = respdata.article;
that.md_data = []; // 清空
content.map((o) => {
that.md_data.push(o) // 传入一个文章
})
that.the_title = respdata.the_title
that.md_data.push(o); // 传入一个文章
});
that.the_title = respdata.the_title;
} else if (res.data.code === 0) {
// alter("失败！")
that.$message.error('失败')
that.$message.error("失败");
}
})
.catch((error) => {
throw Error(error)
})
that.getCommentsFromArticle(that.postcomment.articleId)
}
throw Error(error);
});
that.getCommentsFromArticle(that.postcomment.articleId);
},
},
created: function () {
// 初始化
let that = this
let that = this;
axios
.get(that.baseurl + 'article/index/')
.get(that.baseurl + "article/index/")
.then((res) => {
let resdata = res.data
let content = resdata.article // 传递过来的文章 进行处理
let title = resdata.title
that.articleId = resdata.articleObjectId
that.postcomment.articleId = resdata.articleId
this.$refs.commentRef.getComments(that.postcomment.articleId) // 触发子组件的方法
let resdata = res.data;
let content = resdata.article; // 传递过来的文章 进行处理
let title = resdata.title;
that.articleId = resdata.articleObjectId;
that.postcomment.articleId = resdata.articleId;
this.$refs.commentRef.getComments(that.postcomment.articleId); // 触发子组件的方法
content.map((o) => {
that.md_data.push(o)
})
that.md_data.push(o);
});
let titleAllArray = title.map((o) => {
return o
})
that.the_title = resdata.the_title
this.pageAnalysFun(titleAllArray) // 分页
return o;
});
that.the_title = resdata.the_title;
this.pageAnalysFun(titleAllArray); // 分页
})
.catch((r) => {
throw Error(r)
}) // get log
}
}
throw Error(r);
}); // get log
},
};
</script>
<style scoped>
......
src/components/email/Email.vue 0 → 100644
浏览文件 @ 85d0cec1
<template>
<!-- 测试-->
<!-- 抽屉-->
<el-drawer
:title="msgDrawTitle"
:visible.sync="drawObj.show"
:direction="direction"
v-loading="loading"
element-loading-text="正在发送邮件..."
element-loading-spinner="el-icon-loading"
:before-close="handleDrawClose"
>
<div class="email-container">
<div class="email-content">
<el-form
ref="emailForm"
:model="emailForm"
:rules="emailForm.rules"
label-width="80px"
>
<el-form-item label="标题" prop="title">
<el-input placeholder="标题" v-model="emailForm.title" clearable>
</el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input placeholder="邮箱" v-model="emailForm.email" clearable>
</el-input>
</el-form-item>
<el-form-item label="内容" prop="content">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入邮件内容"
v-model="emailForm.content"
clearable
>
</el-input>
</el-form-item>
<div class="email-submit">
<el-button type="primary" @click="sendEmail('emailForm')"
>发送</el-button
>
</div>
</el-form>
</div>
<div class="email-footer">
<p>联系邮箱</p>
<p>1432448610@qq.com</p>
</div>
</div>
</el-drawer>
</template>
<script>
//
import axios from "axios";
export default {
props: {
drawObj: Object,
},
data() {
return {
msgDrawTitle: "~邮件沟通~",
direction: "rtl",
msgDraw: false,
baseUrl: "http://localhost:8006/",
basePath: "send-email/",
loading: false,
emailForm: {
title: "",
email: "",
content: "",
rules: {
title: [
{
type: "string",
required: true,
message: "标题不能为空",
trigger: "blur",
},
],
email: [
{
type: "string",
required: true,
message: "邮件不能为空",
trigger: "blur",
},
{
validator: (callback, value) => {
if (value) {
// 验证邮箱
let patter =
/^([0-9a-zA-Z_\.\-\])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]+)$/;
let testEmail = patter.test(value);
if (!testEmail) {
return Promise.reject("请输入正确的邮箱格式");
}
}
return Promise.resolve();
},
trigger: "blur",
},
],
content: [
{
type: "string",
required: true,
message: "内容不能为空",
trigger: "blur",
},
],
},
},
};
},
methods: {
//关闭抽屉
handleDrawClose(done) {
const that = this;
that.drawObj.show = false;
},
// 发送消息
sendEmail(formName) {
// 发送email内容
const that = this;
that.loading = true;
that.$refs[formName].validate((valid) => {
if (valid) {
const params = {
title: that.emailForm.title,
email: that.emailForm.email,
content: that.emailForm.content,
};
try {
axios.post(that.baseUrl + that.basePath, params).then((res) => {
if (res && res.code && res.code === 20000) {
that.loading = false;
that.$message({
message: "邮件发送成功！",
type: "success",
});
that.drawObj.show = false;
}else{
that.$message({
message: "邮件发送失败！",
type: "warning",
});
}
});
} catch (r) {
that.loading = false;
throw Error(r);
}
} else {
that.loading = false;
}
});
},
},
};
</script>
<style>
.email-container {
}
.email-content {
margin: 10px;
}
.email-submit {
float: right;
}
.email-title,
.email-email {
width: 50%;
margin: 10px;
display: block;
}
.email-footer {
float: left;
width: 100%;
margin-left: 30px;
text-align: left;
font-size: 12px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或