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 @@ ...@@ -197,7 +197,7 @@
type="info" type="info"
icon="el-icon-message" icon="el-icon-message"
circle circle
@click="open_message" @click="openDraw"
style="background: rgb(255, 94, 0); border: none" style="background: rgb(255, 94, 0); border: none"
> >
</el-button> </el-button>
...@@ -206,44 +206,54 @@ ...@@ -206,44 +206,54 @@
</el-card> </el-card>
</div> </div>
</div> </div>
<template>
<Email v-if="drawObj.show" :drawObj="drawObj"></Email>
</template>
</div> </div>
</template> </template>
<script> <script>
import VueMarkdown from 'vue-markdown' import Email from '@/components/email/Email'
import ArticleComment from '@/comment/ArticleComment' import VueMarkdown from "vue-markdown";
import EchartWeather from '@/weather/EchartWeather' import ArticleComment from "@/comment/ArticleComment";
import axios from 'axios' import EchartWeather from "@/weather/EchartWeather";
import axios from "axios";
export default { export default {
components: { components: {
VueMarkdown, // 显示markdown的组件 VueMarkdown, // 显示markdown的组件
ArticleComment, // 子组件评论 ArticleComment, // 子组件评论
EchartWeather // 天气 EchartWeather, // 天气
Email
}, },
name: 'Article', name: "Article",
data () { data() {
return { return {
msgDrawTitle:'~邮件沟通~',
direction:'rtl',
drawObj: {
show:false
},
// baseurl: '/api/', // baseurl: '/api/',
baseurl: '/api/', baseurl: "/api/",
// baseurl: "http://yongma16.xyz/", // baseurl: "http://yongma16.xyz/",
msg: '内容', msg: "内容",
commmentSlogan: '评论区', commmentSlogan: "评论区",
day_challenge: '训练营', day_challenge: "训练营",
challenge_data: [ challenge_data: [
'css挑战', "css挑战",
'websocket聊天', "websocket聊天",
'echarts地图配置', "echarts地图配置",
'vue3测试平台', "vue3测试平台",
'更新中' "更新中",
], ],
md_data: [], md_data: [],
md_title: [], md_title: [],
the_title: '', the_title: "",
sear_page: 0, sear_page: 0,
index_page: 0, index_page: 0,
data: ['threejs加载模型'], data: ["threejs加载模型"],
slogan: '记忆碎片', slogan: "记忆碎片",
tabPosition: 'left', tabPosition: "left",
weather_title: [], weather_title: [],
weather_high: [], weather_high: [],
weather_low: [], weather_low: [],
...@@ -251,9 +261,9 @@ export default { ...@@ -251,9 +261,9 @@ export default {
article_loc: 0, article_loc: 0,
challenge_loc: -1, challenge_loc: -1,
topshow: false, topshow: false,
userImg: '', userImg: "",
username: '匿名', username: "匿名",
articleCommit: '评论区', articleCommit: "评论区",
// 分页实现 page1 page2 指向数组 // 分页实现 page1 page2 指向数组
pageAnalys: {}, pageAnalys: {},
currentPage: 1, currentPage: 1,
...@@ -263,225 +273,231 @@ export default { ...@@ -263,225 +273,231 @@ export default {
pageArray: [6, 8, 10], pageArray: [6, 8, 10],
postcomment: { postcomment: {
articleId: undefined, articleId: undefined,
articleCommit: null articleCommit: null,
}, },
articleId: [] // 文章的id articleId: [], // 文章的id
} };
}, },
watch: { watch: {
topshow: function (newvalue, oldvalue) { topshow: function (newvalue, oldvalue) {
if (newvalue === true) { if (newvalue === true) {
document.getElementById('topiconid').style.display = 'none' document.getElementById("topiconid").style.display = "none";
} else { } else {
document.getElementById('topiconid').style.display = 'block' document.getElementById("topiconid").style.display = "block";
} }
} },
}, },
beforeDestroy () { beforeDestroy() {
window.removeEventListener('onload', this.topvisible()) window.removeEventListener("onload", this.topvisible());
}, },
mounted () { mounted() {
this.initPageSpliteFun() this.initPageSpliteFun();
window.addEventListener('onload', this.topvisible()) window.addEventListener("onload", this.topvisible());
}, },
methods: { methods: {
initPageSpliteFun () { initPageSpliteFun() {
this.splitLength = this.pageArray[0] this.splitLength = this.pageArray[0];
}, },
handleSizeChange (val) { handleSizeChange(val) {
// 转到第一页md_title // 转到第一页md_title
let that = this let that = this;
that.pageAnalysFun(that.pageAnalys.allTitle, val) // 触发修改 that.pageAnalysFun(that.pageAnalys.allTitle, val); // 触发修改
}, },
handleCurrentChange (val) { handleCurrentChange(val) {
let that = this let that = this;
// 触发md_title的修改 // 触发md_title的修改
that.currentPage = val that.currentPage = val;
that.pageAnalysFun(that.pageAnalys.allTitle) // 触发修改 that.pageAnalysFun(that.pageAnalys.allTitle); // 触发修改
}, },
pageAnalysFun (allTitleArray, selectListLength) { pageAnalysFun(allTitleArray, selectListLength) {
let that = this let that = this;
that.total = allTitleArray.length // 总数 that.total = allTitleArray.length; // 总数
let splitLength = that.splitLength let splitLength = that.splitLength;
if (!selectListLength) { if (!selectListLength) {
that.splitLength = that.splitLength that.splitLength = that.splitLength;
} else { } else {
this.currentPage = 1 this.currentPage = 1;
that.splitLength = selectListLength // 划分长度 that.splitLength = selectListLength; // 划分长度
} }
splitLength = that.splitLength splitLength = that.splitLength;
let splitNum = Math.ceil(that.total / splitLength) // 向上取整 let splitNum = Math.ceil(that.total / splitLength); // 向上取整
that.pageAnalys.childNum = splitNum // 子数组个数 that.pageAnalys.childNum = splitNum; // 子数组个数
that.pageAnalys.allTitle = allTitleArray // 所有标题 that.pageAnalys.allTitle = allTitleArray; // 所有标题
that.pageAnalys.titleArray = new Array() // 子数组个数 that.pageAnalys.titleArray = new Array(); // 子数组个数
let locSplit = 0 let locSplit = 0;
let locLength = splitLength // 每一页的条数 let locLength = splitLength; // 每一页的条数
while (splitNum--) { while (splitNum--) {
// 循环获取子数组 // 循环获取子数组
if (splitNum >= 1) { if (splitNum >= 1) {
let childArray = [] let childArray = [];
for ( for (
let temp = locSplit; let temp = locSplit;
temp < locLength && temp < that.total; temp < locLength && temp < that.total;
++temp, ++locSplit ++temp, ++locSplit
) { ) {
childArray.push(that.pageAnalys.allTitle[temp]) childArray.push(that.pageAnalys.allTitle[temp]);
} }
that.pageAnalys.titleArray.push(childArray) that.pageAnalys.titleArray.push(childArray);
locLength += splitLength // 分割数组长度后移 locLength += splitLength; // 分割数组长度后移
} else { } else {
// 最后一个数组 // 最后一个数组
let childArray = [] let childArray = [];
for (let temp = locSplit; temp < that.total; ++temp) { 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) that.pageAnalys.titleArray.push(childArray);
break break;
} }
} }
try { try {
that.md_title = that.pageAnalys.titleArray[this.currentPage - 1] that.md_title = that.pageAnalys.titleArray[this.currentPage - 1];
} catch (e) { } catch (e) {
throw Error(e) throw Error(e);
} }
}, },
increment: function () { increment: function () {
this.$store.commit('increment') this.$store.commit("increment");
}, },
topvisible: function () { topvisible: function () {
let dom = document.getElementById('hometitle') let dom = document.getElementById("hometitle");
this.topshow = this.elementIsVisibleInViewport(dom) this.topshow = this.elementIsVisibleInViewport(dom);
setTimeout(this.topvisible) setTimeout(this.topvisible);
}, },
elementIsVisibleInViewport: function (el, partiallyVisible = false) { elementIsVisibleInViewport: function (el, partiallyVisible = false) {
try { try {
const { top, left, bottom, right } = el.getBoundingClientRect() if (el && el.getBoundingClientRect instanceof Function) {
return partiallyVisible const { top, left, bottom, right } = el.getBoundingClientRect();
? ((top > 0 && top < innerHeight) || return partiallyVisible
(bottom > 0 && bottom < innerHeight)) && ? ((top > 0 && top < innerHeight) ||
((left > 0 && left < innerWidth) || (bottom > 0 && bottom < innerHeight)) &&
(right > 0 && right < innerWidth)) ((left > 0 && left < innerWidth) ||
: top >= 0 && (right > 0 && right < innerWidth))
left >= 0 && : top >= 0 &&
bottom <= innerHeight && left >= 0 &&
right <= innerWidth bottom <= innerHeight &&
right <= innerWidth;
}
} catch (r) { } catch (r) {
throw Error(r) throw Error(r);
} }
}, },
li_errorClass: function () {}, li_errorClass: function () {},
cssPage: function (index) { cssPage: function (index) {
this.challenge_loc = index this.challenge_loc = index;
let name = this.challenge_data[index] let name = this.challenge_data[index];
switch (name) { switch (name) {
case 'css挑战': case "css挑战":
this.$router this.$router
.push({ .push({
path: '/css' path: "/css",
}) })
.catch((error) => { .catch((error) => {
throw Error(error) throw Error(error);
}) });
break break;
case 'echarts地图配置': case "echarts地图配置":
this.$router this.$router
.push({ .push({
path: '/home' path: "/home",
}) })
.catch((error) => { .catch((error) => {
throw Error(error) throw Error(error);
}) });
break break;
case 'websocket聊天': case "websocket聊天":
this.$router this.$router
.push({ .push({
path: '/onlinewebsocket' path: "/onlinewebsocket",
}) })
.catch((error) => { .catch((error) => {
throw Error(error) throw Error(error);
}) });
break break;
case 'vue3测试平台': case "vue3测试平台":
window.open('http://yongma16.xyz/emoji_api/') window.open("http://yongma16.xyz/emoji_api/");
break break;
default: default:
break break;
} }
}, },
open_message: function () { open_message: function () {
this.$notify({ this.$notify({
title: '欢迎合作', title: "欢迎合作",
message: '邮箱：1432448610@qq.com', message: "邮箱：1432448610@qq.com",
position: 'bottom-right' position: "bottom-right",
}) });
}, },
openDraw() {
this.drawObj.show = true;
},
toTop: function () { toTop: function () {
location.href = '#home' // 定位 location.href = "#home"; // 定位
document.getElementById('mainappid').scrollTop = 0 document.getElementById("mainappid").scrollTop = 0;
}, // 返回天气相当于返回顶部 }, // 返回天气相当于返回顶部
getCommentsFromArticle (id) { getCommentsFromArticle(id) {
this.$refs.commentRef.getComments(id) // 触发子组件的方法 this.$refs.commentRef.getComments(id); // 触发子组件的方法
}, },
getArticles: function (page) { getArticles: function (page) {
let that = this // this指向转化 let that = this; // this指向转化
that.article_loc = page that.article_loc = page;
// 查找文章id 从1开始 // 查找文章id 从1开始
that.postcomment.articleId = that.postcomment.articleId =
that.articleId[ that.articleId[
parseInt(page + (that.currentPage - 1) * that.splitLength) parseInt(page + (that.currentPage - 1) * that.splitLength)
] ];
// 提交数据 page从0开始 // 提交数据 page从0开始
axios axios
.post(that.baseurl + 'article/index/', { .post(that.baseurl + "article/index/", {
value: page + (that.currentPage - 1) * that.splitLength value: page + (that.currentPage - 1) * that.splitLength,
// 传入索引 // 传入索引
}) })
.then((res) => { .then((res) => {
if (res.data.code === 1) { if (res.data.code === 1) {
let respdata = res.data let respdata = res.data;
let content = respdata.article let content = respdata.article;
that.md_data = [] // 清空 that.md_data = []; // 清空
content.map((o) => { content.map((o) => {
that.md_data.push(o) // 传入一个文章 that.md_data.push(o); // 传入一个文章
}) });
that.the_title = respdata.the_title that.the_title = respdata.the_title;
} else if (res.data.code === 0) { } else if (res.data.code === 0) {
// alter("失败！") // alter("失败！")
that.$message.error('失败') that.$message.error("失败");
} }
}) })
.catch((error) => { .catch((error) => {
throw Error(error) throw Error(error);
}) });
that.getCommentsFromArticle(that.postcomment.articleId) that.getCommentsFromArticle(that.postcomment.articleId);
} },
}, },
created: function () { created: function () {
// 初始化 // 初始化
let that = this let that = this;
axios axios
.get(that.baseurl + 'article/index/') .get(that.baseurl + "article/index/")
.then((res) => { .then((res) => {
let resdata = res.data let resdata = res.data;
let content = resdata.article // 传递过来的文章 进行处理 let content = resdata.article; // 传递过来的文章 进行处理
let title = resdata.title let title = resdata.title;
that.articleId = resdata.articleObjectId that.articleId = resdata.articleObjectId;
that.postcomment.articleId = resdata.articleId that.postcomment.articleId = resdata.articleId;
this.$refs.commentRef.getComments(that.postcomment.articleId) // 触发子组件的方法 this.$refs.commentRef.getComments(that.postcomment.articleId); // 触发子组件的方法
content.map((o) => { content.map((o) => {
that.md_data.push(o) that.md_data.push(o);
}) });
let titleAllArray = title.map((o) => { let titleAllArray = title.map((o) => {
return o return o;
}) });
that.the_title = resdata.the_title that.the_title = resdata.the_title;
this.pageAnalysFun(titleAllArray) // 分页 this.pageAnalysFun(titleAllArray); // 分页
}) })
.catch((r) => { .catch((r) => {
throw Error(r) throw Error(r);
}) // get log }); // get log
} },
} };
</script> </script>
<style scoped> <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.
先完成此消息的编辑！
想要评论请 注册 或