SinatraでRESTアプリケーションを作成し、Redactorを固定します。 パート2

記事の最初の部分では、RESTアプリケーションを作成し、Redactor.js 1/3を構成しました。 本日、アップロードされた画像を管理するためのインターフェースを作成することで発明を完成させ、ファイルのダウンロードを提供します。 ファイルをダウンロードするとき、CarrierWaveは使用しませんが、通常のRubyパスを使用します。



ファイルをアップロードすることから始めましょう。 私はあなたが今そのようなinit.rbファイルを持っていると仮定します：

# coding: utf-8 require 'rubygems' require 'sinatra' require 'data_mapper' require 'carrierwave' require 'carrierwave/datamapper' require 'rmagick' require 'json' set :public_directory, './public' class ImageUploader < CarrierWave::Uploader::Base def store_dir 'uploads/images' end def extension_white_list %w(jpg jpeg gif png bmp) end include CarrierWave::RMagick version :thumb do process :resize_to_fill => [100,74] end storage :file end class Post include DataMapper::Resource property :id, Serial property :title, String property :body, Text end class UploadedImages include DataMapper::Resource property :id, Serial property :image, String property :thumb, String mount_uploader :file, ImageUploader end class UploadedFiles include DataMapper::Resource property :id, Serial property :name, String property :path, String end DataMapper.setup(:default, ENV['DATABASE_URL'] || 'sqlite:./db/base.db') DataMapper.finalize DataMapper.auto_upgrade! get '/' do 'REST   Sinatra <a href="/posts">  </a>' end #List posts get '/posts' do @posts = Post.all erb :'index' end #Create new Post get '/posts/new' do erb :'posts/new' end post '/posts/new' do params.delete 'submit' @post = Post.create(params) redirect '/posts' end #Edit post get '/posts/:id/edit' do @post = Post.get(params[:id]) erb :'posts/edit' end #Update post put '/posts/:id/edit' do post = Post.get(params[:id]) post.title = (params[:title]) post.body = (params[:body]) post.save redirect '/posts' end #Delete post get '/posts/:id/delete' do Post.get(params[:id]).destroy redirect '/posts' end post '/upload/image' do params[:file] filename = params[:file][:filename] file = params[:file][:tempfile] upload = UploadedImages.new upload.file = params[:file] upload.image = params[:image] = '/uploads/images/' + File.join(filename) upload.thumb = params[:thumb] = '/uploads/images/thumb_' + File.join(filename) upload.save @images = UploadedImages.all File.open("public/uploads/images/imageslist.json","w") do |f| f.write JSON.pretty_generate(@images) end '<img src="/uploads/images/' + File.join(filename) + '" />' end
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、public / uploadsディレクトリにfilesフォルダーを作成し、新しいUploadedFilesモデルを作成して、ファイルをアップロードするためのpostメソッドを追加します

 set :files, File.join(settings.public_directory, 'uploads/files') #   public  (set :public_directory, './public'     init.rb)     ,     class UploadedFiles include DataMapper::Resource property :id, Serial # property :name, String #   property :path, String #    end post '/upload/file' do params[:file] filename = params[:file][:filename] file = params[:file][:tempfile] ext = File.extname(filename) #     ,    ,     . if ext == ".doc" || ext == ".zip" || ext == ".dmg" #   3    doc, zip, dmg,        . File.open(File.join(settings.files, filename), 'wb') # -  upload_f = UploadedFiles.new #  UploadedFile    upload_f.name = params[:name] = File.join(filename) #  UploadedFiles  :name,      upload_f.path = params[:path] = '/uploads/files/' + File.join(filename) #  UploadedFiles  :path,       upload_f.save # '<a href="/uploads/files/' + File.join(filename) + '" />' + File.join(filename) + '</a>' #      end end
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイルをアップロードする方法をエディターに正確に伝え、layout.erbを開いて行を見つけます

 $('.redactor_1').redactor({toolbar: 'default', lang: 'ru', imageUpload: '/upload/image', imageGetJson: '/uploads/images/imageslist.json'});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

fileUpload設定を追加します。「/ upload / file」は次のようになります

 $('.redactor_1').redactor({toolbar: 'default', lang: 'ru', imageUpload: '/upload/image', fileUpload: '/upload/file', imageGetJson: '/uploads/images/imageslist.json'});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要なすべての設定を行いました。モデルの作成、ダウンロードしたファイルへのパスの設定、ファイルのダウンロード自体の実装、許可されたファイルのチェックを行いました。 ここで注意したいのは、ファイル拡張子が許可された拡張子と一致しない場合はエラーメッセージを実装することですが、2つのBUTがあります：最初に、Redactor.jsはフレーム内のすべてを行い、エラーメッセージが作成された場合、それが書き込まれます私の考えでは、gem sinatra-flashを介してエラーメッセージを実装しようとした場合、テキストエリアでは、これは良いアイデアではありません。エラーはページがリロードされた後にのみ表示されるためです。 さて、おそらくより経験豊富な人が掘る方法を教えてくれます。



それでは、ダウンロードした画像の管理を始めましょう。ダウンロードした画像をすべてリストし、削除するだけです。

init.rbに追加

 #init.rb #List UploadedImages get '/images' do @ uploadedimage = UploadedImages.all #         /images (     uploadedimage) erb :'images' # images.erb end #Delete UploadedImage get '/images/:id/delete' do #     ID UploadedImages.get(params[:id]).destroy # ( ,   - ,      !...) redirect '/images' #       end
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

viewsディレクトリにimages.erbファイルを作成します

 <strong><a href="/posts">   post'</a></strong> <h2>  </h2> <% @ uploadedimage.each do |uploadedimages| %> <a href="<%= uploadedimages.image %>"><img src="<%= uploadedimages.thumb %>"></a><br> #         <a href="/images/<%= uploadedimages.id %>/delete"></a><br><br> <% end %>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、アプリケーションは完成しました。 画像管理と同様に、ファイル管理も実行できます。 かなりうまくいったと思う。 これで終わりではありません。RubyとSinatraの研究を続けており、さらに記事があります。

Githubソースコード

PS：私が出会うどこでも

 <hh user=posts>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または

 <hh user=images>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

@variable_nameに置き換えるだけです