- 博客(37)
- 收藏
- 关注
RSS订阅
原创 后台管理系统--前端解决思路
陆陆续续的也写过一些后台管理系统，有团队合作的，也有自己负责的以下就整理一些自己的心得，文中有vue和react的用例。首先，拿到一个类似后台管理系统的项目的时候，先明确大概的功能的需求（可能也会有比较坑的时候是那种领导想到啥就加啥的情况），例如：国际化、权限系统...ok，直接来...1. 分层管理系统一般可以划分为三层：菜单栏 账户信息，以及其他被认为是整个系统层级...
2019-04-23 18:52:40
5010
原创 前端：时间你用对了吗？
前后端接口中的时间是怎么约定的？项目中是否有遇到过时区问题引发的bug？时间应该遵循什么样的使用规范？如何理解并处理跨时区问题？关键字：时间戳、时区、设备本地时间、北京时间
2022-11-16 17:06:19
977
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
1564
原创 利用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
1518
原创 初试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
1323
原创 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
2646
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
3281
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
2332
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
1551
原创 前后端鉴权，权限管理react+egg
登录：发送账户密码到后端node端：1.判断是否存在此用户2.通过账户密码校验用户3.获得账户信息中的是否允许登录信息4.通过以上之后，使用id进行jwt加密，生成拥有时效的token信息（保存于session中）5.成功返回：用户信息（权限信息----->进行页面和路由的权限设计）、token登录成功------------->前端将此token携带于...
2019-06-14 16:00:19
1653
原创 集成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
3090
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
2783
原创 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
1569
原创 Electron在react中的进程间的通信
在react中使用electronconst {remote, ipcRenderer} = window.require('electron')// 调用此js文件，引入需要的实例等export { remote, ipcRenderer}ipcMain从主进程到渲染进程的异步通信。1.同步 、通过returnValue将此设置为在一个同步消息中返...
2019-05-20 09:49:54
2469
原创 在数组循环中进行异步请求，遇到错误中断
需求：就是批量请求某个接口（是不是很坑0.0），然后遇到错误就中断关键点：数组，异步，中断ok，上代码if (selectedRowKeys && selectedRowKeys.length > 0) { const goQian = (k) => { let u = selectedRowKeys[k] ...
2019-05-16 20:13:04
727
原创 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
1293
原创 Element 分页组件 size-change请求两次、页码没有改变的问题
问题：1. 分页首次事件是改变每次数量，size-change事件是，会进行2次http请求 2.改变页码之后进行请求，请求完成之后页码失去或无法写入解决思路：.sync绑定数值 然后在改变事件发生时，需要改变之后的数据去发送请求，handleCurrentChange (val) { this.getDataEve...
2019-04-23 19:18:14
7775
原创 react umi当中layout布局切换：登录页、登录之后的布局
1.切换layout布局2.记录从哪个页面跳转到登录页面的，登录之后返回（不使用localStorage）3.Cookie等信息记录登录状态（登录失效，跳到登录页面）核心观点是：将是否登录的状态划分为2种布局 布局1：非登录状态，直接进入登录页面 布局2：已登录状态，拥有sider、header...
2019-04-23 13:55:29
13609
原创 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
236
原创 理解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
1930
原创 vue 实践webpack性能优化1:构建速度（缩小文件搜索范围+减少基础模块编译次数）
一、优化构建速度1.1 缩小文件的搜索范围以vue项目的默认配置为例：webpack.base,conf.jsmodule.exports:extensions :当导入语句没带文件后缀时，Webpack会根据extensions定义的后缀列表进行文件查找数组中的值尽量少 频率高的文件类型的后缀写在前面 导入语句尽可能的写上文件后缀alias:使webpack直接使用库...
2019-03-10 16:29:23
667
原创 react 详情页的处理，地址记录条件，搭配路由完成
我们经常通过一个地址打开一个详情的页面，比如：商品详情、交易详情通常是GET请求，然后地址后面衔接了特定的条件字段，如：问号之后则是我们需要的信息，如何只需要某一个字段，比如：id...我们也可以这样：这个874是id的值。然后是react当中如何实现，思路大体如下：对system/message/:id 这个动态的路由进行监听进入监听，则获取到id，然后组装请...
2019-03-07 14:17:56
850
原创 vue父组件中调用子组件的方法
通过ref调用即可，但是ref是dom节点出来之后才能用的，也就是render函数执行完毕，mounted钩子之后<template> <div> <button @click="clickParent">点击</button> <child ref="mychild"></child>
2019-03-05 11:26:53
843
原创 React umi 通过路由切换完成国际化的处理
理一下自己对于国际化处理的思路：1.拿到用户本机的语言作为第一选项，如果不匹配则设置系统默认的第一语言2.动态路由（已语言为第一层级），用的是umi的约定式路由（其实都差不多）3.以切换路由的方式切换语言，完成页面的国际化（用的插件是： react-intl-universal 阿里出品，优势在于可以在js文件里单独引用）4.切换语言的同时，需要切换ui库的语言（这个有文档岂...
2019-03-02 17:42:31
3774
原创 React 地址记录搜索条件
我们在完成搜索的需求时经常会遇到需要记录搜索条件的需求，一般是利用地址拼接搜索条件的方法核心：切换搜索条件，把条件写入路由，然后监听路由的变化，发送搜索事件接下来记录一个React示例：1. 打开一个页面：使用路由监听，去触发写好的搜索请求export default modelExtend(pageModel, { namespace: 'systemMessage...
2019-03-02 16:58:26
825
原创 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
8559
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
9768
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
519
原创 手写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
881
1
原创 通用前后端接口文档
描述：管理后台修改密码地址：192.168.0.111:8080/user/changePwd请求方式：POST参数:字段类型说明必需tokenstringtoken信息是oldPwdstring旧密码(hash)是newPwdstring新密码(hash)是返回值：字段类型说明必需codeint返回...
2019-01-03 19:03:06
6789
原创 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
2180
1
原创 Element UI表格和分页以及搜索条件的合成组件（2）
动态组件封装搜索表单先来看搜索组件，这里的循环是循环表单内容<el-form-item></el-form-item>如果搜索框是多个的话用循环渲染，加下来用动态组件解决，但是尺度要把控住，有些部分并不是完全适用<template> <div class="search-form"> <el-form @submit...
2019-01-03 18:45:11
1260
2
原创 Element UI表格和分页以及搜索条件的合成组件（1）
在一些表格统计页面当中经常会遇到需要表格、分页、一般还会有搜索条件等组成像这样， 当然有时候搜索条件会有很多个输入框、下拉框、时间轴...可以写成表单（用动态组件封装一下），这里是模糊搜索回到正题先看一下组件顶层：<template> <div> <seachList :searchList="params.searchForm"...
2019-01-03 18:39:44
3274
原创 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
369
原创 在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
11178
原创 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
15501
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人