- 博客(32)
- 收藏
- 关注
原创 前端工作记录二
工作记录二组件篇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反向代理,代理失效的一种判断
Vue反向代理,代理失效的一种判断。。、其实我也不知道改起什么题目,反正公司的项目在这个代理的问题上出现问题了,等最后细说把~注意vue-cli的版本,有两种情况3一下不包括3。3以上注意:这里说的版本问题全都是vue-cli的版本,在cmd输入vue -V可以找到。vue-cli3以下的版本我们在创建项目的目录的时候可以清楚的看见目录就有所不同。//3以下|-build| |-build.js| |-logo.png| |-check-versions.js| |-
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
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人