# Film Client

## 简介 

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



## 项目结构

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

```text
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             

```

## 启动方式

### 本地运行方式

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

```typescript
# 将 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/,'')
        }
    },
},
```

4. 使用 `npm run dev` 启动项目
5. 打开浏览器访问 [http://127.0.0.1:3600](http://127.0.0.1:3600) 



### nginx部署

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

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

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



  









































