- 博客(37)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 后台管理系统--前端解决思路
陆陆续续的也写过一些后台管理系统,有团队合作的,也有自己负责的以下就整理一些自己的心得,文中有vue和react的用例。首先,拿到一个类似后台管理系统的项目的时候,先明确大概的功能的需求(可能也会有比较坑的时候是那种领导想到啥就加啥的情况),例如:国际化、权限系统...ok,直接来...1. 分层管理系统一般可以划分为三层:菜单栏 账户信息,以及其他被认为是整个系统层级...
2019-04-23 18:52:40
5056
原创 前端:时间你用对了吗?
前后端接口中的时间是怎么约定的?项目中是否有遇到过时区问题引发的bug?时间应该遵循什么样的使用规范?如何理解并处理跨时区问题?关键字:时间戳、时区、设备本地时间、北京时间
2022-11-16 17:06:19
1082
1
原创 在使用Nuxt vue-property-decorator typescript时,父组件调用子组件的方法
不使用以上技术时我们一般是使用ref<Son ref="son" /> methods:{ parentMethod() { console.log(this.$refs.son) //返回的是一个vue对象,所以可以直接调用其方法 this.$refs.son.childMethod(this.flag); ...
2020-04-20 18:59:27
1598
原创 利用React+Antd+Dva+Umi+Sass和Node+Egg+mysql等技术实现了一个前后端的demo
如题:github地址:https://github.com/wujunwen1997/node-egg-mysql-egg-passporthttps://github.com/wujunwen1997/React-Dva-Umi-Sass大体完成了这些功能:Use `登录注册. Use `用户管理:增删改查,修改权限. Use `操作日志记录. Use `消息推送功能. U...
2019-08-14 20:58:28
1541
原创 初试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
1346
原创 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
2717
1
原创 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
3375
1
原创 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
2376
5
原创 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
1577
原创 前后端鉴权,权限管理react+egg
登录:发送账户密码到后端node端:1.判断是否存在此用户2.通过账户密码校验用户3.获得账户信息中的是否允许登录信息4.通过以上之后,使用id进行jwt加密,生成拥有时效的token信息(保存于session中)5.成功返回:用户信息(权限信息----->进行页面和路由的权限设计)、token登录成功------------->前端将此token携带于...
2019-06-14 16:00:19
1675
原创 集成dva和react native和react-navigation
先初始化一个react native的项目npm install -g yarn react-native-clireact-native init AwesomeProject准备安装dva 、react-navigation1.yarn add dva-core2.yarn addreact-redux3.yarn add react-navigation4.y...
2019-05-29 19:17:26
3095
1
原创 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
2811
原创 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
1602
原创 Electron在react中的进程间的通信
在react中使用electronconst {remote, ipcRenderer} = window.require('electron')// 调用此js文件,引入需要的实例等export { remote, ipcRenderer}ipcMain从主进程到渲染进程的异步通信。1.同步 、通过returnValue将此设置为在一个同步消息中返...
2019-05-20 09:49:54
2508
原创 在数组循环中进行异步请求,遇到错误中断
需求:就是批量请求某个接口(是不是很坑0.0),然后遇到错误就中断关键点:数组,异步,中断ok,上代码if (selectedRowKeys && selectedRowKeys.length > 0) { const goQian = (k) => { let u = selectedRowKeys[k] ...
2019-05-16 20:13:04
763
原创 dva创建项目,引入less或sass失效问题
以sass为例: 加入sass node-sass sass-loader三个包即可npm installsass node-sass sass-loader --save然后就可以直接使用了import styles from './IndexPage.scss'className={styles.abc}...
2019-04-26 10:22:21
1316
原创 Element 分页组件 size-change请求两次、页码没有改变的问题
问题:1. 分页首次事件是改变每次数量,size-change事件是,会进行2次http请求 2.改变页码之后进行请求,请求完成之后页码失去或无法写入解决思路:.sync绑定数值 然后在改变事件发生时,需要改变之后的数据去发送请求,handleCurrentChange (val) { this.getDataEve...
2019-04-23 19:18:14
7885
原创 react umi当中layout布局切换:登录页、登录之后的布局
1.切换layout布局2.记录从哪个页面跳转到登录页面的,登录之后返回(不使用localStorage)3.Cookie等信息记录登录状态(登录失效,跳到登录页面)核心观点是:将是否登录的状态划分为2种布局 布局1:非登录状态,直接进入登录页面 布局2:已登录状态,拥有sider、header...
2019-04-23 13:55:29
13838
原创 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
247
原创 理解react中经常使用的withRouter
1.为啥使用它?非路由级组件,例如:公共组件...然后在这样的组件当中不能通过this.props拿取history、location、match等信息的2.写法(1)引入 (2)用withRouter()包裹组件(高阶组件嘛)3.withRouter是如何更新的Important NotewithRouter does not subscribe to locati...
2019-03-26 17:26:17
1956
原创 vue 实践webpack性能优化1:构建速度(缩小文件搜索范围+减少基础模块编译次数)
一、优化构建速度1.1 缩小文件的搜索范围以vue项目的默认配置为例:webpack.base,conf.jsmodule.exports:extensions :当导入语句没带文件后缀时,Webpack会根据extensions定义的后缀列表进行文件查找数组中的值尽量少 频率高的文件类型的后缀写在前面 导入语句尽可能的写上文件后缀alias:使webpack直接使用库...
2019-03-10 16:29:23
695
原创 react 详情页的处理,地址记录条件,搭配路由完成
我们经常通过一个地址打开一个详情的页面,比如:商品详情、交易详情通常是GET请求,然后地址后面衔接了特定的条件字段,如:问号之后则是我们需要的信息,如何只需要某一个字段,比如:id...我们也可以这样:这个874是id的值。然后是react当中如何实现,思路大体如下:对system/message/:id 这个动态的路由进行监听进入监听,则获取到id,然后组装请...
2019-03-07 14:17:56
877
原创 vue父组件中调用子组件的方法
通过ref调用即可,但是ref是dom节点出来之后才能用的,也就是render函数执行完毕,mounted钩子之后<template> <div> <button @click="clickParent">点击</button> <child ref="mychild"></child>
2019-03-05 11:26:53
853
原创 React umi 通过路由切换完成国际化的处理
理一下自己对于国际化处理的思路:1.拿到用户本机的语言作为第一选项,如果不匹配则设置系统默认的第一语言2.动态路由(已语言为第一层级),用的是umi的约定式路由(其实都差不多)3.以切换路由的方式切换语言,完成页面的国际化(用的插件是: react-intl-universal 阿里出品,优势在于可以在js文件里单独引用)4.切换语言的同时,需要切换ui库的语言(这个有文档岂...
2019-03-02 17:42:31
3830
原创 React 地址记录搜索条件
我们在完成搜索的需求时经常会遇到需要记录搜索条件的需求,一般是利用地址拼接搜索条件的方法核心:切换搜索条件,把条件写入路由,然后监听路由的变化,发送搜索事件接下来记录一个React示例:1. 打开一个页面:使用路由监听,去触发写好的搜索请求export default modelExtend(pageModel, { namespace: 'systemMessage...
2019-03-02 16:58:26
875
原创 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
8617
1
原创 vue设置动态请求地址
需求:在开发和生产环境下,请求不同的地址(http or ws),使其置入线上环境,无论是什么域名都不用手动更改请求地址思路:使前端请求接口地址简单化 上代码:在vuex中设置总的接口地址,然后在生产和开发环境下配置不同的地址export const configUrl = { url: process.env.API_HOST, ws: process.env.API_WS...
2019-01-11 10:44:45
9825
10
原创 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
540
原创 手写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
890
1
原创 通用前后端接口文档
描述:管理后台修改密码地址:192.168.0.111:8080/user/changePwd请求方式:POST参数:字段类型说明必需tokenstringtoken信息是oldPwdstring旧密码(hash)是newPwdstring新密码(hash)是返回值:字段类型说明必需codeint返回...
2019-01-03 19:03:06
6836
原创 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
2248
1
原创 Element UI表格和分页以及搜索条件的合成组件(2)
动态组件封装搜索表单先来看搜索组件,这里的循环是循环表单内容<el-form-item></el-form-item>如果搜索框是多个的话用循环渲染,加下来用动态组件解决,但是尺度要把控住,有些部分并不是完全适用<template> <div class="search-form"> <el-form @submit...
2019-01-03 18:45:11
1283
2
原创 Element UI表格和分页以及搜索条件的合成组件(1)
在一些表格统计页面当中经常会遇到需要表格、分页、一般还会有搜索条件等组成像这样, 当然有时候搜索条件会有很多个输入框、下拉框、时间轴...可以写成表单(用动态组件封装一下),这里是模糊搜索回到正题先看一下组件顶层:<template> <div> <seachList :searchList="params.searchForm"...
2019-01-03 18:39:44
3301
原创 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
376
原创 在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
11234
原创 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
15545
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人