yngzij

老哥们,通过 npm 导入 backbone 不工作是我哪里错了吗?

yngzij — Thu, 20 Jan 2022 20:09:55 +0800

这个 package.json 文件依赖

"dependencies": {
    "@rails/webpacker": "5.4.3",
    "backbone": "^1.4.0",
    "jquery": "^3.6.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": {

已经在 application.js 中导入了 Backbone

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails

import './index.css'

import jQuery from "jquery";

window.jQuery = jQuery;
window.$ = jQuery;

window.Backbone = require("backbone");
window._ = require("underscore");

var AppView = Backbone.View.extend({
    el: "body",
    events: {
        "click #box": "click"
    },
    initialize() {
        alert('init')
    },
    click(e) {
        alert('click')
    },
})
var appView = new AppView()

在 html 中点击没有作用

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_pack_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_pack_tag "application", defer: false %>
</head>
<body>

<div id="box">
  box
</div>
<%= yield %>
</body>
</html>

从零学习 Rails 记录 (第二天)

yngzij — Thu, 24 Aug 2017 23:32:13 +0800

学习 rails 的第二天，一步一步来嘛!!!

添加第二个关联 Model

生成 Model rails generate model Comment commenter:string body:text article:references 这里 comment 和 Comment 生成 Model 一样的
迁移到数据库 rails db:migrate
在文章路由下添加子路由
生成 Controller

在 View 中添加评论功能，其中关键的就是这一段代码了

 <%= form_for([@work, @work.comments.build]) do |f| %>
  <p>
    <%= f.label :commenter %><br>
    <%= f.text_field :commenter %>
  </p>
  <p>
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </p>
  <p>
    <%= f.submit %>
  </p>
<% end %>

再看看对应的 Controller 方法

def show
  @work=Work.find params[:id]
end
def create
 @work=Work.new work_params
 if @work.save
    redirect_to @work
else 
    render 'new'
  end
end

show 方法在 create 成功保存后在 create 方法中重定向调用，显示创建的@work对象数据。
redirect_to 把自己创建好的 work 对象发送给 show 方法，show 方法通过 id 查找到相应的 work 对象
<%= form_for([@work, @work.comments.build]) do |f| %> 因为 create 的路由是 post /works/:work_id/comments(.:format) 评论需要嵌套在文章中，@work 是在 controller 中查找到的对象，在@work model 中用 has_many 关联了，所以能在@work.comments.build 可以用
如果保存不成功 ,在 new 界面显示错误

** 这里 render ,link_to, redirect_to ** 三者的区别

link_to 在网站上生成超链接的代码用于 view 中连接到其他路由
render 将指定视图作为响应，这里在没有保存成功 ,render 到'new' 在 new.html.erb 中会将@work错误中的错误显示出来，因为在同一个方法中，显示的就是本方法中的@wrok，而且 render 还能导入代码。
redirect_to 重定向，将浏览器重定向到指定的目标，为什么 @work 就是 show 页 @work 不是在 create 方法中创建的一个对象吗？难道因为路由是 work GET /works/:id(.:format) works/show 吗这里自己的理解也不好，百度了好多也是模模糊糊的

显示评论

代码位置 app/views/articles/show.html.erb

<h2>Comments</h2>
<% @work.comments.each do |comment| %>
  <p>
    <strong>Commenter:</strong>
    <%= comment.commenter %>
  </p>

  <p>
    <strong>Comment:</strong>
    <%= comment.body %>
  </p>
<% end %>

将 Controller 中找到的@work中的 comments 模型内容显示出来，demo 在 (https://github.com/yngzij/rails-) 希望对后来的朋友有帮助

安装和生成框架就算完了其他重构，验证什么的都很容易理解，redirect_to 和 render 谢谢朋友能解释下 a
create 后 redirect_to @work 定向到 show 页面，显示的是 new 中创建的数据，那 show 是怎么获取到的呀

从零学习 Rails 记录 (第一天)

yngzij — Thu, 24 Aug 2017 01:10:41 +0800

第一次发文，都是 (https://ruby-china.github.io/rails-guides/v4.1/getting_started.html) 的教程自己总结，需要大家的鼓励嘞，话不多少，直接开始，都是个人的理解，不对的地方谢谢朋友指出来 ,使用@huacnlee 老师的方法，谢谢老师。

首先 rails 使用的是 M(Model) V(View) C(controller) 架构，简单一点 Model 也就是一个数据结构，并且可以在 Model 中限制数据的格式，Controller 就是在路由发送请求，你去帮路由处理的方法，我觉得可以理解为 View 的后台吧，View 就是显示的视图 ,Model 可以和 Controller 直接通信，View 可以和 Controller 直接通信。

route 的请求一般常见的就是 post 请求，用于发送数据，比如登陆，get 请求一般是页面的跳转，在网站名中可以看到 get 请求会带有路径，还有 delete,put。

rails new first_app 会自动帮你生成一个框架，也就是创建一个 rails 项目，项目的名字为 first_app，今天用到了 app 目录下的 contrellor, view,model。cd 到项目目录运行rails server就能看到服务器已经启动了，如果不能启动（使用 linux 的朋友可以用 nohup rails s & ）后台运行，我开始是 nodejs 没有安装后来一次错误是默认的 3000 号端口被占用了。

生成路由

rails generate controller Welcome index 会在首先会在 app/controllers/welcome_controller.rb 中为你生成一个 index 路由，也会在 app/Views/welcome 中自动生成一个 index.html.erb 的 view 视图文件，因为你的 controller 中只有 index 这个方法，所用你只能通过 config/routes.rb 中的 get 'welcome/index' 访问 index 这个 view localhost:3000/welcome/index如果你想添加其他的路径，不但需要在 controllor 中添加方法，还需要在 view 中为这个方法创建一个同名的 view 视图文件。应为没有添加任何数据，所以不关 model 什么事。

CRUD 操作

在 config/routes 中添加 resources :works 会自动生成路由你可以通过 rails routes 查看生成的路由 注意仅仅只是生成了路由 controller view 都没有 所以你必须手动生成 Controller rails generate controller works 可以看到生成了 works 的 views 文件夹和 works_controller.rb 控制器现在 localhost:3000/works 还是打不开因为你 works_controler.rb 中有 index 的方法吗？你的 app/views/works/目录下也没有 index.html.erb 的 view 文件吧。你在 rails routes 中所有看到的请求路径都需要自己手动添加方法和创建 view 视图

注意

你在 rails routes 中看到的 works#index 目录是 works 也就是说 works_path 就是他的路径
post 路径是不可以打开的

创建表单

在 new.html.erb 下源代码如下：

<%= form_for :list do |f| %>
  <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </p>
  <p>
    <%= f.label :text %><br>
    <%= f.text_area :text %>
  </p>

  <p>
    <%= f.submit %>
  </p>
<% end %>

其中 list 是一个重要的参数，保存着 text 框中输入的数据，那么问题来了发送到哪嘞 <%= form_for :list, url:works_path do |f| %> url 后就是发送的目标注意是发送给 works 的 post 请求，也就是 works/create 他是没有视图的，但是必须要在 controller 中给他创建一个 create 方法，这个时候，要保存数据，就需要使用 Model 了。

Model

前面说了 Model 类似数据结构，用来声明存储数据的类型。

首先创建一个 Model rails generate model Work title:string text:text 两个存储文本的对象
迁移数据 rails db:migrate 就是在数据库中声明同样的表，假如写错了可以 rails rollback 取消上次的迁移操作

存储

在 app/controller/works_controller.rb 中

 def create
@work=Work.new(params.require(:list).permit(:title, :text)) 
  @work.save
  redirect_to @work
end

如果用 @lis =Work.new(params[:article]) 会出错必须设置能通过的白名单 title 和 text 就类似防火墙的机制吧问下大神是不是 Moel 必须和对应的 Controller 名相同，比如是 Work 和 works，我之前 Model 用 List 一直报错 redirect_to 找不到路径

这里 list 就是上文 view 中的 list 用 post 的方式发送给 create 注意 works 有一个 get 的 index 和 post 的 create 请求，接收到数据后 index/X 显示

def show
    @work=Work.find(params[:id])
  end

当然还有在 app/views/works/下面创建 show.html.erb 的视图啦

Moel 的使用

可以在 app/models 下找到对应的文件设置，一般有不能设置为空，字符长度的限制。

小结

如果 Model 和 Controller 名不同，在 New 界面填写后不能跳转到 index 界面有找不到路径的错误。
f.text_area 是固定的参数吗？
在/confog/routes.rb 下面设置 root 路径格式 root 'works#new'