- 博客(53)
- 收藏
- 关注
RSS订阅原创 成功解决IndexError: index 0 is out of bounds for axis 1 with size 0
computer knowledge
2022-11-16 15:05:32
1329
1
原创 为什么对axios二次封装
api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代.这个时候如果我们统一的区管理接口,需要修改某一个接口的时候直接在api里修改对应的请求是不是很方便呢?因为我们用的最多的还是get post请求.我们就可以针对封装....
2022-06-03 09:03:28
193
原创 微信小程序面试题
1.在小程序中如何获取用户信息？（1）小程序为升级前：可使用wx.getUserInfo直接获取用户信息，目前逐渐不能使用该方法了（2.）升级后，可使用以下方法获取用户的账户信息：（1）使用button，设置其属性：open-type="getUserInfo" <button open-type="getUserInfo">获取用户信息</button>2.小程序中如何实现分享功能，微信有什么限制？发送给朋友：onShareAppMessage(Object
2022-05-23 14:05:37
397
原创 瀑布流(waterfall flow)的原理以及实现
瀑布流是比较流行且有意思的布局，例如：蘑菇街、凡客达人等网站就是使用瀑布流实现的。瀑布流的优点就是简化了翻页操作，使网页一目了然，尤其是图片为主的首先就是在包裹的容器div里建几个div作为列，如下：<div class="wrap"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div
2022-05-10 09:58:41
1913
原创 react+ts小球抛物
代码奉上css:html,body{ height: 100%;}#root,.App,.wrap{ height: 100%; width: 100%;} .ball{ width: 60px; height: 60px; border-radius: 50%; position: absolute; background-color: tomato; transition: left 1s linear, top
2022-05-05 11:01:02
152
原创 react全家桶有哪些？（详细）
一 、 create-react-app脚手架对于现在比较流行的三大框架都有属于自己的脚手架（目前这些脚手架都是使用node编写的，并且都是基于webpack的）：Vue的脚手架：vue-cli Angular的脚手架：angular-cli React的脚手架：create-react-app它们的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。1.1 创建项目并启动全局安装第一步，全局安装：npm i -g create-react-app第
2022-05-02 18:51:23
3079
原创 Vue全家桶有哪些？（详细）
vue全家桶都有什么全家桶，顾名思义，对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。注：此文章主要讲解vue-cli脚手架开发方式，主要介绍各插件安装方法及其功能特点，不介绍各插件的具体使用方式，具体使用方式详见其他详细介绍文章。一、vue-clivue-cli也叫脚手架，官方定义为Vue.js 开发的标准工具！相比scirpt标签引入，脚手架具有如下特点：1）、功能丰富对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-
2022-04-29 18:56:43
928
原创 vue3.0+typescript实现选项卡和拖拽
我们先来看我们的选项卡上代码 ：html部分<template> <div class="silder"> <div class="silder-title"> <div @click="Fnstart(index)" v-for="(item, index) in titList" :key="item.id"
2022-04-26 15:49:56
451
原创 树形结构转平铺结构，平铺结构转树形结构
先新建一个数组 const arr = [{ pid: null, id: 1, name: '北京' }, { pid: 1, id: 11, name: '朝阳' }, { pid: 11, id: 111, name:
2022-04-25 08:29:27
1547
原创 vue路由判断跳转404页面
beforeEach函数这是路由跳转前处理的函数import PageNotFound from '@/views/pages/404.vue'Vue.use(Router)const routes=[ { path: '*', name: 'PageNotFound', component: PageNotFound, },] const router = new Router({ mode: 'history', routes: routes.
2022-04-21 16:26:03
405
原创 vue解决ios橡皮筋回弹
通过监听touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动
2022-04-18 11:28:55
2480
1
原创 react+函数组件(hook)实现简易轮播图
话不多说直接上代码import React, { useEffect,useState,useRef } from 'react';import './index.less'import banner1 from '../../assets/img/banner1 (1).jpg';import banner2 from '../../assets/img/banner1 (2).jpg';import banner3 from '../../assets/img/banner1 (3).jp
2022-04-18 11:16:23
1142
1
原创 苹果（iphone）和安卓处理都兼容的下拉和滚动（ts+函数组件）
代码如下：通过window自带方法判断是不是iphone处理兼容import { useRef, useEffect, useState } from 'react'import './index.less'export default function Top() { const TopBox = useRef<HTMLDivElement | null>(null) let disY: number = 0; let y: number = 0;
2022-04-14 07:45:03
420
原创 echarts饼图和条形统计图实例
效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ..
2022-04-13 08:22:51
236
原创 四行js代码让别人无法复制你的网站文字，八行程序员都哭了
前言我们常常会看到百度文库或者其他网站的文字无法复制，你想知道这种做法是如何实现的吗？其实很简单，今天阿牛带你们来揭开他的神秘面纱，让广大的程序员的F12大法都失效了，真的是太狠了！...
2022-04-11 15:39:20
2427
8
原创 typescript实现左右联动
js部分import React, { Component, createRef } from 'react'import './linkage.less'interface Props {}interface Content { ID: string, text: string, top: number, height: number}interface Button { ID: string, text: string}interface State
2022-03-30 09:42:07
166
1
原创 css3实现小球抛物线
首先新建一个index.html的文件html部分 <div id="ball"></div> <div id="line"></div>css部分 * { padding: 0; margin: 0; } html,body { width: 100%; height: 100%; }
2022-03-22 08:59:48
271
原创 react+ts实现小球交叉，小球互推，并高亮
htm部分import { Component, createRef } from "react";import './xian.less';interface Props {}interface State { Num: number, MaxNum: number, Rightlist: xian[] Leftlist: xian[]}interface xian { id: string, text: number}clas
2022-03-21 16:29:06
123
原创 拖拽强制刷新记录位置
基本逻辑：根据设置定位的top和left完成拖拽强制刷新还不动：根据本地存储html部分js部分 export default class Navbar extends Component { disX: number = 0 disY: number = 0 x: number = 0 y: number = 0 num: number = 0 drag = createRef<HTMLDivElem...
2022-03-17 17:07:53
726
1
原创 typescript原生实现选项卡自动轮播
import React, { Component } from "react";import "./about.less";// reduximport { connect } from "react-redux";// import { setName, setAge } from "../store/action";interface Props {}interface State { SelectIndex: number, BtnList: btn[], .
2022-03-17 15:50:26
716
原创 小球抛物线（贝塞尔曲线）
新建一个ball.html名的文件 css部分<style> * { padding: 0; margin: 0; } html,body { width: 100%; height: 100%; } #ball { display: none; width:10px;
2022-03-11 15:28:16
355
原创 typescript(TS)下拉带loading效果
首先准备好一个ts的项目创建pulldown文件夹目录如下：dist文件夹不用理会看我们的pulldown文件代码：import { Component, createRef } from "react";import "./pulldown.less"interface Props {}interface User { id: string, text: string}interface State { Lists: User[]}class
2021-12-21 09:32:44
472
原创 ts项目（滑块效果，两球交叉）
//js部分import { Component } from "react";import './index.less';interface Props {}interface State { Num: number, MaxNum: number,}class Drag extends Component<Props, State>{ constructor(props: Props) { super(props); this.state .
2021-12-15 08:56:37
197
1
原创 React-Typesctipt如何实现选项卡
先新建一个项目创建一个tab.tsx把路由设置好，在ts的项目中主要的话就是要定义好类型//html部分 render() { return ( <div className='tab'> { this.state.ButtonArray.map((item, index) => <button key={item.id} onClick={this.FnTab
2021-12-10 18:46:38
132
原创 css3银河效果
新建一个文件index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2021-12-08 19:49:19
245
原创 css3的动画特效（轮播图）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } div { .
2021-12-08 15:00:58
159
原创 react-typescipt(ts)中配置redux
下载相关依赖npm install @types/axios axios -snpm install react-router-config [email protected] @types/react-router-config @types/[email protected] -S目录如下再src文件下新建store文件在store中新建action.ts文件export const SET_AGE='set_age';export const .
2021-12-08 11:50:17
239
原创 react-typescript(ts)中配置axios
1.首先npm i @types/axios -S2.在src文件夹下创建一个api的文件3.在api文件夹中创建两个.ts结尾的文件4.request.ts中的配置import axios from "axios"; export const Service = axios.create({ timeout: 8000, //延迟时间 method: 'POST', headers: { "content-...
2021-12-07 17:17:22
743
原创 react-typescript中配置路由
第一步：先创建一个react-typescript的项目create-react-app ts3 --template typescript第二步：然后安装相关依赖cnpm install react-router-dom react-router-config -S第三步：在src的index.js中引入下面的import {HashRouter as Router} from 'react-router-dom'第四步：把React.StrictMode替换为Rou.
2021-12-06 17:16:06
979
原创 用react实现选项卡功能
先把码云的线上仓库中需要用的文件拿一下，地址如下https://gitee.com/xzx1314/react-text/tree/dev/详细的代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0..
2021-12-06 16:40:36
764
原创 react中配置router路由
如果创建好react脚手架可以直接跳过注:图片下面有代码npm install [email protected] react-router-config -S在scr的index.js中引入下面的import {HashRouter as Router} from 'react-router-dom'在scr的index.js中引入下面的替换成然后新建view文件夹并且创建两个文件Index.js和List.js 在上面写上以下内容imp...
2021-12-03 15:35:06
394
原创 react脚手架配置px转rem
React中配置px转rem安装相关依赖npm i lib-flexible --savenpm i postcss-px2rem --save主要用来暴露项目配置npm run eject！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下git add .git commit -m '自定义名'npm run eject然后打开项目中 config->webpack.config.js 进行配置在配置文件中添加如..
2021-12-02 16:44:01
247
原创 配置react脚手架
React（一）使用脚手架创建React项目1.安装脚手架现在使用较多的就是这三种脚手架工具：react-boilerplate react-redux-starter-kit create-react-app我使用的是第三种，facebook官方开发的脚手架npm install -g create-react-app2.创建React项目create-react-app my-appReact（一）使用脚手架创建React项目1.安装脚手架现在使.
2021-12-02 15:50:42
538
原创 react入门教学
今天给大家讲解一下react入门需要注意的，脚手架的话就不用了就是看一些基础的问题先来把码云中的线上仓库的需要用到的文件拿一下，地址如下https://gitee.com/xzx1314/react-text/tree/dev/拿到这三个文件了以后，新建一个index.html文件把这三个文件引入进去，顺序必须是 先把代码jsx解析为js <script src="./js/browser.js"></script> 里面放了一
2021-12-01 16:26:38
1110
原创 vue中的query传参和params传参的区别以及用法
用法第一步：先创建一个完整的vue项目vue create 项目名第二步：然后新建一个组件同时添加路由先来看query传参从about.vue跳转到jump.vue演示，在about.vue文件中<template> <div class="about"> <h1>This is an about page</h1> <button @click="FnJump">我是qure
2021-11-30 19:01:24
363
原创 组件传值父向子传值：props和$emit
首先我们先看props方法传值在父组件中把数据定义好<template> <div class="home"> <HelloWorld :Fnadd="fnTxt" :txtlist="txtlist" txt="我是标题"/> </div></template><script>import HelloWorld from "@/components/HelloWorld.vue";ex
2021-11-30 16:25:55
435
原创 圣杯和双飞翼
圣杯布局和双飞翼布局都是为了实现两边固定宽中间自适应圣杯布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-
2021-11-29 16:35:47
64
原创 vuex传值，划分moudle状态传值
首先创建一个vue的项目然后在store文件夹下的index.js文件中import Vue from 'vue'import Vuex from 'vuex'//这边引入模块import buyCar from './buy'Vue.use(Vuex)export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, getters: {}, modules: { //这边.
2021-11-29 16:28:21
244
原创 git公司提交的操作流程
1.gitclone地址把项目拉过来2.cdmaster进入项目3.gitbranchdev创建dev分支4.gitcheckoutdev切换到dev分支5.创建test.html页面6.gitadd.把dev分支修改...
2021-11-26 10:49:47
449
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人