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
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • C/C++Win32编程基础详解视频下载 择善Zach 编程C++Win32
    课题视频：C/C++Win32编程基础详解 视频知识：win32窗口的创建                   windows事件机制 主讲：择善Uncle老师 学习交流群：386620625 验证码：625 --
  • Guava Cache使用笔记 bylijinnan javaguavacache
    1.Guava Cache的get/getIfPresent方法当参数为null时会抛空指针异常 我刚开始使用时还以为Guava Cache跟HashMap一样，get(null)返回null。 实际上Guava整体设计思想就是拒绝null的，很多地方都会执行com.google.common.base.Preconditions.checkNotNull的检查。 2.Guava
  • 解决ora-01652无法通过128（在temp表空间中） 0624chenhong oracle
    解决ora-01652无法通过128（在temp表空间中）扩展temp段的过程 一个sql语句后，大约花了10分钟，好不容易有一个结果，但是报了一个ora-01652错误，查阅了oracle的错误代码说明：意思是指temp表空间无法自动扩展temp段。这种问题一般有两种原因：一是临时表空间空间太小，二是不能自动扩展。 分析过程：    既然是temp表空间有问题，那当
  • Struct在jsp标签 不懂事的小屁孩 struct
    非UI标签介绍： 控制类标签： 1：程序流程控制标签   if   elseif    else <s:if test="isUsed"> <span class="label label-success">True</span> </
  • 按对象属性排序 换个号韩国红果果 JavaScript对象排序
    利用JavaScript进行对象排序，根据用户的年龄排序展示 <script> var bob={ name;bob, age:30 } var peter={ name;peter, age:30 } var amy={ name;amy, age:24 } var mike={ name;mike, age:29 } var john={
  • 大数据分析让个性化的客户体验不再遥远 蓝儿唯美 数据分析
    顾客通过多种渠道制造大量数据，企业则热衷于利用这些信息来实现更为个性化的体验。 分析公司Gartner表示，高级分析会成为客户服务的关键，但是大数据分析的采用目前仅局限于不到一成的企业。 挑战在于企业还在努力适应结构化数据，疲于根据自身的客户关系管理（CRM）系统部署有效的分析框架，以及集成不同的内外部信息源。 然而，面对顾客通过数字技术参与而产生的快速变化的信息，企业需要及时作出反应。要想实
  • java笔记4 a-john java
    操作符 1，使用java操作符       操作符接受一个或多个参数，并生成一个新值。参数的形式与普通的方法调用不用，但是效果是相同的。加号和一元的正号（+）、减号和一元的负号（-）、乘号（*）、除号（/）以及赋值号（=）的用法与其他编程语言类似。       操作符作用于操作数，生成一个新值。另外，有些操作符可能会改变操作数自身的
  • 从裸机编程到嵌入式Linux编程思想的转变------分而治之：驱动和应用程序 aijuans 嵌入式学习
        笔者学习嵌入式Linux也有一段时间了，很奇怪的是很多书讲驱动编程方面的知识，也有很多书将ARM9方面的知识，但是从以前51形式的（对寄存器直接操作，初始化芯片的功能模块）编程方法，和思维模式，变换为基于Linux操作系统编程，讲这个思想转变的书几乎没有，让初学者走了很多弯路，撞了很多难墙。     笔者因此写上自己的学习心得，希望能给和我一样转变
  • 在springmvc中解决FastJson循环引用的问题 asialee 循环引用fastjson
              我们先来看一个例子：           package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java.util.Map; import co
  • ArrayAdapter和SimpleAdapter技术总结 百合不是茶 androidSimpleAdapterArrayAdapter高级组件基础
    ArrayAdapter比较简单，但它只能用于显示文字。而SimpleAdapter则有很强的扩展性，可以自定义出各种效果   ArrayAdapter;的数据可以是数组或者是队列        // 获得下拉框对象 AutoCompleteTextView textview = (AutoCompleteTextView) this
  • 九封信 bijian1013 人生励志
            有时候，莫名的心情不好，不想和任何人说话，只想一个人静静的发呆。有时候，想一个人躲起来脆弱，不愿别人看到自己的伤口。有时候，走过熟悉的街角，看到熟悉的背影，突然想起一个人的脸。有时候，发现自己一夜之间就长大了。         2014，写给人
  • Linux下安装MySQL Web 管理工具phpMyAdmin sunjing PHPInstallphpMyAdmin
    PHP http://php.net/ phpMyAdmin http://www.phpmyadmin.net Error compiling PHP on CentOS x64   一、安装Apache 请参阅http://billben.iteye.com/admin/blogs/1985244   二、安装依赖包 sudo yum install gd
  • 分布式系统理论 bit1129 分布式
    FLP One famous theory in distributed computing, known as FLP after the authors Fischer, Lynch, and Patterson, proved that in a distributed system with asynchronous communication and process crashes,
  • ssh2整合(spring+struts2+hibernate)-附源码 白糖_ eclipsespringHibernatemysql项目管理
    最近抽空又整理了一套ssh2框架，主要使用的技术如下： spring做容器，管理了三层(dao,service,actioin)的对象 struts2实现与页面交互(MVC)，自己做了一个异常拦截器，能拦截Action层抛出的异常 hibernate与数据库交互 BoneCp数据库连接池，据说比其它数据库连接池快20倍，仅仅是据说 MySql数据库   项目用eclipse
  • treetable bug记录 braveCS table
    // 插入子节点删除再插入时不能正常显示。修改： //不知改后有没有错，先做个备忘 Tree.prototype.removeNode = function(node) { // Recursively remove all descendants of +node+ this.unloadBranch(node); // Remove
  • 编程之美-电话号码对应英语单词 bylijinnan java算法编程之美
    import java.util.Arrays; public class NumberToWord { /** * 编程之美 电话号码对应英语单词 * 题目： * 手机上的拨号盘，每个数字都对应一些字母，比如2对应ABC，3对应DEF.........，8对应TUV，9对应WXYZ， * 要求对一段数字，输出其代表的所有可能的字母组合
  • jquery ajax读书笔记 chengxuyuancsdn jQuery ajax
    1、jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()
  • JWFD工作流拓扑结构解析伪码描述算法 comsci 数据结构算法工作活动J#
      对工作流拓扑结构解析感兴趣的朋友可以下载附件，或者下载JWFD的全部代码进行分析   /*  流程图拓扑结构解析伪码描述算法         public java.util.ArrayList DFS(String graphid, String stepid, int j)
  • oracle I/O 从属进程 daizj oracle
    I/O 从属进程 　　I/O从属进程用于为不支持异步I/O的系统或设备模拟异步I/O.例如，磁带设备(相当慢)就不支持异步I/O.通过使用I/O 从属进程，可以让磁带机模仿通常只为磁盘驱动器提供的功能。就好像支持真正的异步I/O 一样，写设备的进程(调用者)会收集大量数据，并交由写入器写出。数据成功地写出时，写入器(此时写入器是I/O 从属进程，而不是操作系统)会通知原来的调用者，调用者则会
  • 高级排序:希尔排序 dieslrae 希尔排序
    public void shellSort(int[] array){ int limit = 1; int temp; int index; while(limit <= array.length/3){ limit = limit * 3 + 1;
  • 初二下学期难记忆单词 dcj3sjt126com englishword
    kitchen 厨房 cupboard 厨柜 salt 盐 sugar 糖 oil 油 fork 叉；餐叉 spoon 匙；调羹 chopsticks 筷子 cabbage 卷心菜；洋白菜 soup 汤 Italian 意大利的   Indian 印度的 workplace  工作场所 even 甚至；更 Italy 意大利 laugh 笑 m
  • Go语言使用MySQL数据库进行增删改查 dcj3sjt126com mysql
    目前Internet上流行的网站构架方式是LAMP，其中的M即MySQL, 作为数据库，MySQL以免费、开源、使用方便为优势成为了很多Web开发的后端数据库存储引擎。MySQL驱动Go中支持MySQL的驱动目前比较多，有如下几种，有些是支持database/sql标准，而有些是采用了自己的实现接口,常用的有如下几种: http://code.google.c...o-mysql-dri
  • git命令 shuizhaosi888 git
    ---------------设置全局用户名： git config --global user.name "HanShuliang" //设置用户名 git config --global user.email "[email protected]" //设置邮箱 ---------------查看环境配置 git config --li
  • qemu-kvm 网络 nat模式 (四) haoningabc kvmqemu
    qemu-ifup-NAT #!/bin/bash BRIDGE=virbr0 NETWORK=192.168.122.0 GATEWAY=192.168.122.1 NETMASK=255.255.255.0 DHCPRANGE=192.168.122.2,192.168.122.254 TFTPROOT= BOOTP= function check_bridge()
  • 不要让未来的你，讨厌现在的自己 jingjing0907 生活 奋斗 工作 梦想
     故事one 　23岁，他大学毕业，放弃了父母安排的稳定工作，独闯京城，在家小公司混个小职位，工作还算顺手，月薪三千，混了混，混走了一年的光阴。　　　　24岁，有了女朋友，从二环12人的集体宿舍搬到香山民居，一间平房，二人世界，爱爱爱。偶然约三朋四友，打扑克搓麻将，日子快乐似神仙；　　　　25岁，出了几次差，调了两次岗，薪水涨了不过百，生猛狂飙的物价让现实血淋淋，无力为心爱银儿购件大牌
  • 枚举类型详解 一路欢笑一路走 enum枚举详解enumsetenumMap
    枚举类型详解 一.Enum详解      1.1枚举类型的介绍   JDK1.5加入了一个全新的类型的”类”—枚举类型，为此JDK1.5引入了一个新的关键字enum,我们可以这样定义一个枚举类型。      Demo:一个最简单的枚举类   public enum ColorType { RED
  • 第11章 动画效果（上） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Eclipse中jsp、js文件编辑时，卡死现象解决汇总 ljf_home eclipsejsp卡死js卡死
    使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转，具体那个方法起到作用，不太好讲。将所有用过的方法罗列如下：   1、取消验证 windows–>perferences–>validation 把 除了manual 下面的全部点掉，build下只留 classpath dependency Valida
  • MySQL编程中的6个重要的实用技巧 tomcat_oracle mysql
    每一行命令都是用分号(;)作为结束 对于MySQL，第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的，但当一行MySQL被插入在PHP代码中时，最好把后面的分号省略掉，例如： mysql_query("INSERT INTO tablename(first_name,last_name)VALUES('$first_name',$last_name')");
  • zoj 3820 Building Fire Stations(二分+bfs) 阿尔萨斯 Build
    题目链接：zoj 3820 Building Fire Stations 题目大意：给定一棵树，选取两个建立加油站，问说所有点距离加油站距离的最大值的最小值是多少，并且任意输出一种建立加油站的方式。 解题思路：二分距离判断，判断函数的复杂度是o(n)，这样的复杂度应该是o(nlogn)，即使常数系数偏大，但是居然跑了4.5s，也是醉了。 判断函数里面做了3次bfs，但是每次bfs节点最多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他