Rails 实战——图书管理系统——基础建设

目标

搭建 rails 项目的基础

注意两个 “+….” 符号中间的代码,是新增代码

1、确认操作环境

进入终端页面

ruby -v
#=> ruby 2.3.1p112

rails -v
#=> Rails 5.1.4

常用终端指令

git status  # 查看 git 状态
rake routes # 查看路由

2、建立 Rails 专案

rails new library01
cd library01
git init
git add .
git commit -m "First Commit"

2.1 安装 Mysql 数据库

git checkout -b ch01
# 建立新分支

修改 Gemfile 文件

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.4'
- # Use sqlite3 as the database for Active Record
- gem 'sqlite3'
+ # Use mysql2 as the database for Active Record
+ gem 'mysql2'

2.2 修改数据库配置文件

文件 config/database.yml 修改为下面形式

development:
  adapter: mysql2       #数据库类型
  database: rails01     #数据库名字(需要修改)
  username: root        #用户名
  password:             #用户密码
  host: localhost       #ip地址


production:
  adapter: mysql2
  database: rails01
  username: root
  password:
  host: localhost
# 启动 Mysql 数据库
mysql.server start

# 建立数据库
rake db:create

git status
git add .
git commit -m "install mysql"

3、建立 Welcome 页面

在文件 config/routes.rb 添加 welcome 页面路由

Rails.application.routes.draw do
  root 'welcome#index' # 确定首页路由
end

新建文件 touch app/controllers/welcome_controller.rb

class WelcomeController < ApplicationController
  def index
  end
end

新建文件夹 mkdir app/views/welcome
新建文件 touch app/views/welcome/index.html.erb

<h1>Hello World</h1>

再开一个终端页面,执行 rails s
打开 http://localhost:3000 页面

git add .
git commit -m "implement welcome#html"

4、布置网站样式

4.1 将 Bootstrap 的 CSS 套件装进专案里面

Gemfile

+ gem 'bootstrap-sass'

group :development, :test do

修改文件名,终端输入

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

然后修改 app/assets/stylesheets/application.scss 档案,在最后加入以下两行

/*
 * ...(一堆注解)
 *= require_tree .
 *= require_self
 */

+ @import "bootstrap-sprockets";
+ @import "bootstrap";

将变更 commit 进 git 里面
git add .
git commit -m "add bootstrap to project"

4.2 修改 Views 样式

修改文件 app/views/layouts/application.html.erb

  <head>
-   <title>Rails05</title>
+   <title>图书管理系统</title>

  <body>
-   <%= yield %>
+......
    <div class="container-fluid">
      <%= render "common/navbar" %>
      <%= yield %>
    </div>
    <%#= render "common/footer" %>
+......   
  </body>

4.3新增 navbar

新增 app/views/common 资料夹
mkdir app/views/common

新增 navbar 导航栏
touch app/views/common/_navbar.html.erb

填入 app/views/common/_navbar.html.erb

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class=
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值