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

gengx

Browse Source
This commit is contained in:
Zhang HaoYang
2023-07-10 23:09:06 +08:00
parent c7841414db
commit c79e4e0bbb
9 changed files with 747 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/images/DeleteButton.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

1
src/assets/images/EditButton.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

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

@@ -84,6 +84,43 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
background-color: #e8e8e8;
box-shadow: -5px 5px 5px 5px #eaeaea;
}
//main-container结构下的标头格式
.HeadLine{
font-size:20px;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items: center;
}
//main-container结构下的标头字体格式
.TitleFont{
margin-left:10px;
font-weight:600;
}
//main-container结构下的标头矩形图案样式
.HeadSquare{
width:2.5px;
height:23px;
margin-left:5px;
margin-top:3px;
background-color: #59a2a3;
}
//按钮格子的位置调整：
.ButtonBlock{
display: flex;
flex-wrap:nowrap;
flex-direction:row;
justify-content:space-around;
}
//按钮特效：
.MyButton{
}
.MyButton:hover{
transform:scale(1.08);
cursor: pointer;
}
.backbutton :hover{
color: #789be5!important;
}

272
src/components/System/Manage/articleManage.vue
View File

@@ -1,13 +1,275 @@
<template>
<div>文章管理</div>
<div>
<div class="HeadLine">
<div class="HeadSquare"></div>
<div class="TitleFont">文章管理</div>
</div>
<div style="height:50px;width:100%;"></div>
<el-card shadow="always" class="card_style">
<el-table v-model="List" :data="List" :header-row-style="{height:'20px'}" :cell-style="{padding:'2px'}" border>
<el-table-column label="文章id" key="articleId" prop="articleId" width="100" align="center" />
<el-table-column label="文章标题" key="articleTitle" prop="articleTitle" width="200" align="center" :show-overflow-tooltip="true"/>
<el-table-column label="发布者id" key="userId" prop="userId" width="100" align="center" />
<el-table-column label="阅读量" key="readCount" prop="readCount" width="100" align="center" :show-overflow-tooltip="true"/>
<el-table-column label="发布时间" key="publishTime" prop="publishTime" width="100" align="center" />
<el-table-column label="文章图标" key="articleIco" prop="articleIco" width="150" align="center" :show-overflow-tooltip="true"/>
<el-table-column label="文章内容" key="articleContent" prop="articleContent" width="250" align="center">
<template slot-scope="scope">
<el-tooltip placement="top" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content">{{scope.row.articleContent}}</div>
<div>
<span>{{ scope.row.articleContent.substr(0,12)}}</span>
<span v-if="(scope.row.articleContent).length > 12">...</span>
</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="是否有效" key="isValid" prop="isValid" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isValid"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</template>
</el-table-column>
<el-table-column width="150" label="操作" fixed="right" align="center">
<template slot-scope="scope">
<div class="ButtonBlock">
<img class="MyButton" @click="handleEdit(scope.row)"
src="../../../assets/images/EditButton.svg" style="width:60px">
<img class="MyButton" @click="handleDelete(scope.row)"
src="../../../assets/images/DeleteButton.svg" style="width:60px">
</div>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="编辑" :visible.sync="dialogVisible" width="26%"
append-to-body
:close-on-click-modal="false"
:before-close="closeDialog"
>
<el-form ref="ruleForm" class="login_container" :model="form" status-icon label-width="100px">
<el-form-item label="文章ID" prop="articleId">
<el-input v-model="form.articleId" placeholder='ID' clearable disabled></el-input>
</el-form-item>
<el-form-item label="发布用户ID" prop="userId">
<el-input v-model="form.userId" disabled></el-input>
</el-form-item>
<el-form-item label="文章标题" prop="articleTitle" >
<el-input v-model="form.articleTitle" placeholder='标题' clearable :disabled="isEdit"></el-input>
</el-form-item>
<el-form-item label="文章内容" prop="articleContent" >
<el-input v-model="form.articleContent"
type="textarea"
rows="10"
placeholder='文章内容'
:disabled="isEdit"
clearable></el-input>
</el-form-item>
<el-form-item label="阅读量" prop="readCount" >
<el-input v-model="form.readCount" placeholder='阅读量' :disabled="isEdit" clearable></el-input>
</el-form-item>
<el-form-item label="文章图标" prop="articleIco" >
<el-input v-model="form.articleIco" placeholder='图标' :disabled="isEdit" clearable></el-input>
</el-form-item>
<el-form-item label="是否有效" prop="isValid">
<el-radio-group v-model="form.isValid" :disabled="isEdit">
<el-radio :label="1">有效</el-radio>
<el-radio :label="0">无效</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
<el-button @click="editForm()">编辑</el-button>
<el-button @click="submit('ruleForm')" type="primary" style=";margin-top:10px">提交</el-button>
</div>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import axios from "axios";
import Vue from "vue";
export default {
name: "articleManage"
name: "articleManage",
data(){
return{
isEdit:true,
List:[],
dialogVisible:false,
form:{
articleId:'',
userId: '',
articleContent: '',
articleTitle: '',
articleIco: '',
readCount: '',
isValid: '',
}
}
},
mounted() {
this.GetData();
},
methods:{
GetData(){
var that = this;
axios({
method:'post',
url:'http://localhost:8082/helloGithub_war_exploded/selectAllArticleByadmin',
params:{
}
}).then(function(res){
that.List = res.data;
})
// /selectAllArticleByadmin
},
closeDialog() {
// 先重置
this.GetData();
// 后关闭
this.dialogVisible = false;
this.isEdit=true;
},
editForm(){
this.isEdit=false;
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
openDialog(){
this.dialogVisible=true;
},
handleEdit(index) {
this.openDialog();
// 深拷贝
this.form = index;
},
handleDelete(index) {
var that=this;
this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/deleteArticleByAdmin',
// URL 中的查询参数
params: {
articleId: index.articleId,
}
}).then(function (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.GetData();
}
});
}).catch(() => {
// 点击取消:不删除了
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
submit() {
var _this = this;
//调用方法提交
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/updateArticleByAdmin',
// URL 中的查询参数
params: {
articleId: this.form.articleId,
userId: this.form.userId,
articleContent: this.form.articleContent,
articleTitle: this.form.articleTitle,
articleIco: this.form.articleIco,
readCount: this.form.readCount,
isValid: this.form.isValid,
}
}).then(function (res) {
if (res.data.code === 500) {
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
} else {
_this.isEdit=true;
_this.dialogVisible = false;
_this.GetData();
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "更新成功！"),
type: 'success',
offset: 50
});
}
});
},
}
}
</script>
<style scoped>
<style>
.MyPopover{
max-width:200px;
max-height:100px;
overflow: auto;
}
.MyPopover::-webkit-scrollbar {
width: 10px;
background-color: #ffce9a;
border-radius: 5px;
}
.MyPopover::-webkit-scrollbar-thumb {
background-color: #676767;
border-radius: 5px;
}
</style>
<style scoped lang="scss">
.formData{
border:3px solid gray;
}
.el-tooltip__popper{
effect:"light";
max-width: 250px;
//overflow: clip;
}
</style>

215
src/components/System/Manage/categoryManage.vue
View File

@@ -1,11 +1,222 @@
<template>
<div>标签管理</div>
<div>
<div class="HeadLine">
<div class="HeadSquare"></div>
<div class="TitleFont">标签管理</div>
</div>
<div style="height:50px;width:100%;"></div>
<el-card style="width:1000px;margin-left:200px;" shadow="always" class="card_style">
<div style="width:900px;margin-left:30px;">
<el-table width="400" v-model="List" :data="List" :header-row-style="{height:'20px'}" :cell-style="{padding:'2px'}" border>
<el-table-column label="标签名" key="categoryName" prop="categoryName" width="200" align="center" :show-overflow-tooltip="true"/>
<el-table-column label="标签id" key="categoryId" prop="categoryId" width="100" align="center" />
<el-table-column label="标签图标" key="category" prop="category" align="center" :show-overflow-tooltip="true"/>
<el-table-column label="是否有效" key="isValid" prop="isValid" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isValid"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</template>
</el-table-column>
<el-table-column width="150" label="操作" fixed="right" align="center">
<template slot-scope="scope">
<div class="ButtonBlock">
<img class="MyButton" @click="handleEdit(scope.row)"
src="../../../assets/images/EditButton.svg" style="width:60px">
<img class="MyButton" @click="handleDelete(scope.row)"
src="../../../assets/images/DeleteButton.svg" style="width:60px">
</div>
</template>
</el-table-column>
</el-table>
<el-dialog title="编辑" :visible.sync="dialogVisible" width="26%"
append-to-body
:close-on-click-modal="false"
:before-close="closeDialog"
>
<el-form ref="ruleForm" class="login_container" :model="form" status-icon label-width="100px">
<el-form-item label="标签名" prop="categoryName">
<el-input v-model="form.categoryName" placeholder='标签名' :disabled="isEdit" clearable></el-input>
</el-form-item>
<el-form-item label="标签id" prop="categoryId">
<el-input v-model="form.categoryId" placeholder='ID' :disabled="isEdit" ></el-input>
</el-form-item>
<el-form-item label="标签图标" prop="category" >
<el-input v-model="form.category" placeholder='标签图标' clearable :disabled="isEdit"></el-input>
</el-form-item>
<el-form-item label="是否有效" prop="isValid">
<el-radio-group v-model="form.isValid" :disabled="isEdit">
<el-radio :label="1">有效</el-radio>
<el-radio :label="0">无效</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
<el-button @click="editForm()">编辑</el-button>
<el-button @click="submit('ruleForm')" type="primary" style=";margin-top:10px">提交</el-button>
</div>
</el-form-item>
</el-form>
</el-dialog>
</div>
</el-card>
</div>
</template>
<script>
import axios from "axios";
import Vue from "vue";
export default {
name: "categoryManage"
name: "categoryManage",
data(){
return{
isEdit:true,
List:[],
dialogVisible:false,
form:{
articleId:'',
userId: '',
articleContent: '',
articleTitle: '',
articleIco: '',
readCount: '',
isValid: '',
}
}
},
mounted() {
this.GetData();
},
methods:{
GetData(){
var that = this;
axios({
method:'post',
url:'http://localhost:8082/helloGithub_war_exploded/selectAllCategoryByAdmin',
params:{
}
}).then(function(res){
that.List = res.data;
console.log(that.List);
})
// /selectAllArticleByadmin
},
closeDialog() {
// 先重置
this.GetData();
// 后关闭
this.dialogVisible = false;
this.isEdit=true;
},
editForm(){
this.isEdit=false;
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
openDialog(){
this.dialogVisible=true;
},
handleEdit(index) {
this.openDialog();
// 深拷贝
this.form = index;
},
handleDelete(index) {
var that=this;
this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/deleteCategoryByAdmin',
// URL 中的查询参数
params: {
categoryId: index.categoryId,
}
}).then(function (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.GetData();
}
});
}).catch(() => {
// 点击取消:不删除了
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
submit() {
var _this = this;
//调用方法提交
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/updateArticleByAdmin',
// URL 中的查询参数
params: {
articleId: this.form.categoryId,
category: this.form.category,
isValid: this.form.isValid,
categoryName: this.form.categoryName,
}
}).then(function (res) {
if (res.data.code === 500) {
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
} else {
_this.isEdit=true;
_this.dialogVisible = false;
_this.GetData();
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "更新成功！"),
type: 'success',
offset: 50
});
}
});
},
}
}
</script>
<style scoped>

35
src/components/System/Manage/commentManage.vue
View File

@@ -1,8 +1,14 @@
<template>
<div>
<div class="HeadLine">
<div class="HeadSquare"></div>
<div class="TitleFont">评论管理</div>
</div>
<div style="height:50px;width:100%;"></div>
<el-card shadow="always" class="card_style">
<el-table
border
stripe
:header-row-style="{height:'20px'}" :cell-style="{padding:'2px'}" border
:data="dataTable"
style="width: 100%;margin-top: 20px">
<el-table-column
@@ -40,7 +46,8 @@
<el-table-column
prop="commentTime"
align="center"
show-overflow-tooltip
width="150"
:show-overflow-tooltip="true"
label="评论时间">
</el-table-column>
<el-table-column
@@ -54,12 +61,6 @@
align="center"
label="点赞数">
</el-table-column>
<el-table-column
prop="commentTime"
align="center"
label="评论时间">
</el-table-column>
<el-table-column
prop="isValid"
@@ -77,18 +78,18 @@
</el-switch>
</template>
</el-table-column>
<el-table-column
align="center"
fixed="right"
label="操作">
<el-table-column width="150" label="操作" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
<div class="ButtonBlock">
<img class="MyButton" @click="handleEdit(scope.row)"
src="../../../assets/images/EditButton.svg" style="width:60px">
<img class="MyButton" @click="handleDelete(scope.row)"
src="../../../assets/images/DeleteButton.svg" style="width:60px">
</div>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="编辑" :visible.sync="dialogVisible" width="45%"
append-to-body

32
src/components/System/Manage/projectManage.vue
View File

@@ -1,8 +1,14 @@
<template>
<div>
<div class="HeadLine">
<div class="HeadSquare"></div>
<div class="TitleFont">项目管理</div>
</div>
<div style="height:50px;width:100%;"></div>
<el-card shadow="always" class="card_style">
<el-table
border
stripe
:header-row-style="{height:'20px'}" :cell-style="{padding:'2px'}" border
:data="dataTable"
style="width: 100%;margin-top: 20px">
<el-table-column
@@ -22,18 +28,21 @@
<el-table-column
prop="projectName"
align="center"
show-overflow-tooltip
width="100"
:show-overflow-tooltip="true"
label="项目名称">
</el-table-column>
<el-table-column
prop="projectUrl"
align="center"
width="100"
show-overflow-tooltip
label="项目地址">
</el-table-column>
<el-table-column
prop="projectIco"
align="center"
width="100"
show-overflow-tooltip
label="图标">
</el-table-column>
@@ -57,6 +66,8 @@
<el-table-column
prop="submitTime"
align="center"
width="100"
show-overflow-tooltip
label="提交时间">
</el-table-column>
@@ -102,17 +113,18 @@
</template>
</el-table-column>
<el-table-column
align="center"
fixed="right"
label="操作">
<el-table-column width="150" label="操作" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
<div class="ButtonBlock">
<img class="MyButton" @click="handleEdit(scope.row)"
src="../../../assets/images/EditButton.svg" style="width:60px">
<img class="MyButton" @click="handleDelete(scope.row)"
src="../../../assets/images/DeleteButton.svg" style="width:60px">
</div>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="编辑" :visible.sync="dialogVisible" width="45%"
append-to-body

25
src/components/System/Manage/systemManage.vue
View File

@@ -1,11 +1,17 @@
<template>
<div>
<div class="HeadLine">
<div class="HeadSquare"></div>
<div class="TitleFont">文章管理</div>
</div>
<div style="height:50px;width:100%;"></div>
<el-card shadow="always" class="card_style">
<div style="display: flex;justify-content: flex-start">
<el-button type="primary" @click="addAdmin" icon="el-icon-plus">新增</el-button>
</div>
<el-table
border
stripe
:header-row-style="{height:'20px'}" :cell-style="{padding:'8px'}" border
:data="dataTable"
style="width: 100%;margin-top: 20px">
<el-table-column
@@ -47,16 +53,19 @@
</template>
</el-table-column>
<el-table-column
fixed="right"
align="center"
label="操作">
<el-table-column width="150" label="操作" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
<div class="ButtonBlock">
<img class="MyButton" @click="handleEdit(scope.row)"
src="../../../assets/images/EditButton.svg" style="width:60px">
<img class="MyButton" @click="handleDelete(scope.row)"
src="../../../assets/images/DeleteButton.svg" style="width:60px">
</div>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog :title="modalType === 0 ? '添加' : '编辑'" :visible.sync="dialogVisible" width="26%"
append-to-body

41
src/components/System/Manage/userManage.vue
View File

@@ -1,8 +1,14 @@
<template>
<div>
<div class="HeadLine">
<div class="HeadSquare"></div>
<div class="TitleFont">用户管理</div>
</div>
<div style="height:50px;width:100%;"></div>
<el-card shadow="always" class="card_style">
<el-table
border
stripe
:header-row-style="{height:'20px'}" :cell-style="{padding:'2px'}" border
:data="dataTable"
style="width: 100%;margin-top: 20px">
<el-table-column
@@ -15,7 +21,8 @@
<el-table-column
prop="userName"
align="center"
label="用户名">
label="用户名"
>
</el-table-column>
<el-table-column
prop="userPassword"
@@ -24,8 +31,10 @@
</el-table-column>
<el-table-column
prop="creatTime"
width="120"
align="center"
label="注册时间">
label="注册时间"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="userLevel"
@@ -45,12 +54,16 @@
<el-table-column
prop="searchHistory"
align="center"
label="搜索历史">
width="120"
label="搜索历史"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="userAvatar"
align="center"
label="头像">
width="120"
label="头像"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
@@ -70,17 +83,18 @@
</template>
</el-table-column>
<el-table-column
align="center"
fixed="right"
label="操作">
<el-table-column width="150" label="操作" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
<div class="ButtonBlock">
<img class="MyButton" @click="handleEdit(scope.row)"
src="../../../assets/images/EditButton.svg" style="width:60px">
<img class="MyButton" @click="handleDelete(scope.row)"
src="../../../assets/images/DeleteButton.svg" style="width:60px">
</div>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="编辑" :visible.sync="dialogVisible" width="26%"
append-to-body
@@ -316,7 +330,6 @@ export default {
},
handleEdit(index) {
this.openDialog();
// 深拷贝
this.form = index;