![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
随笔&笔记
watts_j
体验技术
展开
-
Element 分页组件 size-change请求两次、页码没有改变的问题
问题:1. 分页首次事件是改变每次数量,size-change事件是,会进行2次http请求 2.改变页码之后进行请求,请求完成之后页码失去或无法写入解决思路:.sync绑定数值 然后在改变事件发生时,需要改变之后的数据去发送请求,handleCurrentChange (val) { this.getDataEve...原创 2019-04-23 19:18:14 · 7849 阅读 · 0 评论 -
Electron在react中的进程间的通信
在react中使用electronconst {remote, ipcRenderer} = window.require('electron')// 调用此js文件,引入需要的实例等export { remote, ipcRenderer}ipcMain从主进程到渲染进程的异步通信。1.同步 、通过returnValue将此设置为在一个同步消息中返...原创 2019-05-20 09:49:54 · 2490 阅读 · 0 评论 -
Electron对磁盘文件的处理
首先、选中文件使用:electron的remote模块的dialog const onImport = () => { const { dialog } = remote let that = this dialog.showOpenDialog({title: '你好,文件导入', filters: [{name: 'wallet', e...原创 2019-05-20 18:44:57 · 1584 阅读 · 0 评论 -
在数组循环中进行异步请求,遇到错误中断
需求:就是批量请求某个接口(是不是很坑0.0),然后遇到错误就中断关键点:数组,异步,中断ok,上代码if (selectedRowKeys && selectedRowKeys.length > 0) { const goQian = (k) => { let u = selectedRowKeys[k] ...原创 2019-05-16 20:13:04 · 741 阅读 · 0 评论 -
TypeError: (0 , _reactNavigation.addNavigationHelpers) is not a function
React Navigation将这个方法移除了新的案例链接新的redux集成方法如下:1.将createAppContainer创建的组件,包装在Provider中let RootStack = createStackNavigator({ Counter: CounterContainer, StaticCounter: StaticCounterContaine...原创 2019-05-27 14:34:23 · 2791 阅读 · 0 评论 -
antd RN的Toast不显示的问题
原因是没有看到文档里面的这个需要使用<Provider></Provider>包裹一层,,,,,,原创 2019-05-29 19:03:26 · 3330 阅读 · 1 评论 -
前后端鉴权,权限管理react+egg
登录:发送账户密码到后端node端:1.判断是否存在此用户2.通过账户密码校验用户3.获得账户信息中的是否允许登录信息4.通过以上之后,使用id进行jwt加密,生成拥有时效的token信息(保存于session中)5.成功返回:用户信息(权限信息----->进行页面和路由的权限设计)、token登录成功------------->前端将此token携带于...原创 2019-06-14 16:00:19 · 1657 阅读 · 0 评论 -
vue img设置动态地址
需求:根据文件名动态渲染一个图片数组 <ul> <li v-for="(item, index) in assetTotal" :key="index"> <img :src="'/static/b/' + item.symbol + '.png'"/> <...原创 2019-06-14 17:45:14 · 1562 阅读 · 0 评论 -
react-router-breadcrumbs-hoc的应用
从umi文档中看到的这个推荐使用面包屑插件,体验不错,记录一下使用。直接上代码,可以作为一个组件加在任何地方,具体使用看文档---点这里import style from './bc.scss'import withBreadcrumbs from 'react-router-breadcrumbs-hoc';import Link from 'umi/link';const D...原创 2019-06-15 21:06:32 · 2336 阅读 · 5 评论 -
react antd + node egg实现图片上传并保存在本地文件夹,file和stream
先上egg-multipart的配置 config.multipart = { mode: 'stream', fileModeMatch: /^\/uploadFile$/,// uploadFile接口使用file模式,其他使用stream模式 tmpdir: path.join(os.tmpdir(), 'egg-multipart-tmp', appI...原创 2019-07-11 16:00:28 · 3318 阅读 · 1 评论 -
egg-socket和socket.io-client完成前后端socket链接
前端:注意一点,链接只能初始化、维持一个class,多个的话就是多个链接了import { notification } from 'antd';import {getUserName} from '@/utils/cookies';import io from 'socket.io-client';notification.config({ placement: 'bott...原创 2019-07-11 16:15:35 · 2669 阅读 · 1 评论 -
react umi当中layout布局切换:登录页、登录之后的布局
1.切换layout布局2.记录从哪个页面跳转到登录页面的,登录之后返回(不使用localStorage)3.Cookie等信息记录登录状态(登录失效,跳到登录页面)核心观点是:将是否登录的状态划分为2种布局 布局1:非登录状态,直接进入登录页面 布局2:已登录状态,拥有sider、header...原创 2019-04-23 13:55:29 · 13716 阅读 · 0 评论 -
vue vue-cli的同源环境下的mock数据,无需下载其他依赖,使用node和express
工具:node,expressvue正常而言脚手架搭建的前端项目会包含这两个依赖,以vue-cli搭建的项目为例:1.修改webpack在dev开发模式下的devServer(没有after的话就自己加)devServer.afterfunction (app, server)在服务内部的所有其他中间件之后, 提供执行自定义中间件的功能。const apiMock ...原创 2019-04-16 16:14:40 · 240 阅读 · 0 评论 -
vue 实践webpack性能优化1:构建速度(缩小文件搜索范围+减少基础模块编译次数)
一、优化构建速度1.1 缩小文件的搜索范围以vue项目的默认配置为例:webpack.base,conf.jsmodule.exports:extensions :当导入语句没带文件后缀时,Webpack会根据extensions定义的后缀列表进行文件查找数组中的值尽量少 频率高的文件类型的后缀写在前面 导入语句尽可能的写上文件后缀alias:使webpack直接使用库...原创 2019-03-10 16:29:23 · 671 阅读 · 0 评论 -
v-bind="$attrs" v-on="$listeners" 多层组件监听
vue组件间的通信多级组件通信,用vuex太重,props太麻烦。vue 2.4 版本提供了另一种方法,使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用。<top> <center> <bottom> <...原创 2018-09-28 12:50:08 · 15519 阅读 · 0 评论 -
在element-ui的表格组件中为表头添加Tooltip 文字提示
表头添加Tooltip在使用表格组件的时候经常遇到的问题,列数很多,而表头的文字描述长度很长 <el-table-column v-if="!column.event" v-for="(column, index) of columns" v-bind="column.bind" align="left" ...原创 2018-12-24 11:14:25 · 11205 阅读 · 0 评论 -
Element UI表格和分页以及搜索条件的合成组件(1)
在一些表格统计页面当中经常会遇到需要表格、分页、一般还会有搜索条件等组成像这样, 当然有时候搜索条件会有很多个输入框、下拉框、时间轴...可以写成表单(用动态组件封装一下),这里是模糊搜索回到正题先看一下组件顶层:<template> <div> <seachList :searchList="params.searchForm"...原创 2019-01-03 18:39:44 · 3289 阅读 · 0 评论 -
Element UI表格和分页以及搜索条件的合成组件(2)
动态组件封装搜索表单先来看搜索组件,这里的循环是循环表单内容<el-form-item></el-form-item>如果搜索框是多个的话用循环渲染,加下来用动态组件解决,但是尺度要把控住,有些部分并不是完全适用<template> <div class="search-form"> <el-form @submit...原创 2019-01-03 18:45:11 · 1271 阅读 · 2 评论 -
Element UI表格和分页以及搜索条件的合成组件(3)
分页和表格先看代码<template> <pagination-list :total="data.total" :loading="loading" v-on="$listeners"> <template> <common-table :columns="columns" :data="原创 2019-01-03 18:57:05 · 2188 阅读 · 1 评论 -
通用前后端接口文档
描述:管理后台修改密码地址:192.168.0.111:8080/user/changePwd请求方式:POST参数:字段类型说明必需tokenstringtoken信息是oldPwdstring旧密码(hash)是newPwdstring新密码(hash)是返回值:字段类型说明必需codeint返回...原创 2019-01-03 19:03:06 · 6815 阅读 · 0 评论 -
手写Vue的WebSocket原生插件
其中应该加上重连机制的,思路是断开之后n秒启动重连,重连就是其中执行 open方法就行,重连几次之后,如果还没有成功就关闭重连机制import store from '@/store'import qs from 'qs'import {getCookieToken} from '@/utils/auth'const {ws} = store.getters.apiConfigcl...原创 2019-01-03 19:14:10 · 887 阅读 · 1 评论 -
vue-router改写一下导入路由
const getImport = (file, path) => require(`@/${path || 'views'}/` + file + '.vue').default{path: '/getAddressList', name: 'getAddressList', component: getImport('configCenter/formList')},{path...原创 2019-01-03 19:18:37 · 522 阅读 · 0 评论 -
vue设置动态请求地址
需求:在开发和生产环境下,请求不同的地址(http or ws),使其置入线上环境,无论是什么域名都不用手动更改请求地址思路:使前端请求接口地址简单化 上代码:在vuex中设置总的接口地址,然后在生产和开发环境下配置不同的地址export const configUrl = { url: process.env.API_HOST, ws: process.env.API_WS...原创 2019-01-11 10:44:45 · 9787 阅读 · 10 评论 -
vue-route 的 beforeEach 实现导航守卫
路由导航,一般会搭配权限设置和验证信息import router from './router'import NProgress from 'nprogress' // 进度条import store from '@/store'import 'nprogress/nprogress.css'import { getCookieToken, getUserPower } fro...原创 2019-01-02 18:49:00 · 372 阅读 · 0 评论 -
Element ui 表格实现单元格双击复制功能
先引入 vue-clipboard2import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)然后为单元格添加双击事件 <el-table class="lr-common-tb" ref="table" v-bin...原创 2019-01-18 16:04:04 · 8575 阅读 · 1 评论 -
初试next+dva+antd+sass
github地址:https://github.com/wujunwen1997/next-dva-antd1.使用antd初始化项目,使用官方的例子:https://github.com/zeit/next.js/tree/canary/examples/with-ant-designnpx create-next-app --example with-ant-design...原创 2019-07-29 13:22:55 · 1331 阅读 · 0 评论