- 博客(46)
- 收藏
- 关注
RSS订阅原创 dva-boot[-X] React相关工程自动配置工具
首先广告一下，我觉得最好用的后台管理脚手架dva-boot-admin，现在升级到2.0了，功能更多了，更易用了。随着做过的项目越来越多，发现时间多是耽误在：找适合的架子，整理目录；找相关组件；熟悉组件的用法及示例；模拟数据及与后台接口对上；写各种CRUD为了解决上面的问题，最初构建了dva-boot这个精简的项目框架，之后完成了dva-boot-admin全功能的中后台框架。随...
2019-02-14 10:22:53
507
转载 React & Create-React-App & DVA 的后台管理UI
dva-boot-admin 是一个用React开发的一个企业级中后台管理UI,包含常用的业务，组件，及数据流转方案，前后端分离的开发方式，按业务划分的目录结构，可以大大提高我们的开发效率下面是整体的介绍，感兴趣的同学可以去官网详加了解。 功能封装了dva框架的数据流转，简单的请求可以不用在model和service中定义封装了数据模模拟，可以独立于后台开发前...
2018-06-20 22:22:45
2609
原创 React生命周期
React生命周期Mounting过程getInitialState在组件加载完成前执行一次，它的反回值将做为this.state的初始值。 如果使用ES6的语法，这个过程将被定义到constructor中，使用this.state={...}进行初始化。getDefaultProps调用一次，当类创建后，如果父组件没有传递this.props则会被做为默认的props。 这个方法调用之前创
2016-05-30 22:01:29
660
翻译 使用JWT验证在我们的React&Redux应用中
带验证功能的Redux应用我们将完成一个使用JWT结合Redux的应用。这个应用可以认用户登录并且得到一个token,并且在一个JWT的中间件中访问一些私有的链接。本文不是React和Redux的入门文章，相关知识可以看其它章节。开始我们从零开始建一个项目文件夹redux_jwt package.json{ "name": "redux_jwt", "version": "1.0.0",
2016-05-18 09:21:36
5485
原创 Spring MVC 解决跨域问题&以及对@RequestBody的理解
Spring MVC 解决跨域问题&以及对@RequestBody的理解本来想学习一下@RequestBody这个注解，但发请求时出现跨域问题，所以就先来看一下跨域该怎么办。CORS首先因为最近在做一个前后端分离的项目，分开就意味着可能不在一个域中，所以不可避免的遇到CORS的问题。试过几个方法：Spring MVC 4.2.5以后新增的支持跨域的注解@CrossOrigin，如果是老项目的话升级
2016-05-15 20:30:45
11821
1
原创 JDK8与JDK7并存时切换的问题
JDK8与JDK7并存时切换的问题今天安装jdk7时发现了一个问题，即我安装完成后打后命令行工具，使用java -version发现还是之前的jdk8的版本，原因是我机器以前安装过jdk8的版本，但我们的项目使用的是jdk7，我不想卸载jdk8，在网上找了一些方法，JAVA_HOME配置就不说了。现在说一下具体做法：修改注册表中HKEY_LOCAL_MACHINE\SOFTWARE\JavaSof
2016-05-14 10:41:57
6122
原创 babel 在编译箭头函数时报 "Unexpected token" 问题
babel 在编译箭头函数时报错问题今天在用webpack打包时遇到了如下错误：Module build failed: SyntaxError: D:/workspace/vs/simple-database/app/containers/App.jsx: Unexpected token (86:7) 84 | } 85 |> 86 | test = () => {
2016-05-06 13:06:10
7974
1
翻译 Webpack&React (九) 构建Kanban
渣翻译,原文链接构建Kanban到目前为至,我们已经有了一个运行良好的Kanban应用, 本章的目地是在此基础上设置不错的产品级的版本.使用各种技术来控制打包后的大小并加入浏览器端缓存.优化构建大小我们运行npm run build,能看到下面的结果|:> webpackHash: 807faffbf966eb7f08fcVersion: webpack 1.12.13Time: 3967ms
2016-03-24 14:09:01
1220
翻译 Webpack&React (八) 实现拖拽功能
渣翻译, 原文链接实现拖拽功能我们的看板应用差不多可以使用了，并有了一些基本的功能。在本章，将会更进一步，我们将使用React DnD加入拖拽的功能。这章之后你就可以在一个栏中拖动排序节点并也可以在不同的栏中进行拖拽。设置 React DnD首先，我们需要在我们的工程中加入React DnD，我们将要使用HTML5拖拽基于backend（实现 DnD 的方式）。触摸设备使用特定的backend。我们
2016-03-21 16:18:15
8025
1
翻译 学习React Router (一)
学习自https://github.com/reactjs/react-router-tutorial简介React Router 是一个由React创建的强大的路由库,可以帮助我们快速的实现路由功能,保持我们的URL和React组件的同步映射关系.在解释React Router是如何帮助我们之间,让我们看看在不使用它的情况下是如何创建一个应用程序的.我们将使用ES6/ES2015语法特性,完成我们
2016-03-07 14:44:32
876
翻译 Webpack&React (七) 从便签到看板
渣翻译, 原文链接从便签到看板So far we have developed an application for keeping track of notes in localStorage. We still have work to do to turn this into a real Kanban as pictured above. Most importantly our syste
2016-02-29 15:00:56
1437
翻译 Webpack&React (六) React 和 Flux
React 和 Flux尽管你可以一直都在组件中写另种逻辑,但最终这样做将是痛苦的.Flux 应用架构能让我们的React应用清爽起来.它不是唯一的解决方案,但却是一个不错的起点.Flux让我们分离我们应用的数据和程序状态.这帮助我们保持它们的清晰和应用的可维护性.Flux是为了大型团队设计的.因此你可能会觉得它很详细.但我们可以直接使它到工作中提升我们的效率.Flux简介
2016-02-25 11:00:19
1222
翻译 Webpack&React (五) 实现一个简单的便签应用
原文链接 因为我们以经有了一个好的开发环境,所以我们可能真正的做一些东西了.我们的目标是做一个简单的便签应用.它会有一些基本操作.我们会从头开始写并会遇到一些麻烦,之所以这样做是我了让你了解为什么诸如Flux,等架构是需要的.初始化数据模型通常开始设计应用程序的好的方式是从数据开始的.我们将有一个模型列表像下面这样:[ { id: '4a068c42-75b2-4ae2-bd0d-28
2016-02-22 16:06:08
1606
翻译 Webpack&React (四) Webpack 和 React
原文链接React与Webpack很合拍.尽管你可以使用其它的React构建工具,但Webpack仍是一个不错的选择并且配置简单.在这章,我们将扩展我们的配置,之后我们将为我们进一步的开发应用设置一个好的起点.React是什么?Facebook的React改变了我们前端开发的方式.另外感谢React Native使开发并不局限于web中.React是小而强的.React不是如Ang
2016-02-17 08:45:20
1699
翻译 Webpack&React (三) 使用Webpack
在GitHub上发现的学习webpack和react的很好的文章，原文链接通过看前两篇文章你可能对Webpack有了一些了解,它是一个模块购建工具,可以打包你的文件.听起来容易,实际上却不简单,我们都不想自已处理所有细节,这正是webpack要做的,接下来,将配置我们Webpack的第一个工程,并运行它在开发模式.建立工程Webpack依赖于Node.js. 请确让你已装安装了它,并可以在你的命令行
2016-02-15 16:13:47
5215
原创 继续挖坑之 NW.js (一) 介绍
NW.js是什么?NW.js是基于Chromium和node.js应用, 你可以用HTML和JavaScript写桌面级应用程序,并可以在DOM中直接调用Node.js模块.让你用所有Web技术开发桌面级应用,而且你能方便的打包你的web应用程序到桌面应用程序.安装 NW.js从它的官方网站中下载最新的压缩包到你的本地并解压.开始写NW.js应用程序例子 1 - Hello World步骤1. 创建
2016-02-04 12:50:10
5797
翻译 Webpack&React (二) Webpack现状
在GitHub上发现的学习webpack和react的很好的文章，原文链接 从Webpack的方展史上来看,它是强大的.早些时候对脚本文件的处理还只是压缩和合并,但随着时代的发展,现在怎样部署我们的JavaScript代码已经是一个繁杂的工作了.SPAs(单页面应用) 这个问题随着单页面应用(SPAs)的不断发展而升级,往往这样的应用需要依靠许多重量级的库,最后作为产品时需要把它们一次性的加载到
2016-02-02 17:17:22
1431
翻译 Webpack&React&Kanban (一) 开篇
在GitHub上发现的学习webpack和react的很好的文章，原文链接前言 这几年，前端技术的发展快到不要，新的技术不停的被Get，我接下来要学习的就是最近比较火的Webpack和React，因为它们可以帮助我们快速搭建各种web应用程序。什么是Webpack? web浏览器是用来处理Html，JavaScript以及Css的，我们当然可以直接在Html中完成我们所有的功能，这对于像Hell
2016-01-31 18:00:42
1068
转载 跟风 Webpack
之所以学习它是因为最近又长草于React,发现在GitHub上的许多项目都提到了它.我现在对它只是一知半解,本着保持饥饿的学习态度.我们开始拔草吧. 由于英文水平有限,我习惯于先搜一下中文资料对它有个大概的了解. 我找到了这篇文章一小时包教会,嗯.我喜欢这个标题.一. 初始并安装新建一个工程来开始我的练习,在工作空间下新建一个webpack-baby_steps文件夹,并初使化这个工程.npm
2016-01-29 14:29:01
692
原创 一步一步学习Angular2(04.示例 Multiple Components)
接着上一篇文章,今天跟随官网上的例子学习怎样把我们的应用分成多个组件. 首先启动我们上一章的应用npm start
2016-01-26 16:12:03
1040
原创 一步一步学习Angular2(03.示例 MASTER/DETAIL)
接着上一篇文章,今天跟随官网上的例子学习怎样增加一个英雄列表,并为它增加漂亮的样式.启动我们的应用 打工上一章的工程文件夹angular2-tour-of-heroes执行npm start英雄列表现在我们要增加许多英雄到我们的应用中,所以我们需要定义一组英雄. 打开app.component.ts在其中加入下面的代码.var HEROES: Hero[] = [ { id: 1, na
2016-01-07 12:00:42
1582
原创 一步一步学习Angular2(02.示例 Hero Editor)
今天学习跟随官网学习我的下一个Angular2示例. 工程的目录结构与快速入门中的示例完全相同,所以我们复制上一个示例并改名为 angular2-tour-of-heroes, 让我们先把这个应用跑起来.npm start启动应用并监视应用的所有改变.展示Hero首先我们看一下这个例子的最终效果. 从上到下分别是我们的应用名字,一个显示英雄名字的标题, 下面是这个英雄的详细信息.第一步我们只
2016-01-06 11:23:59
1922
原创 一步一步学习Angular2(01.快速入门)
今天跟随官网中的快速入门，开始我的第一个Angular2程序.目录结构是这样的angular2-quickstart|__app| |__app.component.ts| |__boot.ts|__index.html|__license.md因为是入门示例里我不需要过多的了解其中的细节。只要跟随它的步骤跑通这个例子即可。 1. 配置运行环境。 2. 用TypeScript写
2016-01-05 15:03:17
2868
2
原创 一步一步学习Angular2(00.学习环境)
新的一年的第一个工作日,开篇学习当下最火的AngularJS吧. 我以前没有接触过Angular1,不知道会不会很难入门.首先语言还是使用TypeScript,正好巩固加深一下.当然也可以用JS直接编写.想了解ts的可以看我之前的博客啊.开发工具使用VS code. (小而强大).后台基于Node.js
2016-01-04 09:34:19
673
原创 一步一步学习TypeScript(19.Modules_模块)
学习自:http://www.typescriptlang.org/Handbook#modules 首先定义一个文本格式检查器,可以查看输入的内容是否为字母或者数字不使用模块Validators.tsinterface StringValidator{ isAcceptable(s:string):boolean;}class ZipCodeValidator i
2015-12-24 17:26:43
4495
原创 一步一步学习TypeScript(18.Interfaces_接口)
Interfaces严格的类型检查是TypeScript的一个核心原则，而接口正是对它这一原则的体现，接口的功能是为类型命名，或约束实现了同一个接口的不同实现类外型的一致。使用接口描述属性function readBook(book: {name:string}){ console.log(book.name);}//当在外部声明时可以附加其它属性let book = {name:'type
2015-12-22 17:19:03
1113
原创 一步一步学习TypeScript(17.Getters&Setters)
typescript支持使用get和set在访问这个变量时对其进行拦截.这使你可以更细利度的控制你的程序. 只有当口令正确的用户才可以修改用户名:var passcode = "secret passcode";class Employee { private _fullName: string; public get fullName(): string { ret
2015-12-21 17:24:22
1519
原创 一步一步学习TypeScript(16.Private&Protected&static)
private使用private标识的成员变量,不允许在本类之外的地方使用.class Auto{ private engine: string; constructor(engine:string){ this.engine = engine; }}var engine = new Auto('').engine; //错误之前我们说过当两个类有相同的属性和
2015-12-21 15:41:30
1706
2
原创 一步一步学习TypeScript(15.Abstract Classes_抽象类)
面向对象的主要特点是 1. 封装 2. 继承 3. 抽象 4. 多态在class之前加上abstract关键字表名这个类是一个抽象类, 在方法前加上abstract表名这个方法是抽象方法,抽象方法只需要写出方法的定义,由实现类完成它的具体细节. 现在完善一下上一节的例子:abstract class Auto{ engine: string; constructor(engi
2015-12-21 13:58:56
3170
原创 一步一步学习TypeScript(14.Classes & inheritance_类与继承)
有过面向对象开发的同学应该对类,继承,接口的概念不会陌生,现在我们同样可以在TypeScript中使用这些概念,来清晰我们的代码结构.classes使用class关键字定义一个类, constructor定义这个类的构造函数. 使用this为成员变量赋值.例如我们定义一个汽车类:class Auto{ engine: string; constructor(engine:string)
2015-12-21 11:43:46
2209
原创 一步一步学习TypeScript(13.Tuples_元组)
tuple (元组)我理解元组是一个strict array(严格的数组),因为他不只声明了一个数组,并且同时还规定数组中每个索引处的元素类型.回顾一下,如何声明一个数组var arr = [1,2,3,'a','b','c']; //类型为 Array<string|number>arr[0] = 'abc'; //可以改变指定下标处的值的类型,只要为string或number之一即可如果需要这
2015-12-21 10:25:04
2750
原创 一步一步学习TypeScript(12.Union Types_联合类型)
union types (联合类型)考虑如下情况,如果一个变量在声明时可以有几个不同的类型,需要跟据运行时所传入的参数不同而改变相应类型,这种情况在typescript里应该怎么写.先看一下怎么使用union typevar command:string|string[];command = 'strat'; //正确, stringcommand = ['strat', 'stop']; //
2015-12-18 11:30:50
1775
原创 一步一步学习TypeScript(11.Arrow Functions_箭头函数➹)
单拿出这一节详细说一下箭头函数(也就是lambda表达式)在TypeScript中的用法. lambda表达式(()=>{something}或()=>something)相当于js中的函数,它的好处是可以自动将函数中的this附加到上下文中.具体原理下面会讲到. (在其它js的函数库中基本都有绑定this到上下文的方法,如jQuery中的 proxy函数.) 例如:function Arrow
2015-12-15 10:54:38
7426
原创 一步一步学习TypeScript(10.Functions_函数)
函数(function)分为署名函数(named function)和匿名函数(anonymous function)看代码// named function function sub(x,y){ console.log(x-y);} // anonymous functionvar sub1 = function(x,y){ conso
2015-12-11 12:00:52
2383
原创 一步一步学习TypeScript(09.enums_枚举)
之前在,一步一步学习TypeScript(02.基本类型)这篇中,初步学习了enum类型.这篇是对enum类型的一些补充. 看一些例子:Enumsenum Color { Red, Green, Blue}var colorValue = Color.Red;colorValue = "2"; //错误, enum 值为number类型,并且是从0开始
2015-12-10 16:59:55
1142
原创 一步一步学习TypeScript(08.隐式/显示类型转换)
implicit/explicit cast (隐式/显示类型转换)TypeScript中可以显示表明对象的类型 .转换一个类型到其它类型时可以使用<>符号, 如 <T>value .any类型可以转换成任意对象类型,反之亦然 .看下面代码说明class A{ run(){ console.log('run run run'); } jump(){
2015-12-10 11:27:18
10028
1
原创 一步一步学习TypeScript(07.Any类型)
学习前先看一下 04章(严格的对象赋值检查),与之相对的只要为元素指定了any类型,则可以对其任意赋值:// 代码回顾var x: { foo: number };x = { foo: 3 }x = { foo: 1, baz: 2 }; // 错误, 初始化时没有指名有`baz`属性.//或var y = { foo: 3 } // 隐含的类型指定 等价于var y:{foo
2015-12-09 16:42:17
3932
原创 一步一步学习TypeScript(06.数组)
在ts里声明数组有如下两种方式://第一种方式在元素类型后面紧跟一个中括号[]var a: number[] = [1,2,3]; console.log(a.length);//第二种方式使用泛型 Array<T>var b: Array<string> = ['i','o','u'];console.log(b[1]);//声明一个空数组let c : number[] = [];
2015-12-09 14:16:41
2294
原创 一步一步学习TypeScript(05.Duck Typing)
关于Duck Typing在维基上的说明 使用ts的实现class Duck{ quack(){ console.log('呱呱呱'); } feathers(){ console.log('是一个有灰色的羽毛的鸭子'); }}class Person{ quack(){ console.log('这个人在模仿
2015-12-09 11:47:50
1012
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人