Trang web chứa nhiều tệp JavaScript và CSS, tất cả phải được tìm nạp từ máy chủ để tải đầy đủ trang web. Quá trình tải xuống từng tệp riêng biệt này sẽ mất nhiều thời gian hơn do phải thực hiện các yêu cầu bổ sung, do đó làm tăng độ trễ
//github.com/wclittle/OAA-web-app.git OAA_cutups Cloning into 'OAA_cutups'... remote: Reusing existing pack: 40, done. remote: Total 40 [delta 0], reused 0 [delta 0] Unpacking objects: 100% [40/40], done. Checking connectivity.. done.
Bạn có nhớ thay thế “wclittle” [là tên người dùng github của tôi] bằng tên người dùng của riêng bạn không? . Khi bạn đã sẵn sàng, hãy sao chép nội dung
$ cp OAA_cutups/js/*.js OurAgendaApp/app/assets/javascripts/ $ cp OAA_cutups/images/*.png OurAgendaApp/app/assets/images/ $ cp OAA_cutups/scss/*.scss OurAgendaApp/app/assets/stylesheets/
Và bây giờ, điều quan trọng là sửa đổi tệp kê khai CSS chính của chúng tôi để chúng tôi đảm bảo các biểu định kiểu của chúng tôi được tải chính xác
Điều quan trọng là phải xóa “require_tree. ” vì chúng tôi chỉ muốn nhập tệp kiểu của mình, tệp đã nhập theo đúng thứ tự. Thứ tự kiểu CSS cực kỳ quan trọng. Ứng dụng của chúng ta sẽ trông có vẻ lộn xộn nếu chúng ta chỉ “yêu cầu” tất cả các tệp và tệp thư mục con theo thứ tự bảng chữ cái [đó là những gì “require_tree. " làm]
Hãy làm điều tương tự với javascript của chúng tôi
Bạn sẽ nhận thấy tải đường ray trong nội dung jquery và turbolinks [giúp tăng tốc độ tải trang của người dùng của chúng tôi khi họ nhấp chuột xung quanh]. Hiện tại, chúng tôi sẽ rời đi trong. các tệp cà phê được tạo tự động cho bộ điều khiển của chúng tôi [tương tự với. scss trong thư mục stylesheets của chúng tôi]. Nhưng chúng ta cần nhớ yêu cầu chúng một cách thích hợp nếu chúng ta muốn sử dụng chúng sau này
Để kết thúc quá trình hợp nhất nội dung, bạn cần mở ứng dụng/nội dung/bảng định kiểu/_General. scss và thay thế bằng phương thức image-url[] trên các dòng 191, 202 và 213 như vậy
________số 8
Điều này đảm bảo chúng tôi luôn tải hình ảnh của mình từ vị trí thích hợp [thêm về điều này trong các hướng dẫn sau]
Bây giờ, hãy quay lại thư mục OurAgendaApp của chúng tôi trong thiết bị đầu cuối của bạn và chạy tệp “rspec. /spec/features/visitor_visits_public_pages_spec. rb” kiểm tra lại để đảm bảo bạn gặp lỗi giống như trước đây [i. e. không tìm thấy “Giới thiệu” trên trang]. Nếu bạn gặp bất kỳ lỗi nào khác, điều đó có nghĩa là bạn đã làm sai điều gì đó khi nhập nội dung. Quay lại và sửa nó trước khi bạn tiếp tục ở đây
Cuối cùng, hãy hợp nhất trong HTML và thêm một số ERB
Điều đầu tiên bạn muốn làm là mở “ứng dụng/lượt xem/bố cục/ứng dụng. html. erb” và hợp nhất trong phần đánh dấu từ “trang chủ” của Tim. html” sẽ có trên tất cả các trang của chúng tôi
Về cơ bản, đây là phần trên cùng của lớp chế độ xem của bạn, trong Rails thường là một tập hợp các chế độ xem lồng nhau và các phần chế độ xem. Bạn sẽ nhận thấy rằng tôi đã gọi các biến toàn cục cho tiêu đề và mô tả trang của chúng ta [mà chúng ta sẽ đặt trong bộ điều khiển của mình]. Tôi cũng để lại phần lớn đánh dấu để đưa vào chỉ mục. html. erb, nhưng bạn sẽ thấy tôi đã đặt một phần chân trang ở đó. Hãy tiếp tục và chạy thử nghiệm của chúng tôi một lần nữa và xem điều gì sẽ xảy ra
$ rspec ./spec/features/visitor_visits_public_pages_spec.rb
Visitor visits
the home page [FAILED - 1]
Failures:
1] Visitor visits the home page
Failure/Error: visit root_path
ActionView::Template::Error:
Missing partial home/footer with {:locale=>[:en], :formats=>[:html], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder, :coffee]}. Searched in:
* "[..]OurAgendaApp/app/views"
# ./app/views/layouts/application.html.erb:16:in `_app_views_layouts_application_html_erb__3987517836118682158_70212029708560'
# ./spec/features/visitor_visits_public_pages_spec.rb:5:in `block [2 levels] in
Finished in 0.09381 seconds
1 example, 1 failure
Failed examples:
rspec ./spec/features/visitor_visits_public_pages_spec.rb:4 # Visitor visits the home page
Randomized with seed 52426Phải, chúng ta cần tạo một phần chân trang của mình, vì vậy hãy tiếp tục và làm điều này. Tạo tệp app/views/home/_footer. html. erb
$ rspec ./spec/features/visitor_visits_public_pages_spec.rb
Visitor visits
the home page [FAILED - 1]
Failures:
1] Visitor visits the home page
Failure/Error: visit root_path
ActionController::RoutingError:
uninitialized constant HomeController
# ./spec/features/visitor_visits_public_pages_spec.rb:5:in `block [2 levels] in
Finished in 0.04082 seconds
1 example, 1 failure
Failed examples:
rspec ./spec/features/visitor_visits_public_pages_spec.rb:4 # Visitor visits the home page
Randomized with seed 120270Bây giờ hãy chạy lại bài kiểm tra của bạn và nó sẽ báo cho bạn lỗi trước đó về việc không tìm thấy “Giới thiệu”
Tất cả các thiết lập? . html. erb, hãy nhớ thay thế trong phương thức asset_path để lấy nguồn nội dung của chúng tôi
Bây giờ hãy chạy lại bài kiểm tra và bạn sẽ thấy nó vượt qua
$ rspec ./spec/features/visitor_visits_public_pages_spec.rb
Visitor visits
the home page [FAILED - 1]
Failures:
1] Visitor visits the home page
Failure/Error: visit root_path
ActionController::RoutingError:
uninitialized constant HomeController
# ./spec/features/visitor_visits_public_pages_spec.rb:5:in `block [2 levels] in
Finished in 0.04082 seconds
1 example, 1 failure
Failed examples:
rspec ./spec/features/visitor_visits_public_pages_spec.rb:4 # Visitor visits the home page
Randomized with seed 120271Tốt đẹp. Bây giờ, hãy xem chúng tôi đã phát triển ứng dụng của mình được bao xa mà không cần xem nó trong trình duyệt web?
OK, bây giờ chúng ta có thể tiếp tục và kích hoạt máy chủ và xem ứng dụng của chúng ta trong trình duyệt
Đặt http. //máy chủ cục bộ. 3000 vào trình duyệt của bạn và bạn sẽ thấy
Phần thưởng cho người dùng mac. nếu bạn được kết nối với cùng một mạng wifi với máy tính xách tay của mình, bạn có thể truy cập http. //tên_của_bạn_mac. địa phương. 3000/ từ thiết bị di động của bạn để xem nó trông như thế nào [và chỉnh sửa nếu cần]. Nếu bạn không chắc tên_of_your_mac là gì, hãy chuyển đến tùy chọn hệ thống -> chia sẻ
Được rồi. Các bài kiểm tra của bạn đang trôi qua và bạn đã thực hiện một quá trình tuyệt vời. Đã đến lúc thêm tệp vào git và thực hiện cam kết của bạn. Trước tiên hãy kiểm tra trạng thái...nó sẽ giống như thế này
$ rspec ./spec/features/visitor_visits_public_pages_spec.rb
Visitor visits
the home page [FAILED - 1]
Failures:
1] Visitor visits the home page
Failure/Error: visit root_path
ActionController::RoutingError:
uninitialized constant HomeController
# ./spec/features/visitor_visits_public_pages_spec.rb:5:in `block [2 levels] in
Finished in 0.04082 seconds
1 example, 1 failure
Failed examples:
rspec ./spec/features/visitor_visits_public_pages_spec.rb:4 # Visitor visits the home page
Randomized with seed 120272Và với điều đó, hãy bắt đầu thực hiện cam kết và đẩy nó lên Github
$ rspec ./spec/features/visitor_visits_public_pages_spec.rb
Visitor visits
the home page [FAILED - 1]
Failures:
1] Visitor visits the home page
Failure/Error: visit root_path
ActionController::RoutingError:
uninitialized constant HomeController
# ./spec/features/visitor_visits_public_pages_spec.rb:5:in `block [2 levels] in
Finished in 0.04082 seconds
1 example, 1 failure
Failed examples:
rspec ./spec/features/visitor_visits_public_pages_spec.rb:4 # Visitor visits the home page
Randomized with seed 120273- — -
Trong bài đăng tiếp theo của loạt bài này, chúng tôi sẽ tiếp tục kết nối trang chủ của chúng tôi để quy trình đăng ký của chúng tôi hoạt động. Bài trước. Cách thiết lập ứng dụng Rails để phát triển dựa trên thử nghiệm và dựa trên hành vi với Rspec và Capybara-Webkit