义乌制作网站公司,网做网站,网站建设 主要内容,WordPress 空间模板文章目录 Softhub软件下载站实战开发#xff08;三#xff09;#xff1a;平台管理模块实战1.前言 #x1f4dc;2.数据表设计 #x1f4ca;3.编码 #x1f4dd;3.1 后端3.1.1 创建modeL3.1.2 创建DAO3.1.3 创建API3.1.4 创建controller3.1.5 创建SERVICE3.1.6 创建LOGIC3… 文章目录 Softhub软件下载站实战开发三平台管理模块实战1.前言 2.数据表设计 3.编码 3.1 后端3.1.1 创建modeL3.1.2 创建DAO3.1.3 创建API3.1.4 创建controller3.1.5 创建SERVICE3.1.6 创建LOGIC3.1.7 导入LOGIC3.1.8 绑定路由3.1.9 启动后端 3.2 前端3.2.1 创建API3.2.2 创建列表页面3.2.3 创建新增编辑组件 3.3 添加路由3.4 页面展示 3.总结 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 修改时间
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 ROW_FORMATDYNAMIC COMMENT平台表;3.编码
3.1 后端
3.1.1 创建modeL
package modelimport github.com/gogf/gf/v2/os/gtimetype 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:idPlatformName 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:trueId 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 (contextgithub.com/gogf/gf/v2/database/gdbgithub.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/gcommonApi github.com/tiger1103/gfast/v3/api/v1/admin/commonmodel 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:platformNameRemark string json:remark
}type DsPlatformListRes struct {g.Meta mime:application/json example:stringcommonApi.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:stringList []*model.DsPlatformInfo json:list
}
3.1.4 创建controller
//internal\app\admin\ds\controller\ds_category.gopackage controllerimport (contextapi github.com/tiger1103/gfast/v3/api/v1/admin/dsservice 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 (contextapi github.com/tiger1103/gfast/v3/api/v1/admin/dsmodel 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 (contextfmtgithub.com/gogf/gf/v2/frame/gapi github.com/tiger1103/gfast/v3/api/v1/admin/dsdao github.com/tiger1103/gfast/v3/internal/app/admin/ds/daomodel github.com/tiger1103/gfast/v3/internal/app/admin/ds/modeldo github.com/tiger1103/gfast/v3/internal/app/admin/ds/model/doservice github.com/tiger1103/gfast/v3/internal/app/admin/ds/serviceSystemS github.com/tiger1103/gfast/v3/internal/app/admin/system/serviceliberr 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 (contextgithub.com/gogf/gf/v2/net/ghttpgithub.com/tiger1103/gfast/v3/internal/app/admin/ds/controller_ github.com/tiger1103/gfast/v3/internal/app/admin/ds/logicgithub.com/tiger1103/gfast/v3/internal/app/admin/system/servicegithub.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.go3.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 --
templatediv classsystem-dsPlatform-containerel-card shadowhoverdiv classsystem-dsPlatform-search mb15el-form :inlinetrueel-form-item label平台名称el-inputsizedefaultv-modeltableData.param.platformNamestylewidth: 240pxplaceholder请输入平台名称classw-50 m-2clearable//el-form-itemel-form-itemel-button sizedefault typeprimary classml10 clickdsPlatformListel-iconele-Search //el-icon查询/el-buttonel-button sizedefault typesuccess classml10 clickonOpenAddDsPlatformel-iconele-FolderAdd //el-icon新增/el-buttonel-button sizedefault typedanger classml10 clickonRowDel(null)el-iconele-Delete //el-icon删除/el-button/el-form-item/el-form/divel-table :datatableData.data stylewidth: 100% selection-changehandleSelectionChangeel-table-column typeselection width55 aligncenter /el-table-column typeindex label序号 width60 /el-table-column propplatformName label平台名称 show-overflow-tooltip/el-table-columnel-table-column propremark label备注 show-overflow-tooltip/el-table-columnel-table-column label操作 width200template #defaultscopeel-button sizesmall text typeprimary clickonOpenEditDsPlatform(scope.row)修改/el-buttonel-button sizesmall text typeprimary clickonRowDel(scope.row)删除/el-button/template/el-table-column/el-tablepaginationv-showtableData.total 0:totaltableData.totalv-model:pagetableData.param.pageNumv-model:limittableData.param.pageSizepaginationdsPlatformList//el-cardEditDsPlatform refeditDsPlatformRef getDsPlatformListdsPlatformList //div
/templatescript setup langts
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 refnumber[]([]);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: ArrayTableData) {ids.value selection.map((item) item.id);
};// 页面加载时
onMounted(() {initTableData();
});
/scriptstyle scoped langscss/style
3.2.3 创建新增编辑组件
templatediv classsystem-edit-post-containerel-dialog v-modelisShowDialog width769pxtemplate #headerdiv{{ (formData.id 0 ? 添加 : 修改) 平台表 }}/div/templateel-form refformRef :modelformData :rulesrules sizedefault label-width90pxel-form-item label平台名称 propplatformNameel-input v-modelformData.platformName placeholder请输入平台名称名称 clearable //el-form-itemel-form-item label备注 propremarkel-input v-modelformData.remark placeholder请输入备注名称 clearable //el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickonCancel sizedefault取 消/el-buttonel-button typeprimary clickonSubmit sizedefault :loadingloading{{ formData.id 0 ? 新 增 : 修 改 }}/el-button/span/template/el-dialog/div
/templatescript setup langts
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 refInstanceTypetypeof 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,
});
/scriptstyle scoped langscss/style3.3 添加路由
创建软件管理菜单
创建平台管理菜单
3.4 页面展示 3.总结
本文完整记录了一张表从模型定义到页面创建的全过程当然只是简单实现后续随着表结构拓展需要逐渐完善逻辑。不难发现当中存在着大量模板代码下一篇我们将编写一个简单的代码生成器来解决这个问题。一些不重要的模板代码在后续文章将不再记录。 softhub系列往期文章
Softhub软件下载站实战开发一项目总览Softhub软件下载站实战开发二项目基础框架搭建
