基于Vue3+Node.js+MySQL的清梦文化网技术实现方案

一、技术栈选型

• ​​前端框架​​: Vue3 + Vite + TypeScript
• ​​状态管理​​: Pinia
• ​​路由​​: Vue Router
• ​​HTTP客户端​​: Axios
• ​​后端框架​​: Node.js + Express
• ​​数据库​​: MySQL

 

二、技术实现方案

1. 路由配置设计

// 创建一个路由器并暴露出去

// 第一步：引入createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 引入一个个可能要呈现一级组件
import Home from '@/pages/Home.vue'
import Drama from '@/pages/Drama.vue'
import Architecture from '@/pages/Architecture.vue'
import Kungfu from '@/pages/Kungfu.vue'
import Chinese from '@/pages/Chinese.vue'
import Region from '@/pages/Region.vue'
import Medicine from '@/pages/Medicine.vue'
import Food from '@/pages/Food.vue'
import About from '@/pages/About.vue'

// Home的子集路由
import REGISTER from '@/pages/Home/Register.vue'
import LOGIN from '@/pages/Home/Login.vue'


// 路由Drama的子集路由
import JINGJU from '@/pages/Drama/JINGJU.vue'
import YUEJU from '@/pages/Drama/YUEJU.vue'
import YUJU from '@/pages/Drama/YUJU.vue'
import PINGJU from '@/pages/Drama/PINGJU.vue'
import QINQIANG from '@/pages/Drama/QINQIANG.vue'
import KUNJU from '@/pages/Drama/KUNJU.vue'
import CHAOJU from '@/pages/Drama/CHAOJU.vue'
import GUIJU from '@/pages/Drama/GUIJU.vue'
import JINJU from '@/pages/Drama/JINJU.vue'
import CHUANJU from '@/pages/Drama/CHUANJU.vue'



// 第二步:创建路由器
const router = createRouter({
    history: createWebHistory(),//路由器的工作模式 (稍后讲解)
    routes: [
        {
            // redirect: '/home/register',
            path: '/home',
            component: Home,
            children: [
                {
                    path:'register',
                    component:REGISTER
                },
                {
                    path:'login',
                    component:LOGIN
                }
            ]
        }, {
            redirect: '/drama/jingju',   //默认打开Drama页面,重定向路由为Drama的子路由jingju
            path: '/drama',
            component: Drama,
            children: [
                {
                    path: 'jingju',
                    component: JINGJU
                },
                {
                    path: 'yueju',
                    component: YUEJU //越剧
                },
                {
                    path: 'yuju',
                    component: YUJU
                },
                {
                    path: 'pingju',
                    component: PINGJU
                },
                {
                    path: 'qinqiang',
                    component: QINQIANG
                },
                {
                    path: 'kunju',
                    component: KUNJU
                },
                {
                    path: 'chaoju',
                    component: CHAOJU //潮剧
                },
                {
                    path: 'guiju',
                    component: GUIJU
                },
                {
                    path: 'jinju',
                    component: JINJU
                },
                {
                    path: 'chuanju',
                    component: CHUANJU
                }
            ]
        }, {
            path: '/architecture',
            component: Architecture
        },
        {
            path: '/kungfu',
            component: Kungfu
        },
        {
            path: '/chinese',
            component: Chinese
        }, {
            path: '/region',
            component: Region
        },
        {
            path: '/medicine',
            component: Medicine
        },
        {
            path: '/food',
            component: Food
        },
        {
            path: '/about',
            component: About
        }, {
            path: '/register',
            conmponent: REGISTER
        }, {
            path: '/login',
            conmponent: LOGIN
        },
        // 路由重定向，默认打开端口,显示/home路由
        {
            path: '/',
            redirect: '/home'
        }
    ]
})

export default router   //暴露路由器

 

2. 戏剧分类组件设计

<div class="main_container">
        <div class="nav_top">
            <RouterLink to="/drama/jingju" active-class="active">京剧</RouterLink>
            <RouterLink to="/drama/yueju" active-class="active">越剧</RouterLink>
            <RouterLink to="/drama/yuju" active-class="active">豫剧</RouterLink>
            <RouterLink to="/drama/pingju" active-class="active">评剧</RouterLink>
            <RouterLink to="/drama/qinqiang" active-class="active">秦腔</RouterLink>
            <RouterLink to="/drama/kunju" active-class="active">昆剧</RouterLink>
            <RouterLink to="/drama/chaoju" active-class="active">潮剧</RouterLink>
            <RouterLink to="/drama/guiju" active-class="active">桂剧</RouterLink>
            <RouterLink to="/drama/jinju" active-class="active">晋剧</RouterLink>
            <RouterLink to="/drama/chuanju" active-class="active">川剧</RouterLink>
        </div>
        <div class="nav_bottom">
            <RouterView></RouterView>
        </div>
    </div>

三、状态管理方案

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    showOverlayer: true
  }),
  actions: {
    hideOverlayer() {
      this.showOverlayer = false
    },
    showOverlayer() {
      this.showOverlayer = true
    }
  }
})

 

 

四、部署方案

1.打开终端

2.安装express 和 其他中间件

 

npm i express mysql body-parser cors

3.检查mysql连接池，是否为你自己的mysql连接配置

4.在终端执行 node app.js.即可

 

 

五、项目资源

通过百度网盘分享的文件：中国传统文化用户…等2个文件

链接:https://pan.baidu.com/s/1fTHtA8rIam-b6mCCcDTxkQ?pwd=aaaa 

提取码:aaaa

复制这段内容打开「百度网盘APP 即可获取」