Softhub软件下载站实战开发（三）：平台管理模块实战

Softhub软件下载站实战开发（三）：平台管理模块实战

1.前言 📜

在上篇文章中我们详细介绍了项目的基础框架搭建及各个模块的作用。从本篇文章开始我们需要正式编写代码来实现项目功能。
本篇文章我们来实现平台管理功能:即软件可能在windows平台、也可能在Linux等平台。为了后期拓展，我们没有写死，将平台管理通过页面来实现。

2.数据表设计 📊

GoFrame中的orm框架和gorm不同，不会自动根据实体自动创建表结构。因此我们需要先创建表结构。

-- //resorce/data/soft.sql-- 创建数据库
CREATE DATABASE softhub;-- 使用数据库
USE softhub;-- 平台表
CREAte table ds_platform (`id` bigint(20) auto_increment primary key comment 'id',`platform_name` varchar(50) not null comment '平台名称',`remark` text comment '备注',`created_by` bigint(20) DEFAULT NULL COMMENT '创建人',`updated_by` bigint(20) DEFAULT NULL COMMENT '修改人',`created_at` datetime DEFAULT NULL COMMENT '创建时间',`updated_at` datetime DEFAULT NULL COMMENT '修改时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=DYNAMIC COMMENT='平台表';

3.编码 📝

3.1 后端

3.1.1 创建modeL

package modelimport "github.com/gogf/gf/v2/os/gtime"type DsPlatformInfo struct {Id uint `orm:"id"  json:"id"` // idPlatformName string `orm:"platform_name"  json:"platformName"` // 平台名称Remark string `orm:"remark"  json:"remark"` // 备注CreatedBy uint `orm:"created_by"  json:"createdBy"` // 创建人UpdatedBy uint `orm:"updated_by"  json:"updatedBy"` // 修改人CreatedAt *gtime.Time `orm:"created_at"  json:"createdAt"` // 创建时间UpdatedAt *gtime.Time `orm:"updated_at"  json:"updatedAt"` // 修改时间
}

entity

package entityimport "github.com/gogf/gf/v2/os/gtime"// DsPlatform is the golang structure for table ds_platform.
type DsPlatform struct {Id uint `json:"id"   description:"id"`PlatformName string `json:"platformName"   description:"平台名称"`Remark string `json:"remark"   description:"备注"`CreatedBy uint `json:"createdBy"   description:"创建人"`UpdatedBy uint `json:"updatedBy"   description:"修改人"`CreatedAt *gtime.Time `json:"createdAt"   description:"创建时间"`UpdatedAt *gtime.Time `json:"updatedAt"   description:"修改时间"`
}

do

package doimport ("github.com/gogf/gf/v2/frame/g"
)// DsPlatform is the golang structure of table ds_platform for DAO operations like Where/Data.
type DsPlatform struct {g.Meta    `orm:"table:ds_platform, do:true"`Id interface{} //idPlatformName interface{} //平台名称Remark interface{} //备注CreatedBy interface{} //创建人UpdatedBy interface{} //修改人CreatedAt interface{} //创建时间UpdatedAt interface{} //修改时间
}

3.1.2 创建DAO

//internal\app\admin\ds\dao\ds_platform.gopackage daoimport (internal "github.com/tiger1103/gfast/v3/internal/app/admin/ds/dao/internal"
)// internalDsPlatformDao is internal type for wrapping internal DAO implements.
type internalDsPlatformDao = *internal.DsPlatformDao// dsPlatformDao is the data access object for table .
// You can define custom methods on it to extend its functionality as you wish.
type dsPlatformDao struct {internalDsPlatformDao
}var (// DsPlatformDao is globally public accessible object for table cts_voice operations.DsPlatform = dsPlatformDao{internal.NewDsPlatformDao(),}
)// Fill with you ideas below.

internal

// internal\app\admin\ds\dao\internal\ds_platform.gopackage internalimport ("context""github.com/gogf/gf/v2/database/gdb""github.com/gogf/gf/v2/frame/g"
)// DsPlatformDao is the data access object for table cts_voice.
type DsPlatformDao struct {table   string          // table is the underlying table name of the DAO.group   string          // group is the database configuration group name of current DAO.columns DsPlatformColumns // columns contains all the column names of Table for convenient usage.
}// DsPlatformColumns defines and stores column names for table .
type DsPlatformColumns struct {Id string //idPlatformName string //平台名称Remark string //备注CreatedBy string //创建人UpdatedBy string //修改人CreatedAt string //创建时间UpdatedAt string //修改时间
}// dsPlatformColumns holds the columns for table .
var dsPlatformColumns = DsPlatformColumns{Id: "id",PlatformName: "platform_name",Remark: "remark",CreatedBy: "created_by",UpdatedBy: "updated_by",CreatedAt: "created_at",UpdatedAt: "updated_at",
}// NewDsPlatformDao creates and returns a new DAO object for table data access.
func NewDsPlatformDao() *DsPlatformDao {return &DsPlatformDao{group:   "default",table:   "ds_platform",columns: dsPlatformColumns,}
}// DB retrieves and returns the underlying raw database management object of current DAO.
func (dao *DsPlatformDao) DB() gdb.DB {return g.DB(dao.group)
}// Table returns the table name of current dao.
func (dao *DsPlatformDao) Table() string {return dao.table
}// Columns returns all column names of current dao.
func (dao *DsPlatformDao) Columns() DsPlatformColumns {return dao.columns
}// Group returns the configuration group name of database of current dao.
func (dao *DsPlatformDao) Group() string {return dao.group
}// Ctx creates and returns the Model for current DAO, It automatically sets the context for current operation.
func (dao *DsPlatformDao) Ctx(ctx context.Context) *gdb.Model {return dao.DB().Model(dao.table).Safe().Ctx(ctx)
}// Transaction wraps the transaction logic using function f.
// It rollbacks the transaction and returns the error from function f if it returns non-nil error.
// It commits the transaction and returns nil if function f returns nil.
//
// Note that, you should not Commit or Rollback the transaction in function f
// as it is automatically handled by this function.
func (dao *DsPlatformDao) Transaction(ctx context.Context, f func(ctx context.Context, tx gdb.TX) error) (err error) {return dao.Ctx(ctx).Transaction(ctx, f)
}

3.1.3 创建API

我们需要定义API请求返回结构

//api\v1\admin\ds\ds_platform.gopackage systemimport ("github.com/gogf/gf/v2/frame/g"commonApi "github.com/tiger1103/gfast/v3/api/v1/admin/common"model "github.com/tiger1103/gfast/v3/internal/app/admin/ds/model"
)type DsPlatformAddReq struct {g.Meta       `path:"/dsPlatform/add" method:"post" tags:"平台表" summary:"平台表-新增"`PlatformName string `json:"platformName" v:"required#平台名称不能为空"`Remark       string `json:"remark"`
}type DsPlatformAddRes struct {g.Meta `mime:"application/json" example:"string"`
}type DsPlatformDelReq struct {g.Meta `path:"/dsPlatform/del" method:"delete" tags:"平台表" summary:"平台表-删除"`Id     uint `json:"id" v:"required#id不能为空"`
}type DsPlatformDelRes struct {g.Meta `mime:"application/json" example:"string"`
}type DsPlatformBatchDelReq struct {g.Meta `path:"/dsPlatform/batchdel" method:"delete" tags:"平台表" summary:"平台表-批量删除"`Ids    []uint `json:"id" v:"required#id不能为空"`
}type DsPlatformBatchDelRes struct {g.Meta `mime:"application/json" example:"string"`
}type DsPlatformEditReq struct {g.Meta       `path:"/dsPlatform/edit" method:"put" tags:"平台表" summary:"平台表-修改"`Id           uint   `json:"id" v:"required#id不能为空"`PlatformName string `json:"platformName" v:"required#平台名称不能为空"`Remark       string `json:"remark"`
}type DsPlatformEditRes struct {g.Meta `mime:"application/json" example:"string"`
}type DsPlatformListReq struct {g.Meta `path:"/dsPlatform/list" method:"get" tags:"平台表" summary:"平台表-列表"`commonApi.PageReqPlatformName string `json:"platformName"`Remark       string `json:"remark"`
}type DsPlatformListRes struct {g.Meta `mime:"application/json" example:"string"`commonApi.ListResDsPlatformList []*model.DsPlatformInfo `json:"dsPlatformList"`
}type DsPlatformDetailReq struct {g.Meta `path:"/dsPlatform/detail" method:"get" tags:"平台表" summary:"平台表-详情"`Id     uint `json:"id" v:"required#id不能为空"`
}type DsPlatformDetailRes struct {g.Meta `mime:"application/json" example:"string"`*model.DsPlatformInfo
}type DsPlatformOptionListReq struct {g.Meta `path:"/dsPlatform/optionList" method:"get" tags:"平台表" summary:"平台表下拉列表"`
}type DsPlatformOptionListRes struct {g.Meta `mime:"application/json" example:"string"`List   []*model.DsPlatformInfo `json:"list"`
}

3.1.4 创建controller

//internal\app\admin\ds\controller\ds_category.gopackage controllerimport ("context"api "github.com/tiger1103/gfast/v3/api/v1/admin/ds"service "github.com/tiger1103/gfast/v3/internal/app/admin/ds/service"
)var DsCategory = dsCategoryController{}type dsCategoryController struct {BaseController
}func (c *dsCategoryController) Add(ctx context.Context, req *api.DsCategoryAddReq) (res *api.DsCategoryAddRes, err error) {res = new(api.DsCategoryAddRes)err = service.DsCategory().Add(ctx, req)return
}func (c *dsCategoryController) List(ctx context.Context, req *api.DsCategoryListReq) (res *api.DsCategoryListRes, err error) {res = new(api.DsCategoryListRes)_, dsCategorys, err := service.DsCategory().List(ctx, req)res.DsCategoryList = dsCategorysreturn
}func (c *dsCategoryController) Get(ctx context.Context, req *api.DsCategoryDetailReq) (res *api.DsCategoryDetailRes, err error) {res = new(api.DsCategoryDetailRes)service.DsCategory().GetById(ctx, req.Id)return
}func (c *dsCategoryController) Edit(ctx context.Context, req *api.DsCategoryEditReq) (res *api.DsCategoryEditRes, err error) {err = service.DsCategory().Edit(ctx, req)return
}func (c *dsCategoryController) Delete(ctx context.Context, req *api.DsCategoryDelReq) (res *api.DsCategoryDelRes, err error) {err = service.DsCategory().Delete(ctx, req.Id)return
}func (c *dsCategoryController) BatchDelete(ctx context.Context, req *api.DsCategoryBatchDelReq) (res *api.DsCategoryBatchDelRes, err error) {err = service.DsCategory().BatchDelete(ctx, req.Ids)return
}

3.1.5 创建SERVICE

// internal\app\admin\ds\service\ds_platform.go
package serviceimport ("context"api "github.com/tiger1103/gfast/v3/api/v1/admin/ds"model "github.com/tiger1103/gfast/v3/internal/app/admin/ds/model"
)type IDsPlatform interface {List(ctx context.Context, req *api.DsPlatformListReq) (total interface{}, res []*model.DsPlatformInfo, err error)Add(ctx context.Context, req *api.DsPlatformAddReq) (err error)Edit(ctx context.Context, req *api.DsPlatformEditReq) (err error)Delete(ctx context.Context, id uint) (err error)BatchDelete(ctx context.Context, ids []uint) (err error)GetById(ctx context.Context, id uint) (res *model.DsPlatformInfo, err error)OptionList(ctx context.Context) (res []*model.DsPlatformInfo, err error)
}var localDsPlatform IDsPlatformfunc DsPlatform() IDsPlatform {if localDsPlatform == nil {panic("implement not found for interface IDsPlatform, forgot register?")}return localDsPlatform
}func RegisterDsPlatform(i IDsPlatform) {localDsPlatform = i
}

3.1.6 创建LOGIC

接下来我们实现service

package ds_platformimport ("context""fmt""github.com/gogf/gf/v2/frame/g"api "github.com/tiger1103/gfast/v3/api/v1/admin/ds"dao "github.com/tiger1103/gfast/v3/internal/app/admin/ds/dao"model "github.com/tiger1103/gfast/v3/internal/app/admin/ds/model"do "github.com/tiger1103/gfast/v3/internal/app/admin/ds/model/do"service "github.com/tiger1103/gfast/v3/internal/app/admin/ds/service"SystemS "github.com/tiger1103/gfast/v3/internal/app/admin/system/service"liberr "github.com/tiger1103/gfast/v3/library/liberr"
)func init() {service.RegisterDsPlatform(New())
}func New() *sDsPlatform {return &sDsPlatform{}
}type sDsPlatform struct {
}func (s sDsPlatform) List(ctx context.Context, req *api.DsPlatformListReq) (total interface{}, dsPlatformList []*model.DsPlatformInfo, err error) {err = g.Try(ctx, func(ctx context.Context) {m := dao.DsPlatform.Ctx(ctx)if req.PlatformName != "" {m = m.Where(fmt.Sprintf("%s like ?", dao.DsPlatform.Columns().PlatformName), "%"+req.PlatformName+"%")}total, err = m.Count()liberr.ErrIsNil(ctx, err, "获取平台表列表失败")orderBy := req.OrderByif orderBy == "" {orderBy = "created_at desc"}err = m.Page(req.PageNum, req.PageSize).Order(orderBy).Scan(&dsPlatformList)liberr.ErrIsNil(ctx, err, "获取平台表列表失败")})return
}func (s sDsPlatform) Add(ctx context.Context, req *api.DsPlatformAddReq) (err error) {err = g.Try(ctx, func(ctx context.Context) {var dsPlatformList []*model.DsPlatformInfodao.DsPlatform.Ctx(ctx).Where(fmt.Sprintf("%s=?", dao.DsPlatform.Columns().PlatformName), req.PlatformName).Scan(&dsPlatformList)if len(dsPlatformList) > 0 {liberr.ErrIsNil(ctx, fmt.Errorf("平台名称已经存在"), "平台名称已经存在")}// add_, err = dao.DsPlatform.Ctx(ctx).Insert(do.DsPlatform{PlatformName: req.PlatformName, // 平台名称Remark:       req.Remark,       // 备注CreatedBy:    SystemS.Context().GetUserId(ctx),UpdatedBy:    SystemS.Context().GetUserId(ctx),})liberr.ErrIsNil(ctx, err, "新增平台失败")})return
}func (s sDsPlatform) Edit(ctx context.Context, req *api.DsPlatformEditReq) (err error) {err = g.Try(ctx, func(ctx context.Context) {_, err = s.GetById(ctx, req.Id)liberr.ErrIsNil(ctx, err, "获取平台表失败")var dsPlatformList []*model.DsPlatformInfodao.DsPlatform.Ctx(ctx).Where(fmt.Sprintf("%s=?", dao.DsPlatform.Columns().PlatformName), req.PlatformName).Scan(&dsPlatformList)if len(dsPlatformList) > 0 && dsPlatformList[0].Id != req.Id {liberr.ErrIsNil(ctx, fmt.Errorf("平台名称已经存在"), "平台名称已经存在")}//编辑_, err = dao.DsPlatform.Ctx(ctx).WherePri(req.Id).Update(do.DsPlatform{Id:           req.Id,           // idPlatformName: req.PlatformName, // 平台名称Remark:       req.Remark,       // 备注})liberr.ErrIsNil(ctx, err, "修改平台表失败")})return
}func (s sDsPlatform) Delete(ctx context.Context, id uint) (err error) {err = g.Try(ctx, func(ctx context.Context) {// 查看分类是是否有该平台var category []*model.DsCategoryInfodao.DsCategory.Ctx(ctx).Where(dao.DsCategory.Columns().PlatformId+"=?", id).Scan(&category)if category != nil {liberr.ErrIsNil(ctx, fmt.Errorf("平台下有分类，无法删除"))}_, err = dao.DsPlatform.Ctx(ctx).WherePri(id).Delete()liberr.ErrIsNil(ctx, err, "删除平台表失败")})return
}func (s sDsPlatform) BatchDelete(ctx context.Context, ids []uint) (err error) {err = g.Try(ctx, func(ctx context.Context) {// 查看分类是是否有该平台var categoryList []*model.DsCategoryInfodao.DsCategory.Ctx(ctx).Where(dao.DsCategory.Columns().PlatformId+" in (?)", ids).Scan(&categoryList)if len(categoryList) > 0 {liberr.ErrIsNil(ctx, fmt.Errorf("平台下有分类，无法删除"))}_, err = dao.DsPlatform.Ctx(ctx).Where(dao.DsPlatform.Columns().Id+" in(?)", ids).Delete()liberr.ErrIsNil(ctx, err, "批量删除平台表失败")})return
}func (s sDsPlatform) GetById(ctx context.Context, id uint) (res *model.DsPlatformInfo, err error) {err = g.Try(ctx, func(ctx context.Context) {err = dao.DsPlatform.Ctx(ctx).Where(fmt.Sprintf("%s=?", dao.DsPlatform.Columns().Id), id).Scan(&res)liberr.ErrIsNil(ctx, err, "获取平台表失败")})return
}func (s sDsPlatform) OptionList(ctx context.Context) (res []*model.DsPlatformInfo, err error) {err = g.Try(ctx, func(ctx context.Context) {err = dao.DsPlatform.Ctx(ctx).Scan(&res)liberr.ErrIsNil(ctx, err, "获取平台下拉列表失败")})return
}

3.1.7 导入LOGIC

package logicimport (_ "github.com/tiger1103/gfast/v3/internal/app/admin/ds/logic/ds_platform"
)

3.1.8 绑定路由

//internal\app\admin\ds\router\router.go
package routerimport ("context""github.com/gogf/gf/v2/net/ghttp""github.com/tiger1103/gfast/v3/internal/app/admin/ds/controller"_ "github.com/tiger1103/gfast/v3/internal/app/admin/ds/logic""github.com/tiger1103/gfast/v3/internal/app/admin/system/service""github.com/tiger1103/gfast/v3/library/libRouter"
)var R = new(Router)type Router struct{}func (router *Router) BindController(ctx context.Context, group *ghttp.RouterGroup) {group.Group("/ds", func(group *ghttp.RouterGroup) {//登录验证拦截service.GfToken().Middleware(group)//context拦截器group.Middleware(service.Middleware().Ctx, service.Middleware().Auth)//后台操作日志记录group.Hook("/*", ghttp.HookAfterOutput, service.OperateLog().OperationLog)group.Bind(controller.DsPlatform,)//自动绑定定义的控制器if err := libRouter.RouterAutoBind(ctx, router, group); err != nil {panic(err)}})
}

3.1.9 启动后端

go run main.go

3.2 前端

3.2.1 创建API

import request from '/@/utils/request';export function getDsPlatformList(query?: Object) {return request({url: '/api/v1/admin/ds/dsPlatform/list',method: 'get',params: query,});
}export function addDsPlatform(data: object) {return request({url: '/api/v1/admin/ds/dsPlatform/add',method: 'post',data: data,});
}export function editDsPlatform(data: object) {return request({url: '/api/v1/admin/ds/dsPlatform/edit',method: 'put',data: data,});
}export function deleteDsPlatform(id: number) {return request({url: '/api/v1/admin/ds/dsPlatform/del',method: 'delete',data: { id },});
}export function batchDeleteDsPlatform(ids: number[]) {return request({url: '/api/v1/admin/ds/dsPlatform/batchdel',method: 'delete',data: { ids },});
}export function getOptionList() {return request({url: '/api/v1/admin/ds/dsPlatform/optionList',method: 'get',});
}

3.2.2 创建列表页面

<!-- web\admin\src\views\ds\dsPlatform\index.vue -->
<template><div class="system-dsPlatform-container"><el-card shadow="hover"><div class="system-dsPlatform-search mb15"><el-form :inline="true"><el-form-item label="平台名称"><el-inputsize="default"v-model="tableData.param.platformName"style="width: 240px"placeholder="请输入平台名称"class="w-50 m-2"clearable/></el-form-item><el-form-item><el-button size="default" type="primary" class="ml10" @click="dsPlatformList"><el-icon><ele-Search /></el-icon>查询</el-button><el-button size="default" type="success" class="ml10" @click="onOpenAddDsPlatform"><el-icon><ele-FolderAdd /></el-icon>新增</el-button><el-button size="default" type="danger" class="ml10" @click="onRowDel(null)"><el-icon><ele-Delete /></el-icon>删除</el-button></el-form-item></el-form></div><el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column type="index" label="序号" width="60" /><el-table-column prop="platformName" label="平台名称" show-overflow-tooltip></el-table-column><el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column><el-table-column label="操作" width="200"><template #default="scope"><el-button size="small" text type="primary" @click="onOpenEditDsPlatform(scope.row)">修改</el-button><el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button></template></el-table-column></el-table><paginationv-show="tableData.total > 0":total="tableData.total"v-model:page="tableData.param.pageNum"v-model:limit="tableData.param.pageSize"@pagination="dsPlatformList"/></el-card><EditDsPlatform ref="editDsPlatformRef" @getDsPlatformList="dsPlatformList" /></div>
</template><script setup lang="ts">
import { reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditDsPlatform from '/@/views/ds/dsPlatform/component/editDsPlatform.vue';
import { batchDeleteDsPlatform, getDsPlatformList } from '/@/api/ds/dsPlatform';// 定义接口来定义对象的类型
interface TableData {id: number;platformName: string;remark: string;createdBy: number;updatedBy: number;createdAt: string;updatedAt: string;
}const editDsPlatformRef = ref();
const ids = ref<number[]>([]);const tableData = reactive({data: [] as TableData[],total: 0,loading: false,param: {platformName: '',pageNum: 1,pageSize: 10,},
});// 初始化表格数据
const initTableData = () => {dsPlatformList();
};// 查询平台表列表数据
const dsPlatformList = () => {getDsPlatformList(tableData.param).then((res) => {tableData.data = res.data.dsPlatformList ?? [];tableData.total = res.data.total;});
};// 打开新增平台表弹窗
const onOpenAddDsPlatform = () => {editDsPlatformRef.value.openDialog();
};// 打开修改平台表弹窗
const onOpenEditDsPlatform = (row: Object) => {// 复制一份rowrow = Object.assign({}, row);editDsPlatformRef.value.openDialog(row);
};// 删除平台表
const onRowDel = (row: any) => {let msg = '你确定要删除所选平台表？';let deleteIds: number[] = [];if (row) {msg = `此操作将永久删除平台表："${row.platformName}"，是否继续?`;deleteIds = [row.id];} else {deleteIds = ids.value;}if (deleteIds.length === 0) {ElMessage.error('请选择要删除的数据。');return;}ElMessageBox.confirm(msg, '提示', {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(() => {batchDeleteDsPlatform(deleteIds).then(() => {ElMessage.success('删除成功');// 重新加载平台表数据dsPlatformList();});}).catch(() => {});
};// 分页改变
const onHandleSizeChange = (val: number) => {tableData.param.pageSize = val;dsPlatformList();
};// 分页改变
const onHandleCurrentChange = (val: number) => {tableData.param.pageNum = val;dsPlatformList();
};// 多选框选中数据
const handleSelectionChange = (selection: Array<TableData>) => {ids.value = selection.map((item) => item.id);
};// 页面加载时
onMounted(() => {initTableData();
});
</script><style scoped lang="scss"></style>

3.2.3 创建新增编辑组件

<template><div class="system-edit-post-container"><el-dialog v-model="isShowDialog" width="769px"><template #header><div>{{ (formData.id === 0 ? '添加' : '修改') + '平台表' }}</div></template><el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px"><el-form-item label="平台名称" prop="platformName"><el-input v-model="formData.platformName" placeholder="请输入平台名称名称" clearable /></el-form-item><el-form-item label="备注" prop="remark"><el-input v-model="formData.remark" placeholder="请输入备注名称" clearable /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="onCancel" size="default">取 消</el-button><el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' : '修 改' }}</el-button></span></template></el-dialog></div>
</template><script setup lang="ts">
import { reactive, ref, unref } from 'vue';
import { addDsPlatform, editDsPlatform } from '/@/api/ds/dsPlatform';
import { ElMessage, ElForm } from 'element-plus';interface DialogRow {id: number;platformName: string;remark: string;
}const emit = defineEmits(['getDsPlatformList']);
const formRef = ref<InstanceType<typeof ElForm> | null>(null);const loading = ref(false);
const isShowDialog = ref(false);
const formData = reactive({id: 0,platformName: '',remark: '',
} as DialogRow);const rules = {platformName: [{ required: true, message: '平台名称不能为空', trigger: 'blur' }],
};// 打开弹窗
const openDialog = (row?: DialogRow) => {resetForm();if (row) {Object.assign(formData, row);}isShowDialog.value = true;
};// 关闭弹窗
const closeDialog = () => {isShowDialog.value = false;
};// 取消
const onCancel = () => {closeDialog();
};// 提交
const onSubmit = () => {const formWrap = unref(formRef) as any;if (!formWrap) {return;}formWrap.validate((valid: boolean) => {if (!valid) {return;}loading.value = true;if (formData.id === 0) {addDsPlatform(formData).then(() => {ElMessage.success('平台表添加成功');closeDialog();emit('getDsPlatformList');}).finally(() => {loading.value = false;});} else {editDsPlatform(formData).then(() => {ElMessage.success('平台表编辑成功');closeDialog();emit('getDsPlatformList');}).finally(() => {loading.value = false;});}});
};// 重置表单
const resetForm = () => {Object.assign(formData, {id: 0,platformName: '',remark: '',});if (formRef.value) {formRef.value.resetFields();}
};defineExpose({openDialog,closeDialog,
});
</script><style scoped lang="scss"></style>

3.3 添加路由

创建软件管理菜单

创建平台管理菜单

3.4 页面展示

3.总结 📊

本文完整记录了一张表从模型定义到页面创建的全过程，当然只是简单实现，后续随着表结构拓展需要逐渐完善逻辑。不难发现当中存在着大量模板代码，下一篇我们将编写一个简单的代码生成器来解决这个问题。一些不重要的模板代码在后续文章将不再记录。

---

softhub系列往期文章

1. Softhub软件下载站实战开发（一）：项目总览
2. Softhub软件下载站实战开发（二）：项目基础框架搭建