开始我们后台篇的内容,前面处理了一些事情,去学校完成授位仪式,由校长授位合影,青春不留遗憾,然后还换了一个电脑,征战了四年的神船终于退役了,各种各样的小毛病是真的烦人. 现在正式开始后台篇的内容,做了今天总体的感觉后台部分大难度没有,但是要考虑一点就是对于elementUI的熟练程度,要把这个练得比bootstrap还熟悉,虽然bootstrap也没有多熟悉,但是这个必须熟悉,毕竟工作用得多 一.组件通信高级(面试必备) 1.复习 复习一下目前已经学习过的组件通信 props:父给子传,但是需要…
这几天更新有点小慢,逐渐开始回归状态了.尽快把这个后台做完,要开始vue3了 3.添加修改品牌 用到组件 Dialog 对话框,其中visible.sync这个配置是修改他的显示隐藏的,label-width是这个标题的宽度 然后上传头像的按钮,upload组件,他有自己的一些样式记得复制在style里面 前面静态布局完成,下面完成功能 首先完成接口 一个添加和一个修改的接口,由于发现他们参数都差不多,所以完全可以用一个函数来完成,只是判断有无携带id参数 首先表单是可以收集自己数据的配置项 m…
今天把平台属性的管理基本完成了,后台管理做到现在基本也开始熟悉,确实就是对ElementUI的一个熟练程度. 一.平台属性管理 1.动态展示数据 先把接口弄好,应该在第三级标题选择后进行发请求 静态页面搭建 渲染数据 属性值列表,用到一个新组件 tag,并且这里有多个属性值,所以要遍历,既然要在里面加标签那就要用slot,最后添加两个图标 2.添加与修改属性(静态) 点击添加修改应该将下面的表格组件隐藏出来一个新的组件 如果没有选择到三级分类的时候,添加属性按钮应该不可点 新的页面布局 点击取消…
今天继续是对后台管理部分的一个操作,但是快要结束了,今天结束,明天会进入一个从Vue以来,另外一个名声显著的东西了,一只耳闻从未见识,而且十分的炫酷 他就是------数据可视化Echarts,迫不及待了解了 11.销售属性添加 当我们点击添加就,应该把添加的放到table里面来,table里面每一行数据是一个对象 然后就可以开始整理数据,我们select收集的值不应该只是id 收集到了数据,直接在button点击事件,整理参数,给到我们的data对应的数据 12.销售属性值展示与收集 这里主要…
昨天太晚就没来得及更新,今天是spu管理界面,这个界面一共有三个界面需要切换,完成了两个界面,而且今天的难度在于最后两个章节,富有一定的逻辑性,当然中间也有很多需要注意的,比如ElementUI的照片墙需要添加list属性而且值为你的数据并且必须是一个数组必须有name.url属性 一.spu管理 1.按钮与三级联动可操作性 当进入属性的添加这个界面我们的三级联动应该不可点击 以及我们没有添加属性值不应该能够点击保存 2.spu介绍 spu和sku就是类与实例的关系 添加 修改 等等 3.静态…
自此整个项目前后台,全部搭建完毕. 今天是最后一天,内容很多,而且也比较常用,一个图标类数据可视化,一个后台的权限管理,都是很经典的类型. 一.数据可视化 1.简介 专门的一门学科,有专门研究这个的岗位,将数据以各种图形进行展示 Echarts只能2D,three.js可开发3D 2.canvas绘制线段 canvas是H5新增的一个 标签,它本身没有绘图能力,就像一张白纸,绘制工作须在js完成,就像画笔 首先canvas默认就会有宽高,并且浏览器会当做图片去处理 并且往这个标签里面添加任何文字…
紧急更新第二弹,然后就剩下最后一弹,也就是整个前台的项目 一.购物车 1.加入购物车(新知识点) 加入到购物车是需要接口操作的,因为我们需要将用户的加入到购物车的保存到服务器数据库,你的账号后面才会在你自己的购物车看到,所以这里要先写接口 然后vuex三部曲, 返回来的数据没有data,就是告诉你成功了,存近数据库了所以确实也不需要什么data,所以这里vuex三部曲,只需要到actions这一步就可以了 成功与失败的判定: 之前在actions里面的操作都是async加await的操作,他们的…
前台部分到此结束,一路走来还挺怀念,今天主要是对整个项目的完成做一个最后的收尾工作,对于功能上的需求没有什么了,主要就是项目上线的一些注意事项. 一.个人中心二级路由 当我们点击查看订单应该跳转到个人中心 个人中心拆分两个子路由组件 分好组件后,在routes里面父组件写上childre配置项 写路由不需要写/了,写跳转路由需要写全地址 路由重定向 二.我的订单 获取订单列表详情,保存数据 注意这里的布局是采用的table,里面每一个订单为一个table 一个订单里面可一次性买多个东西吧,所以一…
Vue项目之实现登录功能的表单验证! 步骤: 配置 Form表单验证; 1.必须给el-from组件绑定model 为表单数据对象 2 给需要验证的表单项 el-form-item 绑定 prop 属性需要指定表单对象中的数据名称 只需要写属性名就可以了! prop="mobile" 3 配置验证规则! 通过el-from 组件的 rules属性配置验证规则 这是我们要验证的之一的表单项 绑定 prop 属性需要指定表单对象中的数据名称 <el-form-item prop=&q…
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功后的数据. 调用重置表单方法重置表单 自定义验证方法 程序应该做的 获取表单元素,绑定事件 有输入时,获取表单值,使用开发者指定的规则进行验证,若验证错误给予错误提示. 实现方法 获取原生表单元素,vue指令获取到的是包裹原生表单元素的外层元素,这里我使用data-type属性来获取原生表单元素 验…