04. rails入门学习 创建控制器
学习视频
https://www.bilibili.com/video/BV1RJ411W7N3?t=49&p=7
一. 启动rails
-
启动
cd circles/ #到circles的项目根目录里 以下项目名称为 circles rails s -p 3001 #如果不写端口,默认是3000 rails s -b 0.0.0.0 #-b 开放ip,外网可访问
启动后不要关闭命令行窗口,不然服务就挂了
-
访问页面
localhost:3001
二. 创建控制器welcome 和 index页面
如果创始的数据模型是对应一张表,那么要使用复数的形式
例如给users
表创建一个控制器
rails g controller users
-
新打开一个命令行,在命令行里输入
rails g controller welcome index
例子haima@haima-PC:/media/haima/34E401CC64DD0E28/site/go/src/ruby/circles$ rails g controller welcome index Running via Spring preloader in process 26338 create app/controllers/welcome_controller.rb route get 'welcome/index' invoke erb create app/views/welcome create app/views/welcome/index.html.erb invoke test_unit create test/controllers/welcome_controller_test.rb invoke helper create app/helpers/welcome_helper.rb invoke test_unit invoke assets invoke scss create app/assets/stylesheets/welcome.scss
自动创建了
app/controllers/welcome_controller.rb
和app/views/welcome/index.html.erb
welcome_controller.rb
class WelcomeController < ApplicationController def index end end
index.html.erb
<h1>Welcome#index</h1> <p>Find me in app/views/welcome/index.html.erb</p>
-
添加路由
config/routes.rb
Rails.application.routes.draw do get 'welcome/index' #添加路由 resource :user get 'users/test1' # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
-
浏览器访问
http://127.0.0.1:3001/welcome/index
返回下面的内容成功.
安装bootstrap
参考:
https://github.com/twbs/bootstrap-sass
https://github.com/rails/jquery-ujs
-
修改
Gemfile
Gemfile里添加
gem 'bootstrap-sass', '~> 3.4.1' gem 'sassc-rails', '>= 2.1.0' gem 'jquery-rails'
-
命令行执行
bundle install
下面可以看到已经安装成功
-
修改css
a.
app/assets/stylesheets/application.css
改为app/assets/stylesheets/application.scss
b.
application.scss
加入下面的引用@import "bootstrap-sprockets"; @import "bootstrap";
-
修改js
app/assets/javascripts/application.js里添加
//= require jquery //= require jquery_ujs
-
修改application.html.erb
删除文件
app/views/layouts/application.html.erb
里的'data-turbolinks-track': 'reload'
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
修改为
<%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_pack_tag 'application' %>
-
html里添加代码
修改
app/views/welcome/index.html.erb
文件<h1>Welcome#index</h1> <p>Find me in app/views/welcome/index.html.erb</p> <div class="alert alert-success"> Success </div>
-
访问页面
http://127.0.0.1:3001/welcome/index
效果:
至此就ok了
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
2019-01-10 Vue2.0--14.小白入门教程--实例化多个vue对象,可初始化操作几种方法
2019-01-10 37.VUE学习之-表单的综合运用