Làm cách nào để kết hợp html css và javascript?
|
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ễ Show
Tại sao phải kết hợp JavaScript và CSSViệc kết hợp các tệp Javascript và CSS bên ngoài của bạn có lợi vì một số lý do
Cách kết hợp JavaScript và CSSPhương pháp được sử dụng để kết hợp Javascript và CSS bên ngoài về cơ bản là giống nhau cho cả hai loại tệp. Tuy nhiên, có một vài điều cần xem xét cho mỗi người trong số họ Khi kết hợp Javascript, nên kết hợp các tệp hiện có của bạn thành 2 tệp chính
Điều này sẽ cho phép bạn tải trang web nhanh hơn nhiều vì trình duyệt không phải tải xuống và thực thi JS không quan trọng trong khi đang cố tải nội dung trong màn hình đầu tiên Kết hợp CSSĐể kết hợp các tệp CSS bên ngoài, bạn chỉ cần sao chép/dán tất cả mã CSS của mình vào một tệp chính. Do đó, tất cả nội dung từ bên trong các tệp CSS khác giờ đây sẽ nằm trong tệp chính, cho phép trình duyệt chỉ thực hiện một yêu cầu đối với một tệp CSS thay vì nhiều yêu cầu. Ngoài ra, tránh sử dụng $ 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 120274 để nhập tất cả các tệp CSS bên ngoài của bạn vào một tệp chính. Phương pháp này có thể gây ra độ trễ bổ sung do không thể tải xuống song song nhiều biểu định kiểu. Thay vào đó, hãy sử dụng phương pháp được mô tả ở trên để kết hợp vật lý CSS từ tệp này sang tệp khác, thay vì chỉ nhập nhiều tệp vào mộtTối ưu hóa JavaScript và CSS khácKết hợp Javascript và CSS bên ngoài là một đề xuất giúp cải thiện hiệu suất tổng thể của trang bằng cách tối ưu hóa hai loại tệp này. Tuy nhiên, đối với các đề xuất bổ sung Bây giờ tôi đã chuyển sang thư viện giao diện người dùng. Không có phần nào trình bày chi tiết cách thực hiện những điều cơ bản với JS/HTML/CSS hoạt động cùng nhau sao? Tôi chỉ muốn làm một số việc đơn giản như hiển thị tin nhắn của người dùng khi họ nhấn nút. Hoặc một trang đơn giản cho phép bạn điền vào Mad-Libs, v.v. Tôi đã thử đọc tài liệu DOM trên Mozilla để hiểu cách tự làm nhưng tài liệu khá dày đặc Nếu trang web này không có bất kỳ tài liệu đánh giá nào về cách tạo một trang web với vanilla JS, ai đó có thể giới thiệu một nơi để tôi có thể học nó không? Tiếp tục trong phần giới thiệu về loạt bài hướng dẫn phát triển web và di động, ở đây chúng ta sẽ tìm hiểu cách hợp nhất HTML, CSS và JavaScript cơ bản vào ứng dụng Rails mà nhà thiết kế giao diện người dùng (Tim) đã nhanh chóng xây dựng cho chúng ta. [Ghi chú của tác giả. Tôi đã viết vài chục hướng dẫn đầu tiên trong loạt bài này cách đây vài năm và tôi đang trong quá trình cập nhật nội dung để phản ánh sự phát triển của các phương pháp hay nhất trong ngành. Hãy bình luận nếu bạn thấy bất cứ điều gì tôi bỏ lỡ cần được cập nhật. Cảm ơn. ] Trước tiên, hãy đọc kỹ README của nhà thiết kế giao diện người dùng của bạnSau khi chúng tôi làm việc với Tim để phát triển các mô hình của mình, anh ấy đã dành thời gian ghi lại cách anh ấy chia chúng thành HTML, CSS/Sass và JavaScript. Đây là giá trị đọc trong toàn bộ ứng dụng webbảng điều khiển. html — chứa bốn cột của bốn loại thẻ — người dùng, mục chương trình, mục hành động và cuộc họp user_action_modals. html — tệp này bao gồm tất cả mã cần thiết cho các chế độ/nút/cửa sổ bật lên của mục Người dùng và Hành động. Bao gồm một số nội dung mặc định để tham khảo chương trình nghị sự_meetings_modals. html — tệp này bao gồm tất cả mã cần thiết cho mục Chương trình làm việc và các phương thức/nút/cửa sổ bật lên cuộc họp. Bao gồm một số nội dung mặc định để tham khảo tạo_modal. html — xuất hiện khi '+' được kích hoạt trên cột bảng điều khiển, mở nút/phương thức mới để tạo mục chương trình, mục hành động hoặc thẻ họp mới) CSS & SCSS_cài lại. scss bao gồm bình thường hóa. css để đặt lại các phần tử html cơ bản thành đường cơ sở “bình thường” trên tất cả các trình duyệt chính. Được nhập vào phong cách. scss _cách trình bày. scss bao gồm tất cả mã cần thiết cho lưới linh hoạt, bộ chứa trang web/ứng dụng và Clearfix (đối với các phần tử gốc không có chiều cao và không xóa các phần tử con nổi của chúng). Được nhập vào phong cách. scss. Xem “lưới chất lỏng” bên dưới để biết thêm chi tiết _loại hình. scss bao gồm tất cả các kiểu chữ cơ bản, chẳng hạn như các kiểu chữ cơ bản được áp dụng trên toàn bộ trang web và ứng dụng, liên kết và tiêu đề. Được nhập vào phong cách. scss _chung. scss bao gồm các kiểu chung được áp dụng trên toàn bộ trang web và ứng dụng, chẳng hạn như các nút, đầu vào, menu điều hướng và kiểu dáng cho các phần tử trang web. Được nhập vào phong cách. scss _ứng dụng. scss bao gồm tất cả các kiểu webapp cụ thể. Áp dụng cho bảng điều khiển và các phương thức/nút. Được nhập vào phong cách. scss _biến. scss chứa tất cả các biến được sử dụng (đối với màu hex) và hỗn hợp cho độ dốc và bóng hộp được sử dụng trên các nút. Không được nhập vào kiểu. scss vì các biến sass và mixin không được biên dịch phong cách. scss nhập các tệp trên và biên dịch thành css/style. css Javascriptcss3-phương tiện truyền thông. js cung cấp hỗ trợ truy vấn phương tiện cho IE8. Được gọi thông qua nhận xét có điều kiện nhắm mục tiêu trình duyệt IE bên dưới IE9 và thiết bị di động IE tab. js — Tôi đã cố gắng viết mã javascript của riêng mình cho chức năng tab, nhưng cách đó không hiệu quả lắm, vì vậy tôi đã kết thúc bằng cách sử dụng hướng dẫn này cho các tab và sửa đổi mã khi cần. Chỉ được sử dụng trên chương trình nghị sự_meeting_modals. html và user_action_modals. html Tôi đã thử nghiệm sử dụng một số plugin jQuery cho phương thức/nút/cửa sổ bật lên (để chúng xuất hiện khi thẻ tương ứng được kích hoạt trên bảng điều khiển), nhưng tất cả những gì tôi có thể tìm thấy là các plugin yêu cầu nhúng mã phương thức vào mã bảng điều khiển, mà tôi lưới chất lỏngGhi chú. Tôi đã sử dụng ems thay vì pixel, vì lưới linh hoạt hoạt động tốt nhất với các đơn vị đo lường tương đối. Ems có liên quan đến cỡ chữ cơ sở, trong trường hợp này thường là 16px (mặc định điển hình của trình duyệt), được xác định bởi giá trị cỡ chữ cơ sở là 100%. Nếu bạn muốn thay đổi pixel thành ems, chỉ cần thực hiện phép đo pixel, giả sử một hộp có chiều rộng 500px, chia cho kích thước phông chữ cơ sở (16px) và bạn nhận được một hộp có 31. chiều rộng 25em. Giờ đây, một cách dễ dàng để thu nhỏ các yếu tố có phép đo em trên các kích thước màn hình nhỏ hơn là chỉ cần thu nhỏ kích thước phông chữ cơ sở và mọi thứ được đo bằng ems sẽ tuân theo Khía cạnh đáp ứng cho dự án này khá đơn giản. Vì lợi ích của những người đang theo dõi các bài đăng trên blog/ebook, tôi đã cố gắng tạo một lưới đơn giản nhất mà tôi biết. Có thể tốt để lưu ý rằng lưới này có thể không đủ mạnh cho các bố cục phức tạp hơn Mọi thứ được bao bọc trong một vùng chứa, cung cấp chiều rộng tối đa và kiểu nền cơ bản cho trang web và ứng dụng. Sau đó, mọi thứ được gói lại trong một lưới cung cấp đệm ở hai bên. Tôi đã sử dụng điều này để một số thành phần, chẳng hạn như biểu ngữ anh hùng, có thể nằm bên ngoài lưới này và kéo dài đến tận các cạnh của vùng chứa Lưới bao gồm bốn cột. Khi màn hình có chiều rộng ít nhất là 10em (khá nhiều điện thoại có chiều rộng từ 240px trở lên), tất cả 4 cột xếp chồng lên nhau và mỗi cột có chiều rộng bằng 98% Khi màn hình hoặc trình duyệt có chiều rộng ít nhất là 52em, các cột sẽ nổi bên cạnh mỗi cột và một cột duy nhất có chiều rộng là 22% (chiều cao được xác định bởi nội dung chứa bên trong). Các cột có 1. Lợi nhuận 5% xung quanh họ mọi lúc. Một cột duy nhất có tên lớp col_1 Nếu bạn muốn một thành phần hoặc phần tử kéo dài hai cột hoặc một nửa vùng chứa, bạn sẽ đặt cho nó một lớp col_2. Các cột "kép" này có chiều rộng là 47%. Đối với thứ gì đó kéo dài 3 cột, hãy sử dụng lớp col_3 (72% vùng chứa) và đối với toàn bộ chiều rộng của vùng chứa, hãy sử dụng col_4 (97% vùng chứa) Đối với bảng điều khiển ứng dụng, tôi đã đặt trường hợp đặc biệt trong đó các cột đơn biến thành cột kép với chiều rộng tối thiểu là 40em. Chúng không trở lại các cột đơn lẻ cho đến khi chiều rộng tối thiểu là 75em Khi cửa sổ màn hình/trình duyệt thu nhỏ lại, tôi đã sử dụng truy vấn phương tiện để điều chỉnh các phần tử sao cho mọi thứ khớp với nhau một cách độc đáo khi màn hình nhỏ lại. Đối với hầu hết các phần, tôi đã sử dụng truy vấn phương tiện có độ rộng tối thiểu cho những thứ thực sự chung chung, như lưới linh hoạt và truy vấn độ rộng tối đa cho các chi tiết nhỏ và các yếu tố thực sự cụ thể Được. Tốt để biết. Đây là thế giới của phát triển UI/UX front-end nhé mọi người. Mặc dù tìm hiểu chi tiết về cách Tim tạo ra những phần cắt nhỏ này nằm ngoài phạm vi của loạt bài hướng dẫn này, nhưng khi chúng tôi kết nối mọi thứ, bạn sẽ học được rất nhiều điều về thế giới đó, đặc biệt là những cân nhắc về thiết kế web đáp ứng (RWD) như ems, tỷ lệ phần trăm và . Nó cũng sẽ giúp bạn đánh giá cao lý do tại sao một nhà thiết kế hình ảnh có thể tạo nguyên mẫu trong HTML/CSS/JS lại cực kỳ quan trọng (tất nhiên) và tại sao cô ấy/anh ấy nên là một người khác với nhà phát triển web chính (trong trường hợp này là tôi/ Tất nhiên, bây giờ, với tư cách là nhà phát triển web hàng đầu ngày nay, bạn PHẢI biết cách của mình xung quanh cả back-end và front-end. Điều này có nghĩa là Rails chỉ là một phần của giải pháp. Bạn cũng sẽ cần phải làm quen với khung giao diện người dùng như Backbone, Angular và Ember. Trong loạt bài này, chúng tôi sẽ bắt đầu với Backbone (xem phần giới thiệu của chúng tôi tại đây và tại đây) và hy vọng sau này sẽ giới thiệu Angular và Ember làm tài liệu bổ sung Bắt đầu quá trình hợp nhất của bạn với một bài kiểm traOk — tiến tới kiểu Phát triển theo định hướng hành vi (BDD) như chúng ta đã thiết lập trong bài viết trước, hãy bắt đầu bằng cách tạo một thư mục trong spec/thư mục có tên là features và sau đó tạo một tệp trong đó có tên visitor_visits_public_pages_spec. rb và đặt cái này vào đó Những gì chúng tôi đang thiết lập ở đây là một thử nghiệm tích hợp rất cơ bản. “Tính năng” của chúng tôi cuối cùng sẽ có nhiều phần “kịch bản” bắt chước các hành vi cụ thể của khách truy cập Trong trường hợp đầu tiên này, chúng tôi đang kiểm tra hành vi dự kiến khi khách truy cập vào trang chủ. Vì từ “Giới thiệu” nằm trong thanh điều hướng đơn giản của chúng tôi ở trên cùng, nên chúng tôi mong đợi trang có nội dung đó Vì vậy, hãy xem những gì xảy ra. Chạy thử nghiệm $ 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
NameError:
undefined local variable or method `root_path' for #
# ./spec/features/visitor_visits_public_pages_spec.rb:5:in `block (2 levels) in '
Finished in 0.00156 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 31879Ok — bây giờ là lúc để làm cho nó vượt qua. Vấn đề đầu tiên ở đây là “root_path” của chúng ta không phải là một phương thức xác định. Vì đường dẫn định tuyến được xác định ourconfig/routes. rb, hãy mở tệp đó và bỏ ghi chú dòng khóa này và thay thế “chào mừng” bằng “nhà” Thật tuyệt, bây giờ chúng tôi đã xác định root_path của mình. Vì vậy, hãy xem điều gì sẽ xảy ra khi chúng tôi chạy lại bài kiểm tra của mình $ 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 12027á ha. Chúng ta cần tạo HomeController. Hãy làm nó $ rails g controller Home
create app/controllers/home_controller.rb
invoke erb
create app/views/home
invoke rspec
create spec/controllers/home_controller_spec.rb
invoke helper
create app/helpers/home_helper.rb
invoke rspec
invoke assets
invoke coffee
invoke scssRails khiến việc đó trở nên dễ dàng. Được rồi, hãy chạy lại thử nghiệm của chúng ta (bây giờ bạn đang thực sự thấy TDD/BDD hoạt động như thế nào…i. e. rất nhiều lần lặp lại nhỏ 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
AbstractController::ActionNotFound:
The action 'index' could not be found for HomeController
# ./spec/features/visitor_visits_public_pages_spec.rb:5:in `block (2 levels) in
Finished in 0.04904 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 49509 Được. Mở ứng dụng/bộ điều khiển/home_controller của bạn. rb và hãy thêm một phương thức chỉ mục và sau đó chạy thử nghiệm một lần nữa $ 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::MissingTemplate:
Missing template home/index, application/index with {:locale=>[:en], :formats=>[:html], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder, :coffee]}. Searched in:
* "[..]OurAgendaApp/app/views"
# ./spec/features/visitor_visits_public_pages_spec.rb:5:in `block (2 levels) in
Finished in 0.05668 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 8424Tốt. Đang tiến bộ. Lỗi này có nghĩa là chúng tôi chưa có tệp mẫu (chế độ xem) cho hành động lập chỉ mục của chúng tôi ở bất kỳ đâu trong thư mục chế độ xem của chúng tôi. Rails mong đợi một thư mục có tên là “home” khớp với tên của bộ điều khiển và một tệp trong đó có tên là “index. *” (trong trường hợp của chúng tôi, nó sẽ là chỉ mục. html. erb vì chúng tôi dự định trả lại HTML với Embedded Ruby trong đó). Vì vậy, hãy tạo thư mục và tệp đó (nghĩa là. ứng dụng/lượt xem/trang chủ/chỉ mục. html. erb), để trống bây giờ và chạy lại kiểm tra $ 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: page.should have_content("About")
expected to find text "About" in ""
# ./spec/features/visitor_visits_public_pages_spec.rb:6:in `block (2 levels) in
1 example, 1 failure
Failed examples:
rspec ./spec/features/visitor_visits_public_pages_spec.rb:4 # Visitor visits the home page
Randomized with seed 5168Được rồi — tốt — điều này có nghĩa là chúng tôi đã sẵn sàng hợp nhất các phần cắt của Tim để bài kiểm tra của chúng tôi có thể tìm thấy từ “Giới thiệu” Hợp nhất trong CSS và JS trướcBây giờ là lúc để tiếp tục và phân nhánh kho lưu trữ cutups từhttps. //github. com/timothymalcham/OAA-web-app vào hồ sơ Github cá nhân của bạn. Khá dễ dàng chỉ cần nhấp vào nút “Fork” ở trên cùng bên phải và bạn sẽ tìm ra nó, nhưng đây là hướng dẫn nhanh nếu bạn cần trợ giúp Khi bạn đã hoàn thành việc đó, hãy sao chép kho lưu trữ từ tài khoản Github của bạn vào máy cục bộ của bạn trong một thư mục mới bên ngoài thư mục OurAgendaApp. Tôi có một thư mục “ứng dụng” trên máy của mình, vì vậy trong trường hợp của tôi, tôi sẽ vào thư mục đó và $ git clone https://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 Tôi có thể làm việc với HTML CSS và JavaScript không?Cũng giống như cách Internet kết nối chúng ta, có những ngôn ngữ web đặc biệt hoạt động cùng nhau để tạo nên Internet và các trang web chứa trong đó. HTML, CSS và JavaScript phối hợp với nhau để tạo thành thiết kế mặt trước của trang web bằng cách áp dụng thông tin ảnh hưởng đến nội dung, phong cách và tính tương tác của trang web .
HTML CSS và JavaScript cùng nhau được gọi là gì?Chúng thường được gọi là các khối xây dựng của Web . Ba công cụ này thống trị phát triển web. Mọi thư viện hoặc công cụ dường như đều tập trung vào HTML, CSS và JS. |
