是鑫❤呀！-CSDN博客

原创前端工作记录二

工作记录二组件篇1. 在前端ui组件中的聚焦或者失焦事件中拿不到event，.capture用法@focus.native.capture="selectFocus($event)" @blur.native.capture="selectBlur($event)"会覆盖掉原有组件的失焦事件2. ref的一些小细节组件内部有多个同名ref引用时没有父子关系<template> <h2 ref="test">test1</h2

2021-01-24 14:23:58 724

原创 webpack打包原理

webpack打包原理原始目录结构|---src //文件夹|---|---js //文件夹|---|---|---index.js|---|---|---a.jsjs文件中的内容//index.jslet str = require('./a.js')console.log(str);//a.jsmodule.exports = "xixi"webpack.config.jsconst path = require('path')const HtmlWebpackP

2021-01-20 11:24:18 315

原创 vue3临时(后续会修改)

Vue3用后总结vue3链接vue-router4链接vuex4链接vue3全局注册数据在setup中使用app.config.globalProperties.$api = api<script>import {getCurrentInstance} from "vue";export default { setup(){ const { ctx } = getCurrentInstance() const loginUser =

2021-01-14 16:53:28 248

原创 Cookie的跨域问题

小小Cookie，大大能量cookie，这个仅有4kb的小曲奇也是有大体量。朋友的项目遇到了问题，原因是在线上环境设置cookie发送请求，请求头中的Cookie属性带着所设置的cookie，但是在本地调试的时候却发现并不携带。什么是cookie详情请看这里cookie属性属性名描述nameCookie的名称，Cookie一旦创建，名称便不可更改valueCookie的值，如果值为Unicode字符，需要为字符编码。如果为二进制数据，则需要使用BASE64编码

2021-01-13 16:47:50 2310

原创 Echars结合maptalks显示地图3D柱状图

Echars结合maptalks显示地图3D柱状图参考链接：Echart 基于maptalks3D地图实现3D柱状图。需要的环境maptalks需要引入maptalks.js和maptalks.css，这里插一嘴，如果你遇到了把地图引入之后滚动鼠标管轮不能方大缩小地图的话就换一下maptalks版本。我选用的0.46.0版本。tips<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@0.46.0

2021-01-08 17:05:20 914 1

原创 Vue3里面全局配置

Vue3里面全局配置= =其实这个问题很早之前就遇到了，但是当时并没有解决，然后就放在js文件里面引入就不了了之了，今天去csdn博客上晨爱衿文老哥回答了我于是我又玩了下。一般网上的教程//在main.js中注册你想注册的东西比如：app.config.globalProperties.hello = ()=>{ console.log("hello,world");}//然后在vue文件中通过getCurrentInstance解构出ctx进行获取比如：import { g

2020-11-20 11:21:06 2746 2

原创前端工作记录一

css篇css避免选中img{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none;}css鼠标穿透pointer-events:nonecss文本超出省略号overflow: hidden

2020-10-21 17:51:48 384

原创 vue 插槽

vue 插槽网上有很多帖子再说插槽的问题= =，emmm我这里只是实践之后的记录。用于自己复习用的，当然包括最近一段时间的开发任务插槽的作用让用户可以拓展组件，去更好地复用组件和对其做定制化处理默认插槽// 父组件<template> <slot-default>这是传入的</slot-default></template><script>import slotDefault from "./slot";expo

2020-08-26 16:56:44 147 2

原创 react 的高阶组件

react 的高阶组件emmm网上有很多例子，但是我想自己写，以后不用到处乱找了useStateconst [state, setState] = useState(initialState);返回一个state和一个修改state的函数，在以往我们写类组件的时候会把数据存储在state中，访问数据直接访问this.state.<名字>就可以访问到。import React , { useState } from 'react'function UseState(prop

2020-07-29 15:41:53 261

原创 react结合Graphql

react结合Graphql安装依赖yarn add @apollo/client graphql注意使用@apollo/client之后，当前组件必定是一个函数式组件，否则会报错创建实例import { ApolloClient } from '@apollo/client';const client = new ApolloClient({ uri: 'http://localhost:4000/graphql',})export default client通过 Ap

2020-07-29 15:33:31 455

原创 vue结合Graphql

vue结合Graphql安装依赖yarn add vue-apollo graphql apollo-boost graphql-tag创建实例import ApolloClient from 'apollo-boost'const apolloClient = new ApolloClient({ // 你需要在这里使用绝对路径 uri: 'http://localhost:4000/graphql'})export default apolloClient安装插件到 Vu

2020-07-25 17:33:32 573

原创 graphql在node端使用的增删改操作

graphql在node端使用的增删改操作在这里所有的操作都在mutation里面实现,mutation与query同级！！！！！！添加操作let schema = new GraphQLSchema({ mutation:new GraphQLObjectType({ name:"graphqlMethod", description:"graphql的方法", fields:{ insert:{ type: new GraphQLObje

2020-07-24 18:44:39 322

原创 Node使用Graphql

Node使用Graphql我们在实际的开发过程中同城会出现这种情况，单个后台对应多个前端，而且前端需要的数据格式并不一样，这就需要后端进行判断或者使用中台进行数据处理中台的搭建有两种方法使用axios.all方法获取数据进行处理。exports.get = ({url, params={}}) => { return axios({ url, params }) .then((result) => { return result.data

2020-07-24 18:43:50 525

原创 git reset

git reset（走一个周期图）供图add , commit ,push都是常用的操作不会出现太大的问题（等等说说push）pull fetch在另一篇文章中有详细介绍。mixed，hard，softHEAD它保存着一个名为 HEAD 的特别指针。在 git 中，它是一个指向你正在工作中的本地分支的指针，可以将HEAD 想象为当前分支的别名。indexIndex空间，也叫做stage空间，或者cache空间working tree.git隐藏文件夹所在的文

2020-07-16 16:18:25 162

原创 .git文件简介

.git文件简介git init的文件显示git clone的文件显示当git init的文件夹进行第一次commit操作之后两者的文件就会变得相同：文件以及作用：hooks存放一些shell脚本，他的实现的功能是与响应的git动作相关,相关文档请看这里~info存放一些信息，其中保存了一份不希望在 .gitignore 文件中管理的忽略的全局可执行文件# git ls-files --others --exclude-from=.git/info/exclude

2020-07-16 16:02:48 6635

原创 Vue反向代理,代理失效的一种判断

2020-07-13 18:03:02 3270 2

原创 Git Fetch - Git pull

Git Fetch - Git pull其实网上有很多的比较，说的比较清楚了，git fetch 和 git pull之间的距离只差一个merge。emmmm我想总结一下他俩相似的操作究竟有什么不同。Git Fetchgit fetch origin拉去远端所有分支最新的提交记录分支结构|-jiaxin|-master|-origin/jiaxin|-origin/master当我们执行完这段代码之后，并没有发现有什么变化，但其实在.git文件夹的FETCH_HEAD文件里

2020-07-10 18:00:52 254 1

原创 react中路由-嵌套路由-动态生成路由

react中路由-嵌套路由-动态生成路由react的路由卡了一上午，我的理想化出来了react-router-dom它分为一下几种情况：BrowserRouter 启动history模式的路由Route 路由本由，通过path进行组件的渲染Redirect 重定向路由通过to属性进行反杀Switch 当匹配到第一个路径相符合的路由的时候就不会往下找了Link 类似于a标签进行路由导向navLink 也是会生成a标签进行连接，跟link有差别但是我还没有探究。。。。还有一些其他

2020-07-01 18:02:23 2887

原创 react-redux基本使用和数据流向

react的状态管理工具react-redux我们先来看一下react-redux的工作流程redux的组成部分redux简单的来说他分为这几个部分statereduceracitonstorestate：如果你熟悉vuex的话你可以把他当成vuex里面的模块化，相当于数据树的一个分支或者总体。const State = { imgList:[]}reducer：通过传入的aciton去改变state的值，并且向外面暴露辅助生成store。const reducer

2020-07-01 18:00:55 775

原创 React-Context

React-Context复习react中，对以前迷糊的点重新get一下APIreact官方文档的context中存在这么几个apiReact.createContextContext.ProviderClass.contextTypeContext.ConsumerContext.displayNameReacr.createContext创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹

2020-06-22 16:48:35 172

原创浏览器缓存机制

浏览器缓存机制说一下我遇到的情况，当图片中的标注框更新之后，服务器更新了xml文件，但是前端通过a标签查看文档或者是根据axios的get请求去获取压缩包的时候总是获取不到最新的。缓存过程的分析浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程如下图：我们不难发现每次返送请求时所要做的事情1、浏览器每次发起请求，都会先在浏览器缓存中查找

2020-06-02 20:10:11 841

原创 Json Server的方法

Josn Server的方法过滤GET /posts?title=json-server&author=typicodeGET /posts?id=1&id=2GET /comments?author.name=typicode添加_ne以排除值GET /slider?id_ne=1&id_ne=2[ { "id": 3, "path": "product/vivo", "title": "VIVO" }, { "id"

2020-05-26 15:42:30 185

原创 Mock的用法规则

Mock的用法规则属性值是字符串 String‘name|min-max’: string//通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。var string = Mock.mock({ 'string|1-10':'哈'})console.log(JSON.stringify(string))//结果随机生成1~10个哈{"string":"哈哈哈哈"}‘name|count’: string//通过重复 string 生成一个

2020-05-26 15:41:45 3989

原创 Axios的Restful风格与koa2接收参数形式

Axios的Restful风格与koa2接收参数形式因为项目中涉及到了axios的delete的方法就查询了一下aixos的官网后来在网上搜了一篇axios与restful请求规范的帖子，于是找到自己毕业设计所写的koa2后端项目打算小小的试一下。axios官网的方法：axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios

2020-05-23 15:10:22 588

原创 vue监听dom大小改变

vue监听dom大小改变需求描述：layout左边菜单栏收缩，右边的content区域的swiper宽度没有改变（没有图，朋友的问题，大体画一下）类似于点击折叠左边目录会变小，右边内容区域会变大，但是swiper在刚开始的时候就确定了宽度，所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了！！！！但是宽度确实是在改变的很费解，先说一下解决方法把1、使用element-resize-detectorvar e

2020-05-13 17:19:43 4794

原创 Content-type常见类型以及axios的应用

Content-type常见类型以及axios的应用1、application/x-www-form-urlencoded浏览器的原生form表单提交的数据按照 key1=val1&key2=val2 的方式进行编码，key和val都进行了URL转码POST [http://www.example.com](http://www.example.com) HTTP/1.1 C...

2020-04-11 10:32:54 235

原创图片在鼠标位置以数遍滚轮滚动放大缩小

图片在鼠标位置以数遍滚轮滚动放大缩小1、元素距离浏览器左边的间距求解`getOffsetLeft: function(obj) { var tmp = obj.offsetLeft; var val = obj.offsetParent; while (val != null) { tmp += val.offsetLeft; ...

2020-04-08 17:33:11 965

原创微信支付-扫码支付

微信支付-扫码支付微信扫码支付一、介绍https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1本案例采用模式二开发二、具体步骤：①生成需要编译成二维码格式的js数据// 统一下单 // 1. 公众账号ID const appid = config.appid // 2. 商户号 const mch_i...

2020-02-28 10:41:01 274

原创微信公众号自动回复

1) 接口测试号申请微信公众平台=>开发=>基本配置2) 接口信息配置(1) 必须得有一个域名，可以使用SSH穿透ssh -vnNt -R 7788:localhost:3333 root@39.106.4.9②nginx的配置upstream tunnel { server 127.0.0.1:7788;}upstream tunnel2 { server ...

2020-02-28 10:38:41 281

原创 node

node.js结合前端进行跨域问题的解决方法：1.node.js运用http.get()方法在后端请求数据：1.1前端ajax请求$.ajax({url: 'http://localhost:8080/', success: (result) => { console.log(result) }})1.2node.js的用法node.js天生自带h...

2019-10-19 09:14:25 315

原创 cookie基本操作

Cookie基本操作cookie:在客户端和服务端都可以进行操作。（获取，设置，删除），客户端写入本地硬盘cookie：通过浏览器往计算机本地硬盘写入数据。必须在服务器环境下才可以操作cookie客户端操作cookie获取：document.cookie,也可以通过控制台的application看到cookie 只会返回对应域名下的cookie给客户端：设置cookie： ...

2019-09-26 17:19:40 210

原创 CSS3中的弹性盒子

CSS3中的弹性盒子1：什么是弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。（菜鸟教程拔下来的）2：弹性盒子怎么设置：在元素的css格式中设置display：flex即可；3：弹性盒子的一些属性：弹性盒子的属性值flex-d...

2019-09-26 11:04:09 187 1

❤的博客