`

关于router restful和button_to

阅读更多
今天费了一些时间啊一个很久之前遇到过的问题又忘了
Rails 3
写了个路由
  get "report/index"

  get "report/show"


rake routes可以知道

     report_index GET    /report/index(.:format)         {:controller=>"report", :action=>"index"}
      report_show GET    /report/show(.:format)          {:controller=>"report", :action=>"show"}



于是,就写了个button_to

%h1 Report#show
= button_to('click', :action => 'index',:method=>:get)


发现诡异现象,点击就会提示没有路由,地址栏回车就能显示。

我就记着很久之前遇到过这个问题,可是就是想不起来怎么回事。

后来看后台信息和地址栏,发现问题
引用
http://127.0.0.1/report/show?method=get

后台
引用

Started POST "/report/index?method=get" for 192.168.1.130 at 2011-05-19 14:04:41 -0400

ActionController::RoutingError (No route matches "/report/index"):



仔细看看API

<%= button_to "New", :action => "new" %>
# => "<form method="post" action="/controller/new" class="button_to">
#      <div><input value="New" type="submit" /></div>
#    </form>"

<%= button_to "Delete Image", { :action => "delete", :id => @image.id },
          :confirm => "Are you sure?", :method => :delete %>
# => "<form method="post" action="/images/delete/1" class="button_to">
#      <div>
#        <input type="hidden" name="_method" value="delete" />
#        <input data-confirm='Are you sure?' value="Delete" type="submit" />
#      </div>
#    </form>"

发现少了个大括号
引用

button_to(name, options = {}, html_options = {})

Generates a form containing a single button that submits to the URL created by the set of options. This is the safest method to ensure links that cause changes to your data are not triggered by search bots or accelerators. If the HTML button does not work with your layout, you can also consider using the link_to method with the :method modifier as described in the link_to documentation.

The generated form element has a class name of button_to to allow styling of the form itself and its children. You can control the form submission and input element behavior using html_options. This method accepts the :method and :confirm modifiers described in the link_to documentation. If no :method modifier is given, it will default to performing a POST operation. You can also disable the button by passing :disabled => true in html_options. If you are using RESTful routes, you can pass the :method to change the HTTP verb used to submit the form.
Options

The options hash accepts the same options as url_for.

There are a few special html_options:

    :method - Symbol of HTTP verb. Supported verbs are :post, :get, :delete and :put. By default it will be :post.

    :disabled - If set to true, it will generate a disabled button.

    :confirm - This will use the unobtrusive JavaScript driver to prompt with the question specified. If the user accepts, the link is processed normally, otherwise no action is taken.

    :remote - If set to true, will allow the Unobtrusive JavaScript drivers to control the submit behaviour. By default this behaviour is an ajax submit.

分享到:
评论

相关推荐

    BlogAppRedux:使用SemanticUI设置样式的简单博客,以演示RESTful路由约定

    2. `React-Router`:React的路由库,实现SPA(单页应用)中的页面切换,与RESTful路由约定相配合。 3. `axios`或`fetch`:用于发送HTTP请求,从服务器获取或提交数据。 **文件结构分析** 在`blogAppRedux-master`...

    vue+element开发的管理系统 后台使用springboot 前后端分离部署.zip

    3. 按钮(Button)和图标(Icon):丰富的样式和图标供选择,满足不同设计需求。 4. 通知提示(Message、Notification):用于全局消息提示。 5. 导航(Navigation):包含菜单(Menu)、面包屑(Breadcrumb)、步骤...

    react-admin-oliver-master.rar

    React Admin Oliver使用Material-UI构建了直观且一致的用户界面,源码中可以看到各种组件如Button、Table、Card等的使用,以及如何通过自定义主题来改变界面风格。 4. RESTful API交互:React Admin Oliver通过...

    vuecliElementUIaxios构建的单页点餐系统

    以上知识点构成了一套完整的前端开发流程,通过Vue CLI搭建项目结构,Vue.js负责页面逻辑,ElementUI美化界面,axios处理数据通信,再配合Vue Router和Vuex管理应用状态,共同打造出这个高效且功能完备的单页点餐...

    管理系统系列--一个基于antdesign的后台管理系统.zip

    此外,可能会运用到路由管理库如React Router,实现页面间的跳转和导航。 文件名称“kwan02251353”看起来可能是项目文件夹或者主入口文件的名字,这通常包含了项目的启动脚本或者配置信息。在React项目中,这可能...

    使用vue-admin加eleUI开发的前后端分离后台论坛模板

    它采用MVVM模式,允许开发者声明式地渲染动态数据到视图,同时提供了丰富的插件和工具链支持,如Vuex(状态管理)、Vue Router(路由管理)等。 2. **Element UI**:Element UI包含了各种常用的UI组件,如el-table...

    基于Springboot+vue+ElementUI的电影后台管理系统.zip

    3. 路由管理:Vue Router是Vue.js官方的路由库,负责页面间的导航和状态管理,使得单页应用(SPA)的构建更加顺畅。 四、ElementUI组件库 1. UI设计:ElementUI是一套基于Vue.js的组件库,提供了一系列符合...

    webapp-portfolio01:ウェブアプリケーションのポートフォリオ01です。SPAの基础としてToDoアプリを制作しました

    5. **RESTful API通信** - 为了存储和检索Todo数据,项目可能会与后端服务器进行通信。这通常通过发送HTTP请求实现,遵循RESTful原则。可能使用`fetch` API或`axios`库来处理这些请求。 6. **JSON格式** - 数据交换...

    react-apps

    此外,Redux 和 MobX 等库可以帮助管理更复杂的跨组件状态,而 React Router 可用于实现应用程序的路由功能,使得单页应用可以处理多个视图或页面。 在实际开发中,React 应用通常会与后端服务通过 RESTful API 或 ...

    jQuery+koa2实现简单的Ajax请求的示例

    通过结合jQuery与Koa2框架,我们可以较为容易地实现一个前后端分离的应用,前端负责界面展示和用户交互,后端则提供RESTful接口处理业务逻辑。Koa的异步处理能力使服务器的响应更快,用户体验更好。同时,通过Ajax...

    React-Integracion-Back-Front-Hooks

    例如,使用React Router和后端的路由配合工作。 5. **安全认证与授权**: 实现用户身份验证和权限控制,例如JWT(JSON Web Tokens)可以用来安全地传输用户信息并在前后端之间进行验证。 综上所述,"React-...

    Blog-Polymer:聚合物旅游博客

    学习如何使用Polymer的`&lt;dom-repeat&gt;`、`&lt;paper-button&gt;`等预定义组件,以及如何编写自定义元素是理解此项目的关键。 3. **JavaScript基础**:作为主要编程语言,JavaScript用于处理博客的动态逻辑,如数据绑定、...

Global site tag (gtag.js) - Google Analytics