qq_45740103的博客

原创 面试题总结

JS部分js怎么创建私有变量JS没有私有属性的概念；所有的属性都是公用的；私有变量的概念：在任何函数中定义的变量，都是私有变量，因为不能在函数外部访问这些变量；私有变量：包括函数的参数/局部变量和函数内部定义的其他函数；特权使用：内部创建一个必报，必报可以直接访问私有变量；因此创建用于访问私有变量的公用方法，称为特权方法可以通过构造方法传参来访问私有变量，这种方法的缺点是会为每一个实...

原创 多种订单状态不同颜色文字

通过订单状态来展示不同的样式文字// tob首页(订单列表)export const orderList = [ { state: '2', text: '申办中', color: '#58BA9E', backgroundColor: '#E8F8F3', }, { state: '3', text: '待审查', color: '#333', backgroundColor: '#E8F8F3', }, {

原创 Safeget

sget = function(instance, path) { var isNullOrUndef = function(val) { return val === undefined || val === null; }; var findArrayOperator = /([^\[]*)\[([0-9]*)\]/; //Get the child or get the element in the array if '[]' is present

原创 点击按钮唤起软件

原创 跨域以及解决方案

跨域（非同源策略请求）跨域又称非同源策略请求跨域传输什么是跨域区别jsonp只能处理get请求script src ifram link => 不存在跨域请求的限制2. 修改响应头...

原创 Vue中如何使用keep-alive组件以及配合动态组件使用

什么是keep-alivekeep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。简单的来说，在点击切换不同组件的时候，为了降低消耗，就将包裹的组件缓存起来。keep-alive组件上的三个属性include：名称匹配的组件会被缓存exclude：任何名称匹配的组件都不会被缓存max： 最...

原创 使用node.js模拟Socket聊天

什么是Socket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。简单的来说就像微信发消息能够随时得到聊天的信息文档连接w3c文档简单的demo下载需要的包这个用cnpm下载有时会出错npm init -ynpm i...

原创 权限模块

实现思路在登录时通过后台得到一组数字字符串 例如：“0,1,2,3,4,5”数字越多说明权限越高。然后存入本地与vuex中在一些页面中通过存入本地的信息判断是否有权限访问。在路由拦截中，判断是否有权访问，如果没有访问权，就跳转页面到403页面login中 // 从后台得到登录者的position，有哪些权限 let position = '0,1' ...

原创 Vue中使用插件vue-cropper在上传图片时裁剪以及如何在裁剪时预览

GitHub连接配合element的上传图片进行剪切 <el-upload class="upload-demo" action drag :auto-upload="false" :show-file-list="false" :on-change="handle...

原创 Vue中具名插槽与作用域插槽

具名插槽v-slot: 后面跟着插槽的名,template回到指定的位置header插槽有个默认的如果不传也会有 <Test_a> <template v-slot:footer> <div> 下面 </div> </template> ...

原创 snyc修饰符的使用

一般情况下，我们都是如果需要对prop进行修改都是通过双向绑定来实现的，但是在维护上造成问题，推荐使用update:myPropName 的模式触发事件代替。Vue文档连接父组件中传入一个值<Bread :title.sync="doc.title" ></Bread>子组件中HTML 中<input type="text" v-model="n...

原创 手写vue脚手架中路由跳转与数据请求时的进度条实现

因为我的项目是使用的elements写的没有iview组件中有加载进度条，不可能为了一个需求下另一个包将进度条的div放在APP.vue中在template中最上面<div id="progress_bar"></div>css样式 动画#progress_bar { width: 100vw; height: 5px; backgro...

原创 用node.js做后台模拟登录时密码md5加密以及带上token数据传输

登录一般是怎么做的首先后台会给前台一个接口，前台进行测试。对密码进行md5不可逆的加密，有时用户的秘密会比较简单，我会对自己定义一些规则进行二次加密，比如翻转两次。后台会对用户名秘密进行判断，验证通过后，后台会基于用户名id时间用aes加密，返回一个token字符串。我们前台会token进行保存到本地stronge。我们使用axios进行请求数据，将axios进行封装 每次请求时都会将t...

原创 H5拖动如何在vue脚手架中实现

实现的效果是将右侧容器里的小方块移动到 左侧的容器中 也可以移回到右侧容器中在方块进去容器时 容器背景颜色会变化 拖动元素移出或者已经放入容器中 背景变回透明需要用到的事件以及方法draggable 可拖动 对需要拖动的对象设置为trueondrag 元素拖动时触发ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 只拖动的元素在里面移动会一直触发o...

原创 TypeScript入门篇

安装// 下载cnpm i -g typescript//查看版本号tsc -v//下载json文件 配置tsc --init// 跑起来 让他编译成普通代码tsc -wjson 文件的compilerOptions对象中 将ts代码编译成js代码放到js文件里去"outDir": "./js",...

原创 Js中cookie与Storage如何存取 以及应用场景

储存 cookiecookie储存大小为 4KB let now = new Date() now.setDate(now.getDate() + 7) // expires 删除的时间 如果不设置关闭浏览器就会删除 document.cookie = 'username=Ace;expires=' + now // 如果ke...

原创 Vue脚手架通过vuex切换不同组件的背景颜色

这个项目的需求是在头部组件中可以切换头部导航与侧栏组件的背景颜色我是利用element组件进行项目编写的头部导航与侧栏为两个兄弟同级组件 用 props 与emit用不了 所以使用vuex定义变量在vuex中定义一个默认的背景颜色变量以及mutation中换色的方法state:{ bg:'#545c64' }, mutations:{ ...

原创 如何在另一个组件中控制Element组件侧栏的展开收起 以及如何解决切换时产生页面布局的影响

这个项目的需求是头部导航栏的组件中控制侧栏的展开收起 并且需要页面中的内容保持在满屏100vw先去element中将组件建好，引入组件在页面中显示element导航栏连接首先根据文档得到控制展开和收起的参数是collapse 需要在mode 为 vertical 时可用 就是侧栏使用在el-menu 标签中加入collapse 为true 但是为了能够控制展开和收起 需要定义一个变...

原创 JS中字符串常用方法

英文字符串大小写的转换let str = "my world" console.log(str.toUpperCase()) // MY WROLD console.log(str.toLowerCase()) // my world //如何将字符串的第一个字母为大写 function capi...

原创 vue脚手架中如何自定义代码片段

进入设置 => 用户代码片段 => 找到vue.json 文件 => 替换内部文件 "zz":{ //自定义输出的快捷方式 "prefix": "zz", "body": [ "<template>\n<div>\n</div>\n</template>\n\n<script>\nexpor...

原创 ajax原生js

什么是ajax是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 let url = "https://xxxxx/list/userlist" // 创建ajax对象 ...

原创 Mock.js常用的随机数据以及vue脚手架中如何使用

普通js中如何使用直接引用在线的mock连接let user = Mock.mock({ "list|10": [{ "id|+1": 1001, //id会+1 "gender|1": [1, 2], //随机生成1或者2 "price": "@natural(2,8...

原创 在vue中使用vuex

什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单的来说就是集中管理数据的地方，所有的组件都能够使用同一组数据什么时候该使用vuexvuex确实带来了很大的便捷可以帮助我们管理共享状态，并附带了更多的概念和框架。个人觉得有些不需要共享的数据就不要放在里面集中管理...

原创 Vue脚手架中组件传参（父子组件 祖孙组件 同级兄弟组件）

父往子用props子往父用$emitv-model 父子组件之间的双向绑定//父级将值传给子级<Later v-model="twocount"></Later>//子组件接收一个valueprops:["value"],//不要修改props里面的值，在data里定义一个变量，将接收的值付给新变量data() { return { ...

原创 前端购物车的删除、商品数量加减

商品按钮的加减 <!-- 到一时禁用这个按钮 --> <button :disabled="itmr.count===1" @click="itmr.count--">-</button> <input @keydown.enter="onblur(itmr,$event)" @b...

原创 在vue中使用 sass预处理器（入门篇）

先下载包，两个包一起下，分开下都行cnpm install -D sass-loader node-sass//scoped 加上后此组件的 CSS 只作用于当前组件中的元素//如何实现： 是通过给不同组件里的div加上不同的属性//加上lang="scss" <style lang='scss' scoped>//定义变量这样组件里需要用到的一样的属性就可以使用...

原创 Vue脚手架中配置别名

设置别名后可以很便捷的访问到组件的路径调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象也可以通过链式操作Vue 文档连接 webpack 文档连接let path = require('path')function resolve(url) { return path.resolve(...

原创 在Vue脚手架中三分钟快速上手Swiper(轮播图)插件

快速上手Swiper插件先下载插件npm install vue-awesome-swiper --save引入插件全局引用 所有的组件都能使用import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/cs...

原创 vue脚手架中路由传参、嵌套路由、路由拦截

配置路由为避免 main.js 文件复杂，将路由配置提取到 router/index.js 中先安装包 npm或者yarn都行npm install vue-routeryarn add vue-router在src目录下新建一个router文件夹，在文件夹里新建一个js文件引入模块 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能im...

原创 在vue中如何优雅的使用axios请求以及请求拦截的使用（自定义插件plugin中使用mixin封装axios、在api中）

mixin混入来封装axios请求我们通过mixin来封装axios请求这样每一个组件直接通过混入来进行axios请求。不必每次需要时都要import引入一次首先需要下载axios的包 //用npm、cnpm或者yarn都行 npm install axios yarn add axios在src里新建一个mixins文件夹，在新文件夹里新建一个js文件...