455 lines
16 KiB
Vue
455 lines
16 KiB
Vue
<template>
|
||
<div class="header">
|
||
<div class="logo-all">
|
||
<img class="logo" src="../../assets/logo/logo.png">
|
||
<span class="HeaderWord">HelloGithub</span>
|
||
</div>
|
||
|
||
<el-menu :default-active="$route.path" class="el-menu" mode="horizontal"
|
||
active-text-color="#42b983"
|
||
router>
|
||
<el-menu-item class="menu-item" index="/home"><i class="el-icon-s-home" style="color: #13ce66"></i>首 页</el-menu-item>
|
||
<el-menu-item class="menu-item" index="/monthly"><i class="el-icon-s-claim" style="color: #00b2ff"></i>月 刊</el-menu-item>
|
||
<el-menu-item class="menu-item" index="/ranking"><i class="el-icon-trophy" style="color: #ffca00"></i>榜 单
|
||
</el-menu-item>
|
||
<el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
|
||
<el-menu-item class="menu-item" index="/OneFile"><i class="el-icon-s-promotion" style="color: #fa7bf3"></i>OneFile</el-menu-item>
|
||
</el-menu>
|
||
<SearchInput class="HeaderInput"></SearchInput>
|
||
<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
|
||
:visible.sync="openPublishArticle"
|
||
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 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">
|
||
<el-input
|
||
type="textarea"
|
||
placeholder="描述: 请从技术栈，功能，适用场景，解决那些痛点等方面介绍项目，突出特点和闪光的亮点。"
|
||
v-model="form.content"
|
||
maxlength="500"
|
||
rows="5"
|
||
show-word-limit
|
||
>
|
||
</el-input>
|
||
</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">只能上传zip文件，且不超过50mb</div>
|
||
</el-upload>
|
||
</div>
|
||
|
||
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import SearchInput from "@/components/Home/SearchInput.vue";
|
||
import PublishArticle from "@/components/Paper/PublishArticle.vue";
|
||
import Vue from "vue";
|
||
|
||
import axios from "axios";
|
||
|
||
export default {
|
||
name: "HeaderComponent",
|
||
components: {PublishArticle, SearchInput},
|
||
data() {
|
||
return {
|
||
openPublishArticle:false,
|
||
openPublishProject:false,
|
||
openFileUploadDialog:false,
|
||
form: {
|
||
url: null,
|
||
title: null,
|
||
name: null,
|
||
tags: [],
|
||
tag: [],
|
||
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;
|
||
}else{
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "请先登录!",
|
||
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;
|
||
window.location.reload();
|
||
},
|
||
submitProject(){
|
||
if(this.avatar_url===null||this.form.name===null|| this.form.url===null||this.form.title===null||this.form.content===null||this.form.tag.length===0){
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "请先填写相关信息！",
|
||
offset: 50
|
||
});
|
||
}else {
|
||
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>
|
||
|
||
<style scoped>
|
||
/*适用于小屏幕，手持设备*/
|
||
/*@media(orientation: portrait){*/
|
||
/* .logo-all {*/
|
||
/* height: 20px;*/
|
||
/* width: 10vw;*/
|
||
/* display: flex;*/
|
||
/* align-items: center;*/
|
||
/* background-color: #ff4949;*/
|
||
/* margin-left:1vw;*/
|
||
/* }*/
|
||
/* .logo {*/
|
||
/* width: 20px;*/
|
||
/* height: 20px;*/
|
||
/* border-radius: 6px;*/
|
||
/* }*/
|
||
/* .HeaderWord{*/
|
||
/* cursor: pointer;*/
|
||
/* margin-left: 5px;*/
|
||
/* font-size: 80%;*/
|
||
/* font-weight: bold;*/
|
||
/* font-family:'楷体';*/
|
||
/* }*/
|
||
/* .header {*/
|
||
/* display: flex;*/
|
||
/* flex-direction: row;*/
|
||
/* align-items: center;*/
|
||
/* !*justify-content: space-evenly;*!*/
|
||
/* }*/
|
||
/* .el-menu {*/
|
||
/* font-weight: bold;*/
|
||
/* font-size: 5px;*/
|
||
/* display: flex;*/
|
||
/* justify-content: space-evenly;*/
|
||
/* width: 10vw;*/
|
||
/* }*/
|
||
/* .menu-item {*/
|
||
/* width: 2vw;*/
|
||
/* font-size:2px;*/
|
||
/* }*/
|
||
/* .HeaderInput{*/
|
||
/* width:15vw;*/
|
||
/* font-size:1px;*/
|
||
/* }*/
|
||
/* .HeaderSubmitBtn{*/
|
||
|
||
/* }*/
|
||
/*}*/
|
||
|
||
@media(orientation: landscape){
|
||
.logo-all {
|
||
height: 60px;
|
||
width: 12vw;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.logo {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50px;
|
||
}
|
||
.HeaderWord{
|
||
cursor: pointer;
|
||
margin-left: 5px;
|
||
font-size: 150%;
|
||
font-weight: bold;
|
||
font-family:'楷体';
|
||
}
|
||
.header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
}
|
||
.el-menu {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
width: 30vw;
|
||
}
|
||
.menu-item {
|
||
width: 6vw;
|
||
}
|
||
}
|
||
|
||
</style> |