---
title: IMES-Cloud前端项目-VUE页面新增
keywords: vue, typescript, 前端, 静态博客
desc: Git VUE页面新增
author: devin
date: 2023-08-16
tags: vue, 前端, IMES-Cloud
---
## IMES-Cloud前端项目-VUE
### 页面新增
##### 1、`在项目文件夹src=>Views=>admin 文件下进行新增业务文件夹，例如Product 业务模块文件夹`
##### 2、VUE 内容页面分三个模块
###### 定义页面的样式：
调整当前页面的内容和样式，都是在 template 节点中进行处理
```vue
.....具体的页面样式
```
例如
```vue
查询
上传
{{ formatterTime(row.modifiedTime || row.createdTime || '') }}
详情
```
###### 页面需要引用的模块和对象结构
```vue
```
##### 3、当前页面需要接口和页面对象定义
定义当前页面需要的后端接口
```vue
import { ComponentApi } from '/@/api/admin/Component'
```
###### 定义当前页面的API 文件
在文件夹 src=>api=>admin 下 新建typescript 文件 例如：Component.ts
该文件用于后端接口请求交互和转换前端页面对象处理。
###### Component.ts 代码结构如下
```typescript
import { AxiosResponse } from 'axios'
import {
FileDeleteInput,
PageInputComponentGetPageDto,
ResultOutputFileEntity,
ResultOutputListFileEntity,
ResultOutputPageComponentGetPageOutPut,
} from './data-contracts'
import { ContentType, HttpClient, RequestParams } from './http-client'
export class ComponentApi extends HttpClient {
/**
* No description
*
* @tags file
* @name GetPage
* @summary 查询分页
* @request POST:/api/app/CompoentService/GetPageAsync
* @secure
*/
getPage = (data: PageInputComponentGetPageDto, params: RequestParams = {}) =>
this.request({
path: `/api/app/compoent/get-page`,
method: 'POST',
body: data,
secure: true,
type: ContentType.Json,
format: 'json',
...params,
})
/**
* No description
*
* @tags file
* @name Delete
* @summary 删除
* @request POST:/api/admin/file/delete
* @secure
*/
delete = (data: FileDeleteInput, params: RequestParams = {}) =>
this.request({
path: `/api/admin/file/delete`,
method: 'POST',
body: data,
secure: true,
type: ContentType.Json,
...params,
})
/**
* No description
*
* @tags file
* @name UploadFile
* @summary 上传文件
* @request POST:/api/admin/file/upload-file
* @secure
*/
uploadFile = (
data: {
/** @format binary */
file: File
},
query?: {
/**
* 文件目录
* @default ""
*/
fileDirectory?: string
/**
* 文件重命名
* @default true
*/
fileReName?: boolean
},
params: RequestParams = {}
) =>
this.request({
path: `/api/admin/file/upload-file`,
method: 'POST',
query: query,
body: data,
secure: true,
type: ContentType.FormData,
format: 'json',
...params,
})
/**
* No description
*
* @tags file
* @name UploadFiles
* @summary 上传多文件
* @request POST:/api/admin/file/upload-files
* @secure
*/
uploadFiles = (
data: {
files: File[]
},
query?: {
/**
* 文件目录
* @default ""
*/
fileDirectory?: string
/**
* 文件重命名
* @default true
*/
fileReName?: boolean
},
params: RequestParams = {}
) =>
this.request({
path: `/api/admin/file/upload-files`,
method: 'POST',
query: query,
body: data,
secure: true,
type: ContentType.FormData,
format: 'json',
...params,
})
}
```
###### 页面前端传输对象定义
当前业务api 涉及到哪些页面参数对象和DTO ，统一定义在 ，在文件夹 src=>api=>admin 中的 data-contracts。
也可以单独定义个 data-component.ts 作为传输对象
```typescript
import {
FileDeleteInput,
PageInputComponentGetPageDto,
ResultOutputFileEntity,
ResultOutputListFileEntity,
ResultOutputPageComponentGetPageOutPut,
} from './data-contracts'
```
`接口搜索条件对象`
```typescript
/** 分页信息输入 */
export interface PageInputComponentGetPageDto {
/**
* 当前页标
* @format int32
*/
currentPage?: number
/**
* 每页大小
* @format int32
*/
pageSize?: number
dynamicFilter?: DynamicFilterInfo
filter?: ComponentGetPageDto
}
/**部件列表对象 */
export interface ComponentGetPageDto{
/**部件名称 */
bomName:string | null
/**部件编号 */
bomNo:string | null
bomProNo: string | null
bomMateNo:string | null
bomType: number
status: number
}
```
`接口列表返回对象`
```typescript
/** 结果输出 */
export interface ResultOutputPageComponentGetPageOutPut {
/** 是否成功标记 */
success?: boolean
/** 编码 */
code?: string | null
/** 消息 */
msg?: string | null
/** 分页信息输出 */
data?: PageOutputPageComponentGetPage
}
export interface PageOutputPageComponentGetPage{
/**
* 数据总数
* @format int64
*/
total?: number
/** 数据 */
list?: ComponentGetPageOutPut[] | null
}
/**部件列表对象 */
export interface ComponentGetPageOutPut{
/**序号 */
guid: number
/**部件名称 */
bomName:string | null
/**部件编号 */
bomNo:string | null
bomProNo: string | null
cpuId:string | null
software_v: string | null
status: number
key_name: number
stand_name:number
createTime: Date
remark:string |null
}
```