草庐IT

vue大型电商项目尚品汇(后台篇)day02

Heymar-10 2023-03-28 原文

这几天更新有点小慢,逐渐开始回归状态了。尽快把这个后台做完,要开始vue3了

3.添加修改品牌

用到组件 Dialog 对话框,其中visible.sync这个配置是修改他的显示隐藏的,label-width是这个标题的宽度

然后上传头像的按钮,upload组件,他有自己的一些样式记得复制在style里面

前面静态布局完成,下面完成功能

首先完成接口

一个添加和一个修改的接口,由于发现他们参数都差不多,所以完全可以用一个函数来完成,只是判断有无携带id参数

首先表单是可以收集自己数据的配置项 model,然后品牌名称的值通过v-model来收集

关键是下面这个图片怎么来收集,因为这里是用的 upload来做的,它上面有一个 action,表示上传后的图片放到哪里

然后通过他自己的一个事件 on-success表示上传成功后会触发,两个参数,一个res会返回上传后图片的地址,一个是file显示更详细的图片的一些内容

我让上传成功后的图片地址给到from表单数据不就是完成了表单收集

这样一来原来的图片链接也要变

3.1添加品牌

给确定按钮添加点击事件,通过$message饿了么的api来弹出消息

3.2修改品牌

将修改增加点击事件,重要的是修改点击出来应该有数据,将我们组建的slot里面row拿过来,表示当前这一行的数据

但是这里有个bug,当我修改dialog的值时,表格的值也会跟着变

这里我理解了很久,错误应该是由于,我们将row赋值给了form,我们的row是服务器发过来的这一行的数据,这时给了form,那我们的list也就是table绑定的data他也是拿的服务器的数据,所以现在的list和form相当于指向的都是同一个数组,我修改dialog也就是修改form,那就修改了同一个数组所以table的值也会跟着变

这里的解决思路就是不要直接去赋值row,利用浅拷贝也就是让他们指向不同的数组即可

完善逻辑

4.表单验证

添加rules

制定规则,注意,required表示前面那个*号,trigger表示触发方式一般表单就change或者blur,图片用的upload组件不属于表单所以触发方式可以不写

然后给我们要验证的item添加prop,值就为这里的属性名

但是现在并没有完,因为需要一个全部验证成功才可以点击确定的验证

4.1自定义校验规则

首先rule、ref不变包括prop都是一样的,主要是验证里面的配置变了,这个validator就需要要去data里面自己书写你的逻辑

写在return外面

5.删除品牌

用到组件 mesageBox,点击删除的回调

因为我们点击确定是真的要删除,所以要发起接口

但是有bug,就是我们删除刷新表格,会自动回到第一页,我想要当前页还有数据就在当前页,没有数据再回到前一页

list是当前页的数据列表,判断他为pager即可

四.平台属性管理

1.三级联动静态组件

整体外部是两个带阴影的框是 card

然后三级联动作为全局组件,因为后面会用到,里面是行内表单,即可以在一行显示的表单元素,在from里面可以找到

2.三级联动动态展示

首先一级联动需要一开始就请求接口

将数组遍历

首先我们的内容展示 修改label,然后value也要收集值,然后最关键的是我们要收集id,因为二级分类需要一级分类的id以此类推,option的value是给到select的value,通过select的value收集起来id,由于这里是form,前面说过他有model属性收集表单数据,所以form也可以收集一份注意只有当select的value灵活动起来,也就是灵活设置一个data里面配置好的数据我们选择下拉框之后才会显示出来

通过change事件知道一级分类已选择,发起二级分类接口请求

渲染页面同一级

三级分类同上,只不过要注意,三级分类也要一个change事件,因为选择完毕过后,会获取下面详细信息的请求

3.三级联动完成

完善一个地方,当一级分类发生变化,后面二级三级分类id以及内容应该清空,二级分类发生变化,三级id内容应该清空

下面的需求,因为我是在子组件里面完成的id获取,但是我下面这个card是在父组件里面,所以子给父传id自定义事件

但是我切换一个就发送一个id,所以我需要知道这个id是几级id,传过来的数据应该标明

判断几级分类做出相应的处理

同样的这边也需要,当重新选择了一次,应该把二级和三级清空

有关vue大型电商项目尚品汇(后台篇)day02的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  3. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  4. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  5. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  7. 牛客网专项练习30天Pytnon篇第02天 - 2

    1.在Python3中,下列关于数学运算结果正确的是:(B)a=10b=3print(a//b)print(a%b)print(a/b)A.3,3,3.3333...B.3,1,3.3333...C.3.3333...,3.3333...,3D.3.3333...,1,3.3333...解析:    在Python中,//表示地板除(向下取整),%表示取余,/表示除(Python2向下取整返回3)2.如下程序Python2会打印多少个数:(D)k=1000whilek>1:    print(k)k=k/2A.1000 B.10C.11D.9解析:    按照题意每次循环K/2,直到K值小于等

  8. ruby - 如何在 ruby​​ 中运行后台线程? - 2

    我是ruby​​的新手,我认为重新构建一个我用C#编写的简单聊天程序是个好主意。我正在使用Ruby2.0.0MRI(Matz的Ruby实现)。问题是我想在服务器运行时为简单的服务器命令提供I/O。这是从示例中获取的服务器。我添加了使用gets()获取输入的命令方法。我希望此方法在后台作为线程运行,但该线程正在阻塞另一个线程。require'socket'#Getsocketsfromstdlibserver=TCPServer.open(2000)#Sockettolistenonport2000defcommandsx=1whilex==1exitProgram=gets.chomp

  9. ruby - 如何在 Ruby 字符串中插入项目符号字符? - 2

    我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是,当我输入它时,我收到有关非ASCII字符的语法错误。我该怎么做? 最佳答案 你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/1195

  10. ruby - 在 Rails 项目中测试本地版本的 gem - 2

    我的Rails站点使用了一个确实不是很好的gem。每次我需要做一些新的事情时,我最终不得不花费与向实际Rails项目添加代码一样多的时间来为gem添加功能。但我不介意,我将我的Gemfile设置为指向我的gem的GitHub分支(我尝试提交PR,但维护者似乎已经下台)。问题是我真的没有找到一种合理的方法来测试我添加到gem的新东西。在railsc中测试它会特别好,但我能想到的唯一方法是a)更改~/.rvm/gems/.../foo。rb,这看起来不对或者b)升级版本,推送到Github,然后运行​​bundleup,这除了耗时之外显然是一场灾难,因为我不确定我所做的promise是否正

随机推荐