- 博客(51)
- 收藏
- 关注
RSS订阅原创 JS正则表达式
js代码<script type="text/javascript"> function SubmitCk() { var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if (!reg.test($("#txtEmail").val())) { alert("请输入正确邮箱地址") return false; }}&
2021-12-14 15:09:49
207
原创 Vue使用NProgress （详细教程 （~v~））
NProgress是页面跳转是出现在浏览器顶部的进度条官网：http://ricostacruz.com/nprogress/github：https://github.com/rstacruz/nprogress1. 安装$ npm install --save nprogress 或者$ yarn add nprogress//用法NProgress.start();NProgress.done();2. 使用router.js//导入import NProgress f.
2020-09-15 10:20:05
416
原创 el-select改变宽度(非常nice)
1. 设置style="width:100%"与父盒子同宽，改变父盒子的宽度即可<el-select v-model="value5" multiple placeholder="请选择" style="width:100%"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> &l
2020-09-11 16:56:26
14641
原创 VsCode插件，自动生成注释koroFileHeader
打开vscode，选择Extensions搜索koroFileheader进行安装在settings.json文件中写入{ "workbench.colorTheme": "Dracula", "window.zoomLevel": 0, "update.mode": "none", "fileheader.customMade": { "Descripttion": "", // 编辑文件信息 "Autor": "辅助辅助助辅", /
2020-06-04 10:09:26
594
原创 Echarts的使用 （简单整理，日常更新，多用）
饼图series: [ // 主要部分 { name: "访问来源", type: "pie", center: ["50%", "50%"], radius: ["30%", "50%"], // 圆环 top: "0%", ...
2020-05-22 10:16:34
217
原创 vue项目中使用Vuex（详细教程）
vuex什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以理解为我们项目中需要共享的一些数据，我们把它集中管理起来的容器。把这些数据称为状态。比如一个用户的用户名，性别，权限级别等等。是否一定要用vuex如果我们不是一个中大型的单页面应用的话，没有那么多的状态需要共享的话就不需要用。对于小项目我们可以只用简单的状态管理：创建：simpleStore.js// 简单的状态管理器const simpleStore = { state: {
2020-05-19 15:39:11
598
原创 前端开发者不得不知道的多个常用的网站，因为这几个网站我成了别人眼中的巨佬
1. npmNPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：- 允许用户从NPM服务器下载别人编写的第三方包到本地使用- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用界面如下：2. ExpressExpress基于 Node.js 平台，快速、开放、极简的 Web 开发框架界面如下：3. BootCDNBootCDN是 猫云 联合 Boo
2020-05-17 13:59:58
1094
3
原创 公司项目开发流程（come on）
开发流程先看图一、需求1. 评审召集需求涉及到的UI、开发、产品、测试人员整理业务流程，同步信息，明确分工明确需求目的，考虑当前需求设计是否可满足目的整理流程中如果涉及的其他人员，则召集商讨如需求设计上影响现有业务功能，应要求产品重新设计实现方案，然后重新评审2. 注意事项业务流程同步：评审后重新梳理流程，存在疑问处及时找产品沟通周边需求依赖：评审功能与依赖功能并行开发，由于...
2020-03-13 21:48:31
503
原创 React 兄弟组件传参，或者是没有共同父组件的兄弟组件之间的传参
父组件与子组件通讯经常用的是props，那么兄弟组件呢【标题的情况同样适用】今天记录一下使用自定义事件的方式实现通讯引入一个events包cnpm i events -S我们在utils文件夹里创建个event.jsimport { EventEmitter } from 'events'export default new EventEmitter()在接收/监听的组件里fu...
2020-03-12 11:22:02
424
原创 React的生命周期（详细）
React声明周期（16.3版本以前）分为3个阶段：1. 加载阶段1. constructor() // 加载的时候调用一次，可以舒适化state2. render() // 渲染页面3. componentDidMount() // 组件挂在后触发 2. 更新阶段1. componentWillReceiveProps(nextProps) // 接收新的props时触发2....
2020-03-12 10:13:21
2497
1
原创 transition,transfrom,animation
Transition语法： transition: property duration timing-function delay; 定义和用法 transition 属性是一个简写属性，用于设置四个过渡属性： transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。...
2020-02-18 10:09:58
205
原创 React redux-react-hook
redux-react-hookimport React, { useState, useEffect, useCallback } from 'react'import { useDispatch, useMappedState } from 'redux-react-hook';import './styles.less'import { hook } from '@/actions/...
2020-01-12 16:16:41
568
原创 React redux-actions
// npm install --save redux-actions1：作用：当我们的在开发大型应用的时候，对于大量的action，我们的reducer需要些大量的swich来对action.type进行判断。redux-actions可以简化这一烦琐的过程，它可以是actionCreator，也可以用来生成reducer，其作用都是用来简化action、reducer。主要函数有cr...
2020-01-05 15:05:03
442
原创 Git 使用方法
相关链接 Git - Book用户信息当安装完 Git 应该做的第一件事就是设置你的用户名称与邮件地址。 这样做很重要，因为每一个 Git 的提交都会使用这些信息，并且它会写入到你的每一次提交中，不可更改：$ git config --global user.name "这里的名字随便取""$ git config --global user.email "这里输入你的github登录邮箱...
2020-01-02 16:01:08
218
原创 React 页面请求axios的时候的loading效果
// 通过 reducer 中的变量控制 true, false初始的时候为true, 页面刷新 （有loading效果） trueaxios 加载的时候 （有loading效果）trueaxios 加载完毕 （没有loading效果）falseimport _ from 'loadsh'const homeState = { loading: true, // 控制l...
2019-12-31 17:03:40
1734
原创 Animate.css的使用方法
Animate.css 官方地址安装$ npm install animate.css --save使用：1. 基础用法<head> <link rel="stylesheet" href="animate.min.css"></head>2. 使用CDN<head><link rel="stylesheet"href...
2019-12-30 20:36:22
624
原创 Vuex实现数据持久化，数据刷新消失解决方案
在开发中，有一些全局数据，比如用户数据，系统数据等。这些数据很多组件中都会使用，我们当然可以每次使用的时候都去请求，但是出于程序员的“洁癖”、“抠”等等优点，还是希望一次请求，到处使用。这时候很自然的想到存储在 localStorage 中，但是有个问题是，这些数据可能会变，如果没能及时同步的话，就会用到不正确的数据，即使做了数据同步，但是 localStorage 中的数据不是响应式的，不能自...
2019-12-30 19:57:14
610
原创 Vue 笔记
v-bind:class <h1 :class="{listStyle: true}">h1</h1>v-if v-else-if v-else <template v-if="type === 'A'"> <h1>typeA</h1> <span>spana</span> ...
2019-12-26 13:34:42
995
原创 Vue开发结合element-ui的一些常见问题
解决 console.log 报错问题// 在package.json 里面 写入"eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/standard" ], "r...
2019-12-26 12:08:24
530
原创 Vue-cli + axios 踩坑记录 + 拦截器使用
1、首先axios不支持vue.use()方式声明使用，看了所有近乎相同的axios文档都没有提到这一点建议方式在main.js中如下声明使用import axios from 'axios';Vue.prototype.$axios=axios;那么在其他vue组件中就可以this.$axios调用使用2.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题，如...
2019-12-26 12:03:16
193
原创 Vue 配置vue.config.js
const path = require('path');module.exports = { configureWebpack: { resolve: { alias: { // 配置路径 '@': path.join(__dirname, 'src/'), '@@': path.join(__dirname, 'src/c...
2019-12-26 11:24:46
1121
原创 怎么启动本地服务
方法一： Node内置模块http 的使用var http = require('http')http.createServer(function(req, res){ res.writeHead(200, { 'Content-Type': 'text-plain' }); res.end('Hello World');}).listen(8083);方法二： 使用 exp...
2019-12-24 19:51:54
935
原创 React 改变底部样式
import React, { PureComponent } from 'react';import './styles.less';import { renderRoutes } from 'react-router-config'import { Link, } from 'react-router-dom'import cs from 'classnames'export de...
2019-12-24 13:16:05
92
原创 React 分页
import React from 'react';import './styles.less'import { getTableData } from '@/actions/table'import { connect } from 'react-redux'import { Table, Pagination } from 'antd'import qs from 'qs'exp...
2019-12-23 00:39:39
111
原创 React 小功能
react 解析标签 showhtml = htmlString => { var html = { __html: htmlString }; return <div dangerouslySetInnerHTML={html}></div>; }
2019-12-18 16:37:33
135
原创 JS小功能
Math Math.pow(base, exponent) // base基数 exponent指数 //如果 x 是 2 ，且 y 是 7，则 raisePower 函数返回 128 （2 的 7 次幂）。 Math.ceil() //向上取整 Math.floor() //向下取整 Math.abs() //绝对值 alert弹出框中 换行的是 \n...
2019-12-17 09:27:31
206
原创 Git 命令
1.修改最近的提交git commit --amend—-amend 允许你把阶段性更改（例如添加被遗忘的文件）附加到上一次提交。添加 --no-edit 将会修改最后的提交但不更改它的提交消息。如果没有更改，--amend 将允许你重新输入最后的提交消息。更多信息：git help commit。2.以交互方式添加文件的选定部分git add -p-p (或 —patch) 允许...
2019-12-16 19:12:16
101
原创 React 文件拆分
// services.js // actionimport { requestPost } from '@/utils/request';// 获取登录 信息export function login(items) { return { type: 'POST_DATA_LOGIN', payload: requestPost('/api/h...
2019-12-16 17:01:52
321
原创 WebSocket
// cnpm i ws -S// server.jsvar WebSocketServer = require('ws').Server,wss = new WebSocketServer({ port: 8181 })wss.on('connection', function (ws) { ws.on('message', function (message) { ...
2019-12-16 15:42:06
104
原创 React From 表单
import React, { PureComponent } from 'react';import './styles.less';import { connect } from 'react-redux'import { Table, Divider, Tag, Button, message, Popconfirm } from 'antd';import _ from 'load...
2019-12-16 08:20:58
192
原创 瀑布流 + 下拉加载 + 监听图片
import React from 'react'import Masonry from 'masonry-layout'import InfiniteScroll from 'react-infinite-scroller'import imagesLoaded from 'imagesloaded'import axios from 'axios'import cs from 'cl...
2019-12-14 11:57:58
515
原创 图片加载插件imagesLoaded的配置和使用
import React from 'react';import './styles.less';import imagesloaded from 'imagesloaded'// 安装 npm install imagesloaded// 相关链接： https://segmentfault.com/a/1190000007316974const arr = [ 'http...
2019-12-14 10:34:01
1446
原创 React 瀑布流
import React from 'react'import Masonry from 'masonry-layout'import InfiniteScroll from 'react-infinite-scroller'import axios from 'axios'import cs from 'classnames'import './styles.less'// col...
2019-12-13 20:23:11
669
原创 React 记录滚动位置
componentDidMount() { // 滚动 const div = document.querySelector('.index_Content') div.addEventListener('scroll', function (e) { localStorage.y = e.target.scrollTop...
2019-12-13 10:42:10
741
原创 React 图片懒加载
// 相关链接 https://www.npmjs.com/package/react-lazyloadimport React from 'react'import { Card } from 'antd';import LazyLoad from 'react-lazyload'; // 懒加载const { Meta } = Card;export default class...
2019-12-13 10:21:27
347
原创 Vue 简洁的安装步骤
创建vue create 项目名称cd 项目名称Cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org安装routernpm install vue-router --savemain.js引入 router安装 axiosnpm install axios --saveVue.prototy...
2019-12-12 08:44:00
108
原创 项目中常用的CSS样式
CSS 样式----多行显示点点点* display: flex; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical;
2019-12-11 15:09:40
137
原创 React 全局路由守卫
// components / PrivateRoute / index.jsximport React from 'react'import { Route, withRouter } from 'react-router-dom'/** * 统一路由监听 * 登录后不做任何处理 未登录跳转到登录页 */export default @withRouterclass exten...
2019-12-11 10:17:05
1323
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人