Film Client

简介

Client 是项目的前端组成部分, 由 Vite 初始化构建, 使用 vue3 + ts 模板
项目中使用 ElementPlus 作为UI组件, 使用Axios作为HTTP请求工具
项目打包构建后使用nginx发布运行

项目结构

components 目录用于存放vue的公共组件
views 目录用于存放vue-router组件
request.ts 对Axios进行一些简单的封装处理
router.ts 配置路由路径和组件之间的映射关系

client                        
├─ anime_client               
│  └─ README.md               
├─ public                     
│  └─ vite.svg                
├─ src                        
│  ├─ assets                  
│  │  ├─ image                
│  │  │  ├─ 404.png           
│  │  │  ├─ cartoon.png       
│  │  │  ├─ film.png          
│  │  │  ├─ play.png          
│  │  │  └─ tv.png            
│  │  └─ svg                  
│  │     ├─ cartoon.svg       
│  │     ├─ film.svg          
│  │     └─ tv.svg            
│  ├─ components              
│  │  ├─ Footer.vue           
│  │  ├─ Header.vue           
│  │  ├─ RelateList.vue       
│  │  └─ Util.vue             
│  ├─ router                  
│  │  └─ router.ts            
│  ├─ utils                   
│  │  └─ request.ts           
│  ├─ views                   
│  │  ├─ error                
│  │  │  └─ Error404.vue      
│  │  ├─ index                
│  │  │  ├─ CategoryFilm.vue  
│  │  │  ├─ FilmDetails.vue   
│  │  │  ├─ Home.vue          
│  │  │  ├─ Play.vue          
│  │  │  └─ SearchFilm.vue    
│  │  └─ IndexHome.vue        
│  ├─ App.vue                 
│  ├─ main.ts                 
│  ├─ style.css               
│  └─ vite-env.d.ts           
├─ auto-imports.d.ts          
├─ components.d.ts            
├─ favicon.ico                
├─ index.html                 
├─ package-lock.json          
├─ package.json               
├─ README.md                  
├─ tsconfig.json              
├─ tsconfig.node.json         
└─ vite.config.ts

启动方式

本地运行方式

进入client文件夹下
执行 npm install 安装项目相关依赖 (请确保已经安装NodeJS)
修改 vite.config.ts 文件中的后端接口地址

# 将 target 属性值设置为后端接口的请求地址
server: {
    host: '0.0.0.0',
    port: 3600,
    proxy: {
        "/api": {
            target: `http://127.0.0.1:3601`,
            changeOrigin: true, // 允许跨域
            rewrite: path => path.replace(/^\/api/,'')
        }
    },
},

使用 npm run dev 启动项目
打开浏览器访问 http://127.0.0.1:3600

nginx部署

进入client文件夹下
执行 npm install 安装项目相关依赖 (请确保已经安装NodeJS)
修改 vite.config.ts 文件中的后端接口地址

# # 将 target 属性值设置为nginx服务器url地址
server: {
    host: 'localhost',
    port: 3600,
    proxy: {
        "/api": {
            target: `http://localhost`,
            changeOrigin: true, // 允许跨域
            rewrite: path => path.replace(/^\/api/,'')
        }
    },
},

执行 npm run build 将项目进行打包构建
将打包后生成的 dist目录中的所有文件复制到 nginx的 html文件夹下
使用浏览器访问 nginx 的服务地址, 例: IP:Port, http://localhost:3600