后台管理系统:项目路由搭建与品牌管理

路由的搭建 

先删除一些不需要的界面

然后发现跑不起来,我们需要去配置

 

 删减成这样,然后自己新建需要的路由组件

改成这样,这里要注意。我们是在layout这个大的组件下面的,meta 中的title就是我们侧边栏的标题,icon可以使用element-ui的也可以是svg 

然后效果就是这样

 这里有一个细节,那就是要改成app-main,这样就能空出点内容

品牌管理静态组件

组件 | Element

表格组件

data:表格组件将来需要展示的数据--数组类型

border:是给表格添加边框

column属性

label:显示标签

width:对应列的宽度

aligin:对齐方式

当前第几页,数据总条数,每一页战术条数,连续页码数

      @size-change="sizeChange"

      @current-change="currentChange"

      current-page:代表的是当前是第几页

      total:代表分页器一共需要展示数据条数

      page-size:代表的是每一页需要展示多少条数据

      page-sizes:代表可以设置每一页展示多少条数据

      layout:可以实现分页器布局

      pager-count:按钮的数量 如果是9 连续页码是7

品牌列表展示

有了静态页面,然后就去接口捞数据

Swagger UI

反正都是对外暴露,我们可以将四个模块统一起来,一起暴露。方便后期的使用

挂载到vue的原型上,这样你就可以在任一一个组件中去使用它

 组件实例的原型的原型指向的是Vue.prototype

任一组件可以使用APi相关的接口

 测试了一下,这里出现了很让人头疼的跨域问题

因为尚品汇后台管理项目接口地址有两个:登录时候用的是:http://39.98.123.211:8170/

商品接口信息用的是:http://39.98.123.211:8510/

可见前面是地址是一致的,但是端口号不一样。

这就会导致,登录进得去,但是获取数据的时候,没有办法取数据;或者登录不进,但是数据取得到。无论哪一种都不是我们想要的。

不使用这种自我拼接的方式

直接为空

手动添加

然后成功

 注意:elementui当中的table组件,展示的数据是以一列一列进行展示数据

  现在搞分页,因为我们现在展示是死数据 

 @size-change="sizeChange"

@current-change="currentChange"

我们需要这俩个数据

没有点击时,默认为1.如果传递了参数,就修改参数为传递的那个,然后发起请求

  @size-change只的是展示的条数 

添加品牌与修改品牌静态完成

组件 | Element

 这就是我们想要的效果

<el-dialog title="收货地址" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div>
</el-dialog>

 现在的效果是这样的,而我们应该修改为上传图片那种方式

应该是这样的 

<el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload><style>.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}
</style><script>export default {data() {return {imageUrl: ''};},methods: {handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}}}
</script>

 完成

添加品牌完成

把表单信息传送到后台,后台插入到数据库中

先写接口

处理添加品牌

新增品牌:/admin/product/baseTrademark/save post 携带俩个参数:品牌名称,品牌logo

切记:对于新增的品牌,给服务器传递数据,不需要传递id。id是由服务器生成

修改品牌的

修改品牌

/admin/product/baseTrademark/update post 携带三个参数:id,品牌名称,品牌logo

切记:对于修改某一个品牌的操作,前端携带的参数需要带上id,你需要告诉服务器修改的是哪一个品牌

而这俩个接口类似,我们可以封装成一个

这里传的对象是有讲究的,要跟服务器一样。然后用v-model传过去

 这里要说到俩个事件

action:设置图片上传的路径

on-succes:图片上传成功执行一次

before-upload:图片上传之前,执行一次

 写添加事件

 添加成功,我这里有刚刚报了个错误,是接口弄反了。下面才是正确接口

修改品牌完成

原先我们写了一个回调,我们需要传入一个参数,因为我们需要知道修改的是哪一个品牌

row:当前用户选中这个品牌信息

 其实很简单,就是把值重新赋值

前三页没有权限修改  这里要用浅拷贝的方式,不要直接改表单存储的值。这里我们采用有关传入有id那么就是修改,否则就是添加 

品牌的表单验证(自定义校验规则)

组件 | Element

 

 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

rules:{// require:必须要校验字段(前面5角星有关) message提示信息 trigger:用户行为设置(事件的设置:blur change)tmName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' },// 品牌长度为2-10{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }],logoUrl: [{ required: true, message: '请选择品牌的图片' }],}}

 只有校验都成功后,才能点确定

 

  自定义表单验证 

删除品牌操作

点击删除按钮时,出现弹框

 

 this.$confirm(`你确定删除${row.tmName}?`,  '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {// this.$message({type: 'info',message: '已取消删除'});          });}

 我们需要考虑的一点,就是删除这个品牌信息需要,告诉服务器,也就是发起请求

/admin/product/baseTrademark/remove/{id}

 ​​​​​​​

 deleteTradMark(row){this.$confirm(`你确定删除${row.tmName}?`,  '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(async () => {// 向服务器发请求let result=await this.$Api.trademark.reqDeleteTradeMark(row.id);if(result.code==200){this.$message({type: 'success',message: '删除成功!'});this.getPageList(this.list.length>1?this.page:this.page-1);}}).catch(() => {// this.$message({type: 'info',message: '已取消删除'});          });}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/113405.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

积分游戏小程序模板源码

积分游戏小程序模板源码是一款可以帮助用户快速开发小程序的工具&#xff0c;此模板源码包含五个静态页面&#xff0c;分别是首页、任务列表、大转盘、猜拳等五个页面&#xff0c;非常适合进行积分游戏等相关开发。 此模板源码的前端部分非常简单易用&#xff0c;用户可以根据…

mongodb 分片集群部署

文章目录 mongodb 分片部署二进制安装三台config 配置shard 分片安装shard1 安装shard2 安装shard3 安装mongos 安装数据库、集合启用分片创建集群认证文件创建集群用户部署常见问题 mongodb 分片部署 二进制安装 mkdir -p /data/mongodb tar xvf mongodb-linux-x86_64-rhel7…

数据通信——传输层TCP(可靠传输原理的ARQ)

引言 上一篇讲述了停止等待协议的工作流程&#xff0c;在最后提到了ARQ自动请求重传机制。接下来&#xff0c;我们就接着上一篇的篇幅&#xff0c;讲一下ARQ这个机制 还是这个图来镇楼 ARQ是什么&#xff1f; 发送端对出错的数据帧进行重传是自动进行的&#xff0c;因而这种…

C语言每日一练----Day(13)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;数字颠倒 单词倒排 &#x1f493;博主csdn个人主页&#xff1a;小小uni…

k8s 查看加入主节点命令 k8s重新查看加入节点命令 k8s输入删除,重新查看加入命令 kuberadm查看加入节点命令

1. 使用kuberadm 安装成功后&#xff0c;clear清除了屏幕数据&#xff0c;加入命令无法查看&#xff0c;使用如下&#xff0c;重新查看node如何加入主节点命令&#xff1a; kubeadm token create --print-join-command --ttl 0 2.画圈的全部是&#xff0c;都复制&#xff0c;在…

css中文本阴影特效

文字颜色渐变 .text-clip{color:transparent;font-size: 40px;font-weight: bold;background: linear-gradient(45deg, rgba(0,173,181,1) 0%, rgba(0,173,181,.4) 100%);-webkit-background-clip: text; } 文字模糊 .text-blurry{text-align: center;color: transparent;text-…

Android修改默认gradle路径

Android Studio每次新建项目&#xff0c;都会默认在C盘生成并下载gradle相关文件&#xff0c;由于C盘空间有限&#xff0c;没多久C盘就飘红了&#xff0c;于是就需要把gradle相关文件转移到其他盘 1、到C盘找到gradle文件 具体路径一般是&#xff1a;C:\Users\用户\ .gradle …

[第七届蓝帽杯全国大学生网络安全技能大赛 蓝帽杯 2023]——Web方向部分题 详细Writeup

Web LovePHP 你真的熟悉PHP吗&#xff1f; 源码如下 <?php class Saferman{public $check True;public function __destruct(){if($this->check True){file($_GET[secret]);}}public function __wakeup(){$this->checkFalse;} } if(isset($_GET[my_secret.flag]…

VR司法法治教育平台,沉浸式课堂教学培养刑侦思维和能力

VR司法法治教育平台提供了多种沉浸式体验&#xff0c;通过虚拟现实(Virtual Reality&#xff0c;简称VR)技术让用户深度参与和体验法治知识。以下是一些常见的沉浸式体验&#xff1a; 1.罪案重现 VR司法法治教育平台可以通过重现真实案例的方式&#xff0c;让用户亲眼目睹罪案发…

RabbitMq深度学习

什么是RabbitMq? RabbitMQ是一个开源的消息队列中间件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;。它被广泛用于分布式系统中的消息传递和异步通信。RabbitMQ提供了一种可靠的、可扩展的机制来传递消息&#xff0c;使不同的应用程序能够相互之间进行…

AR界安卓在中国,Rokid引爆空间计算狂潮

击关注 文丨刘雨琦 你可能很难想象&#xff0c;在一个没有显示屏也没有鼠标的空间&#xff0c;仅凭一副AR眼镜和一台口袋主机&#xff0c;就能完成一篇5000字的文章。 没错&#xff0c;8月26日&#xff0c;在2023 Rokid Jungle 新品发布会现场&#xff0c;这样的场景正在真实…

【C++进阶(二)】STL大法--vector的深度剖析以及模拟实现

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; vector 1. 前言2. 熟悉vector的接口函数2.1 vec…

R语言响应面(RSM)、线性模型lm分析生产过程影响因素可视化

全文链接&#xff1a;https://tecdat.cn/?p33499 响应面&#xff08;Response Surface Methodology&#xff0c;RSM&#xff09;分析是一种常用的统计方法&#xff0c;用于研究和优化生产过程中的影响因素。通过建立数学模型来描述因素与响应之间的关系&#xff0c;RSM可以帮助…

用Cmake build OpenCV后,在VS中查看OpenCV源码的方法(环境VS2022+openCV4.8.0) Part III

用Cmake build OpenCV后&#xff0c;在VS中查看OpenCV源码的方法(环境VS2022openCV4.8.0) Part III 用Cmake build OpenCV后&#xff0c;在VS中查看OpenCV源码的方法&#xff08;环境VS2022openCV4.8.0&#xff09; Part I_松下J27的博客-CSDN博客 用Cmake build OpenCV后&…

③matlab向量和矩阵

目录 手动输入数组 创建等间距向量 数组创建函数 手动输入数组 1.背景 单个称为标量的数值实际上是一个 11 数组&#xff0c;也即它包含 1 行 1 列。 任务 创建一个名为 x 并且值为 4 的变量。 2.您可以使用方括号创建包含多个元素的数组。 x [3 5] x 3 5 任务 …

Python钢筋混凝土结构计算.pdf-混凝土构件计算

计算原理&#xff1a; 代码实现&#xff1a; #钢筋混凝土参数 def c_hrb(): global fcuk,HRB,Ec,fc,ft,ftk,Es,fy,fyp,fyk global a1,epsilon_cu fcukEcfcftftk0.0 HRBEsfyfypfyk0.0 #矩形应力图系数a1&#xff0c;C50以下为1.0 a11.0 #正截面混凝土极限压应变epsilon_cu&#…

uni-app+uView实现点击查看大图片的效果

<u-button text"月落" click"imgPreview()"></u-button> //注意&#xff1a;参数urls 是预览图片的链接地址&#xff0c;是个数组 imgPreview() {uni.previewImage({indicator: "none",loop: false,urls: []&#xff0c;}) },参数说…

纵行科技与山鹰绿能达成合作,提供物联网资产管理数据服务

近日&#xff0c;纵行科技与山鹰绿能宣布双方达成深度合作关系&#xff0c;纵行科技将为山鹰绿能提供专业的物联网技术服务&#xff0c;使用物联网技术帮助山鹰绿能对循环包装载具等资产进行在线管理和数字化运营。 据悉&#xff0c;山鹰绿能是一家由山鹰国际控股的全资子公司…

Kafka3.0.0版本——Follower故障处理细节原理

目录 一、服务器信息二、服务器基本信息及相关概念2.1、服务器基本信息2.2、LEO的概念2.3、HW的概念 三、Follower故障处理细节 一、服务器信息 三台服务器 原始服务器名称原始服务器ip节点centos7虚拟机1192.168.136.27broker0centos7虚拟机2192.168.136.28broker1centos7虚拟…

中国智慧燃气行业市场需求

文章来源&#xff1a;中研普华产业研究院 关键词&#xff1a;智慧燃气、智慧燃气场站、智慧燃气平台、设备设施数字化、数字孪生、工业互联网 智慧燃气&#xff0c;是以城市输气管网为基础&#xff0c;各终端用户协调发展&#xff0c;以信息通信平台为支撑&#xff0c;具有信…