vue前台管理项目
关注
分享
扫一扫
文章平均质量分 73
以实战为背景,充分让读者理解项目开发流程和处理各种问题
学无止境QAQ
关注我，一起进步
展开
-
Vue项目中常见问题(73)组件通信-作用域插槽
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master作用域插槽1.基础结构2.父组件给子组件传递数据3.作用域插槽效果一:显示TODO列表时,已完成的TODO为绿色效果二:显示TODO列表时,带序号,TODO的颜色为蓝绿搭配gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要...原创 2022-05-29 19:15:12 · 456 阅读 · 0 评论 -
Vue项目中常见问题(72)组件通信-混入mixin
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码$children与$parent原创 2022-05-29 17:21:40 · 293 阅读 · 0 评论 -
Vue项目中常见问题(71)组件通信-$children与$parent
location / { root /root/lxh2/www/shangpinhui/dist; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://gmall-h5-api.atguigu.cn; }原创 2022-05-29 16:16:42 · 489 阅读 · 0 评论 -
Vue项目中常见问题(70)组件通信-$attrs与$listeners
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master组件通信-$attrs与$listeners1.基本结构2.封装ElementUI按钮,并且是带Hover提示的按钮2.1在父组件中引入HintButton2.2子组件内的结构3.$attrs获取父组件传递过来的props数据4.$listeners获取父组件给子组件传递的自定义事件总结:gitee仓库地址:https://gite.原创 2022-05-29 00:35:52 · 1137 阅读 · 0 评论 -
Vue项目中常见问题(69)组件通信-sync属性修饰符
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/mastersync属性修饰符1.基础结构搭建:2.不使用sync修改符3.使用sync修改符总结:gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码sync属性修饰符属性修饰符.sync，可以实现父子数据同步。以后在elem原创 2022-05-28 21:57:02 · 365 阅读 · 0 评论 -
Vue项目中常见问题(68)组件通信-v-model深入
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/masterv-model实现组件通信1.基础结构搭建2.v-model基本使用3.利用value与input事件实现v-model功能4.v-model:实现父子组件数据同步(实现父子组件通信)总结:gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据...原创 2022-05-28 21:17:16 · 868 阅读 · 0 评论 -
Vue项目中常见问题(67)组件通信-自定义事件深入
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master事件相关的深入学习第一种原生DOM事件第二种自定义事件原生DOM事件1.原生DOM绑定系统事件2.组件绑定自定义事件---利用native触发---原理是事件委派编辑综上所述:我们可以总结出来我们在分析一下native的原理:3.原生DOM绑定自定义事件----没有任何意思4.组件绑定自定义事件----利用$emit...原创 2022-05-28 20:22:03 · 765 阅读 · 0 评论 -
Vue项目中常见问题(66)组件通信6种方式
目录组件通信方式6种第一种:props第二种:自定义事件第三种:全局事件总线$bus第四种:pubsub-js,在React框架中使用比较多(发布与订阅)第五种:Vuex第六种:插槽组件通信方式6种第一种:props适用于的场景:父子组件通信注意事项:如果父组件给子组件传递数据(函数):本质其实是子组件给父组件传递数据如果父组件给子组件传递数据(非函数):本质就是父组件给子组件传递数据书写方式:3种['todos'],{type:Array原创 2022-05-27 17:58:33 · 313 阅读 · 0 评论 -
Vue项目中常见问题(65)购买服务器以及安全组与xshell操作
目录1.打开网页登录2.打开安全组3.打开服务器编辑4.Xshell7的linux操作4.1现在进入的目录是家目录4.2可以看到根目录下面的目录编辑4.3上面有很多目录,但是我们能操作的只有root目录4.4在root文件下创建一个新的目录4.5进入我们在root中创建的文件中再创建一个文件4.6在www里面在创建一个文件夹shangpinhui4.7查看绝对路径5.Xftp7的操作当然建文件夹我们也可以不用linux命令来建...原创 2022-05-27 03:19:02 · 528 阅读 · 0 评论 -
Vue项目中常见问题(64)处理map文件
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码打包我们的项目在我们项目的这个目录下:鼠标右键:弹出我们输入npm run build打包成功后,多了一个dist文件现在我们可以单独打开dist文件看看,当然以后只需要dist文件了其他的都不用了这些文件我们都认识,但是js中有一种文件的格式,MAP文件我们不认识...原创 2022-05-26 22:06:25 · 1746 阅读 · 0 评论 -
Vue项目中常见问题(63)路由懒加载
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码路由懒加载地址:路由懒加载 | Vue Router当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。找到router/routes.js中的代码://引入一级路由组件im...原创 2022-05-26 21:34:22 · 540 阅读 · 0 评论 -
Vue项目中常见问题(62)vee-validate表单验证使用
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/mastervee-validate1.安装vee-validate2.引入使用vee-validate3.完成注册页面的表单验证手机号验证验证码验证密码验证确认密码验证同意复选框开关的验证gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历...原创 2022-05-26 21:06:37 · 1610 阅读 · 0 评论 -
Vue项目中常见问题(61)图片懒加载+自定义事件
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求:优化项目图片懒加载1.安装插件2.去入口文件引入插件3.使用图片懒加载自定义事件gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求:优化项目图片懒加载网址:vue-lazyload - n..原创 2022-05-26 19:44:14 · 436 阅读 · 2 评论 -
Vue项目中常见问题(60)用户登录后路由问题(路由独享守卫与组件内守卫)
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求:路由独享守卫只有从购物车界面shopcart才能跳转到交易页面(创建订单)trade只有从交易页面(创建订单)trade页面才能跳转到支付页面pay组件内守卫只有从支付页面pay才能跳转到支付成功页面paysuccessgitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commi..原创 2022-05-26 18:25:41 · 715 阅读 · 0 评论 -
Vue项目中常见问题(59)未登录的导航路由守卫判断
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.把Header中该实现的跳转都实现2.处理跳转业务问题出现:gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:我们知道未登录的状态,是不能进入交易相关(trade)、支付相关(pay、paysu原创 2022-05-26 17:41:06 · 2539 阅读 · 0 评论 -
Vue项目中常见问题(58)我的订单页面完成
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求:完成我的订单页面获取我的订单列表接口:1.写api接口2.发请求3.动态展示数据3.1找到对应的结构gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求:完成我的订单页面获取我的..原创 2022-05-25 21:42:01 · 1441 阅读 · 0 评论 -
Vue项目中常见问题(57)个人中心二级路由搭建
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master1.搭建个人中心静态页面2.注册路由3.二级路由实现3.1 我们把右侧内容的结构拆出来,单独拆成一个组件3.2在pages/Center中新建groupOrder和myOrder文件夹3.3 groupOrder和myOrder结构搭建3.4 测试引入到Center排除错误3.5删除刚刚引入的路由3.6把groupOrder和...原创 2022-05-25 21:42:20 · 962 阅读 · 0 评论 -
Vue项目中常见问题(56)微信支付业务的实现
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master前言:业务需求1:实现二维码1.安装qrcode2.引入qrcode3.使用qrcode4.二维码放入结构中5.扫码支付业务查询支付订单状态接口5.1写接口api长轮询 和短轮询是什么?5.2二维码展示出来需要做一件事长轮询5.3支付成功与失败的判断5.4paysuccess静态组件搭建5...原创 2022-05-25 17:38:52 · 1079 阅读 · 3 评论 -
Vue项目中常见问题(56)支付页面使用ElementUI以及按需引入
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.安装ElementUi2.引入ElementUI2.1按需引入2.2引入与注册组件2.3引入页面测试2.4为了使用ElementUI有代码提示,我们安装一个vue-helper3.ElementUI的使用3.1图标的使用4.用ElementUI的MessageBox弹框完成业务4.1 在main.js中引...原创 2022-05-25 18:43:23 · 1118 阅读 · 0 评论 -
Vue项目中常见问题(55)提交订单、获取订单号、展示支付信息
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求:完成提交订单的业务1.支付静态组件先完成Pay静态组件完成配置路由2.点击提交订单把支付信息传给服务器提交订单的接口2. 1.写api这次我们不用vuex来写,如果没有vuex,我们应该直接在组件当中发请求,拿到服务器的数据,在组件当中进行管理2.2.引入api第一种引入方法:第二种引入方法:2. 3.发请求..原创 2022-05-25 00:55:09 · 3791 阅读 · 0 评论 -
Vue项目中常见问题(54)获取交易页面数据,用户地址信息展示,交易页面完成
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master一、获取用户地址信息接口1.写api2.创建一个新的小仓库3.回到大仓库引入小仓库4.回到小仓库发请求,存储数据,展示数据二、获取订单交易页信息的接口1.写api2.回到仓库,三连环三、用户地址信息的展示1.利用计算属性把数据放到组件的身上2.遍历,把数据放到页面上我们知道一上来应该有一个默认地址,就是默认勾...原创 2022-05-24 19:58:02 · 745 阅读 · 0 评论 -
Vue项目中常见问题(53)trade订单结算静态组件
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master1.在pages下新建一个Trade文件,里面新建一个index.vue编辑2.配置路由3. 找到我们购物车中的结算的结构的位置gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码1.在pages下新建一个Trade文件,里面原创 2022-05-24 16:46:56 · 458 阅读 · 0 评论 -
Vue项目中常见问题(52)导航守卫的判断与用户登录操作
目录问题1:用户已经登录了,用户就不应该还能回到login页面解决方法:导航守卫那么什么是导航守卫呢?举例子:方便理解记忆全局守卫:你的项目当中,只要发生路由变化,守卫就能监听到项目中的应用:解决问题1:问题1:用户已经登录了,用户就不应该还能回到login页面所以路由的跳转不是你想怎么跳就怎么跳的解决方法:导航守卫那么什么是导航守卫呢?我们去到vue的官网中:导航守卫 | Vue Router正如其名，vue-router 提供的导航守卫..原创 2022-05-24 11:35:41 · 1397 阅读 · 0 评论 -
Vue项目中常见问题(51)退出登录
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.找到对应的结构绑定点击事件2.写api3.仓库中书写三连环问题1:gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:退出登录向服务器发请求,告诉服务器要退出登录,服务器需要清除一些东西,原创 2022-05-24 08:29:58 · 972 阅读 · 0 评论 -
Vue项目中常见问题(50)登录业务(token)与业务中存在的问题
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.找到登录的组件的对应结构收集表单信息2.写接口api3.找到user仓库,写action4.组件中派发action5.token出现业务需求2:1.书写api2.仓库store中书写三连环3.把token带给服务器拿到数据4.仓库中存储数据继续三连环5.数据展示在页面git...原创 2022-05-24 07:50:50 · 1242 阅读 · 0 评论 -
Vue项目中常见问题(49)注册业务
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master注册业务|登录业务中表单验证先不处理[最后我们在统一处理]1.找到注册的验证码后面的按钮,进行修改2.收集表单数据2.1 收集手机号表单数据2.2 获取验证码操作3.书写api4.书写仓库4.1新建仓库user4.2在大仓库中进行合并4.3引入api,写action4.4组件拿到数据并进行展示5.收集密码...原创 2022-05-23 18:24:32 · 507 阅读 · 0 评论 -
Vue项目中常见问题(48)登录注册静态组件
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master1.完整静态组件的搭建2.登录的完整静态代码:编辑3.注册的完整静态代码:gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码登录注册是必须要会的技能1.完整静态组件的搭建并且在assets文件下新建一个ima..原创 2022-05-23 15:59:54 · 698 阅读 · 0 评论 -
Vue项目中常见问题(47)全部商品的勾选状态修改
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.找到全选按钮绑定事件2.派发action3.在仓库中书写action4.回到组件,try和catch操作gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:我们点击全选按钮的时候.原创 2022-05-23 15:24:35 · 779 阅读 · 2 评论 -
Vue项目中常见问题(46)删除全部选中的商品
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.删除选中的商品结构出, 绑定点击事件2. 书写事件函数,派发一个action3.问题来了,我们如果在同一个action中,deleteAllCheckedCart这个函数执行一次,调用上面删除购物车某一个产品的函数deleteCartListBySkuId多次3.1首先我们需要两个参数,一个dispatch,一个getters...原创 2022-05-23 14:14:01 · 1680 阅读 · 2 评论 -
Vue项目中常见问题(45)购物车修改产品状态
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.写接口2.写仓库三连环3.写组件gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码书接(42)购物车动态展示数据 的末尾最后一个问题Vue项目中常见问题(42)购物车动态展示数据_学无止境QAQ的博客-CS..原创 2022-05-23 01:37:16 · 571 阅读 · 0 评论 -
Vue项目中常见问题(44)删除购物车产品操作及修改产品个数节流
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:删除购物车产品1.写接口2.写仓库2.1引入api2.2书写action:3.找到删除的结构业务需求2:修改产品个数需要节流gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:删...原创 2022-05-23 00:50:19 · 1009 阅读 · 0 评论 -
Vue项目中常见问题(43)处理购物车产品数量完整版
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.找到对应的结构2.如果回调是同一个我怎么知道谁是谁呢?业务需求2:gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:我们购物车列表中的数量点击的时候,是需要发请求给服务器,存储我们改变的..原创 2022-05-22 23:37:58 · 997 阅读 · 0 评论 -
Vue项目中常见问题(41)uuid游客身份获取购物车数据
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master写接口,写仓库,拿数据,展示数据,最后写动态1.写接口2.写仓库三连环2.1在store中新建shopcart文件夹,里面在新建一个index.js文件2.2在store/shopcart/index.js中:2.3在store/index.js中:引入小仓库,实现模块式开发2.4在store/shopcart/index.js中:...原创 2022-05-22 20:43:35 · 1383 阅读 · 4 评论 -
Vue项目中常见问题(40)购物车静态组件与修改
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.找到对应的结构2.跳转业务需求2:1.新建静态组件2.配置路由3.进行路由跳转gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:我们在购物车中点击查看商品详情的按钮,需要跳转...原创 2022-05-22 15:56:36 · 394 阅读 · 0 评论 -
Vue项目中常见问题(39)路由传递参数结合回话存储
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master面试题:浏览器的存储功能是HTML5中新增的,分为本地存储和会话存储本地存储:持久化的 ----存储数据上线5M左右会话存储:并非持久化的----会话结束数据就消失本地存储|会话存储,一般存储的是字符串业务需求1:会话存储思考:我们怎么把detail中详情的数据给到addcartsuccess?所以本地存储和会话存储不可以存对象,我们..原创 2022-05-22 00:41:40 · 855 阅读 · 0 评论 -
Vue项目中常见问题(38)加入购物车成功与失败的判断
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:业务需求2:gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:我们在组件Detail/index.vue中我们并不知道我们产品信息加入数据库是成功了,还是失败了,Detali中是派发了一个act原创 2022-05-21 23:15:04 · 771 阅读 · 0 评论 -
Vue项目中常见问题(37)加入购物车
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.我们要利用我们添加购物车的接口2.写api3.三连环gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:加入购物车的操作分析:加入购物车是要进行路由跳转,但是在跳转之前,你的发一个请求..原创 2022-05-21 22:04:09 · 1048 阅读 · 0 评论 -
Vue项目中常见问题(36)购买产品个数的操作
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.创建一个data存储购买产品的个数2. 找到对应的结构3.收集表单数据4.完成+,-控制数字的加减业务需求2:1.给input绑定事件编辑2.methods中执行事件函数3.拿到用户输入的文本4.把用户输入的文本赋值给skuNumgitee仓库地址:https://gitee.com/CM...原创 2022-05-21 21:06:27 · 577 阅读 · 0 评论 -
Vue项目中常见问题(35)放大镜操作完整
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:业务需求2:业务需求3:第一种方法:通过样式来改变第二种方法:业务需求4:业务需求5:业务需求6:业务需求7：gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:完成小...原创 2022-05-21 19:31:02 · 835 阅读 · 0 评论 -
Vue项目中常见问题(34)产品售卖属性值排他操作
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.找到对应的结构2.绑定单击事件gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master大家根据上传历史进行查找你需要的代码业务需求1:我们想要点击哪个按钮,哪个按钮就有高亮,所以我们用到了排他操作1.找到对应的结构在pages/Det.原创 2022-05-21 17:53:54 · 215 阅读 · 0 评论