Rails开发某个单一功能流程
- 更新项目到最新状态：git pull
- 切换开发分支
- 按照MVC划分各操作步骤。
创建和切换到我的开发分支
git branch dev-hw
git checkout dev-hw
Model
切换到项目更目录下，创建Model
rails g model ParamValueOption bad_values:text part_names:text color_values:text size_values:text
修改我们的迁移文件
#db/migrate/20190526022622_create_param_value_options.rb
class CreateParamValueOptions < ActiveRecord::Migration[5.1]
def change
create_table :param_value_options do |t|
t.text :bad_values, comment: '不良品原因选项'
t.text :part_names, comment: '工部名称选项'
t.text :color_values, comment: '颜色值选项'
t.text :size_values, comment: '衣服尺寸选项'
t.timestamps
end
end
end
执行数据迁移
#主要会执行这两条命令，一个是执行全部，一个单次回滚，便于修改数据库迁移内容
rails db:migrate
rails db:rollback #如果需要修改迁移文件内容，先执行这条命令。
到此我们就完成了model的表的创建，还需要对表对应的类：ParamValueOption进行修改
对应的Model类的修改
- 根据业务需要，表里面目前只用保存一条记录，为了方便查询，增加一个类方法:current
class ParamValueOption < ApplicationRecord
attr_accessor(
:color_values_text_area,
:size_values_text_area,
:part_names_text_area,
:bad_values_text_area
)
serialize :color_values, Array
serialize :size_values, Array
serialize :part_names, Array
serialize :bad_values, Array
def self.current
self.first || self.create(color_values: ['黑色', '白色', '红色', '蓝色', '绿色'],
size_values: ['S', 'M', 'L', 'XL', 'XXL'],
part_names: ['门襟', '领子', '袖子', '里布' , '花边'],
bad_values: ['不直', '起皱', '大小', '不对称', '不顺'])
end
def color_values_text_area
(color_values || []).join("\n")
end
def size_values_text_area
(size_values || []).join("\n")
end
def part_names_text_area
(part_names || []).join("\n")
end
def bad_values_text_area
(bad_values || []).join("\n")
end
现在model基本能用了，需要在后台给用户提供查看和编辑的页面。因为之前已经有了个SettingsController, 这个功能只有查看和修改功能，考虑在Settings下增加对应的逻辑控制，在index页面通过ajax提交。
Controller和View
- 在SettingController下新增一个接收提交的ParamValueOption数据的方法：updateoptions
def updateoptions
if @param_value_option.update(param_value_options)
render js: "alert('#{t('常用.修改成功')}');"
else
render js: "alert('#{t('常用.发生错误')}');"
end
end
private
def param_value_options
params.require(:param_value_option).permit(
).merge(
color_values: (params[:param_value_option][:color_values_text_area] || '').split("\n").uniq.delete_if {|x| x == ''},
size_values: (params[:param_value_option][:size_values_text_area] || '').split("\n").uniq.delete_if {|x| x == ''},
part_names: (params[:param_value_option][:part_names_text_area] || '').split("\n").uniq.delete_if {|x| x == ''},
bad_values: (params[:param_value_option][:bad_values_text_area] || '').split("\n").uniq.delete_if {|x| x == ''}
)
end
- 修改view页面index，增加form表单
#_form.html.slim
.ui.segment.form
= form_for @param_value_option, url: updateoptions_v1_admin_panel_settings_path, remote: true do |f|
.four.fields
.required.field
label = StyleItem.human_attribute_name :color_values
= f.text_area :color_values_text_area, placeholder: "1...\n2...\n3..."
.required.field
label = StyleItem.human_attribute_name :size_values
= f.text_area :size_values_text_area, placeholder: "1...\n2...\n3..."
.required.field
label = StyleItem.human_attribute_name :part_names
= f.text_area :part_names_text_area, placeholder: "1...\n2...\n3..."
.required.field
label = StyleItem.human_attribute_name :bad_values
= f.text_area :bad_values_text_area, placeholder: "1...\n2...\n3..."
= render 'form_submit_button', item: @param_value_option
- 路由也要增加
resources :settings, only: [:index] do
collection do
patch :updateoptions
post :updateoptions
end
end
完成了上面的mvc和routes，现在已经可以修改了
根据实际情况，对样式做了些调整，不在详细说明，本例采用了https://semantic-ui.com/
在其他view页面中调用ParamValueOption
可以直接在view中通过ParamValueOption.current调用,所有不用修改对应的controller。
- 增加一个选择按钮，点击按钮弹出多选页面。
a.ui.teal.button onclick="select_options('style_item_color_values_text_area', #{ParamValueOption.current.color_values})"
= t('v1.page.admin_panel.actions.select')
modal的html代码
.ui.modal
.header= t('v1.page.admin_panel.actions.select')
.content.ui.form
.inline.fields id='all_options'
.actions
.ui.cancel.button
= t('v1.page.admin_panel.actions.cancel')
.ui.positive.right.labeled.icon.approve.button
= t('v1.page.admin_panel.actions.approve')
i.checkmark.icon
Javascript代码
- 获取当前textarea里面的值
- 和系统参数值合并，去重复
- 原来textarea的checkbox显示为选中。
- 显示modal， 由用户选择。
- 用户确认回调：获取checkbox对应的label里面的值。
- 组合成新的值赋值给 原textarea
javascript:
function select_options(text_area_id, sys_options) {
var current_options = $('#'+text_area_id).val();
var current_array = current_options.split('\n');
var new_options = $.merge(sys_options, current_array);
var checkbox_name = text_area_id+'[]';
$('#all_options').html('');
$.each(unique(new_options), function(index, value) {
if($.inArray(value, current_array) !== -1) {
var input = $("<input/>", {type: 'checkbox', name: checkbox_name , tabindex: index, checked: 'checked'});
} else {
var input = $("<input/>", {type: 'checkbox', name: checkbox_name , tabindex: index});
}
var label = $("<label>").text(value);
var ui = $("<div/>", {class: 'ui checkbox'});
var field = $("<div/>", {class: 'field'});
ui.append(input);
ui.append(label);
field.append(ui)
$('#all_options').append(field);
});
$('.ui.modal')
.modal({
onApprove : function() {
var text_options = $("input[name='"+checkbox_name+"']:checked").map(function(){
return $(this).parent().text().trim();
}).get().join('\n');
$('#'+text_area_id).val(text_options);
}
})
.modal('show');
}
function unique(array){
return array.filter(function(el, index, arr) {
return index === arr.indexOf(el);
});
}
javascript注意事项val() 和text()：
#注意一下两行的区别
var current_options = $(text_area_id).val();
var current_options = $(text_area_id).text();
#合并后的结果也赋值给了：curArray
var newArray = $.merge(curArray, [1,2]);
