rails手脚架(scaffold)功能

简介: scaffold是一个快速开发rails应用的代码框架,可以使用一条命令实现CRUD操作。1: 创建一个应用 rails new scaffoldapp cd scaffoldapp rails s在浏览...

scaffold是一个快速开发rails应用的代码框架,可以使用一条命令实现CRUD操作。

1: 创建一个应用

 rails new scaffoldapp
 cd scaffoldapp
 rails s

在浏览器中打开http://localhost:3000/

2: 创建一个名为blog的Scaffold

使用rails的scaffold创建模版,在此基础上进行增加、删除、修改、查询(CRUD)操作.

rails g scaffold blog title:string content:text picture:string 

数据库迁移:

rake db:migrate

浏览器中访问:http://localhost:3000/blogs
这里写图片描述

3:添加图片上传功能

可以参考我的上一篇博客rails中使用carrierwave上传图片
更新Gemfile

gem 'carrierwave'
bundle install
rails generate uploader Picture

修改/app/models/blog.rb,挂载picture属性

mount_uploader :picture, PictureUploader

打开 app/views/ideas/_form.html.erb ,找到这一行:

<%= f.text_field :picture %>

将它改成:

<%= f.file_field :picture %>

并将这一行:

<%= form_for(@blog) do |f| %>

改成:

<%= form_for(@blog,:html => {:multipart => true}) do |f| %>

打开 app/views/ideas/show.html.erb 并将

<%= @blog.picture %>

改为

<%= image_tag(@blog.picture_url, :width => 300) if @blog.picture.present? %>

4.修改样式

打开/app/controllers/blogs_controller.rb
新建一个方法

 def list
     @blogs = Blog.all
  end

在/app/views/blogs/目录下新建list.html.erb

<div class="bgheader">
    <h1>My Blog</h1>
</div>

<% @blogs.each do |blog| %>
      <h2 class="bgtitle"><%=link_to blog.title,blog %></h2>
      <p><%= blog.content[0,150]%></p>

<% end %>

修改/config/routes.rb,加入:

root 'blogs#list'

增加/app/assets/stylesheets/application.css

body{

    padding: 0px;
    margin:0px;
    width:1000px;
    margin:0 auto;
 }
.bgheader{
    margin-top: -20px;
    height: 80px;
    background-color: #E9F2E8;
}
.bgheader h1{
    color: #238A2A;
    padding-top: 15px;
    padding-left: 20px;
}

.bgtitle a:link,.bgtitle a:visited{
    color: #0080FF;
}
#blog_title{
    width:300px;
    height:20px;
}
#blog_content{
    width:480px;
    height:300px;
}
.bgcontainer{
    width:600px;
}
.bgshow{
    width:800px;
}

修改/app/views/blogs/show.html.erb

<div class="bgshow">
<p id="notice"><%= notice %></p>

<h2>
  <%= @blog.title %>
</h2>
  <%= @blog.content %>
<hr>
  <%= image_tag(@blog.picture_url, :width => 300) if @blog.picture.present? %>
<hr>
<%= link_to 'Edit', edit_blog_path(@blog) %> |
<%= link_to 'Back', blogs_path %>
</div>

效果

首页
这里写图片描述
详情页
这里写图片描述

目录
相关文章
|
3月前
|
搜索推荐
App Inventor 2 打造个性化酷炫的底部导航条
虽说 App Inventor 2 是简单的积木式开发手机 App,但是通过众多拓展它也能实现很多酷炫的功能,比如本文介绍的一款酷炫导航条,函数代码块用法超级简单,效果不错。当然还有更复杂更个性化的导航条后续再分享。
86 0
|
4月前
|
搜索推荐 C#
一个适用于定制个性化界面的WPF UI组件库
一个适用于定制个性化界面的WPF UI组件库
|
5月前
|
前端开发 JavaScript C#
基于TDesign风格的Blazor企业级UI组件库
基于TDesign风格的Blazor企业级UI组件库
43 0
|
5月前
|
文字识别 自然语言处理 程序员
一个支持WinForms换肤的开源组件
一个支持WinForms换肤的开源组件
27 0
Flutter开发之Scaffold组件快速开发APP
Flutter开发之Scaffold组件快速开发APP
|
前端开发 JavaScript CDN
云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM
著意登楼瞻玉兔,何人张幕遮银阙?又到了一年一度的网页小挂件环节,以往我们都是集成别人开源的组件,但所谓熟读唐诗三百首,不会做诗也会吟,熟读了别人的东西,做几首打油诗也是可以的,但若不能自出机抒,却也成不了大事,所以本次我们从零开始制作属于自己的网页小挂件,博君一晒。
云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM
|
小程序 前端开发 开发者
TDesign小程序组件库体验
书山有路勤为径,学海无涯苦做舟
590 0
TDesign小程序组件库体验
|
Dart 容器
flutter制作具有自定义导航栏的渐进式 Web 应用程序
本文主要介绍具有自定义导航栏的渐进式 Web 应用程序 gitee github 让我们准备我们的 - “Main.dart” 我们将整个页面分成几个部分,以便于制定,我建议您这样做以获得更好的编程,让我们更详细地查看这些部分, NavigationBar()、 DashBoard()、 CalendarSpace(), 首先我们可以做导航栏部分
129 0
|
人工智能 数据可视化 图形学
Unity火爆插件Behavior Designer行为树插件学习
如果要让游戏里的角色或者NPC能执行预设的AI逻辑,最简单的用IF..ELSE...神器既可以实现, 但是再复杂的一般用经典的状态机来切换状态,但是写起来比较麻烦。相对的,行为树(Behavior Tree)理解和编辑起来就非常简单了。
|
搜索推荐 UED
MeeGo的UI个性化指南 - 介绍
介绍 本指南讲解了MeeGo中提供的关于用户体验(即UX)的个性化选项,并详细说明了该个性化选项的使用方法,从而使其达到最好的效果、实现真正的个性化,并且体现出程序开发者或各大OEM品牌的价值。 本指南详细介绍了以下几点自定义选项: 视觉效果 设备的使用体验 动态影像 声音 服务和插件的协调使...
910 0