操作系统:
OS X操作系统或者Ubuntu12.04操作系统(desktop版本)
相关软件(Ubuntu系统下面):
RVM:ruby版本控制工具
Ruby:2.3.0版本
Rails:4.2.6版本
#下面的数据库两者选择其一
SQLite:最新版本
MySQL:5.5版本及以上
Git:版本控制工具
Java:1.8版本 #因为文件搜索需要用到Java环境
使用git或者github进行代码协作
#和jayzen进行协作,开发项目
git clone 项目地址(https和ssh两种形式)
#也可以直接在master分支上操作
git checkout -b dev origin/dev #本地生产远程库中的dev分支,默认只有master分支
#保持和远程库代码的实时更新
git pull #只对目前所处的分支有效
#本地的文件修改和添加
git add . #添加所有的修改到暂存区
git commit -m "first commit" #将暂存区内容添加到仓库
git push origin dev #提交到远程库的dev分支上
拷贝代码到本地的后续工作
#到本地文件夹下面
bundle install #安装gem
rake db:migrate #生成数据库
rake db:seed #生成数据内容
rails g sunspot_rails:install #安装sunspot
#每次启动之前需要执行下面两个步骤
rake sunspot:solr:start #启动solr
rake sunspot:reindex #重新建立索引
rails s #启动服务器
httt://localhost:3000 #访问服务器
操作前端代码
#寻找前端页面的文件
1.html文件位置app/views文件夹内,文件名称后缀为html.erb
2.css文件位置app/assets文件夹内,该文件夹有三个文件
image #放置图片
javascript #放置js代码
stylesheet #放置css代码,后缀为scss
#操作前端代码
1.一般情况下,可以认为view下有几个文件夹,就是有几个资源,比如article,但是有例外,比如layout。
2.以资源article为例,参考浏览器中的链接内容:
/articles => articles/index.html.erb
/articles/1 => articles/show.html.erb
/articles/new => articles/new.html.erb
/articles/1/edit =>articles/edit.html.erb
3.指向root资源
如果http://localhost:3000有结果,说明程序指定了主页
查找config/routes.rb文件,出现下面语句
root ‘home#index’ #说明主页为home/index.html.erb
4.抽取一个可以被重复使用的页面
比如新建表格和更新表格需要使用同一个表单格式,可以将这个表单独立出来形成文件:
文件格式需要下划线形式:_form.html.erb
#如果引用文件和被引用文件在同一个文件目录中,在引用文件中写入:
<%= render 'form' %>
#如果两个文件不在同一个目录中,index.html.erb在articles文件中,_form.html.erb在layout文件中,在引用文件中写入:
<%= layout/form %>
#理解index.html.erb代码中内容
说明:ruby代码呈现在html文件中,需要添加标签<% ruby代码 %>
如果ruby语句表示判断,只要添加<% ruby代码 %>即可。
如果ruby语句需要呈现在前端,需要添加<%= ruby代码 %>
#rails中的css文件如何修饰html文件
1.rails会智能将stylesheet文件中的css文件合并到application.css文件中
2.rails也会智能将view文件中的html文件合并到application.html.erb文件中
3.rails会智能认为application.css修饰application.html.erb文件,所以不需要特意进行制定。
4.如果要修饰articles/index.html.erb文件,可以在stylesheet文件夹中新建任意文件名的文件,比如demo.scss,文件中的样式对index.html.erb有效。
使用bootstrap框架
#gemfile中添加gem
gem 'bootstrap-sass'
#注意每次在gem中添加内容,都需要终端执行bundle install
#定义自定义的custom.css.scss,文件格式不能错
#如上文件中,添加如下代码,这两行代码会引入bootstrap框架
@import "bootstrap-sprockets";
@import "bootstrap";
#下拉框生效
#application.js中引入bootstrap的javascript库
//= require bootstrap
网友评论