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

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"
// });
// })
}
},