हम Sinatra पर एक REST एप्लीकेशन लिखते हैं और Redactor को फास्ट करते हैं। भाग 1

यह लेख मुख्य रूप से शुरुआती लोगों के लिए है जो सिर्फ रूबी सीखना शुरू कर रहे हैं। इस अद्भुत भाषा का अध्ययन करने के 3 सप्ताह के बाद, कुछ ज्ञान जमा हो गया है जिसे मैं साझा करना चाहता हूं।

सिनात्रा रूबी में लिखा गया एक स्वतंत्र और खुला स्रोत सॉफ्टवेयर ढांचा है जो वेब अनुप्रयोगों को विकसित करने के लिए बनाया गया है। ( en.wikipedia.org )

Redactor - काफी शक्तिशाली और एक ही समय में सरल और सुंदर wysiwyg संपादक का उपयोग करने के लिए ( Habré के लिए लिंक )

तो चलिए शुरू करते है!
संभवतः आपके पास पहले से ही रूबी और SQLite स्थापित है।
चूंकि लेख का मुख्य बिंदु Redactor को बन्धन करने का एक प्रयास है, जहां छवियों के थंबनेल का उपयोग उन छवियों का चयन करने के लिए किया जाता है जो पहले से लोड किए गए हैं, हम छवियों के साथ काम करने के लिए Rmagick स्थापित करेंगे। ओएस एक्स काफी सरल रूप से स्थापित करता है

curl https://raw.github.com/maddox/magick-installer/master/magick-installer.sh | sh 

अब आपको अतिरिक्त रत्न स्थापित करने की आवश्यकता है।

 [sudo] gem install sinatra data_mapper carrierwave carrierwave/datamapper json shotgun 

sintra - ढांचा ही
data_mapper - ORM
वाहक - मणि डाउनलोड करने के लिए मणि (हैबे पर एक लेख में प्रयुक्त)
वाहकमव / डाटामॅपर - डाटामैपर और कैरियरवे को जोड़ने के लिए
json - JSON प्रारूप में डेटा उत्पन्न करने के लिए

आवश्यक रत्न स्थापित किए गए हैं, अब संपादक redactorjs.com/ru/download डाउनलोड करें

कोड लिखते हैं:
शैली के क्लासिक्स

 # coding: utf-8 require 'sinatra' get '/' do 'REST   Sinatra <a href="/posts">  </a>' end 

init.rb नाम से उदाहरण के लिए सहेजें और शॉटगन init.rb एप्लिकेशन को चलाएं
हम पते पर जाएंगे http://127.0.0.1:9393/


आपने / पोस्ट लिंक पर ध्यान दिया है, अब हम इस पर काम करने जा रहे हैं।
पहली चीज जो हमें करने की ज़रूरत है वह है रत्न हम आवेदन में सेट करें।

 #init.rb # coding: utf-8 require 'rubygems' require 'sinatra' require 'data_mapper' require 'carrierwave' require 'carrierwave/datamapper' require 'rmagick' require 'json' 

सार्वजनिक फ़ोल्डर को js स्क्रिप्ट के साथ सेट करें और जहाँ हम चित्र अपलोड करेंगे (आमतौर पर सीएसएस फ़ाइलें, पृष्ठ लेआउट चित्र इस फ़ोल्डर में रखे गए हैं)

 set :public_directory, './public' 

और तुरंत इसमें js फोल्डर बनाएं और वहां पहले से डाउनलोड किए गए एडिटर को कॉपी करें

इसके बाद, हम अपना पोस्ट मॉडल लिखेंगे

 #init.rb class Post include DataMapper::Resource property :id, Serial # property :title, String #String   ,   title    ""     50  property :body, Text #Text   ,   body    ""  65535  end 

हमारी init.rb फ़ाइल के साथ रूट में db फ़ोल्डर बनाएँ
डेटाबेस सेट करें

 #init.rb DataMapper.setup(:default, ENV['DATABASE_URL'] || 'sqlite:./db/base.db') #     DataMapper.finalize #  DataMapper.auto_upgrade! #          

चलिए / पोस्ट के लिए रूटिंग रजिस्टर करते हैं

 #init.rb #   get '/posts' do #   /posts @posts = Post.all #  @posts        Post erb :'index' #    index.erb* end 

* सिनात्रा डिफ़ॉल्ट रूप से एरब टेंपलेटिंग इंजन का उपयोग करता है - एरूबिस

अब आइए अपने init.rb फ़ाइल के साथ रूट में व्यू फ़ोल्डर बनाएं, फिर से, डिफ़ॉल्ट रूप से, सिनात्रा व्यू फ़ोल्डर में टेम्प्लेट की तलाश करता है। इस index.erb फ़ोल्डर में निम्नलिखित सामग्री बनाएँ:

 #index.erb <strong><a href="/posts/new">  </a></strong> <h2>  </h2> <% @posts.each do |post| %> <strong><a href="/posts/<%= post.id %>/edit"><%= post.title %></a></strong><br> <%= post.body %><br> <% end %> 

आइए कुछ बिंदुओं का विश्लेषण करें:
याद रखें, आप और मैं '/' पदों के लिए चर @posts = Post.all सेट करते हैं? तो, निर्माण के साथ <% @ posts.each करते हैं | पोस्ट | %> ....... <% अंत%> हम डेटाबेस में उपलब्ध सभी पदों के लिए सरणी में देख रहे हैं।
/ पोस्ट / <% = post.id%> / संपादित करें - किसी पोस्ट को संपादित करने के लिए लिंक, हम उनकी आईडी के माध्यम से पोस्ट एक्सेस करेंगे
<% = post.title%> - टेम्पलेट में पोस्ट शीर्षक प्रदर्शित करें
<% = post.body%> - टेम्पलेट में पोस्ट बॉडी प्रदर्शित करें

अब हमें सभी पृष्ठों के लिए एक सामान्य टेम्पलेट बनाने की आवश्यकता है, जहां हम सभी उपयोगकर्ता सीएसएस और जेएस को जोड़ेंगे। व्यू फ़ोल्डर में एक लेआउट.बर्ब ​​फ़ाइल बनाएँ और थोड़ा आगे चलाएं, एक ही डायरेक्टरी में एक पोस्ट फ़ोल्डर बनाएँ और इसमें 2 फाइलें edit.erb और new.erb। अब आवेदन की संरचना इस प्रकार होनी चाहिए:

 #layout.erb <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Redactor.js + Sinatra app</title> </head> <body> <%= yield %> </body> </html> 

<% = उपज%> - इसके बजाय, हमारे द्वारा बनाए गए विभिन्न टेम्पलेट प्रदर्शित किए जाएंगे - index.erb, new.erb, edit.bb

अब हमें काम करने के लिए लिंक / पोस्ट / नया चाहिए
Init.rb में जोड़ें

 #init.rb #Create new Post get '/posts/new' do #     erb :'posts/new' #  /posts/new.erb end post '/posts/new' do params.delete 'submit' @post = Post.create(params) # ,        Post redirect '/posts' #      end 

और हम विचार / पोस्ट / new.erb में जोड़ते हैं

 #new.erb <h3></h3> <form method="post" action="/posts/new"> <label for="title"><strong>:</strong></label><br> <input id="title" type="text" name="title" value="" style="width: 250px;"> <br> <label for="body"><strong> :</strong></label><br> <textarea id="body" name="body" style="height: 250px;"></textarea> <br> <input type="submit" name="submit" value=""> </form> 

हम "नया पृष्ठ बनाएँ" लिंक का अनुसरण करते हैं

डेटा जोड़ें, "बनाएं" बटन पर क्लिक करें, पोस्ट बनाई गई है।

अब पृष्ठों को संपादित करने और हटाने के लिए कुछ कोड जोड़ें।

 #init.rb #Edit post get '/posts/:id/edit' do #   ,       id @post = Post.get(params[:id]) #  @post      id  erb :'posts/edit' #  /posts/edit.erb 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 

विचार / पोस्ट / edit.erb संपादित करें

 #edit.erb <h3></h3> <a href="/posts/<%= @post.id %>/delete"> </a><br><br> <form action="/posts/<%= @post.id %>/edit" method="post"> <input name="_method" type="hidden" value="put" /> <label for="title"><strong>:</strong></label><br> <input type="text" name="title" id="title" value="<%= @post.title %>"> <br> <label for="body"><strong> :</strong></label><br> <textarea id="body" name="body" style="height: 250px;"><%= @post.body %></textarea> <br> <input id="post_submit" name="commit" type="submit" value=""> </form> 

वास्तव में, आवेदन का उपयोग करने के लिए तैयार है, अब लेख के दूसरे भाग के बारे में, यह टेक्टेरा के लिए रीडैक्टोर पेंच है

पहले इसे कनेक्ट करें। ओपन व्यू / लेआउट.बीआरबी, के बाद जोड़ें

 #layout.erb <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/js/redactor/redactor.js"></script> <link rel="stylesheet" href="/js/redactor/css/redactor.css" type="text/css"> 

अब इसे सेट करते हैं (आप यहां सेटिंग के बारे में अधिक पढ़ सकते हैं)।

 #layout.erb <script type="text/javascript"> $(document).ready(function() { $('.redactor_1').redactor({toolbar: 'default', lang: 'ru', imageUpload: '/upload/image', imageGetJson: '/uploads/images/imageslist.json'}); }); </script> 

$ ('। redactor_1') - संपादक को redactor_1 नाम से पुकारते हैं
टूलबार: 'डिफ़ॉल्ट' - सभी बटन के साथ मानक टूलबार सेट करें
लैंग: 'आरयू' - रूसी भाषा स्थापित करें
imageUpload: '/ upload / image' - यह है कि हम कैसे इमेज अपलोड करेंगे
imageGetJson: '/uploads/images/imageslist.json' - इस तरह से हमें एक पूर्वावलोकन और पहले से डाउनलोड की गई छवियों की एक सूची मिलेगी।

अब हम textarea के लिए संपादक को बुलाते हैं, इसके लिए हम विचार / पोस्ट / new.erb और विचार / पोस्ट / edit.erb खोलते हैं और वर्ग वर्ग = "redactor_1" जोड़ते हैं। उदाहरण के लिए, new.erb को अब इस तरह दिखना चाहिए:

 #new.erb <h3></h3> <form method="post" action="/posts/new"> <label for="title"><strong>:</strong></label><br> <input id="title" type="text" name="title" value="" style="width: 250px;"> <br> <label for="body"><strong> :</strong></label><br> <textarea id="body" class="redactor_1" name="body" style="height: 250px;"></textarea> <br> <input type="submit" name="submit" value=""> </form> 

और इस तरह edit.erb:

 #edit.erb <h3></h3> <a href="/posts/<%= @post.id %>/delete"> </a><br><br> <form action="/posts/<%= @post.id %>/edit" method="post"> <input name="_method" type="hidden" value="put" /> <label for="title"><strong>:</strong></label><br> <input type="text" name="title" id="title" value="<%= @post.title %>"> <br> <label for="body"><strong> :</strong></label><br> <textarea id="body" class="redactor_1" name="body" style="height: 250px;"><%= @post.body %></textarea> <br> <input id="post_submit" name="commit" type="submit" value=""> </form> 

सार्वजनिक फ़ोल्डर में चित्र फ़ोल्डर में अपलोड फ़ोल्डर बनाएँ। निर्देशिका संरचना सार्वजनिक / अपलोड / चित्र है।
अब हम रत्न वाहक के माध्यम से छवि लोडिंग को लागू करते हैं। Init.rb कॉन्फ़िगर करें:

 #init.rb class ImageUploader < CarrierWave::Uploader::Base def store_dir 'uploads/images' #     end def extension_white_list %w(jpg jpeg gif png bmp) #   jpg, jpeg, gif, png, bmp end include CarrierWave::RMagick # RMagick    version :thumb do process :resize_to_fill => [100,74] # RMagick'       end storage :file end 

चूंकि Redactor हमें उनके पूर्वावलोकन के माध्यम से पहले से डाउनलोड की गई छवियां दिखाता है, जो बदले में JSON फ़ाइल से पढ़ता है, जिसे हम imageslist.json कहते हैं और सार्वजनिक / अपलोड / छवियों / में निहित है। हमें इस फ़ाइल को एक प्रारूप में लाने की आवश्यकता है जिसे Redactor समझता है।

 { "thumb": "/tests/_images/1_m.jpg", "image": "/tests/_images/1.jpg" }, 

इसका तात्पर्य है कि हमें एक मॉडल बनाने की आवश्यकता है जो निम्नानुसार है

 #init.rb class UploadedImages #      include DataMapper::Resource property :id, Serial property :image, String # property :thumb, String # mount_uploader :file, ImageUploader #  carrierwave end 

Init.rb फ़ाइल के बहुत अंत में, निम्नलिखित जोड़ें:

 #init.rb 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 #   @images          JSON File.open("public/uploads/images/imageslist.json","w") do |f| # imageslist.json   f.write JSON.pretty_generate(@images) # JSON       end '<img src="/uploads/images/' + File.join(filename) + '" />'#    textarea    end 

क्या चल रहा है? जब आप कोई चित्र अपलोड करते हैं, तो imageslist.json की सामग्री हटा दी जाती है और एक नया उत्पन्न होता है। ईमानदारी से, मुझे नहीं पता कि सर्वर की लागत कितनी है।

यदि लेख को अपनी प्रतिक्रिया मिलती है, तो अगली बार मैं इस संपादक के माध्यम से फ़ाइलों को डाउनलोड करने की प्रक्रिया का वर्णन करने की कोशिश करूंगा, साथ ही डाउनलोड की गई छवियों को प्रबंधित करने के लिए इंटरफ़ेस भी।

स्रोत कोड को github पर देखा जा सकता है।

पुनश्च: मैं आपसे कहता हूं कि मुझे ज्यादा डांटें नहीं, मैंने सब कुछ समतल पर रखने की कोशिश की। बेशक मैं समझता हूं कि मेरा कोड आदर्श से बहुत दूर है, और कुछ बिंदुओं को अधिक सरलता से लागू किया जा सकता है, लेकिन मुझे लगता है कि रूबी और सिनात्रा को सीखना शुरू करने के लिए यह एक अच्छा शुरुआती बिंदु है। आपका धन्यवाद

PSS: एवरीव्हेयर आई कम पार

 <hh user=posts> 

या

 <hh user=images> 

बस क्रमशः @posts और छवियों के साथ बदलें।