2017-05-15 1 views
1

데모 용으로 간단한 Sinatra 앱에서 작업하고 있으며 더 좋은 방법이 있는지 궁금합니다. (:에만 관련 부분은 아래에 붙여 주) :Sinatra 웹 페이지에서 입력을 적절하게 관리하는 방법

get '/' do 
    redis = Redis.new 
    redis = Redis.new(:host => settings.redis, :port => 6379) 
    redis.incr("pageviews") 

    @pageviews = redis.get("pageviews") 
    @hostname = Socket.gethostname 

    erb :webapp 
end #get/

post '/increase' do 
    redis = Redis.new 
    redis = Redis.new(:host => settings.redis, :port => 6379) 
    redis.incr("pageviews") 

    @pageviews = redis.get("pageviews") 
    @hostname = Socket.gethostname 
    redirect '/' 

end #post /increase 

그리고 내 HTML은 더 쉽게 (참고 : 오직 관련 부분은 아래에 붙여)입니다

루비 프로그램은 매우 간단하다

 <em style="color: blue; font-style: italic"> Views count (<%= @pageviews %>):</em> 

     <form method="post" action="/increase"> 
      <input class='btn btn-primary' type='submit'> 
     </form> 

홈 페이지를로드 할 때 카운터가 1 씩 증가합니다. 제출 단추를 클릭하면 카운터가 2 씩 증가합니다 (제출 작업과 홈 페이지로의 리디렉션으로 인해 하나씩). 괜찮아. 그게 내가 원하는거야.

그러나 Sinatra의 작동 방식 때문에 제출 버튼을 누르면 기본적으로 전체 페이지가 다시로드됩니다. 이와 같은 간단한 페이지에서는 괜찮 았지만 전체 웹 페이지를 다시로드하는 복잡한 응용 프로그램의 경우 너무 무거울 수 있습니다. 물론 우아하지 않습니다.

Sinatra를 너무 많이 늘리려고하는지 (그리고 Angular와 같은 것으로 전환해야하는 경우) 또는 Sinatra에서 사용할 수있는 방법이 있다면 "증가"해야하는지 궁금합니다. 메소드 + 리디렉션을 호출 할 필요없이 /?

감사합니다.

답변

0

전체 페이지를 새로 고침하지 않으려면 두 가지 옵션이 있습니다. iframe을 사용하거나 iframe을 사용하지 말고 AJAX 나 WebSocket과 같은 JavaScript에서 백그라운드 통신 메커니즘을 사용하십시오. Sinatra는 AJAX 요청을 쉽게 처리 할 수 ​​있습니다. 이제 Sinatra가 Ajax 요청을 수행하는 JavaScript 코드 (예 : Angular와 같은)를 생성하려면 Sinatra가이를 수행하지 않습니다. JavaScript는 직접 구현해야합니다. 프로 팁 : jQuery를 사용하면 더 쉽게 사용할 수 있습니다.

관련 문제