app发布后台管理(vue+element)

最新推荐文章于 2025-07-09 13:33:53 发布
原创 最新推荐文章于 2025-07-09 13:33:53 发布 · 2.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#app后台发布管理

本文介绍了一个包含新增发布功能的应用界面，详细解释了如何通过界面进行应用版本信息的新增与修改，包括选择应用类型、填写标题、指定系统类型等关键步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<template>
    <div>
        <el-button type="primary" size="medium" style="height: 36.5px;margin-left:80px;" @click="addissue">新增发布</el-button>
        <div class="hr" />
        <!--新增发布-->
        <el-dialog :title="titles" :visible.sync="showTrial" :close-on-click-modal="false">
            <el-form :model="trialForm" label-width="120px" :rules="trialFormRules" ref="trialForm">
                <el-form-item label="App名称:" prop="appType">
                     <el-radio-group v-model="trialForm.appType">
                            <el-radio label="1">ngc客户端</el-radio>
                            <el-radio label="2">ngc资产端</el-radio>
                     </el-radio-group>
                </el-form-item>
                <el-form-item label="标题:" prop="title">
                    <el-input style="width:200px" v-model="trialForm.title" auto-complete="off" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="系统类型:" prop="osType">
                    <el-radio-group v-model="trialForm.osType">
                        <el-radio label="2">ios</el-radio>
                        <el-radio label="1">Android</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="版本号:" prop="version">
                    <el-input style="width:200px" v-model="trialForm.version" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="安装包大小(M):" prop="size">
                    <el-input style="width:200px" v-model="trialForm.size" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="安装包路径:" prop="link">
                    <el-input style="width:200px" v-model="trialForm.link" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="是否强制更新:" prop="isCompulsoryRenewal">
                    <el-radio-group v-model="trialForm.isCompulsoryRenewal">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="更新内容:" style="width:400px" prop="content">
                 <p style="color:red;font-size:18px">注意多条更新内容请用"|"符号隔开</p>
                    <el-input type="textarea" v-model="trialForm.content" style="width:100%;min-height:80px" placeholder="示例:1.解决已知bug;|2.优化性能体验;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="showTrial = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit(trialForm)" :loading="disLoading" :disabled="role">保存</el-button>
            </div>
        </el-dialog>
        <div class="form-b">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80">
                </el-table-column>
                <el-table-column prop="appType" label="APP名称" width="100">
                </el-table-column>
                <el-table-column prop="title" label="标题" width="110">
                </el-table-column>
                <el-table-column prop="content" label="更新内容" width="240">
                </el-table-column>
                <el-table-column prop="osType" label="系统类型" width="100">
                </el-table-column>
                <el-table-column prop="version" label="版本号" width="100">
                </el-table-column>
                <el-table-column prop="size" label="安装包大小(M)" width="120">
                </el-table-column>
                <el-table-column prop="link" label="安装包路径" width="320">
                </el-table-column>
                <el-table-column prop="isCompulsoryRenewal" label="是否强制更新" width="140">
                </el-table-column>
                <el-table-column prop="createTime" label="新增时间" width="180">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">修改</el-button>
                  </template>
                </el-table-column>
            </el-table>
        </div>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="sizes,prev, pager, next" :page-sizes="[10, 20, 50,100, 200]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-count="total" style="float:right;">
            </el-pagination>
        </el-col>
    </div>
</template>

export default {
    data() {
        const validateTitle = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入标题'));
            } else if (!/^[\u4e00-\u9fa5_a-zA-Z0-9.*]{1,20}$/.test(value)) {
                callback(new Error('*请输入20位以内中英文'));

            } else {
                callback();
            }
        };
        const validateVersion = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入版本号'));
            } else if (!/^[a-zA-Z0-9.*]{1,20}$/.test(value)) {
                callback(new Error('*请输入20位以内英文数字或字符'));

            } else {
                callback();
            }
        };
        const validateSize = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入数字'));
            } else if (!/^[1-9]\d{0,3}(\.\d{0,2})?$/.test(value)) {
                callback(new Error('*请输入整数不得超过4位,小数不得超过2位'));

            } else {
                callback();
            }
        };
        const validatelink = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入安装包路径'));
            } else if (!/^[\u4e00-\u9fa5_a-zA-Z0-9\s\S]{1,100}$/.test(value)) {
                callback(new Error('*请输入100位以内中英文字符或数字'));

            } else {
                callback();
            }
        };
        const validateContent = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入更新内容'));
            } else if (!/^[\u4e00-\u9fa5_a-zA-Z0-9\s\S]{1,500}$/.test(value)) {
                callback(new Error('*请输入500位以内中英文字符或数字'));

            } else {
                callback();
            }
        };
        const validateAppType = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('必选项'));
            } else {
                callback();
            }
        };
        return {
            titles: '新增发布',
            showTrial: false,
            disLoading: false,
            role: false,
            trialForm: {
                appType: '',
                title: '',
                osType: '',
                version: '',
                size: '',
                link: '',
                isCompulsoryRenewal: '',
                content:''
            },
            trialFormRules: {
                appType: [
                    { required: true, validator: validateAppType, trigger: 'change' }
                ],
                osType: [
                    { required: true, validator: validateAppType, trigger: 'change' }
                ],
                isCompulsoryRenewal: [
                    { required: true,validator: validateAppType, trigger: 'change' }
                ],
                title: [
                    { required: true,validator: validateTitle, trigger: 'change' }
                ],
                version: [
                    {required: true, validator: validateVersion, trigger: 'change' }
                ],
                size: [
                    {required: true, validator: validateSize, trigger: 'change' }
                ],
                link: [
                    { required: true,validator: validatelink, trigger: 'change' }
                ],
                content: [
                    { required: true,validator: validateContent, trigger: 'change' }
                ]
            },
            tableData: [],
            page: 1,
            size: 10,
            total: 1,
            ID:'',
            showS:false,
            showConnent:""
        }
    },
    methods: {
        addissue() {
                this.titles = '新增发布';
                this.showTrial = true;
                this.showS = false
                this.trialForm = {
                    appType: '',
                    title: '',
                    osType: '',
                    version: '',
                    size: '',
                    link: '',
                    isCompulsoryRenewal: '',
                    content:''
                };
        },
        //每页多少条
        handleSizeChange(val) {
            this.size = val;
            this.getUsers();
        },
        //点击页数
        handleCurrentChange(val) {
            this.page = val;
            this.getUsers();
        },
        editSubmit: function(trialForm) {
            this.$refs.trialForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认保存提交吗？', '提示', {
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          type: 'warning'
                    }).then(() => {
                        this.disLoading = true;
                        if (this.showS) {
                            let paraS = this.trialForm;
                            paraS.id = this.ID;
                            paraS.appType = (~~paraS.appType);
                            paraS.isCompulsoryRenewal = (~~paraS.isCompulsoryRenewal);
                            paraS.osType = (~~paraS.osType);
                            paraS.size = parseFloat(paraS.size);
                        createOrUpdateAppVersionInfo(paraS).then((res) => {
                            if (res.status == 1) {
                                this.disLoading = false;
                                this.showTrial = false;
                                this.$message({
                                    message: '保存提交成功',
                                    type: 'success'
                                });
                                this.$refs.trialForm.resetFields();
                                this.getUsers();
                            };
                        });
                        this.showS = false;
                        }else{
                            let para = this.trialForm;
                        para.appType = (~~para.appType);
                        para.isCompulsoryRenewal = (~~para.isCompulsoryRenewal);
                        para.osType = (~~para.osType);
                        para.size = parseFloat(para.size);
                        createOrUpdateAppVersionInfo(para).then((res) => {
                            if (res.status == 1) {
                                this.disLoading = false;
                                this.showTrial = false;
                                this.$message({
                                    message: '保存提交成功',
                                    type: 'success'
                                });
                                this.$refs.trialForm.resetFields();
                                this.getUsers();
                            };
                        });
                    }
                }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消'
                      });
                    });
                }
            });
        },
        getUsers: function() {
            let par = {
                page: this.page,
                size: this.size
            };
            getAppVersionList(par).then((res) => {
                if (res.status === 1) {
                    this.total = res.message.totalPages;
                    this.tableData = (res.message.content);
                    this.tableData.forEach((item) => {
                        if (item.appType == 1) {
                            item.appType = "ngc客户端"
                        } else {
                            item.appType = "ngc资产端"
                        };
                        if (item.osType == 1) {
                            item.osType = "Android"
                        } else {
                            item.osType = "ios"
                        };
                        if (item.isCompulsoryRenewal) {
                            item.isCompulsoryRenewal = "是"
                        } else {
                            item.isCompulsoryRenewal = "否"
                        };
                        if (item.content.indexOf("|") != -1) {
                            item.content = item.content.split("|")
                        };

                    })

                } else {
                    alert("无版本内容,或服务器异常,请联系管理员!")
                }
            })
        },
        handleClick(row){
          this.trialForm={
             appType: '',
             title: '',
             osType: '',
             version: '',
             size: '',
             link: '',
             isCompulsoryRenewal: '',
             content:''
          };
          this.titles = '修改发布';
          this.showTrial = true;
          this.showS = true;
          if (this.showS) {
            if (row.appType=="ngc客户端") {
                this.trialForm.appType = "1"
            }else if(row.appType=="ngc资产端"){
                this.trialForm.appType = "2"
            };
            if (row.osType=="Android") {
                this.trialForm.osType = "1"
            }else{
                this.trialForm.osType = "2"
            };
            if (row.isCompulsoryRenewal=="是") {
                 this.trialForm.isCompulsoryRenewal = "1"
            }else{
                this.trialForm.isCompulsoryRenewal = "0"
            };
            if (Array.prototype.isPrototypeOf(row.content)) {
                row.content.forEach(item=>{
                    this.trialForm.content += item + "|";
                });
                this.trialForm.content = this.trialForm.content.substring(0, this.trialForm.content.length - 1);
            }else{
                    this.trialForm.content = row.content
            };
            this.trialForm.link = row.link;
            this.trialForm.size = row.size;
            this.trialForm.title = row.title;
            this.trialForm.version = row.version;
            this.ID = row.id
          };
        }
    },
    created() {
        let par = {
            page: this.page,
            size: this.size
        }
        getAppVersionList(par).then((res) => {
            this.total = res.message.totalPages;
            if (res.status === 1) {
                this.tableData = (res.message.content)
                this.tableData.forEach((item) => {
                    if (item.appType == 1) {
                        item.appType = "ngc客户端"
                    } else {
                        item.appType = "ngc资产端"
                    };
                    if (item.osType == 1) {
                        item.osType = "Android"
                    } else {
                        item.osType = "ios"
                    };
                    if (item.isCompulsoryRenewal) {
                        item.isCompulsoryRenewal = "是"
                    } else {
                        item.isCompulsoryRenewal = "否"
                    };
                    if (item.content.indexOf("|") != -1) {
                        item.content = item.content.split("|")
                    };

                })

            } else {
                alert("无版本内容,或服务器异常,请联系管理员!")
            }
        })
    }
}

app后台管理系统实战项目
11-18
具有js文件,css文件,html文件,java文件 注解清晰，使用mysql数据库，适用于新手小白入门练习，
app后端设计(7)-- 项目管理
weixin_30760895的博客
02-09 201
移动互联网行业是个快速发展的行业，需求不断变化，产品更新快。基于移动互联网的以上特点，在开发产品的过程中，我们放弃了传统的瀑布流开发模型，引入了精益的理念和scrum这个敏捷开发框架，下面谈谈实施过程中的一些经验。 scrum简介：Scrum是一个敏捷开发框架，是一个增量的、迭代的开发过程。在这个框架中，整个开发周期包括若干个小的跌代周期，每个小的的跌代周期称为...
Vue+ElementUI聊天室开发指南
最新发布
chaosweet的博客
07-09 1046
Hi，我是布兰妮甜！现代Web应用中，实时聊天功能是社交平台和协作工具的核心需求。本文将指导您使用Vue.js和ElementUI快速构建完整的聊天室应用，从项目搭建到功能实现，带您一步步完成开发。
app发布管理(vue+element)
weixin_30696427的博客
06-14 271
<template> <div> <el-button type="primary" size="medium" style="height: 36.5px;margin-left:80px;" @click="addissue">新增发布</el-button> <div clas...
新闻APP后台管理
08-10
新闻APP后台管理代码
APP管理平台发布系统+数据库源码
01-22
超市订单管理系统，本系统采用SpringMVC+Spring+MyBatis集成框架开发，以Spring作为系统框架核心
基于 vue + element-ui 的管理模板 基于vue + element-ui的后台管理系统 基于vue + element-ui的后台管理系统.zip
12-01
关于本项目是vue + element-ui构建的后台管理系统，是后台项目node-elm的管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登陆、管理数据、权限验证等功能。注项目预览地址和接口需要使用...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
Thinkphp5+element+vue开发的后台管理系统
12-19
后台vue-api实现基本接口 2. vue后台框架 2.1 vuex、路由、接口、[echarts](http://echarts.baidu.com/)、图片上传（头像上传返回上传路径，多图上传返回上传路径、上传头像图片为base64、上传的多图为base64）、...
手把手讲解Vue + Element UI实现后台管理系统(一)：搭建开发环境源代码
04-18
在本教程中，我们将深入探讨如何使用Vue.js和Element UI框架构建一个后台管理系统。Vue.js是一个轻量级、高性能的前端JavaScript框架，而Element UI则是一套为Vue.js设计的高质量UI组件库，它们共同提供了丰富的功能...
使用vue3+element-ui plus 快速构建后台管理模板
10-17
Vue3和Element UI Plus是现代前端开发中的两个热门工具，它们结合在一起可以高效地搭建功能丰富的后台管理系统。Vue3作为Vue.js的最新版本，引入了许多性能优化和开发体验改进的特性，而Element UI Plus则是基于...
App信息后台管理系统
q_2457781052的博客
03-19 668
基于ssm的app后台管理系统，包括app的新增，上传，修改，审核，删除等等。
APP测试包发布管理工具
u013302168的博客
04-12 620
背景 公司规定测试包不允许通过QQ或微信等通信软件进行传递，U盘成了经常使用的工具，一个协作统一管理测试包的工具就次诞生。。。 app测试包发布管理工具 功能 新增分类 删除分类 编辑分类 查询分类 新增测试包信息 删除测试包信息 编辑测试包信息 查询测试包信息 新建管理员账号、菜单权限 编辑管理员账号、菜单权限 扫描二维码 历史记录 导出数据 【自动生成二维码】 【管理员】 【访客】 操作手册 登录管理员 账号：admin 密码：123456 访客无需登录，仅有查看权限 新增测试包信
APP管理平台--后端篇，整体架构（二）
Krisez的博客
07-07 964
管理平台，后端总结
APP管理平台--后端篇，项目配置（一）
Krisez的博客
03-18 1569
作为一个Spring-Boot-Maven项目肯定会有各种配置，配置Spring的，配置Maven的，还有数据库的，甚至其他的，也有不要Maven转向Gradle配置方式的。随心所向，随性而生。 文章目录依赖库数据库Log 依赖库 数据库 Log APP管理平台–环境准备（序） ...
基于uni-app手机端后台管理系统uni-uadmin
热门推荐
码农ICoding
01-23 1万+
Uni-Uadmin 一款uniapp+uviewUI开发的中后台管理系统模板实例。 全新毛玻璃UI视觉uniapp后台管理系统。使用了uni-app+uView-ui+uni-ui等技术开发架构，内置了表格/表单/图表/列表及富文本编辑器，支持动态路由权限控制，错误页处理。 功能特性 ✅ 动态毛玻璃底部Dock菜单 ✅ 支持动态权限管理、错误页处理 ✅ 内置多图表组件、表格、表单、瀑布流列表及富文本编辑器 ✅ 支持编译h5+APP+小程序端 技术架构 编码器：HbuilderX3.3.5 框架技
SpringCloud微服务架构前后端分离项目实践
weixin_50196917的博客
06-07 5500
一款 Java 语言基于 SpringCloud、Vue、ElementUI、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题的个性化呈现的需
速约家Appointment App Admin管理后台开源
sashimi1984xp1的博客
03-18 707
这是一个基于 Ant Design Pro （React） 的管理后台项目
app上线发布流程_一文全解析——APP版本管理基本知识
weixin_35782250的博客
01-07 6037
作者：球溜溜本文在PMCAFF社区发布，转载请注明作者及出处。移动互联网时代以来，APP成为了每个公司每个产品必备要素。它成为了公司和产品触达用户，提供营销和服务的最佳途径。通过建设自身的APP，有以下主要价值：为用户提供最优质的服务，只有自己的APP可以按照自己的规划进行设计和开发，能够满足自身用户真正的需求，带来更优的用户体验。这是在公众号、生活号等渠道无法做到的。培养自身用户群体，APP的用...
深入解析Vue+Element打造高效后台管理框架
## Vue+Element 后台管理通用框架 ### 知识点概述 Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序。它由尤雨溪（Evan You）创建，并在开发中遵循组件化思维，其核心库只关注视图层，易于...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值