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 17:00:36 +08:00
parent 9593b68d33
commit 3de32945f2
16 changed files with 206 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Yi.BBS.Vue3/src/App.vue
View File

@@ -2,9 +2,16 @@
</script>
<template>
<el-config-provider :locale="locale">
<RouterView />
</el-config-provider>
</template>
<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale= zhCn;
</script>
<style scoped>
</style>

7
Yi.BBS.Vue3/src/apis/discussApi.js
View File

@@ -6,10 +6,9 @@ export function getList(data){
params:data
})
};
export function getListByPlateId(plateId){
export function get(id){
return myaxios({
url: `/discuss/plate-id/${plateId}`,
url: `/discuss/${id}`,
method: 'get'
})
};
};

43
Yi.BBS.Vue3/src/components/ArticleContentInfo.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div>
<div class="md" v-html="code"></div>
{{ code }}
<button @click="code='1234'">你好</button>
</div>
</template>
<script setup>
import { marked } from 'marked';
import hljs from "highlight.js";
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/monokai-sublime.css';
import { onMounted,ref } from 'vue';
const code =ref( "```javascript\nfunction(){\n\tconsole.log(123)\n}\n```\n"
+"# 你好世界\n"+
"## 是我的"
)
// const props = defineProps(['code'])
onMounted(() => {
// code.value=props.code;
marked.setOptions({
renderer: new marked.Renderer(),
highlight: function (code) {
return hljs.highlightAuto(code.value).value;
},
pedantic: false,
gfm: true,
tables: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false
}
);
code.value = marked(code.value)
console.log( code.value," code.value");
})
</script>

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

@@ -20,6 +20,7 @@
</div>
</template>
<script setup>
import { onMounted } from 'vue';
const props = defineProps(['size', 'src','showWatching','time'])

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

@@ -7,7 +7,7 @@
<div class=" item item-title "> <el-link size="100" :underline="false" @click="enterDiscuss">{{props.title}}</el-link></div>
<div class=" item item-title "> <el-link size="100" :underline="false" @click="enterDiscuss(props.id)">{{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">
@@ -35,12 +35,12 @@ import { h, ref } from 'vue'
import { useRouter } from 'vue-router'
import AvatarInfo from './AvatarInfo.vue';
const props = defineProps(['title','introduction','createTime'])
const props = defineProps(['title','introduction','createTime','id'])
const router = useRouter()
const spacer = h(ElDivider, { direction: 'vertical' })
const enterDiscuss = () => {
router.push("/article")
const enterDiscuss = (id) => {
router.push(`/article/${id}`)
}
</script>
<style scoped>

4
Yi.BBS.Vue3/src/main.js
View File

@@ -6,11 +6,13 @@ import router from './router'
import './assets/main.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(createPinia())
app.use(router)
app.mount('#app')

2
Yi.BBS.Vue3/src/router/index.js
View File

@@ -17,7 +17,7 @@ const router = createRouter({
},
{
name:'article',
path: '/article',
path: '/article/:discussId',
component: () => import('../views/Article.vue')
},
{

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

@@ -19,7 +19,13 @@
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
<AvatarInfo />
</template>
</InfoCard>
</el-col>
</el-col>
</el-row>
@@ -33,9 +39,10 @@
<AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>
<el-divider />
<h2>面试题挑战</h2>
文章详情
<h2>{{discuss.title}}</h2>
<!-- {{discuss.content}} -->
<ArticleContentInfo/>
<el-divider class="tab-divider" />
@@ -53,7 +60,7 @@
</el-col>
<el-col :span="24">
<el-col :span="24" class="comment">
文章评论
</el-col>
</el-row>
@@ -83,8 +90,7 @@
<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>
<el-button style="width: 100%;justify-content: left" type="primary" text>{{ i }}：第一小结</el-button>
</li>
</ul>
</div>
@@ -111,15 +117,21 @@
</div>
</template>
<script setup>
import { h, ref } from 'vue'
import { h, ref ,onMounted } from 'vue'
import AvatarInfo from '@/components/AvatarInfo.vue'
import InfoCard from '../components/InfoCard.vue';
import InfoCard from '@/components/InfoCard.vue';
import ArticleContentInfo from '@/components/ArticleContentInfo.vue'
import { useRoute } from 'vue-router'
import {get as discussGet} from '@/apis/discussApi.js';
//数据定义
const route=useRoute()
const spacer = h(ElDivider, { direction: 'vertical' })
const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
const handleNodeClick = (data) => {
console.log(data)
}
const data = [
{
label: 'HTML',
@@ -189,9 +201,25 @@ const data = [
label: 'Tcp/ip',
}
]
//主题内容
const discuss=ref({});
//主题初始化
const loadDiscuss=async()=>{
discuss.value= await discussGet(route.params.discussId);
}
onMounted(async()=>{
await loadDiscuss();
})
</script>
<style scoped >
.comment
{
height:40rem;
}
.art-info-left {
margin-bottom: 1rem;
}

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

@@ -2,20 +2,20 @@
<div style="width: 1200px;" class="body-div">
<div class="header">
<el-form :inline="true" >
<el-form-item label="标签：" >
<el-input placeholder="请输入标签"
<el-form-item label="标题：" >
<el-input v-model="query.title" placeholder="请输入标题"
></el-input>
</el-form-item>
<el-form-item label="内容：">
<el-form-item label="标签：">
<el-input
placeholder="搜索当下分类下的内容"
placeholder="搜索当下分类下的标签"
/>
</el-form-item>
<div class="form-right">
<el-button>重置</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary" @click="async()=>{ await loadDiscussList();}">查询</el-button>
<el-dropdown>
<span class="el-dropdown-link">
@@ -47,31 +47,64 @@
<el-tab-pane label="最热" name="third"> </el-tab-pane>
</el-tabs>
<div class="div-item" v-for="i in discussList" >
<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime"/>
<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime" :id="i.id"/>
</div>
<div>
<el-pagination
v-model:current-page="query.pageNum"
v-model:page-size="query.pageSize"
:page-sizes="[10, 20, 30, 50]"
:background="true"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="async(val)=>{ await loadDiscussList();}"
@current-change="async(val)=>{ await loadDiscussList();}"
/>
</div>
<el-empty v-if="discussList.length==0" description="空空如也" />
</div>
</template>
<script setup>
import DisscussCard from '@/components/DisscussCard.vue'
import {getListByPlateId} from '@/apis/discussApi.js'
import { onMounted, ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
import {getList} from '@/apis/discussApi.js'
import { onMounted, ref,reactive } from 'vue'
import { useRoute } from 'vue-router'
//数据定义
const route=useRoute()
const activeName = ref('first')
const discussList=ref([]);
const total=ref(100)
const query=reactive({
pageNum:1,
pageSize:10,
title:'',
plateId:''
})
const handleClick = (tab, event) => {
console.log(tab, event)
}
onMounted(async()=>{
const response= await getListByPlateId(route.params.plateId);
discussList.value=response.items;
await loadDiscussList();
})
//加载discuss
const loadDiscussList=async()=>{
query.plateId=route.params.plateId;
const response= await getList(query);
discussList.value=response.items;
total.value=Number( response.total);
}
</script>
<style scoped>
.el-pagination
{margin: 2rem 0rem 2rem 0rem;justify-content: right;}
.body-div{
min-height: 1000px;
}

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

@@ -14,7 +14,7 @@
</el-col>
<el-col :span="24" v-for="i in discussList">
<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime"/>
<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime" :id="i.id"/>
</el-col>
</el-row>