目录
一、项目介绍
项目在线预览：点击访问
本项目为vue项目，参考古诗文网官方样式为主题来设计元素，简洁美观；
技术要点：vue、 路由router、element-plus、vuex、axios、css、vue组件等；
二、项目截图
1.项目结构图
开发软件是webstorm，当然vscode、hbuilder等都可以，看自己习惯就行。
布局组件分别为顶部+功能内容+底部。
2.首页（推荐）
分为首页+底部，组件思想重复利用实现 ，首页顶部样式特别，因为有背景图，所以一起放在首页，并没有独立出去作为组件，其他页面顶部统一共用顶部组件。
3.诗文
顶部+内容+底部，内容设计为左右两部分。
组件如下图，通过路由实现内容切换，其他页面都同理：
4.名句
各个类目可收起展开。
5.作者
列表/略缩，默认列表，可点击切换。
6.古籍
列表/略缩，默认列表，可点击切换。
7.我的
三、源码实现
项目以组件（顶部、底部）+主布局页面配合路由构思实现，可以通过组件思维重复利用共同的局部页面，简单且美观，也更加利于后期功能页面拓展和维护、修改等。
1.路由配置
import { createRouter, createWebHistory } from 'vue-router'
// import { useUserStore } from '@/stores'
const router = createRouter({
// history: createWebHistory(import.meta.env.BASE_URL),
history: createWebHistory(import.meta.env.VITE_APP_BASE_PATH),
routes: [
{
name: '诗文',
path: '/shiwens',
component: () => import('@/components/layout/index.vue'),
redirect: '/shiwens',
children: [
{
name: '诗文',
path: '/shiwens',
component: () => import('@/views/shiwens/index.vue')
},
{
name: '名句',
path: '/mingjus',
component: () => import('@/views/mingjus/index.vue')
},
{
name: '作者',
path: '/authors',
component: () => import('@/views/authors/index.vue')
},
{
name: '古籍',
path: '/guwen',
component: () => import('@/views/guwen/index.vue')
},
{
name: '我的',
path: '/user',
component: () => import('@/views/user/index.vue')
}
],
},
{
path: '/',
name: '首页',
component: () =>
import( /* webpackChunkName: "page" */ '@/views/home/index.vue')
}
]
})
// 登录访问拦截 => 默认是直接放行的
// 根据返回值决定，是放行还是拦截
// 返回值：
// 1. undefined / true 直接放行
// 2. false 拦回from的地址页面
// 3. 具体路径 或 路径对象 拦截到对应的地址
// '/login' { name: 'login' }
// router.beforeEach((to) => {
// // 如果没有token, 且访问的是非登录页，拦截到登录，其他情况正常放行
// const useStore = useUserStore()
// if (!useStore.token && to.path !== '/login3') return '/login3'
// })
export default router
2.顶部
<template>
<div>
<div class="maintopbc" style=" height:45px; background:url(https://ziyuan.guwendao.net/siteimg/24jie/%e6%83%8a%e8%9b%b0small.jpg) top center no-repeat; background-size:cover;">
<div class="maintop" style="opacity:0.94;">
<div class="cont">
<div class="left">
<a @click="toPath('/')">古诗文网</a>
</div>
<div class="right">
<div class="son1">
<a style="margin-left:1px;" @click="toPath('/')">推荐</a>
<a @click="toPath('/shiwens')" :class="this.$route.path==='/shiwens'?'menu-active':''">诗文</a>
<a @click="toPath('/mingjus')" :class="this.$route.path==='/mingjus'?'menu-active':''">名句</a>
<a @click="toPath('/authors')" :class="this.$route.path==='/authors'?'menu-active':''">作者</a>
<a @click="toPath('/guwen')" :class="this.$route.path==='/guwen'?'menu-active':''">古籍</a>
<a @click="toPath('/user')" :class="this.$route.path==='/user'?'menu-active':''">我的</a>
</div>
<div class="son2">
<div class="search">
<form action="">
<input id="txtKey" name="value" type="text" value="" maxlength="40" autocomplete="off" style="height:25px; line-height:25px; float:left; padding-left:10px; width:255px; font-size:14px; clear:left; border:0px;">
<input type="submit" style="float:right; width:23px; height:23px; clear:right; margin-top:2px; margin-right:4px; background-image:url(../../../public/img/docSearch230511.png); background-repeat:no-repeat; background-size:23px 23px; border:0px;cursor:pointer;" value="">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="main3">
<div style="width:300px; float:right;">
<div id="box"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
mounted() {
},
methods: {
toPath(path){
this.$router.push({path: path});
},
}
};
</script>
<style scoped>
.menu-active{
border-bottom:3px solid #5D6146;
font-weight:bold;
line-height:45px;
height:43px;
}
</style>
其他源码没法一一列举，看第四步骤。
四、总结
项目页面完整，后续可能将不断升级，完善其他页面。
关注作者，及时了解更多好项目！
更多优质项目请看作者主页！
获取源码或如需帮助，可通过博客后面名片+作者即可！