1 技术选型

  • Vue3 + TSX + Rails7

  • Vue3 + TSX的优点

    • 像使用React一样使用Vue3

    • 踩坑的乐趣

  • 缺点

    • 无法利用模板的性能优化： 静态提升、修补标记、树结构打平、加速SSR激活

  • 如何做技术选型

    • 要好招聘：提高程序员的可替代性

    • 要好用：自己用过或认识的人用过，反馈不错

    • 要有长期维护者：付费维护者>免费维护者>兼职维护者

    • 无利益冲突：华为、俄罗斯

2 项目架构

nginx Rails PostgreSql Vue3 Pinia axios

  • Ruby简易教程
    • Ruby的类
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

class User
  # 构造函数
  def initialize(name)
    # @name相当于this.name
    @name = name
  end
  
  def hi(target)
    # 控制塔打印可以使用p、print或puts
    # 双引号中可以插入表达式或变量
    p "hi, #{target}, I am #{@name}"
  end
end

# 函数参数的括号无论在声明时还是调用时都可以省略
u1 = User.new "gsq" 
u1.hi "zs"
  • Ruby数组
    • 需求：收集1-6之间的偶数
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# JS的思路
even_numbers = []
# 遍历时接受一个代码块
[1,2,3,4,5,6].each do |n|
  # even?是方法
  # if也可以写在句尾 省略end
  if n.even? 
    # 相当于even_numbers.push(n)
    even_numbers << n
  end
end
p even_numbers

# Ruby写法，使用select，省略do end，使用{}代码块
even_numbers = [1,2,3,4,5,6].select { |n| n.even? }

# &表示当前的值(同sass)，此时使用括号
even_numbers = [1,2,3,4,5,6].select(&:even?)

# 数组可以简写
even_numbers = (1..6).select(&:even?)

# 不创建新数组的写法
# select!只适用于数组，因此要先将range类型其转为数组
even_numbers = (1..6).to_a
# 叹号表示此操作将改变原数组
even_numbers.select!(&:even?)

3 docker搭建开发环境

git@github.com:GSemir0418/oh-my-env.git

  1. 安装最新版 Docker 客户端

  2. 打开 Docker 客户端的配置

    1. 找到 Docker Engine 选项卡，配置 registry-mirrors（自行搜索教程）

    Docker 镜像加速 | 菜鸟教程 (runoob.com)

    1
2
3
4

    "registry-mirrors": [
    "http://docker.mirrors.ustc.edu.cn",
    "https://62wvf5vn.mirror.aliyuncs.com"
]
    1. 找到 Resources 选项卡，配置 Proxies（可跳过）

  3. git clone git@github.com:GSemir0418/oh-my-env.git 将 oh-my-env 下载到本地

  4. 打开 Windows/Mac 的终端，运行 docker network create network1

  5. 打开 VSCode

    1. 安装 Remote - Container 插件
    2. 打开 oh-my-env 目录
    3. 输入 Ctrl + Shift + P，然后输入 Reopen，回车，等待

  6. 等上一步启动完毕之后，新建终端

    1. 运行 nvm use system 和 node --version 得到 node 运行环境
    2. 运行 rvm use 3 和 ruby --version 得到 ruby 运行环境
    3. 运行bundle --version检查bundle（相当于ruby中的npm）是否可用
    4. 运行irb（运行ruby的学习环境）

4 创建项目

  • 配置gem和bundle国内源

    • gem是封装起来的Ruby应用程序或代码库，相当于nodejs的package，对应的文件是Gemfile

    • bundle是用来管理项目中所有的gem依赖，相当于nodejs的npm

1
2

$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ bundle config mirror.https://rubygems.org https://gems.ruby-china.com
  • 安装rails及postgresql的驱动
1
2

$ gem install rails -v 7.0.2.3
$ pacman -S postgresql-libs
  • 在repos目录下创建rails项目
1
2
3
4
5
6
7
8

$ cd ~/repos
// 仅使用api模式，指定数据库，忽略测试（后面自己配），指定项目名称
$ rails new --api --database=postgresql --skip-test mangosteen-1
$ code mangosteen-1
// 新建终端
$ bundle exe rails server
// server可简写为s
// 也可以 /bin/rails s 来启动服务
  • 启动数据库容器
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

在宿主机中创建并启动数据库容器
docker run -d \
		容器名称
    --name db-for-mangosteen \
    环境变量
    -e POSTGRES_USER=mangosteen \
    -e POSTGRES_PASSWORD=123456 \
    -e POSTGRES_DB=mangosteen_dev \
    -e PGDATA=/var/lib/postgresql/data/pgdata \
    新增数据卷
    -v mangosteen-data:/var/lib/postgresql/data \
    指定网络 与rails容器在同一网络下 此时容器的名称就可以作为ip地址供rails访问
    --network=network1 \
    镜像名称 版本14
    postgres:14
    
供复制：
docker run -d      --name db-for-mangosteen      -e POSTGRES_USER=mangosteen      -e POSTGRES_PASSWORD=123456      -e POSTGRES_DB=mangosteen_dev      -e PGDATA=/var/lib/postgresql/data/pgdata      -v mangosteen-data:/var/lib/postgresql/data      --network=network1      postgres:14
  • 连接数据库
1
2
3
4
5
6
7

# 修改config/database.yaml
development:
  <<: *default
  database: mangosteen_dev
  username: mangosteen
  password: 123456
  host: db-for-mangosteen

5 后端开发

  • 设计数据库的两种思路

    • 自上而下：先想大概，再添细节

    • 自下而上：用到什么加什么

    • 两种思路可以混合

  • 工具

    • 建模工具：bin/rails g model user email:string name:string

      • 生成app/model/user.rb

      • 1
2

        class User < ApplicationRecord
end

      • 生成db/migrate/create_users.rb作为数据库操作工具（ActiveRecord::Migration ）只需写好其change方法即可

      •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

        class CreateUsers < ActiveRecord::Migration[7.0]
  def change
    create_table :users do |t|
      t.string :email
      t.string :name

      t.timestamps
      # 相当于
      # createTable('users', (api)=>{
      # 	api.string('email')
      # })
    end
  end
end

    • 同步到数据库：bin/rails db:migrate

    • 反悔命令：bin/rails db:rollback step=1

  • 尝试实现创建user的功能

    • 编写路由：config/routes.rb，指定controller

    • 1
2
3
4
5
6

      Rails.application.routes.draw do
  get '/users/:id', to: 'users#show'
  post '/users/', to: 'users#create'
  # 相当于 post('users', { to: 'users#create' })
  # to属性的值表示该路由对应哪一个controller中的哪一个方法
end

  • 创建Controller

    • 脚手架：bin/rails g controller users show create，同时会自动生成routes相关内容，删掉即可

    • 生成 app/controllers/users_controller.rb ，编写show和create方法具体实现

    • 1
2
3
4
5
6
7
8

      class UsersController < ApplicationController
  def show
    p '访问了show'
  end
  def create
    p '访问了create'
  end
end

    • 使用curl命令测试get和post接口，记得重启项目

    • 1
2

      curl -X POST http://127.0.0.1:3000/users
curl GET http://127.0.0.1:3000/users/1

  • 创建用户并验证

    • app/controllers/users_controller.rb

    • 1
2
3
4
5
6
7
8
9

      def create
  u1 = User.new email: 'gsq@xxx.com', name: 'gsq'
  if u1.save
    # 输出JSON视图
    render json:u1
  else
    render json:u1.errors
  end
 end

    • app/model/user.rb 在model中实现验证

    • 1
2
3

      class User < ApplicationRecord
    validates :email, presence: true
end