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

  • vue大型电商项目尚品汇(后台篇)day01已关闭评论
  • 23 次浏览
  • A+
所属分类:Web前端
摘要

开始我们后台篇的内容,前面处理了一些事情,去学校完成授位仪式,由校长授位合影,青春不留遗憾,然后还换了一个电脑,征战了四年的神船终于退役了,各种各样的小毛病是真的烦人。
现在正式开始后台篇的内容,做了今天总体的感觉后台部分大难度没有,但是要考虑一点就是对于elementUI的熟练程度,要把这个练得比bootstrap还熟悉,虽然bootstrap也没有多熟悉,但是这个必须熟悉,毕竟工作用得多

开始我们后台篇的内容,前面处理了一些事情,去学校完成授位仪式,由校长授位合影,青春不留遗憾,然后还换了一个电脑,征战了四年的神船终于退役了,各种各样的小毛病是真的烦人。
现在正式开始后台篇的内容,做了今天总体的感觉后台部分大难度没有,但是要考虑一点就是对于elementUI的熟练程度,要把这个练得比bootstrap还熟悉,虽然bootstrap也没有多熟悉,但是这个必须熟悉,毕竟工作用得多

一.组件通信高级(面试必备)

1.复习

复习一下目前已经学习过的组件通信

  • props:父给子传,但是需要注意的是父给子传的是函数那么这是自定义事件的前兆,只有当父给子传的是非函数才是props传递数据,他有三种书写方式:数组、对象(具体类型type)、对象(默认值default),注意我们的路由也有props也是用来传递数据的,三种方式布尔值(接受所有的params参数)、对象形式(可以传递指定的参数),函数形式(形参$route,就可以接受query参数了),他们三个都是给这个路由组件传递参数且组件也要用props来接受
  • 自定义事件:适用于子给父传,父在子的组件标签写上自定义事件回调函数等,子这边规定触发方式并使用api emit来发送数据,和全局事件总线相比就是省略了$on这一步
  • 全局事件总线$bus:适用于任何组件通信
  • 消息订阅与发布(pubsub-js):适用于任何组件
  • vuex:适用于任何组件
  • 插槽:使用于父子间,而且一般是与结构有关的

2.自定义事件深入

原生DOM绑定原生事件,正常绑定即可

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

如果这个时候他有一个子组件,也来一个点击事件,你会发现触发不了

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

其原因是因为原生DOM可以绑定原生事件,不能绑定自定义事件,组件标签可以绑定自定义事件,也可以绑定原生事件,但是绑定原生事件会被当做自定义事件(如果需要让他成为原生事件,需要一个修饰符.native可以将自定义事件转为原生事件

3.v-model深入

正常使用

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

下面来探究一下v-model的原理,他的原理其实就是两个东西 单向绑定value➕input事件的混合使用

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

父子组件通信

主意给子组件标签一个是传过去的数据,一个是自定义事件,注意:原生事件的$event是事件对象,但是自定时事件的$event是那边传过来的数据

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

在子组件这边才是真正的单向绑定value➕input事件

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

所以既然这是v-model的原理,那我这边就可以用v-model来代替

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

4.属性修饰符sync

要让父子数据同步,实现父子数据通信,以前的方法,采用props传过来数据,再来一个自定义事件,在子组件修改这个数据,其原理跟v-model的实现原理很类似

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

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

针对于这种情况,我们有一个修饰符,sync,直接加在传过来的数据后面,这样一加两个作用,一个是props过来了一个数据,你可以接受,一个是会给你自动加上一个update开头后面取决于你的数据名叫什么的自定义事件

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

5. $attrs 和 $listeners

使用一下elementUI的button

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

我们可以封装一个,比如我要用什么样的按钮直接传数据进去

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

首先要注意的是,我们的组件是没有提示这个功能的,要使用提示可以在外面包一个a标签,然后利用a标签的title来提示

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

按理说子组件这边应该一个一个都props过来,我们每个组件其实有有一个api叫做$attrs他保存了所有来自于父组件的props的数据

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

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

值得注意的是,我们通过props已经获取的数据,$attrs是获取不到的,当然有了这些数据后还可以用一个简便方法,把他们统一绑定上去,用v-bind,注意只能用v-bind不能简写形式

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

然后我们这个是按钮,肯定可以有点点击事件,给组件来一个点击事件,它会变成自定义事件,这里不考虑用native的做法

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

那么自定义事件过来,就只有子组件来emit了,这里说一个api $listeners,它是用来保存父组件给子组件传递过来的自定义事件

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

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

可以给她理解为是一个事件整体,包括触发方式,所以子组件这边就直接用v-on来绑定这个事件触发包括回调都有了,同样的这里不能用简写形式

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

6.$children和$parent

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

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

当我点击儿子200应该给爸爸资金➕200,儿子减200,爸爸这里好说,儿子这里可以用ref来做,我们说过ref给原生DOM是获取这个DOM节点,但是给到组件标签就会获取到这个vc实例组件实例对象

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

点击向全部子女借两百,也可以用这种方法,一个一个来,一个用一个新的方法,一个全新的api,$children,他可以获取到当前这个组件所有的子组件,以数组的形式展示,里面是每一个vc实例

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

注意虽然是数组,但是最好不要用下表的形式来写,因为它里面的每个组件实例对象是不按顺序来的,你也不知道哪个是第一个

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

当我们点击子组件里面的借钱,自己会增加,同时父组件得钱也会减少,这个时候也用到一个api,$parent,可以获取到当前组件的父组件

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

6.1混合

当我们结构一样那就是复用,当我们js一样那就是mixin混合

先复习一下混合,一个单独的文件夹,一个js文件,里面直接暴露相同的配置项,只要是能写在js里面的都可以放进来,比如这里son和daughter都有相同的methods

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

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

那就可以直接提出来

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

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

用的时候直接导入,然后配置项mixins注意是数组形式来写,而且没有引号

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

然后他的一些注意事项:混合文件里面可以暴露多个配置项,只是要定义名字,导入的时候也要写好名字

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

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

然后就是你没有的混合都可以给你,但是你有的配置,以你自己的为准

然后生命周期钩子如果混合也有你也有,两个都会执行并不会执行一个,而且会先执行混合的

最后注意一下,混合可以全局混合

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

7.插槽

回顾一下

默认插槽,就是直接在标签组件写结构,组件写slot占位,如果父组件有数据要传到子组件,就不用传了,直接在这里用

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

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

具名插槽就是可以给slot添加name,然后我们的结构也可以slot去指定的slot

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

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

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

作用域插槽

我的理解是,因为我们前面使用插槽,一般是数据都在定义插槽这里,也就是并不在slot这里,他只是起一个占位的作用,真正我们要怎么用数据是在标签这里来决定怎么用,而作用域插槽就好像数据的作用域发生了变化,到了slot这边也就是子组件这边,作用域发生变化,这就是作用域插槽

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

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

插槽是可以传数据的,子给父传,直接通过slot标签传,父组件这边需要通过插槽的使用者来接受(注意什么叫做插槽的使用者,就是谁用标签来替代slot占位这个标签谁就是使用者,在这里template标签就是使用者

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

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

可以看到接受过来的数据是一个键值对,前面是我们传过来的数据名,后面是值

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

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

二.后台管理系统

1.简介

什么是后台管理?就是通过可视化的界面对数据库进行增删改查,并且根据不同的角色(老板、员工)看到的界面,操作的权限是不同的,一般而言这个项目是不需要注册功能的

2.后台模板介绍

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

首先模板下下来会发现,缺少依赖需要安装依赖(没有node_modules)

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

安装完毕之后查看package.json文件可以看到这个项目启动命令为dev

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

这样就可以将项目成功跑起来了

3.模板文件解析

  • build,是webpack的一个配置文件,比较少去触碰

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

  • src

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

    • api,与一些接口,请求相关的文件,他这里也是封装了一个axios然后通过函数的方式可以直接请求

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

    • assets,放置一些静态文件

    • icons,放置一些svg矢量图

    • layout,放置了一些组件和混入

    • router,路由相关文件,注意一下他的路由配置方式与以往有所不同,它是直接在这里对外暴露一个数组放我们的routes,然后一个函数new一个router实例,里面设置了路由滚动配置,注册了路由,然后调用这个函数在暴露出去

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

    • style,放置了一些样式相关的文件

    • utils,放置了一些其余配合文件,其中request.js就是二次封装axios,并放置了请求和响应拦截器

    • permission.js,可以看为权限守卫,这个文件设置了一些路由守卫来做权限管理

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

    • settings.js,后台项目配置文件,title可以改我们的网页标题

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

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

      fledHeader可以控制我们的表头是否固定

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

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

      slidebarLogo可以控制我们左边的logo是否显示

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

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

  • test,一些测试文件

  • 开发环境三大配置文件,可以被webpack检测到,分别是开发环境、上线环境和测试环境

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

    里面的这个配置里面的内容可以在通过 process.env来获取,根据不同的环境获取不同的内容

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

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

    用处:根据不同的环境接口路径也会不同

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

  • postcss.js,css相关配置文件

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

4.登录业务

他已经做好我们需要去修改,它采用的是elementUI的组件,所以越学后台项目就会越对elementUI一些组件越来越熟悉,登录业务整体由一个form组件完成,上面的model表示收集账号密码,rules表单验证规则

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

继续深入可以看到里面表单的每一项是由el-form-item组成,所以要注意 一般el-form和el-form-item是配套使用的

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

然后看到他的点击登陆的操作

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

点击登录按理应该是派发请求,获得token等,逻辑全在函数里面

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

继续走,看到他的actions里面login这个处理函数,先是获取用户名和密码,然后做了一个因为后面这个login是封装的登录请求函数,所以会返回一个promise,反正就跟我们原来的async加await一样,判断登录成功失败,只是我们的技术更新,那个时候async还没出来

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

所以可以改改

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

换成我们自己的真实接口地址

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

这里一改封装的axios请求响应拦截器也要改

baseurl不变

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

请求头的变量名跟后端沟通好的

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

响应头要注意成功不一定是20000也有可能200

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

修改请求服务器,并且匹配规则为我们的baseUrl,但是服务器里面没有这个路径,所以要路径替换

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

5.退出登录

位于layout组件的navbar组件里面

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

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

三.路由的搭建

首先我们的模板除了主页之外都可以删掉

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

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

这个时候启动会发现报错,都是路由里面的,原因是因为路由还注册这些删掉的组件

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

进入路由删掉已经删掉的组件配置就可以启动成功

然后可以看到我们要做到的效果

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

首先首页的名字是通过路由元信息来改,后面那个是旁边的图标可以用svg也可以用elementUI的icon

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

然后先做商品管理,先去views创建组件

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

去路由注册,注意我们这里按照他的规矩来,一级路由Component都是layout,只要搞准这一点,后面该怎么弄怎么弄,name、meta

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

然后继续他下面的二级路由

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

有一个小bug(spu和属性这边太近了),这个样式在哪里改

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

将他的名字改回来,组件里面其实是叫app-main

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

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

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

1.品牌管理静态组件

首先一个添加按钮

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

然后用到一个表格,里面table-column是每一列的意思,这里需要四列

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

修改单个列的宽度,并且居中显示,整个表格有边框

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

下面是一个分页器

首先我们需要的数据,当前页、总共数据、每页显示多少数据

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

继续往下是一个数组,他可以选择每页显示多少数据,就是你可以选择一页显示3条或者5条或者10条,后面这个layout是分页器的布局,我要让total、sizes显示在后面就放到后面来,注意怎么居中,怎么让total、sizes到达的最右边

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

最后连续页码用pager-count,但是它是表示 页码 的总数量,比如我为七,那么连续页码应该是5,页码个数总共就有七个

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

我为9,除去前后两个,中间连续页码就为7

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

2.品牌管理列表展示

涉及到接口相关

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

这里不同vuex来做,那就要做一个全局接口管理

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

因为我们后续应该配合分页器来做,所以封装一个函数,直接调用,而且我们的当前页码等数据应该是活的

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

数据拿过来

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

前面说过el-table有动态数据现在就可以将动态数据绑定在这上面

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

可以发现我们原来定好的列,数据绑定上来展示三条数据就是三行

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

添加内容

序号 type

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

名称 不用写前缀list prop

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

品牌logo,这里要注意我们需要添加图片标签来放图片,但是这里是组件标签,所以就要用slot插槽来做,并且子组件那边会传回来两个数据直接解构赋值获得,注意这两个变量名字是固定的

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

下面操作,要添加两个按钮所以也需要slot

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

跟分页器连动起来

首先数据要绑定上,单向绑定

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

然后分页器有一些事件

  • current-change 当前页发生变化会触发,她就接受一个参数pager,就是你当前点击的这个页码

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

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

  • size-change pageSize 改变时会触发 ,他也会接受一个参数limit,就是当前一页展示几条数据

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