Skip to content

B
beyond-clouds-front
Commit 8f5830c2 by xuebiao
Options

博客发布页面完善

parent 0ba564f5
Showing with 257 additions and 167 deletions
components/common/cropper/src/cropper.vue
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
let that = this; let that = this;
// this.addImg(this.img) // this.addImg(this.img)
this.$refs.cropper.getCropData((e) => { this.$refs.cropper.getCropData((e) => {
this.loading = true this.loading = true;
let bytes = window.atob(e.split(',')[1]); let bytes = window.atob(e.split(',')[1]);
let array = []; let array = [];
for(let i = 0;i<bytes.length;i++){ for(let i = 0;i<bytes.length;i++){
......
components/pc/select/selectCard.vue
...@@ -129,7 +129,6 @@ export default { ...@@ -129,7 +129,6 @@ export default {
async handleSearch(){ async handleSearch(){
this.isShow = true; this.isShow = true;
this.isShow2 = true; this.isShow2 = true;
console.log(111);
if (this.value.tag !== "") { if (this.value.tag !== "") {
let tagSearch = await this.$axios.$get(config.api.get.Tag.search, { let tagSearch = await this.$axios.$get(config.api.get.Tag.search, {
params: { params: {
...@@ -138,7 +137,7 @@ export default { ...@@ -138,7 +137,7 @@ export default {
size: 12 size: 12
} }
}); });
console.log(tagSearch); //console.log(tagSearch);
this.isSearch = true; // 用于 有无搜索结果 this.isSearch = true; // 用于 有无搜索结果
this.searchList = []; this.searchList = [];
if (tagSearch.data.dataList.length !== 0) { if (tagSearch.data.dataList.length !== 0) {
......
pages/answer/release/index.vue
...@@ -22,13 +22,13 @@ ...@@ -22,13 +22,13 @@
<div class="answer-release"> <div class="answer-release">
<div class="answer-release__header"> <div class="answer-release__header">
<span>*</span> <span>*</span>
<input type="text" placeholder="请一句话说明问题，并以问号结尾"> <input type="text" v-model="questionDetail" placeholder="请一句话说明问题，并以问号结尾">
</div> </div>
<div class="answer-release__content"> <div class="answer-release__content">
<span>*</span> <span>*</span>
<div class="editor-container"> <div class="editor-container">
<mavon-editor <mavon-editor
v-model="value" v-model="questionDetail"
:toolbars="markdownOption" :toolbars="markdownOption"
class="editor" class="editor"
placeholder="问题详情...." placeholder="问题详情...."
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<span>*</span> <span>*</span>
<select-card selectType="1"></select-card> <select-card selectType="1"></select-card>
</div> </div>
<select-card selectType="2" :class-list="classList" placeholder="请选择问题分类"></select-card> <select-card selectType="2" :class-list="classList" @handleClass="handleBlogClass" placeholder="请选择问题分类"></select-card>
</div> </div>
<div class="answer-release__footer"> <div class="answer-release__footer">
<p>已自动存为草稿</p> <p>已自动存为草稿</p>
...@@ -60,88 +60,120 @@ ...@@ -60,88 +60,120 @@
</template> </template>
<script> <script>
import CardContainer from "../../../components/pc/cardContainer"; import CardContainer from "../../../components/pc/cardContainer";
import SelectCard from "../../../components/pc/select/selectCard"; import SelectCard from "../../../components/pc/select/selectCard";
import config from "../../../action/config";
export default {
components: {SelectCard, CardContainer},
data() {
return {
markdownOption: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: false, // 帮助
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
navigation: true, // 导航目录
alignleft: true, // 左对齐
subfield: true, // 单双栏模式
preview: true // 预览
},
zIndex: 100,
value: '',
lastSaveTime: new Date(),
classList: ['web', 'java', 'javascript']
}
},
methods: {
handleBlogClass(value) {
this.blogClass = value;
if(value=="web"){
this.blogClass=1
}else if(value=="java"){
this.blogClass=2
}else if(value=="javascript"){
this.blogClass=3
}
console.log(this.blogClass);
},
postQuestion(){
this.$axios.$post(config.api.post.question.release,{
categoryId: this.blogClass,
questionAbstract: "摘要",//摘要
questionDetail: this.questionDetail,
questionTitle: this.questionTitle,
tagIds: [//标签id
"java"
],
topicIds: [//话题id
"话题id"
]
export default { }).then((response)=>{
components: {SelectCard, CardContainer}, //处理response
data() { })
return {
markdownOption: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: false, // 帮助
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
navigation: true, // 导航目录
alignleft: true, // 左对齐
subfield: true, // 单双栏模式
preview: true // 预览
}, },
zIndex: 100,
value: '',
lastSaveTime: new Date(),
classList: ['web', 'java', 'javascript']
}
},
methods: {
imgAdd(pos, file) {
//添加图片，pos为位置
// 第一步.将图片上传到服务器.
let formData = new FormData();
formData.append('image', file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: {'Content-Type': 'multipart/form-data'},
}).then((url) => {
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
/**
* $vm 指为mavonEditor实例，可以通过如下两种方式获取
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
*/
$vm.$img2Url(pos, url);
})
},
imgDel(pos, url) { //删除图片，并不是修改就会触发，仅支持工具栏操作
console.log(pos);
console.log(url);
},
save() { //保存文章内容
},
intervalSave() { //自动保存
let now = new Date(); imgAdd(pos, file) {
if (now - this.lastSaveTime >= 2 * 60 * 1000) { //添加图片，pos为位置
this.lastSaveTime = now; // 第一步.将图片上传到服务器.
let formData = new FormData();
formData.append('image', file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: {'Content-Type': 'multipart/form-data'},
}).then((url) => {
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
/**
* $vm 指为mavonEditor实例，可以通过如下两种方式获取
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
*/
$vm.$img2Url(pos, url);
})
},
imgDel(pos, url) { //删除图片，并不是修改就会触发，仅支持工具栏操作
console.log(pos);
console.log(url);
},
save() { //保存文章内容
},
intervalSave() { //自动保存
let now = new Date();
if (now - this.lastSaveTime >= 2 * 60 * 1000) {
this.lastSaveTime = now;
}
},
readScreen(boolean, str){ // 预览
this.zIndex = 8000;
boolean = true;
} }
},
readScreen(boolean, str){ // 预览
this.zIndex = 8000;
boolean = true;
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
pages/blog/release/index.vue
...@@ -28,18 +28,18 @@ ...@@ -28,18 +28,18 @@
<div class="blog-release__header"> <div class="blog-release__header">
<div class="header-content"> <div class="header-content">
<span>*</span> <span>*</span>
<input type="text" placeholder="请输入文章标题" v-model="blogTitle"> <input type="text" placeholder="请输入文章标题" v-model="blogTitle" ref="blogTitle">
</div> </div>
<div class="header-content"> <div class="header-content">
<div class="select__wrap"> <div class="select__wrap">
<span>*</span> <span>*</span>
<select-card selectType="2" :class-list="classList" @handleClass="handleBlogClass" placeholder="请选择文章分类" ></select-card> <select-card selectType="2" :class-list="classList" @handleClass="handleBlogClass" ref="blogClass" placeholder="请选择文章分类" ></select-card>
</div> </div>
<input type="text" placeholder="原文链接" style="width: 461px;" v-model="originLink" > <input type="text" placeholder="相关链接" style="width: 461px;" v-model="originLink" ref="originLink">
</div> </div>
<div class="header-content"> <div class="header-content">
<span>*</span> <span>*</span>
<input type="text" placeholder="请用一句话介绍该文章" v-model="blogAbstract"> <input type="text" placeholder="请用一句话介绍该文章" v-model="blogAbstract" ref="blogAbstract">
</div> </div>
</div> </div>
<div class="blog-release__content"> <div class="blog-release__content">
...@@ -47,9 +47,10 @@ ...@@ -47,9 +47,10 @@
<div class="editor-container"> <div class="editor-container">
<mavon-editor <mavon-editor
v-model="content" v-model="content"
ref="content"
:toolbars="markdownOption" :toolbars="markdownOption"
class="editor" class="editor"
placeholder="问题详情...." placeholder="博客正文...."
:style="{zIndex: zIndex}" :style="{zIndex: zIndex}"
@imgAdd="imgAdd" @imgAdd="imgAdd"
@imgDel="imgDel" @imgDel="imgDel"
...@@ -62,9 +63,9 @@ ...@@ -62,9 +63,9 @@
<div class="blog-release__select__wrap"> <div class="blog-release__select__wrap">
<div class="select-content"> <div class="select-content">
<span>*</span> <span>*</span>
<select-card selectType="1" @handleTag="handleTagList"></select-card> <select-card selectType="1" @handleTag="handleTagList" ref="tagIds"></select-card>
</div> </div>
<select-card selectType="2" :class-list="classList.title" @handleClass="handleQuestionClass" placeholder="请选择问题分类"></select-card>
</div> </div>
<div class="choose-container"> <div class="choose-container">
<div class="input-box__wrap"> <div class="input-box__wrap">
...@@ -103,8 +104,8 @@ ...@@ -103,8 +104,8 @@
</div> </div>
<div class="blog-release__footer"> <div class="blog-release__footer">
<p class="footer__left">上传封面 <p class="footer__left">上传封面
<img :src="this.userCover" alt=""> <img :src="this.cover" alt="">
<input type="file" @change="(e)=>openCropper(e)" placeholder="上传项目封面图" accept="image/png,image/gif,image/jpeg" > <input type="file" @change="(e)=>changeToUploadCover(e)" placeholder="上传项目封面图" >
</p> </p>
<div class="footer__right"> <div class="footer__right">
<p>已自动存为草稿</p> <p>已自动存为草稿</p>
...@@ -114,7 +115,7 @@ ...@@ -114,7 +115,7 @@
</div> </div>
</div> </div>
</card-container> </card-container>
<yun-cropper :type="1" :autoCrop="false" :file="addFile" v-on:listenCropperPic="getCroppedPic"></yun-cropper>
</div> </div>
</div> </div>
</template> </template>
...@@ -125,15 +126,14 @@ ...@@ -125,15 +126,14 @@
import config from "../../../action/config"; import config from "../../../action/config";
export default { export default {
async asyncData ({ $axios }) { async asyncData ({ $axios }) {
const blogList = await $axios.$get(config.api.get.Blog.myList,{ const blogList = await $axios.$get(config.api.get.Blog.myList,{
params:{ params:{
page:1, page:1,
size:12, size:12,
} }
}); });
return {blogList:blogList.data.dataList}
return {blogList:blogList.data.dataList} },
},
components: {SelectCard, CardContainer}, components: {SelectCard, CardContainer},
data() { data() {
return { return {
...@@ -168,17 +168,24 @@ ...@@ -168,17 +168,24 @@
}, },
zIndex: 100, // 控制全屏时 zIndex: 100, // 控制全屏时
value: '', value: '',
way: '',
comment: '', comment: '',
reprint: '', reprint: '',
lastSaveTime: new Date(), lastSaveTime: new Date(),
blogClass: '', blogClass: '',
addFile:{}, addFile:{},
userCover:'', userCover:'',
cover:'', cover:'无',
originLink:'', originLink:'',
//blogAbstract:'', way:1,
questionClass: '', allowComment:true,
allowForward:true,
blogAbstract:'',
blogTitle:'',
content:'',
tagIds:'',
blogList:'',
i:0,
tagList:[],
img:"", img:"",
//classList: [{id:1,title:"web"}, {id:2,title:"java"},{id:3,title:"javascript"}] //classList: [{id:1,title:"web"}, {id:2,title:"java"},{id:3,title:"javascript"}]
classList:["web","java","javascript"] classList:["web","java","javascript"]
...@@ -188,6 +195,7 @@ ...@@ -188,6 +195,7 @@
toDetail(){ toDetail(){
this.$router.push('/detail') this.$router.push('/detail')
}, },
// 获得下拉框得内容 // 获得下拉框得内容
handleBlogClass(value) { handleBlogClass(value) {
this.blogClass = value.tag; this.blogClass = value.tag;
...@@ -206,44 +214,111 @@ ...@@ -206,44 +214,111 @@
}, },
// 获得得标签数组 // 获得得标签数组
handleTagList(tagList) { handleTagList(tagList) {
console.log(tagList); this.tagIds=tagList;
}, console.log(this.tagIds);
console.log(this.tagIds.length);
for(this.i;this.i<this.tagIds.length;this.i++){
this.tagList+=this.tagIds[this.i].tag+" "
}
openCropper(e){
this.addFile = e.target.files[0];
}, },
getCroppedPic(pic){ //上传图片
if(pic){ async changeToUploadCover(e) {
this.userCover = pic; let formData = new window.FormData();
console.log(this.cover) formData.append('file', e.target.files[0]);
//this.dataPostSaveUserInfo(1); formData.append('type', 1);
//console.log(formData);
const isLt5M = (e).target.files[0].size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('图片大小超过5M，请重新选择图片！');
return false
}
let imgResponse = await this.$axios.$post(config.api.post.Resource.file, formData);
console.log(imgResponse);
if (imgResponse.code === 0) {
this.cover = imgResponse.data;//图片地址
this.$message({
type: 'success',
message: '图片上传成功'
})
} else {
this.$message({
type: 'warning',
message: imgResponse.msg
})
} }
}, },
//参数判断
dataPost() { dataPost() {
this.cover = this.userCover; if(this.blogTitle===''){
this.$refs.blogTitle.focus();
this.$message({
message: "请输入文章标题",
type: 'warning'
});
return false;
}
if(this.blogClass===''){
this.$refs.blogClass.handleShow();
this.$refs.blogClass.$refs.select.focus();
this.$message({
message: "请选择文章分类",
type: 'warning'
});
return false;
}
if(this.blogAbstract===''){
this.$refs.blogAbstract.focus();
this.$message({
message: "请输入文章摘要（用一句话介绍该文章）",
type: 'warning'
});
return false;
}
if(this.content===''){
this.$refs.content.textAreaFocus();
if (this.originLink.slice(0, 12) === "https://www." || this.originLink.length === 0) { this.$message({
if (this.originLink.length === 0) { message: "请输入博客正文",
this.originLink = "null"; type: 'warning'
} });
if (this.cover === '') { return false;
this.dataPostSaveUserInfo(2) }
} else { if(this.tagIds===''){
this.dataPostSaveUserInfo(1) //this.$refs.tagIds.focus();
} this.$refs.tagIds.handleShow();
this.$refs.tagIds.$refs.tag.focus();
this.$message({
message: "请添加或创建您的博客标签",
type: 'warning'
});
return false;
}
} else { if(this.originLink!==''){
if(this.originLink.slice(0, 12) === "https://www."||this.originLink==="无" ){
this.dataPostSaveUserInfo();
return false;
}else if(this.originLink.slice(0, 12) !== "https://www."){
this.$refs.originLink.focus();
this.$message({ this.$message({
message: "请输入开头为https://www.的有效网址", message: "请输入开头为https://www.的有效相关链接",
type: 'warning' type: 'warning'
}) });
return false;
} }
}else{
this.originLink='无';
this.dataPostSaveUserInfo()
}
}, },
dataPostSaveUserInfo(type){
let userInfo1 = { dataPostSaveUserInfo(){
this.$axios.$post(config.api.post.Blog.release,{
allowComment: this.allowComment,//评论权限 allowComment: this.allowComment,//评论权限
allowForward: this.allowForward,//转载权限 allowForward: this.allowForward,//转载权限
blogAbstract: this.blogAbstract,//摘要 blogAbstract: this.blogAbstract,//摘要
...@@ -253,42 +328,27 @@ ...@@ -253,42 +328,27 @@
cover: this.cover,//封面图 cover: this.cover,//封面图
originLink: this.originLink, originLink: this.originLink,
tagIds: [ tagIds: [
"Java"//标签id this.tagList//标签id
],
topicIds: [
"Java"//话题id
],
viewPrivileges: this.way //1公开，0私有
};
let userInfo2 = {
allowComment: this.allowComment,//评论权限
allowForward: this.allowForward,//转载权限
blogAbstract: this.blogAbstract,//摘要
content: this.content,//内容
blogTitle: this.blogTitle,//标题
categoryId: this.blogClass,//文章类型
cover: "string",//封面图
originLink: this.originLink,
tagIds: [
"Java"//标签id
], ],
topicIds: [ topicIds: [
"Java"//话题id "null"//话题id
], ],
viewPrivileges: this.way //1公开，0私有 viewPrivileges: this.way //1公开，0私有
};
this.$axios.$post(config.api.post.Blog.release,type===1?userInfo1:userInfo2).then((response)=>{
if(response.code===0){
let user = {userAvatar:this.userAvatar}
this.$store.commit('userProfile/setUser', user);
}).then((response)=>{
if(response.code===0){
this.$message({ this.$message({
message:response.msg, message:"提交成功",
type:'success' type:'success'
}) });
/* setTimeout(() => {
this.$router.push('/personal-center/home/blog')
}, 500);*/
this.$router.push('/personal-center/home/blog')
}else{ }else{
this.$message({ this.$message({
message:response.data.errMsg, message:response.msg,
type:'warning' type:'warning'
}) })
} }
...@@ -296,13 +356,6 @@ ...@@ -296,13 +356,6 @@
}, },
imgAdd(pos, file) { imgAdd(pos, file) {
//添加图片，pos为位置 //添加图片，pos为位置
// 第一步.将图片上传到服务器. // 第一步.将图片上传到服务器.
...@@ -329,10 +382,7 @@ ...@@ -329,10 +382,7 @@
console.log(pos); console.log(pos);
console.log(url); console.log(url);
}, },
changeToUploadCover(e){
console.log(e);
this.imgSrc = 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg';
},
save() { //保存文章内容 save() { //保存文章内容
}, },
...@@ -353,6 +403,13 @@ ...@@ -353,6 +403,13 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
input{
border:1*$length solid transparent;
@extend %animate-transition;
&:focus{
border:1*$length solid #00AAE6;
}
}
.blog-release-container { .blog-release-container {
width: $pageWidth; width: $pageWidth;
margin: 24*$length auto 32*$length auto; margin: 24*$length auto 32*$length auto;
...@@ -429,6 +486,8 @@ ...@@ -429,6 +486,8 @@
.editor { .editor {
min-height: 230*$length; min-height: 230*$length;
min-width: 723*$length; min-width: 723*$length;
max-height:230*$length;
max-width: 732*$length;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment