前端框架Vue2+Vue3
文章平均质量分 63
真爱计划
需要源码的(https://github.com/Chicksqace),B站搜索(真爱计划)感谢三连支持!!!
展开
-
后台管理系统: 权限管理
但我们这些操作只是vuex保存当前用户的异步路由,注意,一个用户需要展示完成路由:常量,异步,任意路由,因此我们需要计算出当前用户展示的所有路由。菜单权限:当用户获取用户信息的时候,服务器会把相应的用户拥有菜单的权限信息返回,需要根据用户身份对比出,当前这个用户需要展示哪些菜单。起始不同的用户(角色),登录的时候会向服务器发请求,服务器会把用户相应的菜单的权限的信息,返回给我们。因为没这个路由组件,所以建一个就有了。按钮的权限:不同的用户(角色),有的用户的是可见按钮、当然有的用户不可见。原创 2024-02-27 22:38:42 · 1617 阅读 · 0 评论 -
后台管理系统: 数据可视化案例
3.进行配置,这里现在mounted这个生命周期里(主要容器先有,才用通过ref的方式拿到容器的demo),然后进行setOption的配置。顶部是mounted,所有第一次没有数据,没有数据因此不显示,因此我们需要监听这个listState。因为我需要拿到的mock假数据,防止与真实服务器的数据冲突,注意这个变量是没有的,因此我们还需要重新设置。子组件,插槽的模样是这样的,而图表封装到新的组件当中。然后通过插槽的方式插入。在子组件当中,监听title属性,并相应的修改销售额或者访问量的图标信息。原创 2024-02-27 22:37:18 · 1218 阅读 · 0 评论 -
后台管理系统: 数据可视化基础
数据可视化简单理解,就是将数据转换成易于人员辨识和理解的视觉表现形式,如各种 2D 图表、3D 图表、地图、矢量图等等。例如Excel等等。原创 2024-01-20 18:04:16 · 1269 阅读 · 0 评论 -
后台管理系统: sku管理模块
完成添加SKU静态组件点击添加sku,触发回调,场景为2静态界面完成。原创 2024-01-20 18:03:21 · 1158 阅读 · 0 评论 -
后台管理系统: spu管理模块
spu 可以理解为类例如 people类【spu】sku可以理解为实例例如:小明 18 男spu跟sku可以理解为类跟多个实例的关系。原创 2024-01-20 18:02:36 · 1012 阅读 · 0 评论 -
后台管理系统:简介与登录退出
1:什么是后台管理系统项目?注意:前端领域当中,开发后台管理系统项目,并非是java、php等后台语言项目。【尚品汇电商平台项目】,这个项目主要针对的是用户(游客),可以让用户在平台当中购买产品。但是你需要想明白一件事情,用户购买产品信息从何而来呀?比如:前台项目当中的数据来源于卖家(公司),但是需要注意的时候,卖家它不会数据库操作。对于卖家而言,需要把产品的信息上传于服务器,写入数据库。卖家并非程序员,不会数据库操作(增删改查)。原创 2023-08-24 20:12:40 · 1132 阅读 · 0 评论 -
后台管理系统:项目路由搭建与品牌管理
组件 | ElementForm 组件提供了表单验证的功能,只需要通过rules属性传入约定的验证规则,并将 Form-Item 的prop属性设置为需校验的字段名即可。rules:{// require:必须要校验字段(前面5角星有关) message提示信息 trigger:用户行为设置(事件的设置:blur change)tmName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' },// 品牌长度为2-10。原创 2023-08-31 09:50:58 · 256 阅读 · 0 评论 -
Vue电商项目--组件通信
原生的按钮会触发handler事件,但是组件event却不会。因为event1不是原生dom节点,绑定的click不是原生dom事件,而是自定义事件了。如果我们需要使用原生的dom事件,那么我们需要加修饰符nactive(可以把自定义事件变成原生dom事件)其实原理就是用到了事件的委派自定义事件需要$emit来绑定。原创 2023-08-13 09:49:54 · 434 阅读 · 0 评论 -
Vue电商项目--服务器
就是如果想要别人访问我们的项目,那么我们就需要服务器。我们之前使用node搭建服务器,只能在局域网中访问。购买云服务器的方式有很多:像阿里云,腾讯云等等。原创 2023-08-08 19:30:22 · 260 阅读 · 0 评论 -
Vue电商项目--VUE插件的使用及原理
图片懒加载,就是图片延迟加载。只加载页面可视区域上的图片,等滚动到页面下面时,再加载对应视口上的图片而在vue中有一个插件去使用他,这里我们引入了一张图片,然后在插件的配置中,配置了懒加载默认的图片为这张然后就是这样去设置他然后我们就发现了图片并没有加载出来,我查询了文档。好像要下这个版本然后成功了图片没有加载的时候,就默认显示这样然后说一下图片懒加载的原理自定义插件书写插件,并去使用它然后传入的俩个参数,第一个是vue,第二个是传入的值。原创 2023-08-08 13:01:46 · 351 阅读 · 0 评论 -
Vue电商项目--个人中心
配置路由界面如上我们现在要实现一种方式就是点击右侧的,左侧发生变化先把这部分拆走,拆分成俩部分但是很明显报错了,错误是图片路径的问题然后就没有问题了。但是我们这块不是使用组件的方式,而是使用二级路由的方式然后回到个人中心页面,配置路由然后就完事了。原创 2023-08-11 21:21:34 · 753 阅读 · 0 评论 -
Vue电商项目--订单和支付
没有组件,先搬组件配置路由然后静态pay页面就有了这里提交订单不是简单的直接进行路由的跳转,而且要拿你支付的数据向服务器发请求。原创 2023-08-07 08:57:59 · 465 阅读 · 0 评论 -
Vue电商项目--导航守卫
导航 守卫导航:表示路由正在发送改变,进行路由跳转守卫:你把它当中‘紫禁城守卫’全局守卫:你项目中,只要路由变化,守卫就能监听到。举例:紫禁城【皇帝,太子】,紫禁城大门守卫全要检查欧克,我们开始修改代码说一下前置路由守卫的三个参数})to:可以获取到你要跳转到那个路由信息from:可以获取到你从哪个路由而来的信息next:放行函数 next()放行 next(path) 放行到指令路由 next(false) 此路不通,原路返回。原创 2023-08-06 08:58:19 · 243 阅读 · 0 评论 -
Vue电商项目--登录与注册
登录接口:做的不完美,一般登录成功服务器会下发token,前台持久化存储token,【带着token找服务器要用户信息进行展示】因为没有再次派发事件,所以,现在我们这种写法没有持久化存储,不完整的。我们需要持久化存储这个token的值,但是要注意的一点就是,vuex是不能持久化的存储数据。获取验证码的这个接口,把验证码返回,但是正常情况,后台验证码发送到用户手机上【省钱】添加了token校验获取用户登录信息,用户登录只保存用户的token。1.需要发请求,通知服务器退出登录【清除一些数据,token】原创 2023-07-10 16:37:50 · 11813 阅读 · 5 评论 -
Vue电商项目--购物车操作
而我们给服务器带数据,第一个肯定是产品的id,第二个为新值-旧值的差值 例如你原先12 然后为13 ,你带给服务器就是+1。效果就是这样,但是存在bug,如果我们取消掉一个函数,总复选框是没有效果的,这个是因为数据并没有发送变化。如果都成功,返回成功。这个判断是用户输入进来的最终量,如果非法的(带有汉字|出现负数),带给服务器数字为零。否则,属于正常情况(小数,取整),带给服务器变化的量,用户输入进来的--产品的个数。绑定一个change事件,传入俩个参数,分别是你要修改谁,第二个是传入的状态。原创 2023-06-23 15:01:50 · 913 阅读 · 0 评论 -
Vue电商项目--uuid游客身份获取购物车数据
要生成一个随机字符串,且每次执行不能发生变化,游客身份持久化存储. 先从本地存储中获取uuid,看是否本地存储里面有,如果有,生成游客临时身份,本地存储一次。我们这拿不到数据是因为,服务器不知道你的身份,它如何拿你的详细的信息呢?我们需要告诉服务器,我们的身份是谁,比如(游客)这里我们封装一个模块,放到utis l里面,然后导出使用这个方法就可以了。发现:发请求的时候,获取不到你购物车里面数据,因为服务器不知道你是谁?这里我们用到的技术就是uuid,它可以自动帮我们生成一个唯一标识。原创 2023-06-06 21:59:34 · 764 阅读 · 0 评论 -
Vue电商项目--详情页面完成
这是因为.skuImageList[0]写死了索引,它只能为第一张,我们应该定义的变量来保存索引,保障这是活的索引。但我们还要加入购物车成功与失败的判断,成功进行路由的跳转,失败就提示信息。这里要注意服务器写入数据成功,并没有返回其他的数据,只返回code=200,表示这次操作成功。就是把官网的复制下来,删除一些,我们不需要的内容。然后发现了错误,404,查看一下应该是服务器接口的问题,果然加了/api导致错误。注意的一点就是我们要使用try……就是在路由跳转的时候还需要将产品的信息带给下一级的路由组件。原创 2023-06-01 12:00:57 · 3126 阅读 · 0 评论 -
Vue电商项目--详情页面--产品售卖属性
这里说到一点,就是滚动条的问题,当我们处于浏览器最低端,滚动条也处于最低端。当点击商品图片的时候,跳转到详情页面,在路由跳转的时候需要带上产品的ID给详情页面。当前计算出的categoryView属性值至少是一个空对象,假的报错就不会有了。而我们之前就已经封装好了skuInfo的数据,现在只要捞过来放在页面上就可以了。这里我们定义一个事件,传俩个值,第一个是点击售卖的属性。第二个是售卖属性的数组。就是上面的部分,我们点击自身,让他高亮。当前这个项目:连续的页码数-----5(暗含条件,分页器至少五页)原创 2023-05-28 14:29:19 · 2050 阅读 · 0 评论 -
Vue电商项目--分页器制作
因为我们点击第一页的上一页是没有效果的。ElementUI有相应的分页组件,使用起来超级简单,但是我们不使用【掌握自定义分页功能】1.为什么很多项目采用分页功能,比如电商平台同时展示的数据有很多(1万+),采用分页功能。自定义分页器,在开发的时候先自己传递假的数据进行测试,调试成功以后在用服务器数据。来到分页器组件,动态拿到数据,通过计算属性,向下取整拿出数据渲染到页面上。但是我们这样的数据是写死的,我们需要从服务器中拿数据,然后传进去。这样写是没有问题的,但是如果我们传入的是第一页,又会发生错误。原创 2023-05-26 23:03:47 · 2747 阅读 · 1 评论 -
Vue电商项目--平台售卖属性和的排序操作制作
直接去阿里找,然后复制它的url,当然如果我们要在页面中去引用它,需要加https。删除数组的办法需要给数组传一个参数,例如4g告诉删除的就是这个4g的索引值。这里块是平台的售卖属性,我们在这里绑定回调,一点击就把id传给父组件。这些价格不需要,我们来计算,只需要把参数传给后端服务器,让它帮我们搞。这个形参相到与是一个标记,代表用户点击的是综合(1)价格(2)那这个箭头是上还是下,这个取决于这个desc这个属性。商品属性的数组: ["属性ID:属性值:属性名"]就是点击平台的售卖属性,下面显示对应的内容。原创 2023-05-21 16:23:31 · 738 阅读 · 0 评论 -
Vue电商项目--search模块面包屑的制作
还有上面画圈的部分:在发请求之前,把接口需要传递参数,进行整理(在给服务器发请求之前,把参数整理好,服务器就会返回查询的数据)。因为父组件中searchParams参数是带给服务器参数,子组件把你点击的品牌的信息,需要给父组件传递过去 ----自定义事件。这个是因为我们返回的是带ID,品牌名。但其实我们这样的跳转是有问题的,如果我们是通tagNav跳转这个,例如华为。就是我们这里的数据不能是写死的,我们要修改成从服务器返回的数据。但我们这样只是把带给服务器的参数置空了,我们还需要向服务器发请求。原创 2023-05-17 19:36:34 · 516 阅读 · 0 评论 -
Vue电商项目--开发Search模块
我们这里有一个注意点,那就是state.searchList.goodsList如果服务器数据回来了,那没有问题是一个数组。写接口,当前这个接口(获取搜索模块的数据),给服务器传递一个默认参数【至少是一个空对象】通过测试发现,它返回的是一个对象,因此我们在仓库中的searchList也要是{}vuex 的派送三部曲,这里要注意的是我们可以参数形参传值给它一个默认的空对象。但是这样的方式传入一个空对象的方式很傻,所以我们要在组件挂载之前给它传递参数。项目当中getters主要的作用是:简化仓库中的数据。原创 2023-05-14 19:22:22 · 534 阅读 · 0 评论 -
Vue电商项目--开发floor模块
如果不添加这个属性,那么watch就监听不到list.因为这个数据从来没有发生变化(数据是父亲给的,父亲给的是一个对象,对象里面该有的数据都是有的)第二 this.$nextTick 只能监听到数据已经有了,但是v-for动态渲染结构我们还是没有办法确定的,因此还需要nextTick。切记 :以后在开发项目的时候,如果看到某一个组件在很多地方都使用,你把它变成全局组件,注册一次,可以在任意地方使用,公共的组件|非路由组件放到components文件夹中。在开发之前,说一下之前存在的一些小毛病。原创 2023-05-16 14:35:59 · 493 阅读 · 0 评论 -
Vue电商项目--开发ListContainer模块
如果执行handler方法,代表组件实例身上这个属性的属性已经有了【数组:四个元素】上节,我们使用了mock把数据成功的存储到了banner组件当中。当前这个函数执行,只能保证bannerList数据已经有了,但是你没有办法保证v-for已经执行结束。在new Swiper实例之前,页面中结构必须要有,那个明显,异步请求,结构是不完整的。v-for执行完毕,才有结构【你现在在watch当中没有办法保证的】笨的办法,我们可以使用定时器,延迟的方式实现。这里的类名不能啥写,这是人家帮我们写好的。原创 2023-05-10 21:22:47 · 588 阅读 · 0 评论 -
Vue电商项目--开发Search模块与mockjs模拟数据
然后是因为我们在 transition标签中添加了name="sort"所以我们在样式中是用 .sort-enter表示过渡动画的开始,否则是v-enter。3.把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候,会把相应的资源原封不动的打包到dist文件夹中】然后保存数据和提交数据(注意不允许在action中直接修改state里面的数据,我们需要在mutations中修改)就是之前我们写的这个request.js是真实的我们的服务器发起请求的。请求写好,存到仓库当中。原创 2023-05-06 20:17:30 · 808 阅读 · 0 评论 -
Vue电商项目--防抖节流应用
router-link:可以一个组件,当服务器的数据返回之后,循环很多的router-link组件【创建组件的实例的】1000+正常:事件触发非常频繁,而且每一次的触发,回调函数都要去执行(如果时间很短,而回调函数内部有计算,那么很容易出现浏览器卡顿)防抖:前面的所有的触发都取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行最后一次。Home模块跳转到Search模块,一级会把用户选中的产品(产品的名称,产品的ID)在路由跳转的时候,进行传递。此时我们就可以使用时间的委派。原创 2023-05-03 16:32:27 · 919 阅读 · 0 评论 -
尚品汇api(后台)接口文档
"skuDesc": "主体\n入网型号\nA2223\n品牌\nApple\n产品名称\niPhone 11\n上市年份\n2019年\n上市月份\n9月\n基本信息\n机身颜色\n红色\n机身长度(mm)\n150.9\n机身重量(g)\n194\n机身材质工艺\n以官网信息为准\n机身宽度(mm)\n75.7\n机身材质分类\n玻璃后盖\n机身厚度(mm)\n8.3\n运营商标志或内容\n无","props": ["1:1700-2799:价格", "2:6.65-6.74英寸:屏幕尺寸"],原创 2023-05-02 20:15:16 · 1590 阅读 · 0 评论 -
Vue电商项目--vuex模块开发
切记,并不是全部的项目都需要Vuex,如果项目很小,完全不需要vuex,如果项目很大,组件很多,数据很多,数据维护很差,就可以使用vuex。它返回的是一个Promise对象,然后我们就解构出commit.这里一定要注意形参是{commit},否则会报以下错误。vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共有的数据。如果项目过大,组件过多,接口多,可以让vuex实现模块化开发。然后通过动态索引的方式,给他添加cur类,也能实现。通知Vuex发请求,获取数据,存储在仓库中。原创 2023-05-01 13:23:37 · 1172 阅读 · 0 评论 -
Vue电商项目--axios二次封装
我们可以在请求拦截器和相应拦截器中设置nprogress设置对应的start和done,但是发现,我们并没有效果。请求拦截器,响应拦截器:请求拦截器,可以在发请求之前处理一些业务,响应式拦截器:当服务器数据返回以后,可以处理一些事情。意思就是以后如果我们/api/list/card这个路径话,就可以忽略/api。XmlHttpRequest,fetch,JQ,Axios这些都是很优秀的网络请求库。首先,我们这个是没有安装axiso,因此要安装一下。而解决跨域问题,可以采用JSONP,CROS,代理。原创 2023-04-30 14:01:48 · 1226 阅读 · 0 评论 -
Vue电商项目--home模块组件拆分
组件分别拆分到page下的home文件夹中。如果结构中有图片,那么就在当前的文件夹中新建一个images图片目录用来存放图片。由于三级联动,在home,search,Detail都要用,因此我们可以注册为一个全局样式。注意:三级联动全局组件,三级联动已经注册为全局组件,因此不需要在引入了。在拆分组件时,我们要注意三点 Html,Css,图片资源。好处:只需要注册一次,就可以在项目的任意地方使用。这样全局组件就有了,然后去使用它。获取服务器的数据进行展示。这个是拆分好了的组件。原创 2023-04-29 14:28:24 · 174 阅读 · 0 评论 -
编程式导航路由跳转到当前路由(参数不变),多次执行会抛出NavigatorDuplicated的禁告错误?
this.$router属性 当前的这个属性,属性值VueRouter类型的一个实例,当在入口文件注册路由的时候,给组件实例添加$router|$route属性。编程式导航路由跳转到当前路由(参数不变),多次执行会抛出NavigatorDuplicated的禁告错误?这种写法:治标不治本,将来在别的组件当中push|replace,编程式导航还是有类似的错误。通过push传递响应的成功,失败回调函数,可以捕获到当前的错误,可以解决。为什么编程式导航进行路由跳转的时候,就会有这警告?原创 2023-04-28 18:39:05 · 666 阅读 · 0 评论 -
Vue电商项目--项目路由
答:路由跳转传参的时候,对象的写法可以是name,path形式,但是需要注意的是,path这种写法不能与params参数一起使用。2.路由组件一般需要在router文件夹中进行注册(使用的即为组件的名字),非路由组件在使用的时候,一般都是以标签的形式使用。如何指定params参数可以传递,或者不传递,在配置路由的时候,在占位的后面加上一个问号【parms可以传递或者不传递】配置的路由的时候,可以给路由添加路由元信息【meta】,路由需要配置对象,它的key不能瞎写,乱写。原创 2023-04-25 18:37:39 · 452 阅读 · 0 评论 -
Vue3快速上手
什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。原创 2023-04-24 20:08:56 · 411 阅读 · 0 评论 -
Vue电商项目--应用开发详解
assets文件夹:经常放置一些静态资源(图片),assets文件夹里面资源webpack会进行打包为一个模块(js文件夹里面)public:一般放置一些共用的静态资源,打包上线的时候,public文件夹里面资源原封不动打包到dist文件夹里面。因为项目大的时候src(源代码文件夹):里面目录会很多,找文件不方便,设置src文件夹的别名的好处,找文件会方便一些。package.json:看到项目描述、项目依赖、项目运行指令。@代表的是src文件夹,这样将来文件过多,找的时候方便很多。原创 2023-04-23 19:36:46 · 636 阅读 · 1 评论 -
Vue电商项目--理清思路
学会模块化、组件化、工程化的开发模式。说明: 完整功能界面运行最终版项目。后端数据,实现前后端分离开发。熟悉一个项目的开发流程。掌握一些项目优化技巧。原创 2023-04-23 18:47:18 · 80 阅读 · 0 评论 -
vue3中其他的变化
过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是 “只是 JavaScript” 的假设,这不仅有学习成本,而且有实现成本!v-on.native修饰符(就是组件中保证它是原生的banfa@click)因为v3的脚手架更加智能了,它能指定识别出来,你是开发模式,还是上线模式。将全局的API,即:Vue.xxx 调整到应用实例(app)上。但是在v3中没有Vue这个配置,因此进行了全局api的转换。Vue 2.x 有许多全局 API 和配置。- 例如:注册全局组件、注册全局指令等。原创 2023-04-23 17:00:51 · 351 阅读 · 0 评论 -
vue3新的组件
而我们想要的效果的弹窗处于页面中间,不影响其他组件的运行。但又一点不好,就是网速很慢的时候,最后的迟迟不出来,用户可能以为没有这个组件,因此我们要解决这个问题,也就是使用suspense。我们把需要传送走的内容放到teleport标签内部,使用to指向它要传送到的地址,我们这里测试一下用body。因为我们是异步引入,那么我们就可以使用promise对象来玩,上面的红框的代码实现的效果就是延迟3秒后出来。没有写根标签,也没有报错,如果是在v2中,我们还需要用一个div来包裹它。原创 2023-04-22 20:50:06 · 723 阅读 · 0 评论 -
Composition API 的优势
使用传统OptionsAPI(配置性api)中,新增或者修改一个需求,就需要分别在data,methods,computed里修改。看这张图,一个data中保存着n个功能的数据,那么methods中保存着n个功能的方法,看起来十分的乱。把所有数据,方法,计算属性按照功能点,进行打包,那么打出来的包就是一个hock函数。这张图告诉我们,我们在v2的时候功能放到配置中。它想告诉我们所有的功能都拆散了。我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。组合式api就解决了这个问题。原创 2023-04-22 13:55:03 · 305 阅读 · 0 评论 -
其它 Composition API
注意的一点,这个customRef内部要return{}对象形式,而且你如果要写逻辑还要内部写成箭头函数的形式,里面还必须要有get()和set().这个俩个调用跟我们讲的计算属性一样的。如果传入的是普通类型,俩个是没有区别的,但是如果传入对象类型,shallowRef不求人,它没有反应,而ref是可以的。浅层次的意思就是像name,age这些是响应式的,而job就不处理,意思就是只处理第一层数据,像第二层的都不处理。使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。原创 2023-04-21 20:56:58 · 664 阅读 · 0 评论 -
toRef
看这个页面,其实这个Proxy的实现就响应式的原理,但是let name=p.name实际上就是let name='张三',只是把这个值给了name,而不去修改p.name。- 扩展:``toRefs`` 与 ``toRef``功能一致,但可以批量创建多个 ref 对象,语法:``toRefs(person)``这么写,虽然功能能实现了,它只是初始化读取了,后面修改的并不是person里面的name,而是改的新弄出来的ref的内容。因此我们要用toRef,这个toRef('源对象','你要转换的属性')原创 2023-04-20 14:44:23 · 468 阅读 · 0 评论