986499bec9e5
986499bec9e5

React.js的Rails开发者指南

React.js的Rails开发者指南

原作者：Fernando Villalobos

原文链接：https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers

译者：Sail Lee

目录

  • React.js简介
  • 一个模拟的费用跟踪应用
  • 在Rails项目中初始化React.js
  • 创建Resource
  • 嵌套式组件：记录列表
  • 父子组件间通信：创建记录
  • 可重用组件：合计指标
  • setState/replaceState：删除记录
  • 重构：State Helpers
  • 响应式数据流：编辑记录
  • 结尾的思考：React.js，简洁又灵活

React.js简介

React.js是一个近似“JavaScript框架”的流行类库，因其简洁而出众。相对于其他完整实现了MVC结构的框架，我们说React仅实现了V（其实有些人用React来代替它们框架的V部分）。React应用程序通过两个主要原则来构造：Components和States。Components可以用其他更小的组件来构成，内置或定制；State驱动了Facebook称之为单向响应式数据流的东西，这意味着我们的UI将会对每次状态的改变作出反应。

React的一个优点之一就是它无需任何额外的依赖，这让它几乎能和任何其他的JS库插接到一起。利用这个特征，我们将其囊括到我们Rails的技术栈中，来构建一个前端强大的应用，也许你会说它是个Rails视图层的兴奋剂。

一个模拟的费用跟踪应用

在本指南中，我们正要从零做起，构建一个记录日常花费的小应用。每个记录将包括一个日期、标题和金额。假如一个记录的金额大于零，它将被认为是贷方（译者注：会计术语），相反则计入借方（译者注：会计术语）。这是项目的模型：


项目的模型

总结下，该应用表现如下：

  • 当用户通过横向的表单创建一个新记录时，它将被添加到记录表格中去。
  • 用户可以对任何存在的记录进行行内编辑。
  • 点击任何删除按钮会把相关的记录从表格中删除。
  • 增加、编辑或移除一个存在的记录都将更新位于页面顶部的各项合计项。

在Rails项目中初始化React.js

首先，我们要开始一个全新的Rails项目，我们叫它Accounts：

rails new accounts

我们将使用Twitter的Bootstrap做此项目的UI。安装流程非本文讨论范围，你可以根据官方github仓库的指引来安装bootstrap-sass官方gem。

一旦项目初始化后，我们接下来要把React包含进来。本文中，因为我们打算利用react-rails这个官方gem里面的一些很酷的功能，所以要将其包含进项目。其实也有其他方法来完成这项任务，如使用Rails assets、甚至从官方页面下载源码包并把它们复制到项目的javascripts目录。

如果你曾经开发过Rails应用，你会知道安装一个gem有多容易：把react-rails添加到你的Gemfile文件中去。

gem 'react-rails', '~> 1.0'

然后，(友好地)让Rails来安装新的gem包：

bundle install

react-rails带有一个脚本，会在我们存放React组件的app/assets/javascripts目录下创建components.js文件和components目录。

rails g react:install

在跑完安装之后，如果你看看application.js文件中会发现以下三行：

//= require react
//= require react_ujs
//= require components

基本上，它包含了实际上的react库、components组件清单文件和一种以ujs结尾的常见文件。由文件名你可以已经猜到，react-rails包含了一种帮助我们载入React组件并且同时也处理Turbolinks事件的非入侵式JavaScript驱动。

创建Resource

我们将要构建一个包含date、title和amount字段的Record资源（resource）。我们要用resource生成器（generator）来代替scaffold，这样我们就不会用到由scaffold创建的所有文件和方法。另一个选择是先运行scaffold生成器，接着删除无用的文件或方法，但是这样会另我们的项目有点乱。进入项目目录后，运行以下命令：

rails g resource Record title date:date amount:float

运行完后，我们最后将得到一个新的Record model、controller和routes。我们现在只需要创建我们的数据库并运行之后的数据迁移。

rake db:create db:migrate

作为附加，你可以通过rails console创建两个记录：

Record.create title: 'Record 1', date: Date.today, amount: 500
Record.create title: 'Record 2', date: Date.today, amount: -100

别忘了用rails s来启动你的服务器。
好了！我们要准备写点代码了。

嵌套式组件：记录列表

我们的第一个任务需要在一个表格中展示任何已有的记录。首先，我们需要在RecordController里面创建一个index动作（action）。

  # app/controllers/records_controller.rb

  class RecordsController < ApplicationController
    def index
      @records = Record.all
    end
  end

接着，我们要在app/views/records/目录下创建一个新文件index.html.erb，该文件在我们的Rails应用和React组件之间扮演着桥梁的作用。要完成该任务，我们将使用helper方法react_component，通过它来获取我们要展示的React组件的名称连同我们要传递给它的数据。

  <%# app/views/records/index.html.erb %>

  <%= react_component 'Records', { data: @records } %>

需要指出的是，该helper是由react-railsgem包提供的，假如你决定使用其他的集成React的方法，就不能用到这个helper。

你现在能到localhost:3000/records这个路径看看了。显然，因为Records这个React组件的缺失，这还未能工作。但是，如果我们看看浏览器中的HTML源文件，我们就能发现类似以下的代码：

有了这个标记，react_ujs就会检测到我们尝试展示一个React组件并实例化它，包括我们通过react_component发送的属性，在本案例中，就是@records的内容。

构建我们第一个React组件的时间到了，进入javascripts/components目录，创建一个叫records.js.coffee的新文件来放置我们的Records组件。

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    render: ->
      React.DOM.div
        className: 'records'
        React.DOM.h2
          className: 'title'
          'Records'

每个组件都需要一个render方法，它将负责渲染组件本身。render方法会返回一个ReactComponent的实例，这样，当React执行重新渲染时，它将以最优的方式进行（当React检测新节点存在时，会在内存中构建一个虚拟的DOM）。在上面代码中，我们创建了一个h2实例，内置于ReactComponent中。

注意：实例化ReactComponent的另一个方法是在render方法中使用JSX语法，以下代码段与前段代码作用相同：

  render: ->
    `

      
 Records 

    
`

对我个人而言，当我使用CoffeeScript时，我更喜欢使用React.DOM语法而不是JSX，因为代码可以排列成一个层次结构，类似于HAML。但是，如果你正尝试集成React到一个用erb文件建立的现有应用中，你可以选择重用现有erb代码并将其转换成JSX。

你现在可以刷新浏览器了。

records_1

好极了！我们已经画出第一个React组件了。现在，是时候显示我们的记录了。

除了render方法以外，React组件还依靠properties的使用来和其他组件沟通，并且用states来检测是否需要进行重新渲染。我们需要用期望的值来初始化我们的组件状态和属性值：

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    getInitialState: ->
      records: @props.data
    getDefaultProps: ->
      records: []
    render: ->
      ...

getDefaultProps方法将初始化我们组件的属性，以防在初始化时我们忘了发送任何数据。而getInitialState方法则会生成我们组件的初始状态。现在我们还要显示由Rails提供的记录。

看起来我们还需要一个格式化amount字符串的helper方法，我们可以实现一个简单的字符串格式化工具并使其能让所有其他的coffee文件访问。用下列内容，在javascripts/目录下创建一个新的utils.js.coffee文件：

  # app/assets/javascripts/utils.js.coffee

  @amountFormat = (amount) ->
    '$ ' + Number(amount).toLocaleString()

我们需要创建一个新的Record组件来显示每个单独的记录，在javascripts/components目录下创建一个record.js.coffee的新文件，并插入以下内容：

  # app/assets/javascripts/components/record.js.coffee

  @Record = React.createClass
    render: ->
      React.DOM.tr null,
        React.DOM.td null, @props.record.date
        React.DOM.td null, @props.record.title
        React.DOM.td null, amountFormat(@props.record.amount)

Record组件将显示一个包含记录各个属性值单元格的表格行。不用担心那些在React.DOM.*调用中的那些null，那意味着我们不用传送属性值给组件。现在用以下代码更新下Record组件中的render方法：

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    ...
    render: ->
      React.DOM.div
        className: 'records'
        React.DOM.h2
          className: 'title'
          'Records'
        React.DOM.table
          className: 'table table-bordered'
          React.DOM.thead null,
            React.DOM.tr null,
              React.DOM.th null, 'Date'
              React.DOM.th null, 'Title'
              React.DOM.th null, 'Amount'
          React.DOM.tbody null,
            for record in @state.records
              React.createElement Record, key: record.id, record: record

你是否看到刚刚发生了什么？我们创建了一个带标题行的表格，并且在表格体内为每个已有的记录创建了一个Record元素。换句话说，我们正嵌套了内置或定制的React组件。相当酷，是不？

当我们处理动态子组件（本案例中为记录）时，我们需要提供一个key属性来动态生成的元素，这样React就不会很难刷新UI，这就是为何我们要在创建Record元素时随同实际的记录一起发送key: record.id。如果不是这样做，我们将会在浏览器的JS控制台收到一条警告信息（并且在不远的将来产生一些头痛的问题）。

records_2

你可以到这里去看看本章的结果代码，或者仅仅到这里看看由本章引入的改变。

父子组件间通信：创建记录

现在我们显示了所有的已有记录，最好能包含一个用于创建记录的表单，让我们增加一个新功能给我们的React/Rails应用。

首先，我们吸引加入一个create方法到Rails控制器（不要忘了使用_strongparams)：

  # app/controllers/records_controller.rb

  class RecordsController < ApplicationController
    ...

    def create
      @record = Record.new(record_params)

      if @record.save
        render json: @record
      else
        render json: @record.errors, status: :unprocessable_entity
      end
    end

    private

      def record_params
        params.require(:record).permit(:title, :amount, :date)
      end
  end

接着，我们需要构建一个用于处理创建新记录的React组件。该组件将拥有自己的state来存放date、title和amount。用下列代码，在目录javascripts/components下创建一个record_form.js.coffee的新文件：

  # app/assets/javascripts/components/record_form.js.coffee

  @RecordForm = React.createClass
    getInitialState: ->
      title: ''
      date: ''
      amount: ''
    render: ->
      React.DOM.form
        className: 'form-inline'
        React.DOM.div
          className: 'form-group'
          React.DOM.input
            type: 'text'
            className: 'form-control'
            placeholder: 'Date'
            name: 'date'
            value: @state.date
            onChange: @handleChange
        React.DOM.div
          className: 'form-group'
          React.DOM.input
            type: 'text'
            className: 'form-control'
            placeholder: 'Title'
            name: 'title'
            value: @state.title
            onChange: @handleChange
        React.DOM.div
          className: 'form-group'
          React.DOM.input
            type: 'number'
            className: 'form-control'
            placeholder: 'Amount'
            name: 'amount'
            value: @state.amount
            onChange: @handleChange
        React.DOM.button
          type: 'submit'
          className: 'btn btn-primary'
          disabled: !@valid()
          'Create record'

不是太花俏，仅仅是个平常的Bootstrap内嵌表单。注意，我们定义了value属性来设置输入的值，并且定义了onChange属性来绑定一个处理器方法，它将会在每次按键时都会被调用。handleChange处理器方法将用name属性来检测那一次输入触发了事件并更新相关的state值：

  # app/assets/javascripts/components/record_form.js.coffee

  @RecordForm = React.createClass
    ...
    handleChange: (e) ->
      name = e.target.name
      @setState "#{ name }": e.target.value
    ...

我们刚用了字符串插值来动态地定义对象的键值，当name等于title时，与@setState title: e.target.value等值。但为何我们必须使用@setState？为什么我们不能象对待普通的JS对象一样，仅对@state设置期望的值呢？因为@setState会产生两个动作：

  1. 更新组件的state
  2. 基于新状态，安排一个UI的验证或刷新

当我们每次在我们的组件中使用state时，掌握这个知识是非常重要的。

让我们看看submit按钮，就在render方法最后的地方：

  # app/assets/javascripts/components/record_form.js.coffee

  @RecordForm = React.createClass
    ...
    render: ->
      ...
      React.DOM.form
        ...
        React.DOM.button
          type: 'submit'
          className: 'btn btn-primary'
          disabled: !@valid()
          'Create record'

我们用!@valid()定义了一个disabled属性，这意味着我们将要实现一个valid方法来判断由用户提供的数据是否是正确的。

  # app/assets/javascripts/components/record_form.js.coffee

  @RecordForm = React.createClass
    ...
    valid: ->
      @state.title && @state.date && @state.amount
    ...

为了简化，我们仅仅校验@state属性是否为空。这样，每次状态更新后，Create record按钮都根据数据的有效性来决定可用或不可用。

creating_record_1

creating_record_2

现在控制器和表单都已就位，是时候提交新记录给服务器了。我们需要处理表单的submit事件。要完成这项任务，我们需要给表单添加一个onSubmit属性和一个新的handleSubmit方法（如同之前我们处理onChange事件一样）：

  # app/assets/javascripts/components/record_form.js.coffee

  @RecordForm = React.createClass
    ...
    handleSubmit: (e) ->
      e.preventDefault()
      $.post '', { record: @state }, (data) =>
        @props.handleNewRecord data
        @setState @getInitialState()
      , 'JSON'

    render: ->
      React.DOM.form
        className: 'form-inline'
        onSubmit: @handleSubmit
      ...

让我们逐行检阅下这个新方法：

  1. 阻止表单的HTTP提交
  2. POST新的record信息到当前URL
  3. 提交成功后执行回调函数

success回调函数是这个过程的关键，在成功地创建新记录后，关于这个动作和state恢复到初始值的信息会被通报。还记得之前我曾提到的组件通过属性（或@props)与其他组件进行沟通吗？对，就是它。当前我们这个组件就是通过@props.handleNewRecord发回数据给父组件，来通知它存在一个新记录。

也许你已经猜到，无论在哪里创建RecordForm元素，我们要传递一个handleNewRecord属性，并用一个方法引用到它，就像React.createElement RecordForm, handleNewRecord: @addRecord。好，父组件Records就是这个“无论在哪里”，由于它拥有一个附带了所有现存记录的state，所有需要我们用新建记录来更新它的state。

在records.js.coffee中添加新的addRecord方法并创建这个新的RecordForm元素，就在h2标题之后（在render方法之中）。

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    ...
    addRecord: (record) ->
      records = @state.records.slice()
      records.push record
      @setState records: records
    render: ->
      React.DOM.div
        className: 'records'
        React.DOM.h2
          className: 'title'
          'Records'
        React.createElement RecordForm, handleNewRecord: @addRecord
        React.DOM.hr null
      ...

刷新浏览器，在表单中填入一个新记录，点击Create record按钮...这次没有悬念，记录几乎立即被添加，而且在提交后表单被清理了，刷新仅仅是为了确认新数据已经被存入了后端服务器。

creating_record_and_records

如果连同Rails一起，使用其他的JS框架（例如AngularJS）来构建类似的功能，你或许会遇到问题，因为你的POST请求不包括Rails所需的CSRFtoken。那么为什么我们没有遇到同样的问题？很简单，因为部门使用jQuery与后端交互，而且Rails的jquery_ujs非入侵式驱动器为我们每个AJAX请求都包含了CSRFtoken。酷！

你可以到这里去看看本章的结果代码，或者仅仅到这里看看由本章引入的改变。

可重用组件：合计指标

一个应用程序怎能没有一些漂亮的指标呢？让我们拿些有用的信息在窗口顶部添加一些指标框。我们的目的是为了在本章中显示三个值：贷方合计、借方合计和余额。这看起来像是三个组件，或仅仅是一个带属性组件的工作量？

我们能构建一个新的AmountBox组件，它获取三个属性：amount、text和type。在javascripts/components目录下创建一个叫做amount_box.js.coffee的文件，并粘贴以下代码：

  # app/assets/javascripts/components/amount_box.js.coffee

  @AmountBox = React.createClass
    render: ->
      React.DOM.div
        className: 'col-md-4'
        React.DOM.div
          className: "panel panel-#{ @props.type }"
          React.DOM.div
            className: 'panel-heading'
            @props.text
          React.DOM.div
            className: 'panel-body'
            amountFormat(@props.amount)

我们只用Bootstrap的panel元素以“块状”的方式来显示信息，并且通过type属性来设定颜色。我们也包含了一个叫做amountFormatter的相当简单的合计格式化方法，它读取amount属性并以货币格式来显示它.

为了有个完整的解决方案，我们需要在主组件中创建这个元素（三次），依赖我们要显示的数据，传送给所需的属性。让我们首先构建计算器方法，打开Records组件并添加以下代码：

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    ...
    credits: ->
      credits = @state.records.filter (val) -> val.amount >= 0
      credits.reduce ((prev, curr) ->
        prev + parseFloat(curr.amount)
      ), 0
    debits: ->
      debits = @state.records.filter (val) -> val.amount < 0
      debits.reduce ((prev, curr) ->
        prev + parseFloat(curr.amount)
      ), 0
    balance: ->
      @debits() + @credits()
    ...

credits合计所有金额大于0的记录，debits合计所有金额小于0的记录，而余额就无需多解释了。现在计算器方法已经就位了，我们仅需在render方法中创建AmountBox元素（就像上面的RecordForm组件一样）：

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    ...
    render: ->
      React.DOM.div
        className: 'records'
        React.DOM.h2
          className: 'title'
          'Records'
        React.DOM.div
          className: 'row'
          React.createElement AmountBox, type: 'success', amount: @credits(), text: 'Credit'
          React.createElement AmountBox, type: 'danger', amount: @debits(), text: 'Debit'
          React.createElement AmountBox, type: 'info', amount: @balance(), text: 'Balance'
        React.createElement RecordForm, handleNewRecord: @addRecord
    ...

我们已经完成这个功能了！刷新浏览器，你会看到三个框里面显示计算好的金额。但是！这还没完！创建个新记录看看有什么神奇的东西...

amount_indicators

你可以到这里去看看本章的结果代码，或者仅仅到这里看看由本章引入的改变。

setState/replaceState：删除记录

我们清单中的下一个功能是删除记录，我们需要在记录表格中增加一个新的Actions列，对于每个记录的该列中都会有一个Delete按钮，相当标准的UI。和之前的例子一样，我们要在Rails控制器中创建一个destroy方法：

  # app/controllers/records_controller.rb

  class RecordsController < ApplicationController
    ...

    def destroy
      @record = Record.find(params[:id])
      @record.destroy
      head :no_content
    end

    ...
  end

那就是我们为此功能所需的全部服务器端代码。现在，打开Records组件并在表头最右边的位置添加Actions列：

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    ...
    render: ->
      ...
      # almost at the bottom of the render method
      React.DOM.table
        React.DOM.thead null,
          React.DOM.tr null,
            React.DOM.th null, 'Date'
            React.DOM.th null, 'Title'
            React.DOM.th null, 'Amount'
            React.DOM.th null, 'Actions'
        React.DOM.tbody null,
          for record in @state.records
            React.createElement Record, key: record.id, record: record

最后，打开Record组件并用Delete链接添加一个额外的列：

  # app/assets/javascripts/components/record.js.coffee

  @Record = React.createClass
    render: ->
      React.DOM.tr null,
        React.DOM.td null, @props.record.date
        React.DOM.td null, @props.record.title
        React.DOM.td null, amountFormat(@props.record.amount)
        React.DOM.td null,
          React.DOM.a
            className: 'btn btn-danger'
            'Delete'

保存你的文件，刷新浏览器并...我们有的只是没有的按钮，还没把事件附上！

deleting_record_1

让我们添加一些功能给它。和我们从RecordForm组件里学到的一样，方法如下：

  1. 检测在子组件Record中的事件（onClick）
  2. 执行一个动作（在本案例中，发送一个DELETE请求到服务器）
  3. 针对该动作，通知父组件Records（通过props来发送或接收一个处理器方法）
  4. 更新Record组件的状态

要实现步骤1，我们可以为onClick添加一个处理器到Record，就像我们为onSubmit添加一个处理器到RecordForm来创建新记录一样。幸运的是，React以标准化方式实现了大多数常见浏览器事件，这样我们就无需担心跨浏览器的兼容性（你可以在这里查看到完整的事件清单）。

重新打开Record组件，添加一个新的handleDelete方法和一个onClick属性到“无用”的删除按钮，代码如下：

  # app/assets/javascripts/components/record.js.coffee

  @Record = React.createClass
    handleDelete: (e) ->
      e.preventDefault()
      # yeah... jQuery doesn't have a $.delete shortcut method
      $.ajax
        method: 'DELETE'
        url: "/records/#{ @props.record.id }"
        dataType: 'JSON'
        success: () =>
          @props.handleDeleteRecord @props.record
    render: ->
      React.DOM.tr null,
        React.DOM.td null, @props.record.date
        React.DOM.td null, @props.record.title
        React.DOM.td null, amountFormat(@props.record.amount)
        React.DOM.td null,
          React.DOM.a
            className: 'btn btn-danger'
            onClick: @handleDelete
            'Delete'

当删除按钮被点击时，handleDelete发送一个AJAX请求到服务器来删除后端的记录，之后，针对本次动作，它通过handleDeleteRecord处理器可用的props来通知父组件。这意味着我们需要在父组件中调整Record元素的创建来包含额外的属性handleDeleteRecord，而且还要在父组件中实现实际的处理器方法：

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    ...
    deleteRecord: (record) ->
      records = @state.records.slice()
      index = records.indexOf record
      records.splice index, 1
      @replaceState records: records
    render: ->
      ...
      # almost at the bottom of the render method
      React.DOM.table
        React.DOM.thead null,
          React.DOM.tr null,
            React.DOM.th null, 'Date'
            React.DOM.th null, 'Title'
            React.DOM.th null, 'Amount'
            React.DOM.th null, 'Actions'
        React.DOM.tbody null,
          for record in @state.records
            React.createElement Record, key: record.id, record: record, handleDeleteRecord: @deleteRecord

基本上，我们的deleteRecord方法拷贝了当前组建的recordsstate，执行了一个要被删除记录的索引查找，从该数组中拼接好并更新组件的state，相当标准的JavaScript操作。

我们介绍一个和state交互的新办法，replaceState。setState和replaceState的主要不同在于前者仅更新state对象的一个键值，而后者会用任何我们发送的新对象来完全覆盖组件的当前state。

在更新完上面那点代码后，刷新浏览器并尝试删除一个记录，会两个事情发生：

  1. 该记录会从表格中消失
  2. 指标的金额会立即更新，不需要额外的代码了
deleting_record_2

我们几乎完成整个应用程序了，但在实现最后一个功能之前，我们能实施一个小重构，并同时介绍一个新的React功能。

你可以到这里去看看本章的结果代码，或者仅仅到这里看看由本章引入的改变。

重构：State Helpers

现在为止，我们已经有两种方法让state作为我们的数据获取更新，没有任何困难，并不像你所说的那么“复杂”。但设想下一个带有多层次JSON state的更复杂的应用程序，你能自己想象下执行深度复制和变换你的state数据。React包含了一些花俏的state helpers来帮助你应对这个重担。无论你的state有多深，这些 helper 都会让你如同使用 MongoDB 的查询语言一样，更自由地操纵它（至少React的文档是这样说的）。

在使用这些helper之前，首先我们需要配置下我们的Rails应用程序来包含它们。打开你项目的config/application.rb文件并在Application代码块的尾部添加一行config.react.addons = ture：

  # config/application.rb

  ...
  module Accounts
    class Application < Rails::Application
      ...
      config.react.addons = true
    end
  end

为了另其生效，你要重启Rails服务器，你要重启Rails服务器，你要重启Rails服务器，重要的事情说三遍！现在我们可以通过React.addons.update来访问state helpers，它们会处理我们的 state 对象（或任何我们发送给它的对象），并且能使用提供的命令。我们将会使用的两个命令是$push和$splice（对这些命令，我借用官方React文档的解释）：

  • {$push: array}将array里的所有数据项push()到目标去
  • {$splice: array of arrays}对于在arrays中的每个数组项array，在目标数组中用数据项提供的参数调用splice()

我们打算用这些helper来简化Record组件的addRecord和deleteRecord，代码如下：

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    ...
    addRecord: (record) ->
      records = React.addons.update(@state.records, { $push: [record] })
      @setState records: records
    deleteRecord: (record) ->
      index = @state.records.indexOf record
      records = React.addons.update(@state.records, { $splice: [[index, 1]] })
      @replaceState records: records

同样的结果，更短更优雅的代码，现在你可以随便重载下浏览器并确认有没什么不妥。

你可以到这里去看看本章的结果代码，或者仅仅到这里看看由本章引入的改变。

响应式数据流：编辑记录

为了实现最后一个功能，我们现在添加一个额外的Edit按钮，放在我们记录表格中的每个Delete按钮的旁边。当这个Edit按钮被点击时，它将整个数据行从只读状态切换成可编辑状态，展示一个行内表单以便用户可以更新记录的内容。在提交被更新内容或取消该操作后，该记录行将会到它原来的只读状态。

正如你从上文描述中猜到的那样，我们需要处理可变（mutable）数据来切换在Record组件中每个记录的状态。这是一个React调用响应式数据流（reactive data flow）的用例。让我们添加一个edit标志和一个handleToggle方法到record.js.coffee：

  # app/assets/javascripts/components/record.js.coffee

  @Record = React.createClass
    getInitialState: ->
      edit: false
    handleToggle: (e) ->
      e.preventDefault()
      @setState edit: [email protected]
    ...

这个edit标志默认为false，而handleToggle将edit由false变为true，亦可反向操作，我们仅需要从一个用户onClick事件中触发handleToggle。

现在，我们需要处理两个行记录版本（只读和表单）并且有条件地根据edit标志来显示它们。幸运的是，只要render方法返回一个React元素，我们就可以在它里面随意执行任何操作。我们可以定义recordRow和recordForm两个helper方法，并在render里面，依赖于@state.edit的内容有条件地调用它们。

我们已经有了一个recordRow的初始化版本，就是我们现在的render方法。让我们把render的内容移到新的recordRow方法里并添加一些额外的代码给它：

  # app/assets/javascripts/components/record.js.coffee

  @Record = React.createClass
    ...
    recordRow: ->
      React.DOM.tr null,
        React.DOM.td null, @props.record.date
        React.DOM.td null, @props.record.title
        React.DOM.td null, amountFormat(@props.record.amount)
        React.DOM.td null,
          React.DOM.a
            className: 'btn btn-default'
            onClick: @handleToggle
            'Edit'
          React.DOM.a
            className: 'btn btn-danger'
            onClick: @handleDelete
            'Delete'
    ...

我们只加入了一个额外的React.DOM.a元素，用来监听到onClick事件后调用handleToggle。

接着，recordForm的实现采用类似结构，只是每个单元格用input来代替。我们打算为这些input用一个新的ref属性来使其变得可存取。和这个组件不出来state一样，这个新的属性会让我们的组件通过@refs读出由用户提供的数据。

  # app/assets/javascripts/components/record.js.coffee

  @Record = React.createClass
    ...
    recordForm: ->
      React.DOM.tr null,
        React.DOM.td null,
          React.DOM.input
            className: 'form-control'
            type: 'text'
            defaultValue: @props.record.date
            ref: 'date'
        React.DOM.td null,
          React.DOM.input
            className: 'form-control'
            type: 'text'
            defaultValue: @props.record.title
            ref: 'title'
        React.DOM.td null,
          React.DOM.input
            className: 'form-control'
            type: 'number'
            defaultValue: @props.record.amount
            ref: 'amount'
        React.DOM.td null,
          React.DOM.a
            className: 'btn btn-default'
            onClick: @handleEdit
            'Update'
          React.DOM.a
            className: 'btn btn-danger'
            onClick: @handleToggle
            'Cancel'
    ...

别害怕，这个方法看起来有点大，仅仅是因为我们用了类似HAML的语法。注意，当用户点击 Update 按钮时我们调用@handleEdit，我们打算使用与实现删除记录功能类似的流程。

你有否注意到这些React.DOM.input的创建有什么不同吗？我们使用defaultValue代替value来设置初始化 input 的值，这是因为：仅使用value而没有onChange会终止创建只读的 input。

最后，render方法浓缩成下列代码：

  # app/assets/javascripts/components/record.js.coffee

  @Record = React.createClass
    ...
    render: ->
      if @state.edit
        @recordForm()
      else
        @recordRow()

你可以刷新你的浏览器来看看新的切换效果，但不要提交任何改变，因为我们还没实现实际的 update 功能。

edit_record_1

edit_record_2

要处理记录的更新，我们需要添加update方法到我们的Rails控制器：

  # app/controllers/records_controller.rb

  class RecordsController < ApplicationController
    ...
    def update
      @record = Record.find(params[:id])
      if @record.update(record_params)
        render json: @record
      else
        render json: @record.errors, status: :unprocessable_entity
      end
    end
    ...
  end

回到我们的Record组件，我们需要实现handleEdit方法，它将会附带要更新的record信息发送一个 AJAX 请求到服务器，然后由发送更新后版本的记录数据通过handleEditRecord方法通知父组件，这个方法会通过@props被接收到，我们在实现删除记录时用过同样的方法：

  # app/assets/javascripts/components/record.js.coffee

  @Record = React.createClass
    ...
    handleEdit: (e) ->
      e.preventDefault()
      data =
        title: this.refs.title.value
        date: this.refs.date.value
        amount: this.refs.amount.value
      # jQuery doesn't have a $.put shortcut method either
      $.ajax
        method: 'PUT'
        url: "/records/#{ @props.record.id }"
        dataType: 'JSON'
        data:
          record: data
        success: (data) =>
          @setState edit: false
          @props.handleEditRecord @props.record, data
    ...

为简单起见，我们不校验用户数据，我们仅仅通过React.findDOMNode(@refs.fieldName).value读取它，并且一字不差的把它发送给后端。在success时更新状态来切换 edit 方式不是强制性的，但用户会因此而明确地感谢我们。

最后但并非最不重要，我们仅需要更新Records组件上的state，用子组件的新版本记录来覆盖之前的旧记录并让React发挥它的魔力。实现的代码如下：

  # app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    ...
    updateRecord: (record, data) ->
      index = @state.records.indexOf record
      records = React.addons.update(@state.records, { $splice: [[index, 1, data]] })
      @replaceState records: records
    ...
    render: ->
      ...
      # almost at the bottom of the render method
      React.DOM.table
        React.DOM.thead null,
          React.DOM.tr null,
            React.DOM.th null, 'Date'
            React.DOM.th null, 'Title'
            React.DOM.th null, 'Amount'
            React.DOM.th null, 'Actions'
        React.DOM.tbody null,
          for record in @state.records
            React.createElement Record, key: record.id, record: record, handleDeleteRecord: @deleteRecord, handleEditRecord: @updateRecord

和我们从上一章学到的一样，使用React.addons.update来改变我们的 state 会产生更稳固的方法。Records和Record之间最后的联接是通过handleEditRecord属性来发布方法@updateRecord。

最后一次刷新浏览器并尝试更新一些已有的记录，注意页面顶端的金额框如何与你改变的每个记录关联。

edit_record_3

搞定了！我们刚刚一步步地构建了一个小型的 Rails + React 的应用程序！

你可以到这里去看看本章的结果代码，或者仅仅到这里看看由本章引入的改变。

结尾的思考：React.js，简洁又灵活

我们已经验证了一些React的功能，而且我们还学到了几乎所有它引入的新概念。我听到人们评论这个或那个的JavaScript框架因引入新概念而使其学习曲线变得陡峭，但React不是这样的。它实现了例如事件处理和绑定等核心JavaScript概念，使其易于使用和学习。再次证明，其优势之一就是简洁。

通过实例，我们也学到了如何使其集成到Rails的assets pipeline，而且也能很好的与CoffeeScript、jQuery、Turbolinks及Rails的其余部分协同工作。但是，这并非是想要获取结果的唯一方式。例如，你不想使用Turbolinks（因此你不需要react_ujs），你能用Rails Assets来代替react_rails这个gem，你可以使用Jbuilder来构造更复杂的JSON响应来代替提供的JSON对象，等等。你仍然会得到同样不错的效果。

React将明显地提升你的前端能力，让它成为你Rails工具箱中一个强大的库吧！

你可能感兴趣的:(React.js的Rails开发者指南)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • 地推话术，如何应对地推过程中家长的拒绝 校师学
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • 关于旗正规则引擎中的MD5加密问题 何必如此 jspMD5规则加密
    一般情况下，为了防止个人隐私的泄露，我们都会对用户登录密码进行加密，使数据库相应字段保存的是加密后的字符串，而非原始密码。 在旗正规则引擎中，通过外部调用，可以实现MD5的加密，具体步骤如下： 1.在对象库中选择外部调用，选择“com.flagleader.util.MD5”，在子选项中选择“com.flagleader.util.MD5.getMD5ofStr({arg1})”； 2.在规
  • 【Spark101】Scala Promise/Future在Spark中的应用 bit1129 Promise
    Promise和Future是Scala用于异步调用并实现结果汇集的并发原语，Scala的Future同JUC里面的Future接口含义相同，Promise理解起来就有些绕。等有时间了再仔细的研究下Promise和Future的语义以及应用场景，具体参见Scala在线文档：http://docs.scala-lang.org/sips/completed/futures-promises.html
  • spark sql 访问hive数据的配置详解 daizj spark sqlhivethriftserver
    spark sql 能够通过thriftserver 访问hive数据，默认spark编译的版本是不支持访问hive，因为hive依赖比较多，因此打的包中不包含hive和thriftserver,因此需要自己下载源码进行编译，将hive，thriftserver打包进去才能够访问，详细配置步骤如下：   1、下载源码   2、下载Maven,并配置 此配置简单，就略过
  • HTTP 协议通信 周凡杨 javahttpclienthttp通信
                            一：简介  HTTPCLIENT，通过JAVA基于HTTP协议进行点与点间的通信！     二： 代码举例      测试类： import java
  • java unix时间戳转换 g21121 java
    把java时间戳转换成unix时间戳： Timestamp appointTime=Timestamp.valueOf(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())) SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd hh:m
  • web报表工具FineReport常用函数的用法总结（报表函数） 老A不折腾 web报表finereport总结
    说明：本次总结中，凡是以tableName或viewName作为参数因子的。函数在调用的时候均按照先从私有数据源中查找，然后再从公有数据源中查找的顺序。   CLASS CLASS(object):返回object对象的所属的类。   CNMONEY CNMONEY(number,unit)返回人民币大写。 number:需要转换的数值型的数。 unit:单位，
  • java jni调用c++ 代码 报错 墙头上一根草 javaC++jni
    # # A fatal error has been detected by the Java Runtime Environment: # #  EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00000000777c3290, pid=5632, tid=6656 # # JRE version: Java(TM) SE Ru
  • Spring中事件处理de小技巧 aijuans springSpring 教程Spring 实例Spring 入门Spring3
    Spring 中提供一些Aware相关de接口，BeanFactoryAware、 ApplicationContextAware、ResourceLoaderAware、ServletContextAware等等，其中最常用到de匙ApplicationContextAware.实现ApplicationContextAwaredeBean，在Bean被初始后，将会被注入 Applicati
  • linux shell ls脚本样例 annan211 linuxlinux ls源码linux 源码
    #! /bin/sh - #查找输入文件的路径 #在查找路径下寻找一个或多个原始文件或文件模式 # 查找路径由特定的环境变量所定义 #标准输出所产生的结果 通常是查找路径下找到的每个文件的第一个实体的完整路径 # 或是filename :not found 的标准错误输出。 #如果文件没有找到 则退出码为0 #否则 即为找不到的文件个数 #语法 pathfind [--
  • List,Set,Map遍历方式 (收集的资源,值得看一下) 百合不是茶 listsetMap遍历方式
    List特点：元素有放入顺序，元素可重复 Map特点：元素按键值对存储，无放入顺序 Set特点：元素无放入顺序，元素不可重复（注意：元素虽然无放入顺序，但是元素在set中的位置是有该元素的HashCode决定的，其位置其实是固定的） List接口有三个实现类：LinkedList，ArrayList，Vector LinkedList：底层基于链表实现，链表内存是散乱的，每一个元素存储本身
  • 解决SimpleDateFormat的线程不安全问题的方法 bijian1013 javathread线程安全
    在Java项目中，我们通常会自己写一个DateUtil类，处理日期和字符串的转换，如下所示： public class DateUtil01 { private SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); public void format(Date d
  • http请求测试实例（采用fastjson解析） bijian1013 http测试
            在实际开发中，我们经常会去做http请求的开发，下面则是如何请求的单元测试小实例，仅供参考。 import java.util.HashMap; import java.util.Map; import org.apache.commons.httpclient.HttpClient; import
  • 【RPC框架Hessian三】Hessian 异常处理 bit1129 hessian
    RPC异常处理概述   RPC异常处理指是，当客户端调用远端的服务，如果服务执行过程中发生异常，这个异常能否序列到客户端？   如果服务在执行过程中可能发生异常，那么在服务接口的声明中，就该声明该接口可能抛出的异常。   在Hessian中，服务器端发生异常，可以将异常信息从服务器端序列化到客户端，因为Exception本身是实现了Serializable的
  • 【日志分析】日志分析工具 bit1129 日志分析
    1. 网站日志实时分析工具 GoAccess http://www.vpsee.com/2014/02/a-real-time-web-log-analyzer-goaccess/ 2. 通过日志监控并收集 Java 应用程序性能数据(Perf4J) http://www.ibm.com/developerworks/cn/java/j-lo-logforperf/ 3.log.io 和
  • nginx优化加强战斗力及遇到的坑解决 ronin47 nginx 优化
    　　　先说遇到个坑，第一个是负载问题，这个问题与架构有关，由于我设计架构多了两层，结果导致会话负载只转向一个。解决这样的问题思路有两个：一是改变负载策略，二是更改架构设计。 　　　由于采用动静分离部署，而nginx又设计了静态，结果客户端去读nginx静态，访问量上来，页面加载很慢。解决：二者留其一。最好是保留apache服务器。   　　　来以下优化：   　　　
  • java-50-输入两棵二叉树A和B，判断树B是不是A的子结构 bylijinnan java
    思路来自： http://zhedahht.blog.163.com/blog/static/25411174201011445550396/ import ljn.help.*; public class HasSubtree { /**Q50. * 输入两棵二叉树A和B，判断树B是不是A的子结构。 例如，下图中的两棵树A和B，由于A中有一部分子树的结构和B是一
  • mongoDB 备份与恢复 开窍的石头 mongDB备份与恢复
    Mongodb导出与导入 1: 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的. 所以,都有如下通用选项: -h host   主机 --port port    端口 -u username 用户名 -p passwd   密码 2: mongoexport 导出json格式的文件
  • [网络与通讯]椭圆轨道计算的一些问题 comsci 网络
         如果按照中国古代农历的历法，现在应该是某个季节的开始，但是由于农历历法是3000年前的天文观测数据，如果按照现在的天文学记录来进行修正的话，这个季节已经过去一段时间了。。。。。       也就是说，还要再等3000年。才有机会了，太阳系的行星的椭圆轨道受到外来天体的干扰，轨道次序发生了变
  • 软件专利如何申请 cuiyadll 软件专利申请
    软件技术可以申请软件著作权以保护软件源代码，也可以申请发明专利以保护软件流程中的步骤执行方式。专利保护的是软件解决问题的思想，而软件著作权保护的是软件代码（即软件思想的表达形式）。例如，离线传送文件，那发明专利保护是如何实现离线传送文件。基于相同的软件思想，但实现离线传送的程序代码有千千万万种，每种代码都可以享有各自的软件著作权。申请一个软件发明专利的代理费大概需要5000-8000申请发明专利可
  • Android学习笔记 darrenzhu android
    1.启动一个AVD 2.命令行运行adb shell可连接到AVD,这也就是命令行客户端 3.如何启动一个程序   am start -n package name/.activityName   am start -n com.example.helloworld/.MainActivity 启动Android设置工具的命令如下所示： # am start -
  • apache虚拟机配置，本地多域名访问本地网站 dcj3sjt126com apache
    现在假定你有两个目录，一个存在于 /htdocs/a，另一个存在于 /htdocs/b 。 现在你想要在本地测试的时候访问 www.freeman.com 对应的目录是 /xampp/htdocs/freeman ,访问 www.duchengjiu.com 对应的目录是 /htdocs/duchengjiu。 1、首先修改C盘WINDOWS\system32\drivers\etc目录下的
  • yii2 restful web服务[速率限制] dcj3sjt126com PHPyii2
    速率限制 为防止滥用，你应该考虑增加速率限制到您的API。 例如，您可以限制每个用户的API的使用是在10分钟内最多100次的API调用。 如果一个用户同一个时间段内太多的请求被接收， 将返回响应状态代码 429 (这意味着过多的请求)。 要启用速率限制, [[yii\web\User::identityClass|user identity class]] 应该实现 [[yii\filter
  • Hadoop2.5.2安装——单机模式 eksliang hadoophadoop单机部署
    转载请出自出处：http://eksliang.iteye.com/blog/2185414 一、概述        Hadoop有三种模式 单机模式、伪分布模式和完全分布模式，这里先简单介绍单机模式 ，默认情况下，Hadoop被配置成一个非分布式模式，独立运行JAVA进程，适合开始做调试工作。   二、下载地址 Hadoop 网址http:
  • LoadMoreListView+SwipeRefreshLayout（分页下拉）基本结构 gundumw100 android
    一切为了快速迭代 import java.util.ArrayList; import org.json.JSONObject; import android.animation.ObjectAnimator; import android.os.Bundle; import android.support.v4.widget.SwipeRefreshLayo
  • 三道简单的前端HTML/CSS题目 ini htmlWeb前端css题目
    使用CSS为多个网页进行相同风格的布局和外观设置时，为了方便对这些网页进行修改，最好使用（ ）。http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm   在HTML中加入<table style=”color:red; font-size:10pt”>，此为（ ）。http://hovertree.com/s
  • overrided方法编译错误 kane_xie override
    问题描述： 在实现类中的某一或某几个Override方法发生编译错误如下： Name clash: The method put(String) of type XXXServiceImpl has the same erasure as put(String) of type XXXService but does not override it   当去掉@Over
  • Java中使用代理IP获取网址内容（防IP被封，做数据爬虫） mcj8089 免费代理IP代理IP数据爬虫JAVA设置代理IP爬虫封IP
    推荐两个代理IP网站：   1. 全网代理IP：http://proxy.goubanjia.com/   2. 敲代码免费IP：http://ip.qiaodm.com/   Java语言有两种方式使用代理IP访问网址并获取内容，   方式一，设置System系统属性   // 设置代理IP System.getProper
  • Nodejs Express 报错之 listen EADDRINUSE qiaolevip 每天进步一点点学习永无止境nodejs纵观千象
    当你启动 nodejs服务报错： >node app Express server listening on port 80 events.js:85 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at exports._errnoException (
  • C++中三种new的用法 _荆棘鸟_ C++new
    转载自：http://news.ccidnet.com/art/32855/20100713/2114025_1.html 作者: mt 其一是new operator，也叫new表达式；其二是operator new，也叫new操作符。这两个英文名称起的也太绝了，很容易搞混，那就记中文名称吧。new表达式比较常见，也最常用，例如： string* ps = new string("
  • Ruby深入研究笔记1 wudixiaotie Ruby
    module是可以定义private方法的 module MTest def aaa puts "aaa" private_method end private def private_method puts "this is private_method" end end
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他