前台用户界面基本完成
This commit is contained in:
@@ -15,7 +15,7 @@
|
||||
<el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
|
||||
</el-menu>
|
||||
<SearchInput class="HeaderInput"></SearchInput>
|
||||
<el-button v-if="this.$route.path!=='/paper'" class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
|
||||
<el-button @click="openPublishProjects" v-if="this.$route.path!=='/paper'" class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
|
||||
<el-button @click="openPublishDialog" v-if="this.$route.path ==='/paper'" class="HeaderSubmitBtn" type="primary" round icon="el-icon-edit">发布文章</el-button>
|
||||
|
||||
<el-dialog
|
||||
@@ -24,13 +24,111 @@
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div slot="title" class="dialog-title" style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center">
|
||||
<div slot="title" class="dialog-title" style="display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center">
|
||||
<span class="title-text" style="font-size: 18px;font-weight: bold;">发布文章</span>
|
||||
</div>
|
||||
<div>
|
||||
<PublishArticle></PublishArticle>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="openPublishProject"
|
||||
width="55vw"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div slot="title" class="dialog-title" style="display: flex;flex-direction: column;flex-wrap: nowrap;;align-items: center">
|
||||
<span style="font-size: 16px;font-weight: bold">
|
||||
欢迎自荐/分享开源项目
|
||||
</span>
|
||||
<span style="font-size: 12px">
|
||||
通过审核的开源项目，才会在首页展示
|
||||
</span>
|
||||
</div>
|
||||
<el-card style="border: none">
|
||||
<el-form v-model="form" :rules="rules" ref="ruleForm">
|
||||
<el-form-item prop="url">
|
||||
<el-input placeholder="请输入项目地址" v-model="form.url" @blur="getNameAndCheck">
|
||||
<template slot="prepend">github:</template>
|
||||
</el-input>
|
||||
<span style="font-size: 12px;color: #9ca3af">👆 仅接受 GitHub 上的开源项目</span>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="form.title"
|
||||
placeholder="标题: 请用一句话介绍项目"
|
||||
maxlength="25"
|
||||
minlength="5"
|
||||
show-word-limit>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="tag">
|
||||
<el-select style="width: 50vw" size="medium" :multiple="true" placeholder="请选择项目标签"
|
||||
v-model="form.tag" clearable :multiple-limit="3">
|
||||
<el-option
|
||||
v-for="item in form.tags"
|
||||
:key="item.categoryId"
|
||||
:label="item.categoryName"
|
||||
:value="item.categoryId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="content">
|
||||
<span style="color: #9ca3af">描述: 请从技术栈，功能，适用场景，解决那些痛点等方面介绍项目，突出特点和闪光的亮点。</span>
|
||||
<el-tiptap style="margin-top: 5px" v-model="form.content" :readonly="false" :showMenubar="true"
|
||||
:extensions="extensions"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;flex-direction: row;justify-content: flex-end">
|
||||
<el-button type="primary" @click="submitProject" round>提交<i class="el-icon-s-promotion"></i></el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="openUploadFile"
|
||||
width="15vw"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div slot="title" class="dialog-title" style="display: flex;flex-direction: column;flex-wrap: nowrap;;align-items: center">
|
||||
<span style="font-size: 16px;font-weight: bold">
|
||||
是否要上传项目源码？
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
|
||||
<el-button @click="openFileUpload" type="success" icon="el-icon-check" circle></el-button>
|
||||
<el-button @click="closeUploadFile" type="danger" icon="el-icon-close" circle></el-button>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="openFileUploadDialog"
|
||||
width="35vw"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div style="display: flex;flex-direction: row;align-items: center;justify-content: center">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action=""
|
||||
:http-request="upload"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -38,6 +136,20 @@
|
||||
import SearchInput from "@/components/Home/SearchInput.vue";
|
||||
import PublishArticle from "@/components/Paper/PublishArticle.vue";
|
||||
import Vue from "vue";
|
||||
import {
|
||||
Blockquote,
|
||||
Bold, BulletList,
|
||||
CodeBlock, CodeView,
|
||||
Doc, FontSize, FontType, FormatClear, HardBreak,
|
||||
Heading, History, HorizontalRule,
|
||||
Iframe,
|
||||
Image, Indent, Italic, LineHeight,
|
||||
Link, ListItem, OrderedList,
|
||||
Paragraph, Preview, Print, SelectAll, Strike,
|
||||
Text, TextAlign, TextColor, TextHighlight, TodoItem, TodoList, TrailingNode,
|
||||
Underline
|
||||
} from "element-tiptap";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "HeaderComponent",
|
||||
@@ -45,9 +157,115 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
openPublishArticle:false,
|
||||
openPublishProject:false,
|
||||
openFileUploadDialog:false,
|
||||
extensions: [
|
||||
new Link,
|
||||
new Image,
|
||||
new Iframe,
|
||||
new CodeBlock,
|
||||
new Blockquote,
|
||||
new Doc(),
|
||||
new Text(),
|
||||
new Paragraph(),
|
||||
new Heading({level: 5}), // 支持多级标题，设置为5级
|
||||
new Bold({bubble: true}), // 在气泡菜单中渲染菜单按钮
|
||||
new Underline({bubble: true, menubar: false}), // 在气泡菜单而不在菜单栏中渲染菜单按钮
|
||||
new Italic(),
|
||||
new Strike(),
|
||||
new ListItem(),
|
||||
new BulletList(),
|
||||
new OrderedList(),
|
||||
new TodoItem,
|
||||
new TodoList,
|
||||
new TextAlign({alignments: ['left', 'center', 'right', 'justify'],}),
|
||||
new Indent({
|
||||
minIndent: 0,
|
||||
maxIndent: 7,
|
||||
}),
|
||||
new LineHeight({lineHeights: ['100%', '200%', '300%']}),
|
||||
new HorizontalRule,
|
||||
new HardBreak,
|
||||
new TrailingNode,
|
||||
new History,
|
||||
new FormatClear,
|
||||
new TextColor({bubble: true}),
|
||||
new TextHighlight,
|
||||
new Preview,
|
||||
new Print,
|
||||
new SelectAll,
|
||||
new FontType,
|
||||
new FontSize,
|
||||
new CodeView,
|
||||
],
|
||||
form: {
|
||||
url: null,
|
||||
title: null,
|
||||
name: null,
|
||||
tags: [],
|
||||
tag: [],
|
||||
fileList: [],
|
||||
content: null,
|
||||
},
|
||||
rules: {
|
||||
url: [
|
||||
// required：规则，o：失去焦点触发
|
||||
{required: true, message: "请输入项目地址", trigger: "blur"},
|
||||
],
|
||||
title: [{required: true, message: "请输入项目标题", trigger: "blur"}],
|
||||
content: [{required: true, message: "请输入项目描述", trigger: "blur"}],
|
||||
tag: [{required: true, message: "请选择项目标签", trigger: "blur"}],
|
||||
},
|
||||
openUploadFile:false,
|
||||
avatar_url:null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.splitUrl();
|
||||
this.categoryList();
|
||||
},
|
||||
methods:{
|
||||
upload(params){
|
||||
var that=this;
|
||||
const formData = new FormData();
|
||||
formData.append("file", params.file);
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: '/upload/commitProjectFile',
|
||||
headers:{"Content-Type": "multipart/form-data"},
|
||||
// URL 中的查询参数
|
||||
data:formData,
|
||||
params: {
|
||||
projectName: this.form.name
|
||||
}
|
||||
}).then((res)=>{
|
||||
if(res.data.code===500){
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
}else{
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, "上传成功"),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
that.openFileUploadDialog=false;
|
||||
setTimeout(()=>{
|
||||
window.location.reload();
|
||||
},500)
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
openFileUpload(){
|
||||
this.openUploadFile=false;
|
||||
this.openFileUploadDialog=true;
|
||||
},
|
||||
openPublishDialog(){
|
||||
if(this.$cookie.get('username')){
|
||||
this.openPublishArticle=true;
|
||||
@@ -58,10 +276,128 @@ export default {
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
},
|
||||
openPublishProjects(){
|
||||
if(this.$cookie.get('username')){
|
||||
this.openPublishProject=true;
|
||||
}else{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "请先登录!",
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
},
|
||||
splitUrl() {
|
||||
let url = this.form.url;
|
||||
let parts = url.split("/");
|
||||
let projectName = parts[parts.length - 1];
|
||||
let userName = parts[parts.length - 2];
|
||||
this.form.name = userName + '/' + projectName
|
||||
console.log(this.form.name);
|
||||
},
|
||||
categoryList() {
|
||||
var that = this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
|
||||
// URL 中的查询参数
|
||||
params: {}
|
||||
}).then((res) => {
|
||||
that.form.tags = res.data;
|
||||
});
|
||||
},
|
||||
getNameAndCheck() {
|
||||
if (this.form.url === null) {
|
||||
return;
|
||||
} else {
|
||||
this.splitUrl();
|
||||
this.isExist();
|
||||
this.getDetailByGitHub();
|
||||
}
|
||||
},
|
||||
closeUploadFile(){
|
||||
this.openPublishProject=false;
|
||||
this.openUploadFile=false;
|
||||
},
|
||||
submitProject(){
|
||||
if (this.form.tag) {
|
||||
this.form.tag = this.form.tag.join(",");
|
||||
}
|
||||
Object.assign({}, this.form);
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/commitProject',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
projectIco:this.avatar_url,
|
||||
projectName:this.form.name,
|
||||
projectUrl:this.form.url,
|
||||
projectTitle:this.form.title,
|
||||
projectDescription:this.form.content,
|
||||
categoryIdList:this.form.tag
|
||||
}
|
||||
}).then( (res)=> {
|
||||
if(res.data.code===200){
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
this.openPublishProject=false;
|
||||
that.openUploadFile=true
|
||||
}else{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
isExist(){
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectProjectByPname',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
projectName:this.form.name,
|
||||
}
|
||||
}).then((res) => {
|
||||
if(res.data.code===500){
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
}else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
getDetailByGitHub(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'get',
|
||||
// 请求的地址
|
||||
url: '/github/'+this.form.name,
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
|
||||
}
|
||||
}).then((res)=>{
|
||||
that.avatar_url=res.data.owner.avatar_url;
|
||||
// that.saveGithubInfo();
|
||||
});
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user