rails--访问项目首页

这篇具有很好参考价值的文章主要介绍了rails--访问项目首页。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

访问项目首页

先在命令行中运行(记着在要访问项目的目录下eg:  /workspace/library ) bunlde exec rails server

然后打开浏览器 , 访问 localhost:3000 , 能看到首页 .( 这个页面是存在于 gem文件中的 . 在 library 目录下找不到它 )现在只有结构 .没有内容,所以需要增加内容 , 例如: 输入一个网址 , 显示一个页

假设 , 用户需要访问的 URL: localhost:3000/books/list

那么, 我们只需要 :

1. 修改-路由 (router)

2. 创建对应的 (controller, action)

3. 创建对应的页面 (erb)

1. 修改路由 config/routes.rb(路由文件)

向该文件中 , 增加下面的代码 :

Rails.application.routes.draw do
  # 可以生成/books
  resources :books do
    collection do
      # 可以对应好(处理)/books/list这个链接
      # 下面这个路由,让rails可以处理URL:/books/list这个链接,
      # 不过处理这个链接有个前提,这个链接发起的请求方式是使用get请求发起的
      get :list
    end
  end
end

(resources ... do ... end )

它会生成一段”路由” , 也就是说 , 会识别 /books/list 这个 URL,并且把它交给 books controller的list action 来处理

2. 创建 controller/action(controller要在app 目录下)
新建一个controller文件: app/controllers/books_controller.rb

向该文件增加下面的代码:

class BooksController < ApplicationController
  
  # 创建对应的action,因为要求访问它的list,所以在这里给它加上list的action
  def list
  end
end

( 一个 controller 是由多个 action( 也就是普通方法组成的 )不用的 action, 处理不同的url .

这个 list action 里没有任何代码 . 它会直接跳转到对应的 erb 页面 ( app/views/books/list.html.erb)

class BooksController < ApplicationController
  
  # 创建对应的action,因为要求访问它的list,所以在这里给它加上list的action
  def list
    # 1.渲染一段字符串
    # render :text => 'hihihi'
    # 2.渲染一个json
    # render :json => {
    #   key: 'value'
    #   name: 'Tom'
    #   sex: 'male'
    #  }
    # 3.啥也不写,就渲染对应的 app/views/books/list.html.erb
  end
end

3. 创建对应的视图文件
新建一个视图文件: app/views/books/list.html.erb
( 所有 books controller 中的视图 , 都要放到 app/views/books目录下 )

(对应的controller是什么名字,views/后面就用什么名字, eg: Bookscontroller, 就是views/books

(action叫什么名字 , 视图就叫什么名字,list action, 对应.的视图 , 就是 : list.html.erb)

erb文件里面可以添加html的内容,例如下面代码:

<p>三体1 - 地球往事</p>
<p>三体1 - 黑暗森林</p>
<p>三体3 - 死神永生</p>

为了简单起见 , 它只显示 HTML 代码 .访问浏览器,看到页面结果

4. 在视图中 , 使用 ruby 代码 .
修改 app/views/books/list.html.erb的内容,例如下面代码

<h3>注意:以下使用了RUBY代码来显示HTML</h3>

<!-- 先定义了一个数组<% books = [] %> -->
<% books = ['三体1 - 地球往事', '三体2 - 黑暗森林', '三体3 - 死神永生'] %>
<!-- 使用了一个循环 -->
<% books.each do |book| %>
  <!-- 打印出来 -->
  <p><%= book %></p>
<% end %>
 
<a href='/books/new'>新建图书页</a>                                      

可以看到 , 语法与PHP, JSP一样
● <% %> 之间来执行 ruby代码
● <%= %>来显示返回值
文章来源地址https://www.toymoban.com/news/detail-555487.html

到了这里,关于rails--访问项目首页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 交友项目【首页推荐,今日佳人,佳人信息】

    目录 1:首页推荐 1.1:接口地址 1.2:流程分析 1.3:代码实现 2:今日佳人 1.1:接口地址 1.2:流程分析 1.3:代码实现 3:佳人信息 1.1:接口地址 1.2:流程分析 1.3:代码实现 1.1:接口地址 地址: http://192.168.136.160:3000/project/19/interface/api/118 1.2:流程分析 1.3:代码实现 与前端

    2023年04月21日
    浏览(33)
  • 图床项目进度(一)——UI首页

    前面我不是说了要做一个图床吗,现在在做ui。 我vue水平不够高,大部分参考b站项目照猫画虎。 vue实战后台 我使用ts,vite,vue3进行了重构。 当然,我对这些理解并不深刻,许多代码都是游离于表面,仅仅给大家参考 2.1. 使用elemen ui进行导航制作。 这里直接用element ui菜单直

    2024年02月12日
    浏览(90)
  • 【vue实战项目】通用管理系统:首页

    前言 本文为博主的vue实战小项目系列中的第三篇,很适合后端或者才入门的小伙伴看,一个前端项目从0到1的保姆级教学。前面的内容: 【vue实战项目】通用管理系统:登录页-CSDN博客 【vue实战项目】通用管理系统:封装token操作和网络请求-CSDN博客 【vue实战项目】通用管理

    2024年02月04日
    浏览(45)
  • 【电商项目实战】基于SpringBoot完成首页搭建

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《电商项目实战》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的加入,

    2024年02月04日
    浏览(42)
  • 家居网购项目(首页搜索+验证码)

    1.需求分析 2.程序框架图 3.编写dao层 1.修改FurnDao 添加两个方法 2.修改FurnDaoImpl 添加两个方法 3.单元测试 4.编写service层 1.修改FurnService 添加方法 2.修改FurnServiceImpl 添加方法 3.单元测试 5.编写web层 1.修改index.jsp 2.修改CustomerFurnServlet 添加方法 3.修改index.jsp的分页导航逻辑 6.结果

    2024年04月13日
    浏览(24)
  • 小程序搭建OA项目首页布局界面

    首先让我们来学习以下Flex布局 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 display: ‘flex’ 容器默认存在两根轴:水平的主

    2024年02月08日
    浏览(42)
  • 图床项目进度(二)——动态酷炫首页

    前面的文章我不是说我简单copy了站友的一个登录页吗,我感觉还是太单调了,想加一个好看的背景。 但是我前端的水平哪里够啊,于是在网上找了找制作动态背景的插件。 效果如下图。 这个插件是 particles.js 安装 在mian.js(ts)中进行导入 组件中使用 在vue模板中直接使用组件

    2024年02月10日
    浏览(43)
  • 会议OA小程序项目 与后台数据的交互【首页】

    目录 一. 与后台数据进行交互 pom.xml 配置数据源 MinoaApplication WxHomeController 后台数据展示  二. request的封装 三. 会议展示 application.yml 在utils/util.js中 api.js index/index.js utils/comm.wxs index/index.wxml  效果展示

    2024年02月07日
    浏览(45)
  • 项目实战:通过axios加载水果库存系统的首页数据

    axios会自动将响应的数据解析为js对象,所以不需要手动将json字符串解析为js对象,不需要再进行parse(如果是原始的ajax操作,那么一定需要parse) ​​​​​​​    

    2024年02月05日
    浏览(46)
  • 交友项目【完善用户信息&上传用户头像】功能跳转首页

    目录 1:保存用户信息 1.1:接口地址 1.2:流程分析 1.3:代码实现 2.4: 测试 2:上传用户头像 2.1:接口地址 2.2:流程分析 2.3:代码实现 2.4:测试 在进行完手机号码校验完毕之后,我们会进入完善用户信息页面   启动虚拟机:首次登录---完善资料 http://192.168.136.160:3000/proj

    2023年04月12日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包