Introduction flux应用架构如下图所示,本文并不是讲述怎么立即做一个酷炫的应用,而是讲述如何依照这种框架,来进行代码的组织. 我们先把这个流程转述为文字:抛开与webAPI的交互不谈,以后的文章再介绍. flux应用的数据流是单向的,从我们之前最熟悉的React组件看起,它们构成了上图中的React Views.用户交互可以使得Action Creators创建Action,交由Dispatcher分发.根据已注册的Store信息,Dispathcer管理依赖,完成分发,而Stor…

Introduction 本文组成: React 官方文档翻译 相关实践心得. 内容上是Flux的介绍,例子将会在以后写出. 一旦稍微多了解一点React,很难避免听到Flux这个名词. Flux是一个Facebook团队的前端开发架构.借助单向数据流等其它机制,使得React可以发挥了更加强大的功能.比起其它的框架,Flux更像是一种模式,我们可以投入较少的学习成本,快速上手Flux. Flux应用有三个主要的组成部分:调度者(dispatcher), 仓库(stores),视图(view).…

Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的javascript类库. 一个很大的卖点是virtual DOM机制,在DOM操作的性能上有较大的优势. React社区常常介绍它为MVC架构中的"V",虽说如此,如果将React与Flux(以后将会介绍)结合,我们就可以轻松实现M与V的同步. 在本文中,将会用到博主前两天介绍的webp…

Introduction 本文主要参考了react router 的官方文档. React Router是一套完整的配合React的路由解决方案,可能你已经知道前端路由,或者知道后端有路由的概念,如下图: React Router可以帮助我们将URL与组件状态同步,实现路由. Router Overview 我们先来看看,不使用React Router的话,动态图中的功能要如何实现: var React = require('react'); var About = React.createCl…

Flux demo Introduction flux应用架构如下图所示,本文并不是讲述怎么立即做一个酷炫的应用,而是讲述如何依照这种框架,来进行代码的组织.我们先把这个流程转述为文字:抛开与webAPI的交互不谈,以后的文章再介绍.flux应用的数据流是单向的,从我们之前最熟悉的React组件看起,它们构成了上图中的React Views.用户交互可以使得Action Creators创建Action,交由Dispatcher分发.根据已注册的Store信息,Dispathcer管理依赖,完成…

Ionic3首次项目实践记录 标签(空格分隔): Angular Ionic Ionic3踩坑 1. 路由懒加载(lazy load) 如果设置了懒加载,就必须全部懒加载(包括TabsPage),否则会出现路由跳转后tabs消失的情况. 2. 通过ts来返回tabs的首页: 注意必须通过this.app.getRootNav().setRoot('tabs');,不能到home,否则,tabs会消失. 参见stackoverflow | Issues import { App } from "i…

React实践(一)   该实践取自官方教程:https://github.com/reactjs/react-tutorial 主要是自实现的过程以及一些心得体会 该实践是实现一个评论框. 一个展示所有评论的视图 一个提交评论的表单 与后台的接口hook 特点: 评论提交之前就先显示在列表中,提高体验 其他用户的评论实时更新 可用markdown格式编写文本 开始 下面就是我们的index.html模板文件,看官copy过去吧.之后的所有代码都写在script里面 1 <!-- index.h…

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! React 实践项目 (一)本次实践代码 部署好的网址 上回说到用React写了一个带Header的首页,我们这次实践就使用Redux进行状态管理 Rudex 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中.惟一改变 state 的办法是触发 action,一个描述发生什么的对象.为了描述 a…

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行状态管理,这次我们使用Redux-saga 管理 Redux 应用异步操作 React 实践项目 (一)React 实践项目 (二)React 实践项目 (三) - 首先我们来看看登陆的 Reducer export const auth = (state = initialState, actio…

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! React 实践项目 (一)React 实践项目 (二)React 实践项目 (三)React 实践项目 (四)React 实践项目 (五) 这次我们把应用部署到服务器上. 项目到现在麻雀虽小五脏俱全,为了提高我们写代码的积极性,自然是选择部署到服务器上在小伙伴面前秀一波了.部署 React 应用也是非常方便简单的. 打包应…

在前面的文章中(Spring Boot 2 实践记录之 Powermock 和 SpringBootTest)提到了使用 Powermock 结合 SpringBootTest.WebMvcTest 来 Mock Service.Controller 中的 静态类和静态方法. 但此法有两个弊端,一是这样的单元测试运行速度慢,二是时不时会出现测试运行停顿的情况. 一个可选的方案就是将这些用在 Service.Controller 中的静态类和静态方法的引用,封装在普通 Bean 中,Service…

在 Spring Boot 2 实践记录之 条件装配 一文中,曾经使用 Condition 类的 ConditionContext 参数获取了配置文件中的配置属性.但那是因为 Spring 提供了将上下文对象传递给 matches 方法的能力. 对于其它的类,想要获取配置属性,可以建立一个配置类,使用 ConfigurationProperties 注解,将配置属性匹配到该类的属性上.(当然,也可以使用不使用 ConfigurationProperties 注解,而使用 @Value注解) 如果…

按笔者 Spring Boot 2 实践记录之 MySQL + MyBatis 配置 中的方式,如果想正确运行,需要在 Mapper 类上添加 @Mapper 注解. 但是加入此注解之后,启动时会出现如下警告: Skipping MapperFactoryBean with name 'xxxMapper' and 'tk.mybatis.xxx.mapper.xxxMapper' mapperInterface. Bean already defined with the same name!…

前面一篇已经安装好了ETCD.docker与flannel(k8s1.4.3安装实践记录(1)),现在可以开始安装k8s了 1.K8S 目前centos yum上的kubernetes还是1.2.0,因此我们只能是使用下载的安装包,进行kubernetes的安装 [root@bogon system]# yum list |grep kubernetes cockpit-kubernetes.x86_64 .el7.centos extras kubernetes.x86_64 -0.13.gi…

前言 刚开始接触ElasticSearch的时候,版本才是2.3.4,短短的时间,现在都更新到5.0+版本了.分词和head插件好像用法也不一样了,本博客记录如何配置Elasticsearch的Head插件和使用ik分词并进行热更新. 实践记录 首先安装ES5.3.2版本,之前安装了5.4版本,奈何分词版本只更新到5.3.2,于是又换回了5.3.2的版本,不过没关系.ik分词也会更新.由于Head插件不和以前的用法一样,所以,这里记录一下如何在5.0版本以后使用Head插件. 可参考文章 htt…

1.已知json串构成的情况下判断 先构造一下场景,假设已经把各个数据都移除掉不对比的字段 图1 预期.实际结果,复杂接口返回多层嵌套json时,同下 图2 预期.实际结果值为:{child_json1:list1,child_json2:list2} 其中list1.list2为child_json,值为:[dict1,dict2] 其中dict1.dict2为child_child_json,最底层json,无嵌套,值为:{key1:value1,key2:value2} 如果一开始就直接判…

上一篇写了如何从DB获取预期.实际结果,这一篇分别对不同情况说下怎么进行对比. PS:这部分在JSON对比中也适用. 1.结果只有一张表,只有一条数据 数据格式:因为返回的是dicts_list的格式,因此一条数据时,格式为[dict],可以通过list[0]的方式取到dict,也可以for循环遍历list取dict. 预期结果:id_预期 + 录入的数据 + 代码自动生成的:如createtime 实际结果:id_实际 + 录入的数据 + 代码自动生成的:如createtime 很显然,录入的…

上一篇实现数据分离升级版--从DB获取数据,以及对应的请求实现,作为一个case,还缺少了预期结果与实际结果的获取及对比.因为前面的文章已经说过接口返回值的获取及对比,所以这篇不说这块了,这篇说一下DB存储部分的获取. 上一篇有提过如何从服务器获取mysql二进制日志获取操作涉及到哪些DB变化.我们手工新增后,可以看到对应的数据库结果,其中主要分三块:①手工输入的内容:②数据库自己生成的内容,如自动生成的递增id:③被测代码生成的内容,如uuid.版本信息.其中①的部分是我们主要要校验的,②.③…

开始做实际项目前,先拿个网上的简单API练下手 一.API说明: 接口信息 接口名:京东获取单个商品价格 地址:http://p.3.cn/prices/mgets 入参:skuids=J_商品ID&type=1 接口返回:[{"cbf":"","id":"","m":"","op":"","p":""…

1.接口测试简介 1)先简单介绍下接口测试,那么什么是接口测试呢? 百科的回答:接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点. 看起来有点拗口,我们试着用通俗一点的方式说明下,把系统比作一家公司,那么使用系统的好比是个人或者其他公司. 对外接口(我们常说的接口测试指的是对外接口): 那么使用方想要找公司办事情的时候,通过邮箱.电话.聊天工具之类的,通过公司对外提供的渠道,如应聘找HR,有问题找客服,商务合作找销售,而不能直接找到公司…

因为人力.团队技术问题,选用robotframework来做自动化,首先说下环境搭建 齐涛道长的入门教程非常棒:http://blog.csdn.net/tulituqi/article/details/7583179 ---------------------------------开始安装依赖的语言---------------------------------- 1.首先安装python,robotframework框架是python编写的,因此必须要装,安装时勾选添加到系统变量 pyt…

[MySQL实践] 实践记录 版权2019.5.17更新 MySQL MySQL各版本区别 一.选择的版本 1. MySQL Community Server 社区版本,开源免费,但不提供官方技术支持. 2. MySQL Enterprise Edition 企业版本,需付费,可以试用30天. 3. MySQL Cluster 集群版,开源免费.可将几个MySQL Server封装成一个Server. 4. MySQL Cluster CGE 高级集群版,需付费. 5. MySQL Workbe…

[vsCode实践] 实践记录 版权2019.5.1更新 Q1:代码中涉及到操作本地文件时,相对路径总是不对 操作本地文件时,路径方式有两种 相对路径 例如:代码文件所在路径/Users/tp0829/Code_Python/myAlarmScript.py 则代码中要操作文件的相对路径music/CarryYou.wav所对应的绝对路径为:/Users/tp0829/Code_Python/music/CarryYou.wav 绝对路径 以macOS为例:绝对路径/Users/tp0829/C…

[gitHub实践] 实践记录 版权2019.4.19更新 Q1:本地仓库和远程仓库连接提示输入用户名密码 本地仓库和远程仓库连接有两种方式 本地初始化建立一个仓库,远程也建立了一个仓库 本地建立仓库git init gitHub上建立仓库 本地仓库关联远程仓库git remote add origin git@github.com:用户名/项目名.git 或git remote set-url origin git@github.com:用户名/项目名.git 注:这样关联在我们git pul…

1.概览 uFrame是提供给Unity3D开发者使用的一个框架插件,它本身模仿了MVVM这种架构模式(事实上并不包含Model部分,且多出了Controller部分).因为用于Unity3D,所以它向开发者提供了一套基于Editor的可视化编辑工具,可以用来管理代码结构等.本文为uFrame1.6版本在项目中实践的记录,主要包括一些uFrame中的基本概念以及应用的流程. 2.新建uFrame工程 本小节主要内容包括: 在uFrame新建工程 在uFrame的可视化编辑器中打开工程仓库 在uF…

最近学习了阮一峰老师的博文 "Flux入门教程",博文中详细介绍了Flux框架和Controller view模式,并提供了Demo,受益匪浅. 现特参考阮老师的Demo,绘制了一下Flux执行的序列图,以加深对框架的理解.…

该实践取自官方教程:https://github.com/reactjs/react-tutorial 主要是自实现的过程以及一些心得体会 该实践是实现一个评论框. 一个展示所有评论的视图 一个提交评论的表单 与后台的接口hook 特点: 评论提交之前就先显示在列表中,提高体验 其他用户的评论实时更新 可用markdown格式编写文本 开始 下面就是我们的index.html模板文件,看官copy过去吧.之后的所有代码都写在script里面 <!-- index.html --> <ht…

JSTL.EL是页面渲染比较常用的基础的技术.然而,因完成的项目大多是通过JSON或XML返回页面,然后Javascript渲染. 所以,JSTL.EL的使用语法,到现在也很不熟练,不可信手拈来. 借最近做页面的权限展现,用到他们,记录一些简单的实践. 所有数据在Servlet中设置(为了模拟实际情况),而非页面设置. package com.nicchagil.study.jstl; import java.io.IOException; import java.util.ArrayList;…

托webpack的福,我终于可以开始写React了.==ORZ 我感觉我接近webpack工程师更进一步了哈哈哈. 以下所有内容均来自小红书,仅是我的个人记录,如想系统学习,请移步:React小书 : http://huziketang.com/books/react/lesson1 超级推荐+收藏文档:React小书 : http://huziketang.com/books/react/lesson1 参考文档: 1.React官网 2.react组件生命周期 特别注意(不定时更新,越往上越…

半路出家直接上手React,其实有点吃力,所以开始研究create-react-app,从这里下手吧. create-react-app 官方网站:https://github.com/facebookincubator/create-react-app 然后下面有教程,但是js水平还停留在只会用用jquery的我,完全看不懂这是个什么鬼,什么是npm?. 所以呢,我有抽空看了一下node.js的基础,算是扫扫盲. 这里是菜鸟教程:http://www.runoob.com/nodejs/nod…