vueelement-plus简洁完美实现古诗文网

JAY.LIN 收录于前端开发它不香么

2025-03-09 约 1674 字预计阅读 4 分钟

https://bing.ee123.net/img/rand?artid=146139509

vue+element-plus简洁完美实现古诗文网

一、项目介绍

项目在线预览：

本项目为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>

其他源码没法一一列举，看第四步骤。

四、总结

项目页面完整，后续可能将不断升级，完善其他页面。

关注作者，及时了解更多好项目！

更多优质项目请看作者主页！

获取源码或如需帮助，可通过博客后面名片+作者即可！