03 2018 档案
摘要:(1)创建的formData打印为空? 解决方案: 直接打印是看不到的,要用FormData的get()和getAll()方法 (2)https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append
阅读全文
摘要:1.通过实验证明: PopupPicker = TransferDom + Popup + PopupHeader + Picker 2.代码 Picker.vue 3.效果图
阅读全文
摘要:1.PopupPicker 组件 2.效果图 .
阅读全文
摘要:问题一: Expected to return a value in arrow function 解决方案: 修改后: 注:将 map 改为 forEach 以后,页面渲染失败 问题二: Expected an assignment or function call and instead saw
阅读全文
摘要:项目目录 首先,一个基于React + Redux + React-Router的项目目录可以按照我下方的图片来构建: 其中assets目录用于存放项目的静态资源,如css/图片等,src目录则用于存放React的组件资源。 入口文件配置 在webpack的配置项中,我们需要一个或多个入口文件,这里
阅读全文
摘要:核心概念 redux专注于状态管理,把所有的状态都存在一个对象中。核心概念包括:store、state、action、reducer 【store】 store是保存数据的地方,redux提供createStore函数来生成 Store。函数参数是后面要介绍的reducer 【state】 stat
阅读全文
摘要:概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构
阅读全文
摘要:1.项目目录 2.redux (1)app/redux/action/action.js (2)app/redux/reducer/reducer.js (3)app/redux/store/store.js 3.页面引用 (1)app/containers/Index.js (2)app/cont
阅读全文
摘要:1.原因解析 经测试发现,代码先执行了 index.js >> main.js >> Home.vue scr/api/index.js src/main.js src/components/Home.vue 总结:项目首次运行时,main.js 加载延后 2.解决方案 方案一:仅对首页首次请求设置
阅读全文
摘要:1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片。 npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题。 注: 绝对路径:从盘符开始的路径,
阅读全文
摘要:1.入口文件 main.js 2.使用 .
阅读全文
摘要:1.传值 2.vuex (1)index.js (2)types.js (3)actions.js (4)mutations.js (5)getters.js 3.取值 注: dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutations方
阅读全文
摘要:1.报错情况 /* autoprefixer: off */ filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false); 2.原因解析 webpack.config.dev.js 中的 l
阅读全文
摘要:1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去。 另外,每次都需要把所有的样式表都导入到程序中,如果我们可以像使用js模块一样,想用哪块就用哪块,是不是就很理
阅读全文
摘要:资源文件路径问题 如果你使用create-react-app创建项目,执行命令 yarn build 后,直接以静态方式打开build文件夹内的index.html,会看到页面显示出现问题,打开console后会看到js、css、svg等文件的路径出现问题。 项目结构:(build文件夹) 项目结构
阅读全文
摘要:方案一: npm run eject 暴露所有内建的配置 安装组件库 根目录下新建.roadhogrc文件(别忘了前面的点,这是roadhog工具的配置文件,下面的代码用于加载上一个命令安装的import插件),写入: antd配置 修改 webpack.config.dev.js 和 webpac
阅读全文
摘要:使用create-react-app 创建的项目默认不支持less,以下增加less配置的步骤 暴露配置文件 create-react-app生成的项目文,看不到webpack相关的配置文件,需要先暴露出来,使用如下命令即可: 安装less-loader 和 less 修改webpack配置 修改
阅读全文
摘要:本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm i babel-plugin-import -D 安装一个babel插件用于做组件的按需加载(否则项
阅读全文
摘要:SPA的鉴权方式和传统的web应用不同:由于页面的渲染不再依赖服务端,与服务端的交互都通过接口来完成,而REASTful风格的接口提倡无状态(state less),通常不使用cookie和session来进行身份认证。 比较流行的一种方式是使用web token,所谓的token可以看作是一个标识
阅读全文
摘要:图书管理 src / pages / BookAdd.js // 图书添加页 src / pages / BookList.js // 图书列表页 src / components / BookEditor.js // 图书编辑组件 src / pages / BookEdit.js // 图书编辑
阅读全文
摘要:添加操作列 编辑与删除功能都是针对已存在的某一个用户执行的操作,所以在用户列表中需要再加一个“操作”列来展现【编辑】与【删除】这两个按钮。 修改/src/pages/UserList.js文件,添加方法handleEdit与handleDel,并在table中添加一列: 点击编辑(删除)时,会把该行
阅读全文
摘要:重复代码是混乱的根源!,本篇文章我们来继续消灭重复代码。 目标 细心的同学应该能发现:每一个Page组件(/src/pages下的组件)的render方法都拥有相似的jsx结构,比如: 每一个页面都包含一个页面的标题(header标签和h1标签),并且页面的主要部分都被放在了一个main标签中。 现
阅读全文
摘要:获取时间: 获取特定格式的时间: JS获取当前时间戳的方法 JavaScript 获取当前时间戳:第一种方法: var timestamp =Date.parse(new Date()); 得到的结果:1280977330000 注意:这里得到的结果将后三位(毫秒)转换成了000显示,使用时可能会出
阅读全文
摘要:react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级,子级可以直接调用函数从而和父级通信。 组件层级嵌套到比较深,可以使用上下文Context来传递信息
阅读全文
摘要:在使用react 中经常会遇到各种个样的问题,如果对react不熟悉则会对遇到的问题感到莫名其妙而束手无策,接下来分析一下react中容易遇到的问题和注意点。 1、setState()是异步的this.setState()会调用render方法,但并不会立即改变state的值,state是在rend
阅读全文
摘要:函数拓展-bind bind实现的是:对函数绑定作用域 更改作用域的方法:call,apply,with,eval,bind call 和 apply 的比较 相同点:1.都是在使用时候(使用即执行)改变作用域。2.第一个参数都表示作用域 不同点: call 从第二个参数开始表示传递的参数 appl
阅读全文
摘要:组件的创造方法为React.createClass() ——创造一个类,react系统内部设计了一套类系统,利用它来创造react组件。但这并不是必须的,我们还可以用es6的class类来创造组件,这也是Facebook官方推荐的写法。 这两种写法实现的功能一样但是原理却是不同,es6的class类
阅读全文
摘要:在开发中有时需要在js中提交form表单数据,就需要将form表单进行序列化。 jquery提供的serialize方法能够实现。 但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。 例如以下代码: 输出结果是:id=123&cx=lklj se
阅读全文