HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前台用户界面基本完成

Browse Source
This commit is contained in:
landaiqing
2023-07-08 23:28:53 +08:00
parent fc64a179e8
commit 7e3227328b
13 changed files with 612 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@@ -14,6 +14,8 @@
"echarts": "^5.4.2",
"element-tiptap": "^1.27.1",
"element-ui": "^2.15.13",
"form-data": "^4.0.0",
"fs": "^0.0.1-security",
"json-server": "^0.17.3",
"vue": "^2.6.14",
"vue-cookie": "^1.1.4",
@@ -7106,6 +7108,11 @@
"node": ">= 0.6"
}
},
"node_modules/fs": {
"version": "0.0.1-security",
"resolved": "https://registry.npmmirror.com/fs/-/fs-0.0.1-security.tgz",
"integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
},
"node_modules/fs-extra": {
"version": "9.1.0",
"resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -20575,6 +20582,11 @@
"resolved": "https://registry.npmmirror.com/fresh/-/fresh-0.5.2.tgz",
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
},
"fs": {
"version": "0.0.1-security",
"resolved": "https://registry.npmmirror.com/fs/-/fs-0.0.1-security.tgz",
"integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
},
"fs-extra": {
"version": "9.1.0",
"resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",

2
package.json
View File

@@ -14,6 +14,8 @@
"echarts": "^5.4.2",
"element-tiptap": "^1.27.1",
"element-ui": "^2.15.13",
"form-data": "^4.0.0",
"fs": "^0.0.1-security",
"json-server": "^0.17.3",
"vue": "^2.6.14",
"vue-cookie": "^1.1.4",

3
src/assets/styles/element-variables.scss
View File

@@ -86,4 +86,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
}
.backbutton :hover{
color: #789be5!important;
}
.el-avatar{
background-color: transparent;
}

342
src/components/Home/Header.vue
View File

@@ -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>

45
src/components/Paper/PublishArticle.vue
View File

@@ -60,6 +60,7 @@ import {
} from "element-tiptap";
import axios from "axios";
import Vue from "vue";
import FormData from "form-data"
export default {
name: "PublishArticle",
@@ -70,28 +71,7 @@ export default {
return {
extensions: [
new Link,
new Image({
uploadRequest:(file) => {
const data = new FormData();
data.append('file', file);
axios({
method: 'post',
headers:{
"Access-Control-Allow-Origin": "*",
'crossOrigin':'anonymous'
},
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/upload',
// URL 中的查询参数
params: {
name:file.name,
file:data
}
}).then(function (res) {
return res.data.url;
});
}
}),
new Image({}),
new Iframe,
new CodeBlock,
new Blockquote,
@@ -155,7 +135,7 @@ export default {
modalClose() {
this.$emit('update:openPublishDialog', false); // 直接修改父组件的属性
},
publishArticle(formName){
publishArticle(formName) {
// var that=this;
this.$refs[formName].validate((valid) => {
if (valid) {
@@ -165,13 +145,13 @@ export default {
url: 'http://localhost:8082/helloGithub_war_exploded/articlepublish',
// URL 中的查询参数
params: {
username:this.$cookie.get('username'),
articleTitle:this.form.title,
articleIco:this.form.icon,
articleContent:this.form.content,
username: this.$cookie.get('username'),
articleTitle: this.form.title,
articleIco: this.form.icon,
articleContent: this.form.content,
}
}).then( (res)=> {
if(res.data.code===200){
}).then((res) => {
if (res.data.code === 200) {
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, res.data.msg),
@@ -179,7 +159,7 @@ export default {
offset: 50
});
window.location.reload();
}else{
} else {
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
@@ -188,8 +168,9 @@ export default {
}
});
}});
}
}
});
},
}
}

146
src/components/Project/ProjectDetail.vue
View File

@@ -14,7 +14,7 @@
<el-card class="box-card" style="border: none">
<div style="display: flex;flex-direction: row;justify-content: space-between">
<div style="display: flex;flex-direction: row;">
<el-avatar shape="square" :size="70" :src="projectIco"></el-avatar>
<el-avatar style="background-color: transparent" shape="square" :size="70" :src="github.avatar_url"></el-avatar>
<div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 10px">
<span v-if="projectName" style="font-size: 30px;color: black;font-weight: bold;display: flex;justify-content: flex-start">
{{ projectName }}
@@ -51,7 +51,7 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><el-link :underline="false" @click="goTo(projectUrl)">源码</el-link></el-dropdown-item>
<el-dropdown-item> <el-link :underline="false" @click="goTo('https://github.com/'+projectName+'/releases')">官方下载</el-link></el-dropdown-item>
<el-dropdown-item> <el-link :underline="false">快速下载</el-link></el-dropdown-item>
<el-dropdown-item v-show="fileAddress!=''"> <el-link @click="Download" :underline="false">快速下载</el-link></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button v-show="isRouterAlive" v-if="Like===0" @click="addStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off" type="success">点 赞 {{startNum}}</el-button>
@@ -117,7 +117,7 @@
<div>
<el-tabs v-model="activeName">
<el-tab-pane label="介绍" name="first">
<el-tiptap v-model="projectDescription" :readonly="true" :showMenubar="false" :extensions="extensions" />
<el-tiptap v-html="projectDescription" :readonly="true" :showMenubar="false" :extensions="extensions" />
<div style="display:flex;align-items: center;flex-direction: row;justify-content: space-between">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
<span style="font-size: 14px;margin-top: 10px">收录于: </span><el-tag style="margin-left: 10px;margin-top: 10px" size="medium">第 {{periodicals}} 期</el-tag>
@@ -131,14 +131,10 @@
<div @click="toUserPage" style="cursor: pointer;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
<span style="font-size: 14px;margin-top: 10px">由</span>
<el-avatar class="avatar" style="margin-left: 5px;margin-right: 5px;margin-top: 10px" :src="userUri" :size="30"></el-avatar>
<el-avatar class="avatar" style="margin-left: 5px;margin-right: 5px;margin-top: 10px" :src="imageUrl" :size="30"></el-avatar>
<span style="font-size: 14px;margin-top: 10px">分享</span>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="代码" name="second">
<el-tiptap :readonly="true" :showMenubar="false" :extensions="extensions" />
</el-tab-pane>
</el-tabs>
</div>
@@ -152,8 +148,8 @@
<div class="text item">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap">
<div style="width: 50px;height: 50px">
<el-avatar v-if="this.$cookie.get('username')!=null" :src="imageUrl" :size="50"></el-avatar>
<el-avatar v-if="this.$cookie.get('username')==null" :size="50">未登录</el-avatar>
<el-avatar v-if="this.$cookie.get('username')!==null" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+this.$cookie.get('username')" :size="50"></el-avatar>
<el-avatar v-else-if="this.$cookie.get('username')===null" :size="50" style="background-color: rgb(192,196,204)">未登录</el-avatar>
</div>
<el-input
style="margin-left: 10px"
@@ -195,8 +191,8 @@
<span slot="label"><i class="el-icon-star-on"></i>最新</span>
<div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
<div style="display: flex;flex-direction: row">
<div style="width: 50px;height: 50px;">
<el-avatar :size="50" :src="item.userUri">{{item.username}}</el-avatar>
<div style="cursor: pointer;width: 50px;height: 50px;" @click="toUserPage2(item.username)" >
<el-avatar :size="50" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+item.username">{{item.username}}</el-avatar>
</div>
<div style="display: flex;flex-direction: column;justify-content: space-between">
<div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
@@ -234,8 +230,8 @@
<span slot="label"><i class="el-icon-s-opportunity"></i>最热</span>
<div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
<div style="display: flex;flex-direction: row">
<div style="width: 50px;height: 50px;">
<el-avatar :src="item.userUri" :size="50">{{item.username}}</el-avatar>
<div style="cursor: pointer;width: 50px;height: 50px;" @click="toUserPage2(item.username)">
<el-avatar :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+item.username" :size="50">{{item.username}}</el-avatar>
</div>
<div style="display: flex;flex-direction: column;justify-content: space-between">
<div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
@@ -369,17 +365,19 @@ export default {
license:null,
name:'',
default_branch:null,
avatar_url:null,
},
totalStar:3.7,
Content:'',
imageUrl:'',
fileAddress:null,
}
},
mounted() {
this.getProjectDetail();
this.getLastComment();
this.isStart();
this.getUserInfo();
// this.getUserInfo();
},
watch: {
@@ -399,6 +397,15 @@ export default {
}
})
},
toUserPage2(username) {
this.$router.push({
path: '/UserInfoPage',
query: {
name: username,
refresh: true
}
})
},
toComment(id){
document.querySelector(id).scrollIntoView(true)
var auchor=this.$el.querySelector(id)
@@ -422,7 +429,6 @@ export default {
id:this.$route.query.id
}
}).then(function (res) {
// console.log(res);
that.CategoryName=res.data.CategoryName;
that.projectName=res.data.project.projectName;
that.projectTitle=res.data.project.projectTitle;
@@ -436,9 +442,10 @@ export default {
that.num=res.data.project.num;
that.average=res.data.project.average;
that.username=res.data.project.username;
that.userUri=res.data.project.userUri;
that.fileAddress=res.data.project.fileAddress;
// that.userUri=res.data.project.userUri;
that.getDetailByGitHub();
that.changeAvatarByLocal();
});
},
reload() {
@@ -526,27 +533,25 @@ export default {
formatNumber(num) {
return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
},
getUserInfo() {
var that = this;
if(this.$cookie.get("username")!=null){
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/retUser',
// URL 中的查询参数
params: {
username: this.$cookie.get("username")
}
}).then(function (res) {
that.imageUrl = res.data.userAvatar;
// console.log(res);
});
}else{
return;
}
},
// getUserInfo() {
// var that = this;
// if(this.$cookie.get("username")!=null){
// axios({
// method: 'post',
// // 请求的地址
// url: 'http://localhost:8082/helloGithub_war_exploded/retUser',
// // URL 中的查询参数
// params: {
// username: this.$cookie.get("username")
// }
// }).then(function (res) {
// that.imageUrl = res.data.userAvatar;
// // console.log(res);
// });
// }else{
// return;
// }
// },
addLike(id){
var that=this;
@@ -704,6 +709,8 @@ export default {
that.github.license=res.data.license.spdx_id;
that.github.name=res.data.name;
that.github.default_branch=res.data.default_branch;
that.github.avatar_url=res.data.owner.avatar_url;
that.saveGithubInfo();
});
},
@@ -723,6 +730,67 @@ export default {
});
},
saveGithubInfo(){
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/insertGithubInfo',
// URL 中的查询参数
params: {
projectId:this.$route.query.id,
avatar:this.github.avatar_url,
name:this.github.name,
starImgUrl:'https://starchart.cc/'+this.projectName+'.svg',
starCount:this.github.starNum,
mainLanguage:this.github.language,
isActive:this.github.allow_forking,
subscriber:this.github.subscribers_count,
issues:this.github.open_issues_count,
isOrganization:this.github.organization,
defaultBranch:this.github.default_branch,
forks:this.github.forks_count,
protocol:this.github.license,
version:'0',
}
})
},
changeAvatarByLocal(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: '/api/retUserAv',
// URL 中的查询参数
params:{
username:this.username,
},
responseType:'blob'
}).then((res)=>{
that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
})
},
Download(){
window.open('http://localhost:8082/helloGithub_war_exploded/DownLoad?id='+this.$route.query.id);
// axios({
// method: 'post',
// // 请求的地址
// url: '/api/DownLoad',
// // URL 中的查询参数
// params:{
// id:this.$route.query.id,
// },
// responseType: 'blob'
// }).then(()=>{
// Vue.prototype.$notify({
// title: '提示',
// message: "请等待下载执行",
// offset: 50,
// type:"success"
// });
// })
}
},

15
src/components/Project/ProjectPublish.vue
View File

@@ -1,15 +0,0 @@
<template>
<div>
</div>
</template>
<script>
export default {
name: "ProjectPublish"
}
</script>
<style scoped>
</style>

24
src/components/System/AdminLogin.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="adminLogin">
666
</div>
</template>
<script>
export default {
name: "AdminLogin",
data: function () {
},
methods: {
}
};
</script>
<style scoped>
</style>

5
src/components/User/UserComments.vue
View File

@@ -13,7 +13,7 @@
<el-card style="border-radius: 10px;margin-top: 10px;">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap">
<div style="width: 60px;height: 60px;">
<el-avatar :size="60" :src="comments.userUri">{{ this.$cookie.get('username') }}</el-avatar>
<el-avatar :size="60" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+comments.username">{{ this.$cookie.get('username') }}</el-avatar>
</div>
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-left: 20px">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
@@ -61,7 +61,8 @@ export default {
name: "UserComments",
props:{
comments:Object,
index:Number
index:Number,
},
data(){
return{

17
src/components/User/UserInfo.vue
View File

@@ -3,7 +3,7 @@
<div style="display: flex;flex-direction: row;align-items: center;width: 11vw;justify-content: space-between">
<div @click="toUserPage" style="display: flex;flex-direction: row;align-items: center">
<!-- <el-avatar v-if="imageUrl===''" shape="square" style=" cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" size="large"></el-avatar>-->
<el-avatar shape="square" style=" cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" :src="imageUrl" size="large">{{this.$cookie.get('username')}}</el-avatar>
<el-avatar v-if="this.$cookie.get('username')!==null" shape="square" style=" cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+this.$cookie.get('username')" size="large">{{this.$cookie.get('username')}}</el-avatar>
<div style="margin-left: 5px;display: flex;flex-direction: column;justify-content: space-evenly">
<span style="cursor: pointer;font-weight: bold">{{this.$cookie.get('username')}}</span>
<span style="cursor: pointer;font-weight: 800;font-size: 13px;color: #3b82f6">Lv.{{userLevel}}</span>
@@ -156,6 +156,21 @@ export default {
return;
}
},
// changeAvatarByLocal(){
// var that=this;
// axios({
// method: 'post',
// // 请求的地址
// url: '/api/retUserAv',
// // URL 中的查询参数
// params:{
// username:this.$cookie.get('username'),
// },
// responseType:'blob'
// }).then((res)=>{
// that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
// })
// },
}
}
</script>

133
src/components/User/UserInfoPage.vue
View File

@@ -15,7 +15,7 @@
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start">
<div style="display: flex;flex-direction: row;justify-content: space-between">
<div @click="changeAvatar" style="cursor: pointer;width: 100px;height: 100px;display: flex;flex-direction: row;align-items: center">
<el-avatar style="display: flex;align-items: center;justify-content: center" :src="imageUrl" :size="90"></el-avatar>
<el-avatar style="display: flex;align-items: center;justify-content: center" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+username" :size="90"></el-avatar>
</div>
<div style="display: flex;flex-direction: column;margin-left: 15px;">
<div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
@@ -104,13 +104,13 @@
append-to-body
:close-on-click-modal="false"
>
<span style="font-size: 14px;color: #9ca3af">选择一种方式即可！</span>
<div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: space-between">
<el-input placeholder="请输入头像链接" style="width: 17vw" v-model="AvatarUrl">
<template slot="prepend">url:</template>
</el-input>
<el-button @click="changeAvatarByUrl" size="small" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</div>
<!-- <span style="font-size: 14px;color: #9ca3af">选择一种方式即可！</span>-->
<!-- <div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: space-between">-->
<!-- <el-input placeholder="请输入头像链接" style="width: 17vw" v-model="AvatarUrl">-->
<!-- <template slot="prepend">url:</template>-->
<!-- </el-input>-->
<!-- <el-button @click="changeAvatarByUrl" size="small" type="primary">上传<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
<!-- </div>-->
<div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: center">
<el-upload
@@ -123,10 +123,7 @@
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件。</div>
</el-upload>
<!-- <form action="/upload/UploadHandle" enctype="multipart/form-data" method="post" target="_blank">-->
<!-- <input type="file" name="file1"><br>-->
<!-- <input type="submit" value="上传">-->
<!-- </form>-->
</div>
</el-dialog>
@@ -158,8 +155,8 @@ export default {
like:[],
article:[],
openChangeAvatar:false,
AvatarUrl:'',
imageUrl:'http://localhost:8082/helloGithub_war_exploded/retUserAv',
// AvatarUrl:'',
// imageUrl:'',
userLevel:null,
}
},
@@ -253,49 +250,49 @@ export default {
}
},
changeAvatar(){
if(this.$route.query.name!==this.$cookie.get('username')){
if(this.$route.query.name!==this.$cookie.get('username')||this.$cookie.get('username')===null){
return;
}else{
this.openChangeAvatar=true;
}
},
changeAvatarByUrl(){
if(this.AvatarUrl!==''){
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/userAvatar',
// URL 中的查询参数
params: {
url: this.AvatarUrl
}
}).then(function (res) {
if(res.data.code===200){
Vue.prototype.$notify({
title: '上传成功',
message: ('i', {style: 'color: teal'}, res.data.msg),
type: 'success',
offset: 50
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "上传失败",
offset: 50
});
}
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "请先填写图片链接",
offset: 50
});
}
},
// changeAvatarByUrl(){
// if(this.AvatarUrl!==''){
// axios({
// method: 'post',
// // 请求的地址
// url: 'http://localhost:8082/helloGithub_war_exploded/userAvatar',
// // URL 中的查询参数
// params: {
// url: this.AvatarUrl
// }
// }).then(function (res) {
// if(res.data.code===200){
// Vue.prototype.$notify({
// title: '上传成功',
// message: ('i', {style: 'color: teal'}, res.data.msg),
// type: 'success',
// offset: 50
// });
// }else{
// Vue.prototype.$notify.error({
// title: '错误',
// message: "上传失败",
// offset: 50
// });
// }
//
// });
// }else{
// Vue.prototype.$notify.error({
// title: '错误',
// message: "请先填写图片链接",
// offset: 50
// });
// }
//
// },
upload(params){
var that=this;
@@ -326,24 +323,30 @@ export default {
offset: 50
});
that.openChangeAvatar=false;
setTimeout(()=>{
window.location.reload();
},500)
}
})
},
changeAvatarByLocal(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: '/api/retUserAv',
// URL 中的查询参数
responseType: 'blob',
}).then((res)=>{
})
},
// changeAvatarByLocal(){
// var that=this;
// axios({
// method: 'post',
// // 请求的地址
// url: '/api/retUserAv',
// // URL 中的查询参数
// params:{
// username:this.username,
// },
// responseType:'blob'
// }).then((res)=>{
// that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
// })
//
// },
}

9
src/router/index.js
View File

@@ -10,6 +10,7 @@ import MonthlyByTags from "@/components/Monthly/MonthlyByTags.vue";
import UserInfoPage from "@/components/User/UserInfoPage.vue";
import ProjectDetail from "@/components/Project/ProjectDetail.vue";
import ArticleDetail from "@/components/Paper/ArticleDetail.vue";
import adminLogin from "@/components/System/AdminLogin.vue";
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
@@ -73,11 +74,19 @@ const routes = [
component: ArticleDetail
},
]
},
{
path: '/adminLogin',
name: 'adminLogin',
component: adminLogin
}
]
const router = new VueRouter({
mode:'history',
routes
})

16
vue.config.js
View File

@@ -56,6 +56,22 @@ module.exports = {
'^/api': ''
}
},
'/image': {
//后端接口的baseurl
target: 'https://tucdn.wpon.cn/api/',
//是否允许跨域
changeOrigin: true,
// ws: true, //是否代理 websockets
// secure: true,
// 'secure': true,
headers:{
Connection:"kepp-alive"
},
pathRewrite: {
//这里的作用是使用去掉api
'^/image': ''
}
},
}
}
}