- 博客(20)
- 收藏
- 关注
RSS订阅
原创 Vue实战商城项目（一）—— 项目总览及项目目录划分 （内含整个项目的教学视频地址，推荐新手学习）
项目总览基本商城功能都可以实现，本项目是通过B站学习的，此贴仅供要点分析以及相关重点难点分析记录，如果想要学习完整详细的内容可到B站上搜索Vue,找到播放最多的就是了，链接： https://www.bilibili.com/video/BV15741177Eh主要目录结构...
2020-10-26 16:48:24
767
1
原创 electron请求接口报错，meta标签设置csp安全策略问题
如果直接去掉content中定义的内容安全策略，electron会报警告，因为从2.0版本开始，如果使用electron的开发人员没有定义Content-Security-Policy，Electron就会在DevTool console发出警告。因为没有在meta标签中定义connect-src所以采用默认的default-src的策略 因为设置成了’self’，所以这里请求的资源只允许同源的。该处的采用 任保留’self’ 再此基础上 加上指定域名的资源。
2023-07-06 18:04:38
607
2
原创 分享封装组件时卡住的问题
子组件封装radio的时候我们可以通过判断传出的radioIndex 来判断是否显示选中的样式，但是如果是多选框的话，这种方法就不行。在这里卡住了，本来我是想用比较骇客的方法来实现的，就是全选了统一给上选中样式，全不选就全部取消。子组件通过自己的点击方法来实现选中样式。但是很多时候结果不符合预期，就放弃了这样的方法。之后就卡住，因为组件慢慢越写越大，我也有点混乱了。然后我想到的用子组件拿到传回的索引值数组，然后在用索引数组来判断每一项的index从而显示选中样式，最后发现还是不可以，会出现下面的bu.
2021-07-21 15:36:57
177
原创 关于promise
promise概念：Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值。promise题目：const first = ()=>(new Promise((resovlve,reject)=>{ console.log(3); let p = new Promise((resolve,reject)=>{ console.log(7); setTimeout(()=>{ console.log(5); resolve(6);
2021-03-30 20:21:09
457
原创 XSS、CSRF以及如何防范
XSS、CSRF以及如何防范XSS、CSRF是什么？xss，即Cross Site Script，跨站脚本攻击。其原本的缩写是CSS，但为了和层叠样式表（Cascading Style Sheet）有所区别，因而在安全领域叫做XSS。XSS攻击是指攻击者在网站上注入恶意客户端代码，通过恶意脚本对客户端网页进行篡改，从而在浏览浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。攻击者对客户端网页注入恶意脚本一般为JavaScript，又是也包含HTML和Flash，有很多方式进行X
2021-03-18 20:48:07
345
原创 fetch与axios
fetch与axios这里写目录标题fetch与axiosfetch一、fetch优势二、fetch存在问题axios总结fetchfetch 是一个定层次的API，你可以吧它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装，杜鳌年爱，XMLHttpRequest一直是web开发者的亲密助手。无论是直接的，还是间接的，当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通讯的技术。Ajax的星期是由于Google的Gmail所带动的
2021-03-16 18:53:16
174
原创 http面试相关知识点
文章目录http服务过程：DNS域名解析：TCP的三次握手和四次挥手：前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结http服务过程：在web浏览器中输出网址，具体会发生什么？1、 对网址进行DNS域名解析，获取相应的ip地址2、 根据ip地址，找到相应服务器，发起TCP的三次握手。3、 建立TCP连接后，发起http请求。4、服务器响应http请求， 浏览器获取html代码5、浏览器解析html代码，并请求html中的资源6、浏览器渲染页面7、服务器关闭tcp请求
2021-03-16 16:08:30
142
1
原创 Vue实战商城项目（十四）—— 合计与全选
文章目录前言一、购物车商品价格合计二、购物车商品选中与全选1.判断是否全部选中2.全选按钮对应的点击事件总结前言本章概述：购物车商品价格合计，购物车商品选中与全选。一、购物车商品价格合计样式与数据渲染与前面的方法大同小异，这里不再细说，我们直接讲商品价格合计这里的代码应该怎么写。我们从cartList数组中返回item.checked为true的项，即我们选中的项，用reduce函数将选中的数全部加起来，还要注意商品的价格乘于对应的数量才能得到正确的结果，结果保留两位小数
2020-11-04 17:58:49
528
原创 Vue实战商城项目（十三）—— Toast
文章目录前言一、toast是什么？二、toast的封装与使用1.toast组件2.将组件封装到插件中3.toast的使用总结前言本章概述：toast是什么？ toast的封装与使用一、toast是什么？Toast是一种简易的消息提示框。二、toast的封装与使用1.toast组件代码如下（示例）：<template> <div class="toast" v-show="isShow"> <div>{{message}}<
2020-11-04 17:06:57
238
原创 Vue实战商城项目（十二）——添加购物车功能
文章目录前言一、Vuex1.什么是Vuex？2.为什么要用Vuex？二、添加购物车按钮功能实现1.将所需数据传入Vuex中2. actions.js总结前言本章概述：Vuex，添加购物车按钮功能实现提示：以下是本篇文章正文内容，下面案例可供参考一、Vuex1.什么是Vuex？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools
2020-11-03 17:44:04
2350
原创 Vue实战商城项目（十一）—— 分类页
文章目录前言一、页面布局二、数据获取与切换功能的实现1.分类页的数据2.切换总结前言本章概述：页面布局，数据获取与切换功能的实现一、页面布局分类页分为左侧导航栏部分以及右侧内容部分，两部分组成，左侧导航栏我们可以封装成一个组件，右侧内容部分我们可以分多个组件进行封装。关于样式的问题，这里就不多做阐述。二、数据获取与切换功能的实现1.分类页的数据 分类页的数据我们同前面一样的方法请求过来保存到data中，需要注意的是左侧导航栏里面的内 容同样是从服务器请求过来的数据进行渲染的，并不
2020-11-03 16:22:41
2372
原创 Vue实战商城项目（十）—— mixin混入
文章目录前言一、什么是混入？二、使用方法1.mixin封装2.详情页导入混入mixin总结前言文章概述：什么是混入，使用方法。提示：以下是本篇文章正文内容，下面案例可供参考一、什么是混入？混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。简单理解就是可以将一些组件所绑定的事件，数据交互等实现的功能也封装起来，直接在另外的组件中使用。比如说我们的返回顶
2020-11-02 17:53:35
203
1
原创 Vue实战商城项目（九）—— 返回顶部组件封装
文章目录前言一、简介二、使用步骤1.引入库2.读入数据总结前言文章概述：返回顶部组件的封装。一、简介返回顶部按钮无论是PC端网页或者APP二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterwarnings('ignore')import ssls
2020-11-02 17:33:53
162
1
原创 Vue实战商城项目（八）—— 详情页顶部导航栏跳转
文章目录前言一、滚动内容显示对应标题1.获取对应组件的offsetTop2.获取滚动条的position3.判断当前滚动条位置是否对应标题二、点击对应标题跳转到相应位置总结前言本章概述：滚动内容显示对应标题，点击对应标题跳转到相应位置一、滚动内容显示对应标题1.获取对应组件的offsetTop getThemeTops(){ this.themeTopsY = [] //创建一个数组存放各个节点的offsetTop this.themeTopsY.push(0
2020-10-29 20:07:18
902
原创 Vue实战商城项目（七）——面向对象与数据渲染
文章目录前言一、为什么要用面向对象？二、通过面向对象获取数据进行渲染总结前言本章概述：为什么要使用面向对象？ 通过面向对象获取数据进行渲染提示：以下是本篇文章正文内容，下面案例可供参考一、为什么要用面向对象？后端API服务器的数据不一定刚好是一个对象满足你前端所需要渲染的所有数据，后端API并不只是服务于一个前端，比如说网易云音乐PC端、安卓端、ios端、mac、小程序等等的数据都是同样的后端API服务器，如下图：我们所需要渲染的数据来自不同的对象，在获取数据时就需要从多个对象中获取，增
2020-10-29 16:51:44
547
原创 Vue实战商城项目（六）—— 详情页数据请求
文章目录前言一、页面的跳转与数据请求二、详情页顶部导航栏总结前言本篇开始详情页的要点讲解，概述：页面的跳转与数据请求，顶部导航栏封装一、页面的跳转与数据请求代码如下（示例）：在network目录下重新封装一个detail页面的网络请求相关方法的js文件，获取detail的数据需要传入一个iid，这个iid每一个商品信息数据中都有。找到goodsListItem，绑定点击事件，通过vue-router跳转到详情页并将商品的iid传入。这样我们就可以根据iid从detail页面中获取到相关的
2020-10-28 18:17:26
863
1
原创 Vue实战商城项目（五）—— 上拉加载更多
文章目录前言一、上拉刷新请求数据二、better-scroll无法滚动的解决方法1.产生bug的原因2.解决方案总结前言本篇文章概述：上拉刷新请求数据，better-scroll无法滚动的解决方法一、上拉刷新请求数据代码如下（示例）：回到home组件找到之前我们请求数据的这个方法。因为better-scroll的上拉刷新默认只加载一次，那么我们就需要再每次上拉刷新请求完一次后，调用一次finishPullUp()，告诉better-scroll已经加载完成了，才能够正常调用上拉加载更多的
2020-10-28 17:17:19
607
原创 Vue实战商城项目（四）—— better-scroll
文章目录前言一、better-scroll是什么？二、原理三、应用1.安装2.引用封装3.home组件中better-scroll的使用总结前言介绍：better-scroll是基于iscroll开发的插件，重点解决移动端（已支持 PC）各种滚动场景需求的插件，常用于移动端滚动的插件，iscroll目前已不再维护，better-scroll目前仍在持续更新中。提示：以下是本篇文章正文内容，下面案例可供参考一、better-scroll是什么？better-scroll 是基于原生 JS 实现的
2020-10-27 20:15:42
298
1
原创 Vue实战商城项目（三）—— 商品信息展示
文章目录前言一、商品信息列表切换1.创建tabControl组件2.父组件传入数据二、商品信息数据的获取三、商品信息的展示1.组件的封装2.数据传入对应类型的数据总结前言本篇文章概述：商品信息列表切换，商品信息数据的获取，商品信息的展示。以下是本篇文章正文内容一、商品信息列表切换1.创建tabControl组件代码如下（示例）：给列表项绑定一个点击事件，并将当前的index值传入，在data中定义一个变量currentIndex默认值为0，每次点击将当前的索引值index赋给curren
2020-10-27 17:19:10
6707
3
原创 Vue实战商城项目（二）—— 首页轮播图
首页开发——轮播图文章概述：网络请求的封装，轮播图组件的封装以及功能的实现，轮播图原理。文章目录首页开发——轮播图一、网络请求的封装二、轮播图的实现1.引入封装好的轮播图组件2.传入数据三、轮播图的原理一、网络请求的封装npm install axios --save通过npm指令安装axios后，在network目录下封装网络请求相关的代码。将网络请求相关的方法导入home组件后将数据请求过来保存到data中，这样，我们就拿到了所需的数据。二、轮播图的实现1.引入封装好的轮播
2020-10-26 19:34:05
2211
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人