Hướng dẫn javascript login page without database - trang đăng nhập javascript không có cơ sở dữ liệu
Tôi đang cố gắng tạo một hệ thống đăng nhập đơn giản trên trang web của mình không yêu cầu bất kỳ quy trình đăng ký nào. Tôi sẽ đặt tên người dùng và mật khẩu cho mỗi khách hàng sử dụng. Show Về cơ bản, ý tưởng là có một trang đăng nhập cho phép khách hàng truy cập và xem các tệp và thông tin (thay vì sử dụng email). Vấn đề với mã bên dưới là 'tên người dùng' và 'mật khẩu' được mã hóa cứng, tức là dễ dàng xem với tính năng 'phần tử kiểm tra'. Vì tôi là một người mới, tôi đã tự hỏi liệu tôi có thể tạo một hệ thống an toàn đơn giản mà không cần sử dụng cơ sở dữ liệu và PHP không. HTML:
Javascript: Sự khởi đầu của hành trình phát triển web (mặt trước) có thể gây khó khăn. Việc đánh dấu thực sự kỳ lạ lúc đầu. CSS đôi khi làm cho trang của bạn đẹp, những lần khác bạn không biết tại sao một thuộc tính duy nhất biến trang của bạn thành một mớ hỗn độn. Và trong trường hợp đây là lần đầu tiên bạn làm việc với ngôn ngữ lập trình, JavaScript có thể là người đáng sợ nhất trong ba. Nhưng, khi cuối cùng bạn đã nắm được HTML, CSS và JavaScript, bạn sẽ làm gì với họ? Thực tiễn. Hãy nghĩ về một cái gì đó bạn muốn làm với kiến thức mới của bạn, nó không quan trọng nếu nó có ích, thì nó không quan trọng như thế nào. Chỉ cần làm một cái gì đó giúp bạn trở nên tốt hơn tại HTML, CSS và JavaScript. Và làm ơn, đừng bao giờ quên giá trị của việc xây dựng câm sh*t :) Hôm nay, như bạn đã tìm ra từ tiêu đề, tôi sẽ đưa bạn qua việc tạo trang đăng nhập bằng cách sử dụng HTML, CSS và JavaScript. Nhưng đừng lo lắng. Một lần nữa, như tiêu đề nói, đây là trang đăng nhập đầu tiên của bạn, có nghĩa là mã đơn giản nhất có thể và sẽ có một lời giải thích để đi kèm với từng đoạn mã. Trước khi nhảy vào mã mặc dù, hãy để tôi cho bạn thấy những gì chúng tôi sẽ tạo ra: Đăng nhập các trang đăng nhập đăng nhập với thông tin đăng nhập không hợp lệNhư bạn có thể thấy, trang chứa một tiêu đề, biểu mẫu đăng nhập (cho tên người dùng và mật khẩu) và một nút đăng nhập mà các bản dữ liệu đầu vào. Lưu ý rằng tôi đã sử dụng dấu ngoặc kép xung quanh việc gửi vì không có bài nộp thực tế. Cả tên người dùng và mật khẩu đều không được gửi đến máy chủ để được xác thực. Thay vào đó, khi người dùng nhấp vào nút đăng nhập, chúng tôi xác nhận rằng tên người dùng là người dùng của người dùng và mật khẩu là trên Web_Dev, bằng cách sử dụng JavaScript. Nếu chúng khớp, thì một hộp thoại cảnh báo được hiển thị và trang được tải lại (vì mục đích đơn giản); Nếu không, chúng tôi hiển thị một thông báo lỗi. Bây giờ, bạn đã quen thuộc hơn với kết quả cuối cùng, hãy để chuyển sang mã. HTMLChúng tôi sẽ bắt đầu với HTML, vì đây là người chịu trách nhiệm cho thông tin được hiển thị trong trang. Nói cách khác, trước tiên chúng ta sẽ viết và cấu trúc tất cả các thông tin có trong trang mà không phải lo lắng cho phong cách (CSS) hoặc tính tương tác (JavaScript). Phân tích tệp HTML hoàn chỉnh miễn là bạn muốn và khi bạn đã sẵn sàng chuyển sang giải thích. Tệp HTMLNhư thường lệ trong các tệp HTML, chúng tôi có hai phần: Trong Bên trong phần tử Nhân tiện, nếu bạn đang tự hỏi tại sao các yếu tố Invalid username and/or password Tất nhiên, chúng tôi sử dụng nhiều ID và các lớp học để tạo điều kiện cho công việc của chúng tôi với CSS. ID cho phép chúng tôi chọn các phần tử HTML rõ ràng, nghĩa là mỗi ID đại diện cho một yếu tố duy nhất trong tệp của chúng tôi. Mặt khác, các lớp được sử dụng khi chúng ta có một tập hợp các kiểu CSS mà chúng ta muốn lặp lại cho nhiều yếu tố. Chúng tôi sẽ thấy việc sử dụng thực tế của các ID và lớp học tiếp theo. Bây giờ chúng tôi có CSS, nói cách khác, phong cách của trang của chúng tôi. Để sửa đổi từng phần tử trong tệp HTML của chúng tôi, chúng tôi có thể chọn chúng bằng ID, lớp hoặc tên thẻ, mặc dù tùy chọn cuối cùng không được khuyến khích. Bạn thấy, các kiểu của các bộ chọn CSS cụ thể hơn ghi đè lên các kiểu của các kiểu ít cụ thể hơn. Ví dụ: các kiểu của bộ chọn ID ghi đè lên các bộ chọn của bộ chọn lớp và các kiểu chọn lớp ghi đè lên các kiểu chọn tên thẻ. Nói cách khác, luôn luôn làm cho các bộ chọn CSS của bạn cụ thể nhất có thể để chỉ ảnh hưởng đến các yếu tố bạn muốn bị ảnh hưởng. Và đừng quên, trong khi các bộ chọn tên thẻ chỉ cần tên của các thẻ, bộ chọn ID bắt đầu với dấu pound ( Invalid username and/or password Invalid username and/or password Invalid username and/or password Invalid username and/or password Như đã nói, bạn vẫn có thể sử dụng bộ chọn tên thẻ. Chẳng hạn, nhìn vào phần đầu của Code Gist. Tên thẻ Invalid username and/or password Invalid username and/or password Tuy nhiên, trên Chúng tôi chỉ sử dụng các trường hợp sử dụng bố cục lưới đơn giản nhất, nghĩa là để tạo một phần tử sử dụng màn hình lưới và sau đó định vị nội dung của nó phù hợp, nhưng tôi khuyên bạn nên xem xét bố cục lưới khi bạn có thể. Nó là một công cụ đơn giản nhưng mạnh mẽ để định vị các yếu tố trong các trang của bạn. Đối với Hàng đầu tiên của lưới, tiêu đề, vẫn như vậy. Việc sửa đổi duy nhất nó được tập trung, do hậu quả của nội dung của Mặt khác, hàng thứ hai nhận được một số sửa đổi (dòng 26 đến 49), vì chúng ta cần sửa đổi cả hai hàng có chứa thông báo lỗi và sau đó là thông báo lỗi. Chúng tôi sử dụng bố cục lưới một lần nữa để tập trung vào thông báo bên trong hàng thứ hai và làm cho Đối với thông báo lỗi, chúng tôi chỉ chơi xung quanh với kích thước và kiểu dáng của nó. Do lưu ý rằng ban đầu Chúng tôi cũng thay đổi hiển thị một nửa của văn bản trong thông báo lỗi. Nếu bạn nhìn lại phần tử tin nhắn trong HTML, chúng tôi có: Invalid username and/or password Lưu ý rằng phần tử Bây giờ chúng ta chỉ cần đi qua các quy tắc ____ 16 16, hàng thứ ba của lưới Sau đó, chúng tôi tạo kiểu cho các lĩnh vực hình thức. Vì chúng tôi muốn cả hai trường (tên người dùng và mật khẩu) trông giống nhau, chúng tôi tạo một quy tắc duy nhất chọn lớp được cung cấp cho cả hai phần tử, Đối với các sửa đổi phong cách, đó là một số thay đổi nhỏ để làm cho hai yếu tố Cuối cùng, chúng tôi thay đổi kiểu của nút đăng nhập để làm cho nó trông đẹp hơn. Không có gì mới ở đây, ngoại trừ Được rồi, chúng tôi đã vượt qua HTML và chúng tôi vừa hoàn thành CSS. Bây giờ chúng tôi đang ở trong ngôi nhà kéo dài với JavaScript. Để bắt đầu, chúng tôi nhận được tất cả các yếu tố mà chúng tôi sẽ cần làm việc với việc sử dụng JavaScript: Mẫu đăng nhập, nút đăng nhập và thông báo lỗi đăng nhập. Chúng tôi làm điều đó bằng cách gọi phương thức Sau đó, chúng tôi tạo một trình nghe sự kiện cho nút đăng nhập, loại Bên trong chức năng, chúng tôi bắt đầu bằng cách ngăn chặn hành vi mặc định của việc nhấp vào nút Đăng nhập (đó là gửi dữ liệu biểu mẫu). Trong cuộc biểu tình này, chúng tôi không muốn gửi dữ liệu, chúng tôi chỉ muốn xác nhận nó bằng JavaScript, do đó Sau đó, chúng tôi lấy các giá trị đầu vào của người dùng trong các trường biểu mẫu Bây giờ kết thúc chạm vào. Bất cứ khi nào người dùng nhấp vào nút Đăng nhập, chúng tôi sẽ truy xuất bất kỳ giá trị nào đã được nhập vào các trường biểu mẫu. Nhưng chúng ta cần phải làm điều gì đó với những thông tin đó. Sau đó, chúng tôi sẽ viết một khối if/other để thực thi một đoạn mã nếu thông tin đăng nhập là hợp lệ hoặc một đoạn khác nếu chúng không hợp lệ. Chúng ta cũng cần một điều kiện, phải không? Hãy cùng làm cho điều kiện đó xác nhận thực tế của thông tin đăng nhập. Để đơn giản, xác thực đó sẽ kiểm tra xem tên người dùng được gõ có phải là người dùng hay không và mật khẩu là Web Web_Dev. Trong cú pháp JavaScript, điều này có nghĩa là Trong đó Nếu thông tin đăng nhập thực sự hợp lệ, thì chúng tôi sẽ hiển thị một hộp thoại cảnh báo với thông báo mà người dùng đã đăng nhập với Sucess và tiếp theo tải lại trang (một lần nữa, chỉ vì sự đơn giản). Nhưng nếu tên người dùng hoặc mật khẩu không hợp lệ, thì chúng tôi sẽ thay đổi thuộc tính Và đó là điều đó. Chúng tôi đã kết thúc giải thích này và bây giờ bạn có một trang đăng nhập đầy đủ chức năng được tạo bằng HTML, CSS và JavaScript. Tôi nghĩ rằng đây là một ý tưởng tuyệt vời cho các giai đoạn đầu của phát triển web mặt trước vì nó có thể dễ dàng cải thiện bằng cách thêm hình ảnh động, thay đổi thiết kế của trang hoặc làm cho phía máy chủ xác thực khi bạn học ngôn ngữ back-end Giống như Node.js, Java, PHP, v.v. Tôi hy vọng bài viết này đã hữu ích cho bạn và bằng mọi cách, hãy cho tôi biết phản hồi của bạn :) Nếu bạn muốn chơi xung quanh với một bản demo trực tiếp, bạn có thể tìm thấy một bản phát hành ở đây và mã hoàn chỉnh trên GitHub tại đây. |