xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成字典模块改造，前端完成首页界面

Browse Source
This commit is contained in:
橙子
2023-03-11 01:16:28 +08:00
parent fb5342594f
commit 9166fc50aa
46 changed files with 359 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Yi.BBS.Vue3/src/apis/discussApi.js Normal file
View File

@@ -0,0 +1,8 @@
import myaxios from '@/utils/request'
export function getList(data){
return myaxios({
url: '/discuss',
method: 'get',
params:data
})
};

8
Yi.BBS.Vue3/src/apis/plateApi.js Normal file
View File

@@ -0,0 +1,8 @@
import myaxios from '@/utils/request'
export function getList(data){
return myaxios({
url: '/plate',
method: 'get',
params:data
})
};

3
Yi.BBS.Vue3/src/components/AvatarInfo.vue
View File

@@ -23,8 +23,7 @@
import { onMounted } from 'vue';
const props = defineProps(['size', 'src','showWatching','time'])
onMounted(()=>{
console.log(props.time,"props.time");})
</script>
<style scoped>
.mt_1

25
Yi.BBS.Vue3/src/components/BottomInfo.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="body-div">
<a>站长：橙子</a>
<a>YiFramework意框架</a>
<a>关于本站&nbsp&nbsp&nbsp&nbsp建议反馈</a>
<a>2023 <span style="color: #40a9ff ;">意社区</span> | 赣ICP备xxxxxx号-4</a>
</div>
</template>
<script setup>
</script>
<style scoped>
a{
display: block;
}
a:hover {
color: #40a9ff;
cursor:pointer;
}
.body-div
{
background: transparent;
color: rgba(0,0,0,.45);
font-size: 14px;
}
</style>

10
Yi.BBS.Vue3/src/components/DisscussCard.vue
View File

@@ -7,14 +7,13 @@
<div class=" item item-title "> <el-link size="100" :underline="false" @click="enterDiscuss">Alibaba Java
技术图谱</el-link></div>
<div class=" item item-description">一个适合新手的Java学习平台</div>
<div class=" item item-title "> <el-link size="100" :underline="false" @click="enterDiscuss">{{props.title}}</el-link></div>
<div class=" item item-description">{{props.introduction}}</div>
<div class=" item item-tag"><el-tag v-for="i in 4" :key="i">教程</el-tag></div>
<div class=" item item-bottom">
<el-space :size="10" :spacer="spacer">
<div class="item-description">
2022-12-26 15:01:35
{{ props.createTime }}
</div>
@@ -35,6 +34,9 @@
import { h, ref } from 'vue'
import { useRouter } from 'vue-router'
import AvatarInfo from './AvatarInfo.vue';
const props = defineProps(['title','introduction','createTime'])
const router = useRouter()
const spacer = h(ElDivider, { direction: 'vertical' })
const enterDiscuss = () => {

2
Yi.BBS.Vue3/src/components/MavonEdit.vue
View File

@@ -3,7 +3,7 @@
:subfield="subfield"
:codeStyle="props.codeStyle"
:ishljs="true"
:style="{minHeight:props.height,maxHeight:'50rem'}"
:style="{minHeight:props.height,maxHeight:'100%'}"
class="edit"
@change="change"
></mavon-editor>

10
Yi.BBS.Vue3/src/components/PlateCard.vue
View File

@@ -8,9 +8,9 @@
class="image"
/>
<div style="padding: 14px">
<span>学习教程</span>
<span>{{props.name}}</span>
<div class="bottom">
<time class="remarks">{{ remarks }}</time>
<time class="remarks">{{ props.introduction }}</time>
<RouterLink to="/discuss"> <el-button text class="button" type="primary">进入<el-icon><CaretRight /></el-icon></el-button> </RouterLink>
</div>
</div>
@@ -19,10 +19,8 @@
</el-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const remarks = "关于学习的教程"
<script setup>
const props = defineProps(['name','introduction'])
</script>
<style>

4
Yi.BBS.Vue3/src/layout/AppBody.vue
View File

@@ -16,7 +16,9 @@ background-color:#F0F2F5;
}
.content-main{
max-width:1200px;
/* max-width:1200px; */
margin: 0 auto;
display: flex;
justify-content: center;
}
</style>

6
Yi.BBS.Vue3/src/utils/request.js
View File

@@ -1,8 +1,8 @@
import axios from 'axios';
const myaxios = axios.create({
// baseURL:'/'//
// baseURL: process.env.VUE_APP_BASE_API, // /dev-apis
baseURL:import.meta.env.VITE_APP_BASEAPI,
timeout: 50000,
// transformResponse: [data => {
// const json = JsonBig({
@@ -24,7 +24,7 @@ myaxios.interceptors.request.use(function (config) {
// 响应拦截器
myaxios.interceptors.response.use(function (response) {
return response;
return response.data;
}, function (error) {
return Promise.reject(error);
});

2
Yi.BBS.Vue3/src/views/AddArticle.vue
View File

@@ -1,4 +1,5 @@
<template>
<div style="width: 100%;">
<div class="body-div">
<el-form label-width="120px" label-position="left">
@@ -29,6 +30,7 @@
<el-form-item > <el-button class="submit-btn" type="primary">提交</el-button></el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import MavonEdit from '@/components/MavonEdit.vue'

261
Yi.BBS.Vue3/src/views/Article.vue
View File

@@ -1,94 +1,114 @@
<template>
<el-row :gutter="20" class="top-div">
<el-col :span="17">
<div style="width: 90%;min-width: 1200px;">
<!-- <div style="width: 1200px;"> -->
<el-row :gutter="20" class="top-div">
<el-row class="left-div">
<el-col :span="24">
<AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>
<el-col :span="5">
<el-row>
<el-col :span="24">
<el-divider />
<h2>面试题挑战</h2>
文章详情
<InfoCard class="art-info-left" header="主题信息" text="展开" hideDivider="true">
<template #content>
<el-tree :data="data" @node-click="handleNodeClick" />
</template>
</InfoCard>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
</el-col>
</el-row>
</el-col>
<el-col :span="14">
<el-row class="left-div">
<el-col :span="24">
<AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>
<el-divider />
<h2>面试题挑战</h2>
文章详情
<el-divider class="tab-divider" />
<el-divider class="tab-divider" />
<el-space :size="10" :spacer="spacer">
<el-button icon="Pointer" text>
4</el-button>
<el-button icon="Star" text>
0</el-button>
<el-button icon="Share" text>
分享</el-button>
<el-button icon="Operation" text>
操作</el-button>
</el-space>
<el-space :size="10" :spacer="spacer">
<el-button icon="Pointer" text>
4</el-button>
<el-button icon="Star" text>
0</el-button>
<el-button icon="Share" text>
分享</el-button>
<el-button icon="Operation" text>
操作</el-button>
</el-space>
</el-col>
</el-col>
<el-col :span="24">
文章评论
</el-col>
</el-row>
<el-col :span="24">
文章评论
</el-col>
</el-row>
</el-col>
</el-col>
<el-col :span="7">
<el-row class="right-div">
<el-col :span="24">
<InfoCard class="art-info-right" header="文章信息" text="更多" hideDivider="true">
<template #content>
<div>
<ul class="art-info-ul">
<li>
分类： <span>文章</span>
</li>
标签： <el-tag type="success">文章</el-tag>
<el-tag type="info">资源</el-tag>
</ul>
</div>
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard class="art-info-right" header="目录" hideDivider="true">
<template #content>
<div>
<ul class="art-info-ul">
<li v-for="i in 6">
<el-button style="width: 100%;
justify-content: left" :key="你好" type="primary" text>{{i}}：第一小结</el-button>
</li>
</ul>
</div>
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
</el-row>
</el-col>
</el-row>
<el-col :span="5">
<el-row class="right-div">
<el-col :span="24">
<InfoCard class="art-info-right" header="文章信息" text="更多" hideDivider="true">
<template #content>
<div>
<ul class="art-info-ul">
<li>
分类： <span>文章</span>
</li>
标签： <el-tag type="success">文章</el-tag>
<el-tag type="info">资源</el-tag>
</ul>
</div>
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard class="art-info-right" header="目录" hideDivider="true">
<template #content>
<div>
<ul class="art-info-ul">
<li v-for="i in 6">
<el-button style="width: 100%;
justify-content: left" :key="你好" type="primary" text>{{ i }}：第一小结</el-button>
</li>
</ul>
</div>
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { h, ref } from 'vue'
@@ -96,8 +116,86 @@ import AvatarInfo from '@/components/AvatarInfo.vue'
import InfoCard from '../components/InfoCard.vue';
const spacer = h(ElDivider, { direction: 'vertical' })
const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
const handleNodeClick = (data) => {
console.log(data)
}
const data = [
{
label: 'HTML',
children: [
{
label: 'Level two 1-1',
children: [
{
label: 'Level three 1-1-1',
},
],
},
],
},
{
label: 'HTML5',
children: [
{
label: 'Level two 2-1',
children: [
{
label: 'Level three 2-1-1',
},
],
},
{
label: 'Level two 2-2',
children: [
{
label: 'Level three 2-2-1',
},
],
},
],
},
{
label: 'XHTML',
children: [
{
label: 'Level two 3-1',
children: [
{
label: 'Level three 3-1-1',
},
],
},
{
label: 'Level two 3-2',
children: [
{
label: 'Level three 3-2-1',
},
],
},
],
},
{
label: 'Xcss',
},
{
label: 'CSS3',
},
{
label: 'Bootstrap 5',
},
{
label: 'Tcp/ip',
}
]
</script>
<style scoped >
.art-info-left {
margin-bottom: 1rem;
}
.art-info-ul span {
margin-left: 1rem;
}
@@ -108,11 +206,12 @@ const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
.art-info-ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
margin-bottom: 1rem;
margin-bottom: 0.5rem;
}
.art-info-right {

4
Yi.BBS.Vue3/src/views/Discuss.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="body-div">
<div style="width: 1200px;" class="body-div">
<div class="header">
<el-form :inline="true" >
<el-form-item label="标签：" >
@@ -73,7 +73,7 @@ min-height: 1000px;
.header{
background-color: #FFFFFF;
padding: 1rem;
margin: 2rem 0rem 1rem 0rem;
margin: 1rem 0rem ;
}
.header .el-input
{

34
Yi.BBS.Vue3/src/views/Index.vue
View File

@@ -1,4 +1,5 @@
<template >
<div style="width: 1200px;">
<el-row :gutter="20" class="top-div" >
<el-col :span="17">
@@ -9,12 +10,12 @@
<el-row class="left-div">
<el-col :span="8" v-for="i in 6" class="plate" :style="{ 'padding-left': i%3==1?0:0.2+'rem','padding-right': i%3==0?0:0.2+'rem'}" >
<PlateCard/>
<el-col :span="8" v-for="i in plateList" class="plate" :style="{ 'padding-left': i%3==1?0:0.2+'rem','padding-right': i%3==0?0:0.2+'rem'}" >
<PlateCard :name="i.name" :introduction="i.introduction"/>
</el-col>
<el-col :span="24" v-for="i in 10" :key="i">
<DisscussCard/>
<el-col :span="24" v-for="i in discussList">
<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime"/>
</el-col>
</el-row>
@@ -74,10 +75,14 @@
</template>
</InfoCard>
</el-col>
<el-col :span="24" style=" background: transparent;">
<BottomInfo/>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script setup>
@@ -86,7 +91,24 @@ import InfoCard from '@/components/InfoCard.vue'
import PlateCard from '@/components/PlateCard.vue'
import ScrollbarInfo from '@/components/ScrollbarInfo.vue'
import AvatarInfo from '@/components/AvatarInfo.vue'
const items=[{user:"用户1"},{user:"用户2"},{user:"用户3"}]
import BottomInfo from '@/components/BottomInfo.vue'
import {getList} from '@/apis/plateApi.js'
import {getList as discussGetList} from '@/apis/discussApi.js'
import { onMounted, ref } from 'vue'
var plateList=ref([]);
var discussList=ref([]);
const items=[{user:"用户1"},{user:"用户2"},{user:"用户3"}]
onMounted(async()=>{
const response= await getList();
plateList.value= response.items;
const discussReponse=await discussGetList();
discussList.value= discussReponse.items;
})
</script>
<style scoped >
.introduce