Nội dung
- Yêu cầu - Bước 1 - Cài đặt Adonis CLI - Bước 2 - Sử dụng Edge Templating Engine - Bước 3 - Tạo một schemas database - Bước 4 - Tạo bộ điều khiển và cài đặt tuyến - Bước 5 - Xác thực đầu vào của user - Bước 6 - Cung cấp ứng dụng - Kết luận

Thứ sáu, 22/11/2019 | 00:00 GMT+7

Cách tạo một ứng dụng trích dẫn đầy cảm hứng bằng AdonisJs và MySQL

AdonisJs là một khung công tác web Node.js được viết bằng JavaScript đơn giản chạy trên tất cả các hệ điều hành chính. Nó sử dụng mẫu thiết kế MVC (Model - View - Controller) phổ biến và cung cấp một hệ sinh thái ổn định để viết các ứng dụng web phía server . Khung có tính năng xác thực liền mạch, SQL ORM (ánh xạ quan hệ đối tượng), di chuyển và seeding database . AdonisJs có kiến trúc tương tự như khung ứng dụng web PHP Laravel , bao gồm cấu trúc folder giống nhau và một số khái niệm cài đặt được chia sẻ.

Theo mặc định, AdonisJs sử dụng công cụ mẫu Edge được thiết kế để sử dụng trực quan. Cũng giống như Laravel, AdonisJs cung cấp một ORM được gọi là Lucid , dùng làm giao diện để giao tiếp giữa các mô hình của ứng dụng và database . Với AdonisJs, các nhà phát triển có thể xây dựng một ứng dụng full-stack trong đó server back-end sẽ chịu trách nhiệm áp dụng logic nghiệp vụ, định tuyến và hiển thị tất cả các trang cho ứng dụng. Cũng có thể tạo một API dịch vụ web để trả về các phản hồi JSON từ bộ điều khiển; các dịch vụ web này sau đó được dùng bằng các khuôn khổ front-end như Vue.js , React và Angular .

Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng với AdonisJs bằng cách sử dụng CLI của nó. Bạn sẽ tạo các tuyến, bộ điều khiển, mô hình và chế độ xem trong ứng dụng của bạn và bạn sẽ thực hiện xác nhận biểu mẫu. Ví dụ trong hướng dẫn này sẽ là một ứng dụng trích dẫn đầy cảm hứng, trong đó user có thể đăng ký và đăng nhập để tạo một câu trích dẫn đầy cảm hứng. Ứng dụng demo này sẽ cho bạn cơ hội thực hiện các thao tác CRUD (Tạo, Đọc, Cập nhật và Xóa).

Yêu cầu

Trước khi bắt đầu hướng dẫn này, bạn cần những điều sau:

Một cài đặt local của Node.js (ít nhất v8) và npm (ít nhất v3.0). Node.js là một môi trường thời gian chạy JavaScript cho phép bạn chạy mã của bạn bên ngoài trình duyệt. Nó đi kèm với một trình quản lý gói được cài đặt sẵn có tên là npm, cho phép bạn cài đặt và cập nhật các gói. Để cài đặt chúng trên macOS hoặc Ubuntu 18.04, hãy làm theo các bước trong Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ trên macOS hoặc phần Cài đặt Sử dụng PPA của Cách Cài đặt Node.js trên Ubuntu 18.04 .
MySQL được cài đặt trên máy của bạn. Làm theo hướng dẫn tại đây để download và cài đặt nó cho sự lựa chọn của hệ điều hành. Để cài đặt thành công MySQL, bạn có thể cài đặt nó bằng Homebrew trên Mac hoặc cho Ubuntu 18.04, hãy làm theo hướng dẫn của ta Cách cài đặt MySQL trên Ubuntu 18.04 .
Hiểu biết cơ bản về JavaScript; xem loạt bài Cách viết mã trong JavaScript của ta .
Đã cài đặt một editor , chẳng hạn như Visual Studio Code , Atom hoặc Sublime Text .

Lưu ý: Hướng dẫn này sử dụng máy macOS để phát triển. Nếu bạn đang sử dụng hệ điều hành khác, bạn có thể cần sử dụng sudo cho các lệnh npm trong các bước đầu tiên.

Bước 1 - Cài đặt Adonis CLI

Trong phần này, bạn sẽ cài đặt Adonis CLI và tất cả các gói yêu cầu của nó trên máy local của bạn.CLI sẽ cho phép bạn xây dựng một dự án AdonisJs mới cũng như tạo và tạo bảng mẫu cho bộ điều khiển, phần mềm trung gian và mô hình trong ứng dụng của bạn. Bạn cũng cần tạo database của bạn cho dự án.

Chạy lệnh sau để cài đặt AdonisJs CLI trên phạm vi global trên máy của bạn qua npm :

npm i -g @adonisjs/cli

Khi quá trình cài đặt hoàn tất, hãy nhập lệnh sau vào terminal để xác nhận cài đặt AdonisJs và xem version hiện tại:

adonis --version

Bạn sẽ thấy kết quả hiển thị version hiện tại của AdonisJs:

Output
4.1.0

Với việc cài đặt thành công AdonisJs CLI, giờ đây bạn có quyền truy cập và có thể sử dụng lệnh adonis để tạo các bản cài đặt mới của một dự án AdonisJs, quản lý dự án của bạn và tạo các file có liên quan như bộ điều khiển, mô hình, v.v.

Bây giờ, bạn có thể tiến hành tạo một dự án AdonisJs mới bằng cách sử dụng lệnh adonis như được hiển thị ở đây:

adonis new adonis-quotes-app

Lệnh trước đó sẽ tạo một ứng dụng có tên adonis-quotes-app trong một folder mới có cùng tên trong folder dự án local của bạn với cấu trúc AdonisJs MVC có liên quan.

Di chuyển vào folder ứng dụng mới:

cd adonis-quotes-app

Sau đó, khởi động ứng dụng của bạn bằng lệnh:

adonis serve --dev

Thao tác này sẽ khởi động server phát triển trên cổng mặc định 3333 như được chỉ định bên trong file .env root cho ứng dụng của bạn. Điều hướng đến http: // localhost: 3333 để xem trang chào mừng của AdonisJs.

Trang chào mừng của AdonisJs

Đến đây bạn sẽ hoàn thành việc cài đặt database của bạn . Tại đây, bạn sẽ cài đặt trình điều khiển mysql để kết nối với server MySQL từ ứng dụng Node.js của bạn thông qua npm . Để bắt đầu, hãy quay lại terminal của bạn nơi ứng dụng hiện đang chạy, dừng quá trình bằng CTRL + C và chạy lệnh sau:

npm i mysql

Đến đây bạn đã cài đặt thành công trình điều khiển MySQL Node.js cho ứng dụng này, bạn cần tạo database ứng dụng và cài đặt kết nối thích hợp với nó.

Phiên bản MySQL mới nhất mà bạn đã cài đặt từ hướng dẫn yêu cầu sử dụng plugin xác thực mặc định có tên caching_sha2_password . Điều này hiện không được hỗ trợ bởi trình điều khiển Node.js cho MySQL. Để tránh bất kỳ sự cố kết nối database nào từ ứng dụng của bạn, bạn cần tạo user MySQL mới và sử dụng plugin xác thực hiện được hỗ mysql_native_password .

Để bắt đầu, hãy truy cập client MySQL bằng account gốc :

mysql -u root -p

Bạn sẽ được yêu cầu nhập password account gốc đã cài đặt trong quá trình cài đặt MySQL.

Tiếp theo, tạo user và password bằng plugin mysql_native_password :

CREATE USER 'sammy'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

Bạn sẽ thấy kết quả sau:

Output
Query OK, 0 rows affected (0.02 sec)

Tiếp theo, tạo database cho ứng dụng với:

CREATE DATABASE adonis;

Bạn sẽ thấy kết quả sau:

Output
Query OK, 1 row affected (0.03 sec)

Đến đây bạn đã tạo thành công database cho ứng dụng này.

Bây giờ, cho phép truy cập vào database đã tạo cho user MySQL mới. Chạy lệnh sau để cấp tất cả các quyền cho user trong database :

GRANT ALL PRIVILEGES ON adonis.* TO 'sammy'@'localhost';

Reload bảng-cấp quyền quyền bằng cách chạy lệnh sau để áp dụng các thay đổi mà bạn vừa thực hiện:

FLUSH PRIVILEGES;

Bạn sẽ thấy kết quả sau:

Output
Query OK, 0 rows affected (0.00 sec)

Thoát khỏi client MySQL bằng:

quit;

Bạn đã cài đặt thành công AdonisJs CLI, tạo một dự án AdonisJs mới và cài đặt mysql qua npm . Bạn cũng đã tạo database cho ứng dụng này và cài đặt một user MySQL với các quyền thích hợp cho nó. Đây là cài đặt cơ bản cho ứng dụng của bạn và trong phần tiếp theo bạn sẽ bắt đầu tạo các khung nhìn cần thiết cho ứng dụng của bạn .

Bước 2 - Sử dụng Edge Templating Engine

AdonisJs được vận chuyển với công cụ mẫu của riêng nó có tên là Edge . Nó cho phép bạn tạo một mẫu HTML có thể sử dụng lại và cho phép giới thiệu logic giao diện user vào ứng dụng của bạn với mã tối thiểu. Edge cung cấp cho các nhà phát triển JavaScript các công cụ trong khi phát triển ứng dụng để xây dựng bố cục dựa trên thành phần, viết các điều kiện, sử dụng lặp lại và tạo các lớp xem để giữ logic. Tất cả các file mẫu đều kết thúc bằng phần mở rộng .edge và được lưu trữ trong folder resources/views .

Sau đây là các dạng xem mà ứng dụng của bạn cần để hoạt động bình thường:

Bố cục chính : Với Edge, bạn có thể tạo một trang chứa CSS, các file JavaScript phổ biến, jQuery và các phần chung của giao diện user sẽ giữ nguyên trong toàn bộ ứng dụng — ví dụ: thanh chuyển , biểu trưng, tiêu đề, v.v ... Khi bạn đã cài đặt trang Bố cục Chính, các dạng xem (trang) khác trong ứng dụng của bạn sẽ kế thừa nó.
Chế độ xem index : Trang này sẽ sử dụng bố cục chính để kế thừa các file chung và cũng sẽ hiển thị nội dung cho trang chủ của ứng dụng.
Trang đăng nhập : Trang này cũng sẽ sử dụng bố cục chính và hiển thị biểu mẫu với các trường nhập cho cả tên user và password để user đăng nhập.
Trang đăng ký : Tại đây, user sẽ thấy một biểu mẫu để đăng ký và thông tin chi tiết của họ được lưu vào database .
Tạo trang trích dẫn : User sẽ sử dụng trang này để tạo một câu trích dẫn đầy cảm hứng.
Chỉnh sửa trang báo giá : User sẽ sử dụng trang này để chỉnh sửa báo giá.
Xem trang báo giá : User sẽ sử dụng trang này để xem một báo giá cụ thể.

Để bắt đầu, hãy sử dụng lệnh adonis để tạo trang bố cục chính bằng cách chạy lệnh sau:

adonis make:view layouts/master

Bạn sẽ thấy kết quả tương tự như sau:

Output
✔ create  resources/views/layouts/master.edge

Lệnh này sẽ tự động tạo một file master.edge trong folder resources/views/layouts . Mở file mới:

nano resources/views/layouts/master.edge

Thêm mã sau vào đó:

/resources/views/layouts/master.edge

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>adonis-quotes-app</title>     {{ style('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') }}     {{ style('style') }}     {{ script('https://code.jquery.com/jquery-3.3.1.slim.min.js') }} </head> <body>     <div class="container-fliud">         @include('navbar')         @!section('content')     </div>     {{ script('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js') }}  </body> </html>

Trong file này, bạn bao gồm các file CDN cho Bootstrap CSS, Bootstrap JavaScript và jQuery . Bạn thêm tên file CSS chung của style.css và trong div bạn bao gồm một phần file có tên navbar . Để sử dụng lại các đoạn mã HTML mà bạn yêu cầu trên nhiều trang trong ứng dụng của bạn , chẳng hạn như nav hoặc footer , bạn có thể kết hợp các phần tử. Đây là các file nhỏ hơn chứa mã lặp lại, giúp cập nhật mã cho các phần tử này ở một nơi nhanh hơn thay vì mọi trường hợp nó xảy ra. Thanh navbar chứa đánh dấu cho các node Đăng nhập và Đăng ký , biểu trưng và liên kết trang chủ.

Với điều này, tất cả các trang tiếp theo sẽ được tạo cho ứng dụng này có thể mở rộng bố cục chính và hiển thị thanh navbar mà không cần phải viết lại nội dung. Bạn sẽ tạo file navbar này sau trong hướng dẫn.

Cuối cùng, bạn xác định thẻ section @!section() để bao gồm nội dung từ các trang khác và để chúng hiển thị theo bố cục chính. Để điều này hoạt động như mong đợi, tất cả các trang mới sẽ mở rộng bố cục chính cũng phải xác định thẻ phần có cùng tên (ví dụ: @section( ' content ' ) ).

Lưu và thoát khỏi file sau khi bạn chỉnh sửa xong.

Tiếp theo, bạn sẽ sử dụng lệnh adonis để tạo thanh chuyển :

adonis make:view navbar

Bạn sẽ thấy kết quả tương tự như:

Output
✔ create  resources/views/navbar.edge

Mở file mới tạo:

nano resources/views/navbar.edge

Sau đó, thêm mã sau vào nó:

/resources/views/navbar.edge

<nav class="navbar navbar-expand-lg navbar-dark text-white">     <a class="navbar-brand" >LOGO</a>     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">         <span class="navbar-toggler-icon"></span>     </button>      <div class="collapse navbar-collapse" id="navbarNav">         <ul class="navbar-nav">             <li class="nav-item active ">                 <a class="btn text-white" href="/">Home</a>             </li>         </ul>     </div>     <div class="navbar-right" id="navbarNav">         @loggedIn             <ul class="navbar-nav">                     <li>                         <div class="text-right">                              <a href="{{route('create.quote')}}" class="btn btn-outline-primary">Create Quote</a>                         </div>                     </li>                  <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                        {{ auth.user.username}}                     </a>                     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">                         <form method="POST" action="{{route('logout')}}">                             {{ csrfField() }}                               <button  type="submit" class="dropdown-item" href="">logout</button>                         </form>                     </div>                 </li>             </ul>         @else             <ul class="navbar-nav">                 <li class="nav-item active pr-2">                     <a href="{{route('login.create')}}" class="btn btn-outline-danger">                       login                     </a>                 </li>                 <li class="nav-item active pr-2">                     <a href="{{route('register.create')}}" class="btn btn-outline-primary">                         Register                     </a>                 </li>             </ul>         @endloggedIn     </div> </nav>

Ngoài việc xác định các liên kết đến trang chủ và nút để đăng ký và đăng nhập, bạn thêm thẻ @loggedIn . Với điều này tại chỗ, bạn có thể viết một câu lệnh điều kiện xung quanh user được xác thực và hiển thị nội dung thích hợp khi cần thiết. Đối với user đã xác thực, ứng dụng sẽ hiển thị tên user của họ và một nút để tạo báo giá mới. Nếu user chưa đăng nhập, ứng dụng của bạn sẽ hiển thị một nút để đăng nhập hoặc đăng ký. Trang này sẽ được bao gồm như một phần trên mỗi trang như trước đó trong bố cục chính cho ứng dụng này.

Lưu và thoát khỏi file .

Bây giờ, bạn sẽ tạo trang index mà bạn sẽ sử dụng cho trang chủ của ứng dụng. Nó sẽ hiển thị và hiển thị danh sách tất cả các trích dẫn truyền cảm hứng mà user viết:

adonis make:view index

Bạn sẽ thấy một kết quả tương tự như sau:

Output
✔ create  resources/views/index.edge

Tệp được tạo ở đây sẽ nằm trong resources/views/index.edge . Mở tập tin:

nano resources/views/index.edge

Sau đó thêm mã sau:

/resources/views/index.edge

@layout('layouts/master') @section('content')  <div class="container">     <div class="text-center">         @if(flashMessage('successmessage'))             <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>         @endif     </div>     <div class="row">         @each(quote in quotes)             <div class="col-md-4 mb-4 quote-wrapper">                 <a href="/view-quote/{{quote.id}}" class="w-100">                     <div class="card shadow-lg bg-dark text-white">                         <div class="card-body">                             <blockquote class="blockquote mb-0">                                 <p>{{quote.body}}</p>                                 <footer class="blockquote-footer">                                     <cite title="Source Title"> {{quote.username}}</cite>                                 </footer>                             </blockquote>                             @if(auth.user.id == quote.user_id)                               <div>                                 <a  href="/edit-quote/{{quote.id}}" class="btn btn-primary">edit</a>                                 <a href="/delete-quote/{{quote.id}}" class="btn btn-danger">delete</a>                               </div>                             @endif                         </div>                     </div>                 </a>             </div>         @else          <div class="col-md-12 empty-quote text-center">                 <p>No inspirational quote has been created</p>          </div>         @endeach     </div> </div> @endsection

Ở đây, bạn cho biết quan điểm này sẽ sử dụng master bố trí bằng cách mở rộng nó. Tại trang này có thể có quyền truy cập vào tất cả các thư viện, stylesheets và navbar bao gồm trong master bố trí. Tiếp theo, bạn lặp lại một loạt các quotes bằng cách sử dụng thẻ @each được tích hợp sẵn. Mảng quotes sẽ được chuyển đến dạng xem này từ QuoteController mà bạn sẽ tạo sau trong hướng dẫn này. Nếu không có dấu ngoặc kép, một thông báo thích hợp sẽ được hiển thị.

Lưu và thoát khỏi file này.

Bây giờ, để tạo trang đăng nhập, hãy chạy lệnh sau từ terminal :

adonis make:view auth/login

Bạn sẽ thấy một kết quả tương tự như:

Output
✔ create  resources/views/auth/login.edge

Thao tác này sẽ tự động tạo một folder auth trong resources/views và cũng tạo một file login.edge trong đó. Mở file login.edge :

nano resources/views/auth/login.edge

Thêm nội dung sau:

/resources/views/auth/login.edge

@layout('layouts/master') @section('content')   <div class="container">     <div class="row">       <div class="col-md-4 shadow bg-white mt-5 rounded offset-md-4">         <form method="POST" action="{{route('login.store')}}">           {{ csrfField() }}             <div>               @if(flashMessage('successmessage'))                 <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>               @endif             </div>             <div class="form-group">               <label for="email">Email address</label>               <input type="email" class="form-control" id="email" name="email" value="{{old('email','')}}"  placeholder="Enter email">               {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}             </div>             <div class="form-group">               <label for="pasword">Password</label>               <input type="password" class="form-control" id="password" name="password" value="{{old('password','')}}" placeholder="Password">               {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}             </div>              <div class="text-center">               <button type="submit" class="btn btn-primary">Submit</button>             </div>         </form>       </div>     </div>   </div> @endsection

Tệp này chứa một biểu mẫu chứa các yếu tố đầu vào mà bạn sẽ sử dụng để thu thập tên user và password của user đã đăng ký trước khi họ có thể được xác thực thành công và bắt đầu tạo dấu ngoặc kép. Một yếu tố quan trọng khác cần lưu ý trên trang này là {{ csrfField() }} . Đây là một biến toàn cục mà AdonisJs sẽ sử dụng để chuyển mã truy cập CSRF khi gửi yêu cầu POST , PUT và DELETE từ ứng dụng của bạn.

Điều này được đưa ra để bảo vệ ứng dụng của bạn khỏi các cuộc tấn công truy vấn yêu cầu chéo trang web (CSRF) . Nó hoạt động bằng cách tạo bí mật CSRF duy nhất cho mỗi user truy cập trang web và khi user của bạn gửi yêu cầu HTTP từ giao diện user , mã thông báo tương ứng sẽ được tạo cho bí mật này và được chuyển cùng với yêu cầu. Điều này sẽ cho phép phần mềm trung gian được tạo cho yêu cầu này trong AdonisJs xác minh cả mã thông báo và bí mật CSRF đều hợp lệ và thuộc về user hiện được xác thực.

Lưu và thoát khỏi file sau khi bạn hoàn tất.

Tiếp theo, bạn sẽ tạo trang đăng ký bằng lệnh này:

adonis make:view auth/register

Bạn sẽ thấy kết quả tương tự như sau:

Output
✔ create  resources/views/auth/register.edge

Định vị và mở file mới tạo trong resources/views/auth/register.edge :

nano resources/views/auth/register.edge

Thêm mã sau:

resource / views / auth / register.edge

@layout('layouts/master') @section('content')   <div class="container ">     <div class="row">         <div class="col-md-4  bg-white p-3 mt-5 shadow no-border rounded offset-md-4">           <form method="POST" action="{{route('register.store')}}">             {{ csrfField() }}               <div class="form-group">                 <label for="name">Fullname</label>                 <input type="text" class="form-control" id="name" name="name"  value="{{old('name','')}}" placeholder="Enter Fullname">                 {{ elIf('<span class=text-danger>$self</span>', getErrorFor('name'), hasErrorFor('name')) }}               </div>               <div class="form-group">                 <label for="email">Email address</label>                 <input type="email" class="form-control" id="email"  name="email" value="{{old('email','')}}" placeholder="Enter email">                 {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}               </div>               <div class="form-group">                 <label for="pasword">Password</label>                 <input type="password" class="form-control" id="password" name="password" placeholder="Password">                 {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}               </div>               <div class="text-center">                   <button type="submit" class="btn btn-primary">Submit</button>               </div>           </form>         </div>     </div>   </div> @endsection

Tương tự như những gì bạn có trên trang đăng nhập, file này chứa một biểu mẫu HTML với các trường đầu vào để thu thập name , email và password của user trong quá trình đăng ký. Cũng bao gồm {{ csrfField() }} vì nó được yêu cầu cho mỗi yêu cầu đăng cho ứng dụng AdonisJs.

Lưu và thoát khỏi file .

Bây giờ, bạn sẽ tạo một file mới để tạo một câu trích dẫn đầy cảm hứng bằng cách chạy lệnh sau từ terminal:

adonis make:view quotes/create-quote

Bạn sẽ thấy kết quả như:

Output
✔ create  resources/views/quotes/create-quote.edge

Mở resources/views/quotes/create-quote.edge :

nano resources/views/quotes/create-quote.edge

Và thêm nội dung sau vào đó:

/resources/views/quotes/create-quote.edge

@layout('layouts/master') @section('content') <div class="container">     <div class="row">         <div class="col-md-3"></div>         <div class="col-md-6 shadow bg-white mt-5 rounded p-3">             <div class="float-right">                 <a href="/" class="btn btn-outline-dark ">back</a>             </div>                 <br>              <div class="clear-fix"></div>                 <form method="POST" action="{{route('store.quote')}}">                     {{ csrfField() }}                     <div class="form-group">                         <label for="quote">Create Quote</label>                         <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="Write an inspirational quote"></textarea>                     </div>                      <div class="text-center">                         <button type="submit" class="btn btn-primary">Submit</button>                     </div>                 </form>             </div>         </div>         <div class="col-md-3"></div>     </div> </div> @endsection

Trang này mở rộng bố cục chính và chứa một biểu mẫu HTML với phần tử vùng văn bản cho phép user nhập văn bản qua nhiều hàng trước khi được đăng và xử lý theo tuyến thích hợp.

Lưu và thoát khỏi file sau khi bạn hoàn tất.

Tiếp theo, bạn sẽ tạo một trang để chỉnh sửa một trích dẫn cụ thể. Chạy lệnh sau từ terminal :

adonis make:view quotes/edit-quote

Bạn sẽ thấy kết quả sau:

Output
✔ create  resources/views/quotes/edit-quote.edge

Mở file bằng:

nano resources/views/quotes/edit-quote.edge

Thêm nội dung sau vào resources/views/quotes/edit-quote :

/resources/views/quotes/edit-quote.edge

@layout('layouts/master') @section('content') <div class="container">     <div class="row">         <div class="col-md-6 shadow bg-white rounded p-3 offset-md-3">             <div class="float-right">                 <a href="/" class="btn btn-outline-dark ">back</a>             </div>             <br>              <div class="clear-fix"></div>             <form method="POST" action="/update-quote/{{quote.id}}">                 {{ csrfField() }}                 <div class="form-group">                     <label for="pasword">Edit Quote</label>                     <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="write the inspirational quote">{{quote.body}}</textarea>                 </div>                 <div class="text-center">                     <button type="submit" class="btn btn-primary">Update</button>                 </div>              </form>         </div>     </div> </div> @endsection

Trang này có nội dung tương tự như file create-quote.edge — sự khác biệt là nó chứa các chi tiết của một trích dẫn cụ thể cần được chỉnh sửa, <form method="POST" action="/update-quote/{{quote.id}}"> .

Lưu và thoát khỏi file .

Cuối cùng, tạo một trang để xem một trích dẫn đầy cảm hứng:

adonis make:view quotes/quote

Bạn sẽ thấy một kết quả tương tự như sau:

Output
✔ create  resources/views/quotes/quote.edge

Mở file bằng:

nano resources/views/quotes/quote.edge

Thêm mã sau:

/resources/views/quotes/quote.edge

@layout('layouts/master') @section('content') <div class="container">     <div class="row">         <div class="col-md-6 offset-md-3">             <div class="card shadow-lg bg-dark text-white">                 <div class="card-body">                     <div class="float-right">                         <a href="/" class="btn btn-outline-primary ">back</a>                     </div>                         <br>                     <div class="clear-fix"></div>                     <blockquote class="blockquote mb-0">                         <p>{{quote.body}}</p>                         <footer class="blockquote-footer">                             <cite title="Source Title">{{quote.username}}</cite>                         </footer>                     </blockquote>                 </div>             </div>         </div>     </div> </div> @endsection

Trang này hiển thị chi tiết của một trích dẫn cụ thể, bao gồm nội dung của câu trích dẫn, quote.body và tác giả đã tạo ra nó, quote.username .

Sau khi bạn hoàn tất file , hãy lưu và thoát.

Bạn đã tạo tất cả các trang cần thiết cho ứng dụng của bạn bằng cách sử dụng công cụ tạo khuôn mẫu Edge. Tiếp theo, bạn sẽ cấu hình và tạo kết nối với database của ứng dụng.

Bước 3 - Tạo một schemas database

Nếu bạn cung cấp ứng dụng của bạn ngay bây giờ, nó sẽ xuất hiện một lỗi vì bạn chưa kết nối ứng dụng với database . Trong phần này, bạn sẽ cài đặt một kết nối với database và sau đó sử dụng lệnh adonis để tạo một file di chuyển sẽ được sử dụng để tạo các bảng cho nó.

AdonisJs gửi kèm ORM có tên Lucid ORM , cung cấp triển khai bản ghi tích cực để làm việc với database của bạn. Nó giúp loại bỏ những rắc rối khi viết các truy vấn SQL lấy dữ liệu từ database trong thời gian thực. Điều này đặc biệt hữu ích khi làm việc trên một ứng dụng phức tạp đòi hỏi nhiều truy vấn. Ví dụ, bạn có thể lấy tất cả các trích dẫn từ ứng dụng của bạn bằng cách viết như sau:

const quotes = await Quote.all()

Để tiến hành cấu hình thích hợp cho database ứng dụng của bạn, hãy đảm bảo bạn vẫn ở trong folder root của ứng dụng và tạo file .env :

nano .env

Mở file mới tạo và thêm nội dung sau:

.env

HOST=127.0.0.1 PORT=3333 NODE_ENV=development APP_URL=http://${HOST}:${PORT} CACHE_VIEWS=false APP_KEY=bTVOEgUvmTCfkvgrK8gEBC3Qxt1xSYr0 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_USER=sammy DB_PASSWORD=password DB_DATABASE=adonis SESSION_DRIVER=cookie HASH_DRIVER=bcrypt

Theo mặc định, kết nối database cho ứng dụng AdonisJs là SQLite, bạn sẽ cập nhật lên MySQL tại đây. Bạn cũng chỉ định PORT cho ứng dụng, môi trường ứng dụng và thông tin đăng nhập database của bạn. Đảm bảo rằng bạn thay thế trình giữ chỗ DB_USER , DB_PASSWORD và DB_DATABASE bằng thông tin đăng nhập của bạn .

Tiếp theo, bạn sẽ tạo mô hình và file di chuyển cho Quote bằng Adonis CLI. Để thực hiện điều đó, hãy chạy lệnh sau:

adonis make:model Quote --migration

Bạn sẽ thấy kết quả tương tự như sau:

Output
✔ create  app/Models/Quote.js ✔ create  database/migrations/1568209992854_quote_schema.js

Lệnh này sẽ tạo một mô hình cho Quote trong folder app/Models và một file giản đồ trong folder database/migrations . Tệp giản đồ mới được tạo sẽ được gắn trước dấu thời gian hiện tại. Mở file giản đồ bằng:

nano database/migrations/1568209992854_quote_schema.js

Cập nhật nội dung của nó với mã sau:

database / di chuyển /… quote_schema.js

'use strict' /** @type {import('@adonisjs/lucid/src/Schema')} */ const Schema = use('Schema') class QuoteSchema extends Schema {   up () {     this.create('quotes', (table) => {       table.increments()       table.integer('user_id').notNullable()       table.string('username', 80).notNullable()       table.string('body').notNullable()       table.timestamps()     })   }   down () {     this.drop('quotes')   } } module.exports = QuoteSchema

Tệp giản đồ trong AdonisJs yêu cầu hai phương pháp khác nhau, đó là:

up : Được sử dụng để tạo bảng mới hoặc thay đổi bảng hiện có.
down : Được sử dụng để hoàn nguyên các thay đổi được áp dụng trong phương thức up .

Ngoài các timestamps() và increments() lĩnh vực, bạn cập nhật nội dung của file schema với thuộc tính lĩnh vực này user_id , username , và body của một câu rằng sẽ được tạo ra. Các trường user_id và username tham chiếu các chi tiết của user tạo một trích dẫn cụ thể. Điều này xác định mối quan hệ một đến nhiều và nghĩa là user có thể sở hữu vô số báo giá trong khi một trích dẫn duy nhất chỉ có thể thuộc về một user .

Lưu và thoát khỏi file .

AdonisJs được cài đặt với mô hình User và file di chuyển của nó theo mặc định, chỉ yêu cầu một sửa đổi nhỏ để cài đặt mối quan hệ giữa mô hình User và Quote .

Mở mô hình User trong app/Models/User.js :

app/Models/User.js

Thêm phương thức này ngay sau phương thức tokens() :

app / Models / User.js

... class User extends Model {   ...   tokens () {     return this.hasMany('App/Models/Token')   }    quote () {     return this.hasMany('App/Models/Quote')   } }  module.exports = User

Điều này sẽ cài đặt mối quan hệ một đến nhiều với bảng Quote bằng cách sử dụng user_id làm foreign keys .

Lưu và thoát khỏi file .

Để kết thúc phần này, hãy sử dụng lệnh sau để chạy quá trình di chuyển, lệnh này sẽ thực thi phương thức up() của tất cả các file di chuyển:

adonis migration:run

Bạn sẽ thấy kết quả tương tự như sau:

Output
migrate: 1503248427885_user.js migrate: 1503248427886_token.js migrate: 1568209992854_quote_schema.js Database migrated successfully in 3.42 s

Bạn đã cấu hình và bảo mật kết nối với database của bạn . Bạn cũng tạo ra một Quote mô hình và file schema tương ứng của nó và tạo ra một một đến nhiều mối quan hệ giữa User và Quote . Tiếp theo, bạn sẽ tạo các tuyến và tạo bộ điều khiển để xử lý các yêu cầu HTTP và logic nghiệp vụ để tạo, chỉnh sửa và xóa một trích dẫn đầy cảm hứng.

Bước 4 - Tạo bộ điều khiển và cài đặt tuyến

Trong phần này, bạn sẽ bắt đầu bằng cách tạo các bộ điều khiển để xử lý tất cả logic cho ứng dụng và sau đó đính kèm các bộ điều khiển này vào một tuyến cụ thể để user có thể truy cập thông qua một URL.

Để bắt đầu, bạn sẽ sử dụng Adonis CLI để tạo bộ điều khiển yêu cầu HTTP mới để xử lý tất cả các quy trình xác thực cho ứng dụng của bạn bằng cách chạy lệnh sau:

adonis make:controller Auth --type http

Lệnh này sẽ tạo một file AuthController.js và lưu nó trong folder app/Controllers/Http . Bạn sử dụng cờ --type để cho biết bạn muốn bộ điều khiển này là bộ điều khiển HTTP.

Bạn sẽ thấy một kết quả tương tự như sau:

Output
✔ create  app/Controllers/Http/AuthController.js

Tiếp theo, mở file bộ điều khiển mới được tạo:

nano app/Controllers/Http/AuthController.js

Cập nhật nó với nội dung sau:

app / Controllers / Http / AuthController.js

'use strict' const User = use('App/Models/User') class AuthController {      loginView({ view }) {         return view.render('auth.login')     }     registrationView({ view }) {         return view.render('auth.register')     }      async postLogin({ request, auth, response}) {         await auth.attempt(request.input('email'), request.input('password'))         return response.route('index')     }      async postRegister({ request, session, response }) {         const user = await User.create({             username: request.input('name'),             email: request.input('email'),             password: request.input('password')         })         session.flash({ successmessage: 'User have been created successfully'})         return response.route('login.create');     }      async logout ({ auth, response }) {         await auth.logout()         return response.route('/')     } } module.exports = AuthController

Trong file này, bạn nhập mô hình User và sau đó tạo hai phương thức có tên loginView() và registerView() để hiển thị các trang đăng nhập và đăng ký tương ứng. Cuối cùng, bạn tạo các phương thức không đồng bộ sau:

postLogin() : Phương thức này sẽ lấy giá trị của email và password được đăng thông qua sự trợ giúp của phương thức request có sẵn trong AdonisJs và sau đó xác thực user này dựa trên các chi tiết trong database . Nếu một user như vậy tồn tại trong database và đã nhập thông tin đăng nhập chính xác, họ sẽ được chuyển hướng trở lại trang chủ và được xác thực trước khi có thể tạo báo giá mới. Nếu không, một thông báo cho biết thông tin đăng nhập sai sẽ được hiển thị.
postRegister() : Điều này sẽ nhận giá trị của username , email và password để user tạo account cho user đó trong database . Thông báo cho biết user đó đã được tạo thành công sẽ được chuyển đến phiên và user sẽ được chuyển hướng đến trang đăng nhập để được xác thực và bắt đầu tạo báo giá.
logout() : Phương thức này sẽ xử lý chức năng đăng xuất và chuyển hướng user trở lại trang chủ.

Lưu và thoát khỏi file .

Đến đây bạn đã cài đặt bộ điều khiển để đăng ký và xác thực user , bạn sẽ tiến hành bằng cách tạo bộ điều khiển yêu cầu HTTP để quản lý tất cả các hoạt động liên quan đến báo giá.

Quay lại terminal, chạy lệnh sau để tạo QuoteController :

adonis make:controller Quote --type http --resource

Sử dụng cờ --resource sẽ tạo một bộ điều khiển với các phương thức tài nguyên được định nghĩa để thực hiện các hoạt động CRUD (Tạo, Đọc, Cập nhật và Xóa).

Bạn sẽ thấy:

Output
✔ create  app/Controllers/Http/QuoteController.js

Định vị file này trong app/Controllers/Http/QuoteController.js :

nano app/Controllers/Http/QuoteController.js

Cập nhật nó với nội dung sau:

app / Controllers / Http / QuoteController.js

'use strict' const Quote = use('App/Models/Quote')  class QuoteController {    async index ({ view }) {     const quote = await Quote.all()     return view.render('index', {       quotes: quote.toJSON()     })   }    async create ({ view }) {     return view.render('quotes.create-quote')   }    async store ({ request,auth,session, response }) {     const quote = await Quote.create({       user_id: auth.user.id,       username: auth.user.username,       body: request.input('body')     })     session.flash({ 'successmessage': 'Quote has been created'})     return response.redirect('/')   }    async show ({ params, view }) {     const quote = await Quote.find(params.id)     return view.render('quotes.view-quote', {       quote: quote.toJSON()     })   }    async edit ({ params, view }) {     const quote = await Quote.find(params.id)     return view.render('quotes.edit-quote', {       quote: quote.toJSON()     })   }    async update ({ params, request, response, session }) {     const quote = await Quote.find(params.id)     quote.body = request.input('body')     await quote.save()     session.flash({'successmessage': 'Quote has been updated'})     return response.redirect('/')   }    async destroy ({ params, response, session }) {     const quote = await Quote.find(params.id)     await quote.delete()     session.flash({'successmessage': 'Quote has been deleted'})     return response.redirect('/')   } } module.exports = QuoteController

Trong bộ điều khiển này, bạn nhập các Quote mô hình và cập nhật các phương pháp sau đây được tạo ra tự động bằng cách sử dụng AdonisJs CLI:

index() : để tìm nạp tất cả các trích dẫn từ database và hiển thị nó trên trang chủ của ứng dụng.
create() : để hiển thị một trang để tạo dấu ngoặc kép.
store() : duy trì một trích dẫn mới được tạo vào database và trả về một phản hồi thích hợp.
show() : để lấy id của một trích dẫn cụ thể, hãy truy xuất nó từ database và hiển thị nó trên trang báo giá chỉnh sửa.
edit() : để lấy chi tiết của một trích dẫn cụ thể từ database và kết xuất nó để chỉnh sửa.
update() : để xử lý bất kỳ cập nhật nào đối với báo giá và chuyển hướng user trở lại trang chủ.
destroy() : để xóa một trích dẫn cụ thể và xóa hoàn toàn khỏi database .

Lưu và thoát khỏi file .

Sau khi tạo tất cả các bộ điều khiển cần thiết cho ứng dụng này, bây giờ bạn có thể cài đặt các tuyến để user có thể dễ dàng tương tác với ứng dụng của bạn. Để bắt đầu, hãy chuyển đến file start/routes.js

nano start/routes.js

Thay thế nội dung của nó bằng nội dung sau:

start / route.js

'use strict' const Route = use('Route')  Route.get('/','QuoteController.index').as('index') Route.get('/register','AuthController.registrationView').as('register.create') Route.post('/register-store','AuthController.postRegister').as('register.store').validator('Register') Route.get('/login','AuthController.loginView').as('login.create') Route.post('/login-store','AuthController.postLogin').as('login.store') Route.get('/view-quote/:id','QuoteController.show').as('view.quote')  Route.group(() => {     Route.get('/create-quote','QuoteController.create').as('create.quote')     Route.post('/store-quote','QuoteController.store').as('store.quote')     Route.get('/edit-quote/:id','QuoteController.edit').as('edit.quote')     Route.post('/update-quote/:id','QuoteController.update').as('update.quote')     Route.get('/delete-quote/:id','QuoteController.destroy').as('delete.quote')     Route.post('/logout','AuthController.logout').as('logout') }).middleware(['auth'])

Tại đây, bạn xác định đường dẫn cho mỗi tuyến đường trong ứng dụng của bạn , chỉ định các động từ HTTP cho mỗi hành động và ràng buộc tuyến đường với một phương thức cụ thể trong mỗi bộ điều khiển. Bạn cũng đặt tên cho từng tuyến đường này vì chúng đã được tham chiếu trong bộ điều khiển và chế độ xem.

Để đảm bảo chỉ những user đã được xác thực mới có thể truy cập vào tất cả các tuyến trích dẫn, bạn chỉ định một phần mềm trung gian group được đặt tên cho nó. Và cuối cùng, bạn đính kèm một phương thức xác nhận vào tuyến register.store để xác thực đầu vào của user .

Lưu và thoát khỏi file .

Bạn đã tạo bộ điều khiển và cài đặt các tuyến cho ứng dụng của bạn . Tiếp theo, bạn sẽ tạo phương thức xác nhận được xác định trong bước này.

Bước 5 - Xác thực đầu vào của user

AdonisJs không có trình xác thực được tích hợp sẵn theo mặc định. Do đó, bạn sẽ cài đặt và đăng ký trình xác thực cho ứng dụng của bạn theo cách thủ công.

Chạy lệnh sau để cài đặt nó:

adonis install @adonisjs/validator

Mở file sau để đăng ký nhà cung cấp trình xác thực:

nano start/app.js

Sau đó, đăng ký nhà cung cấp trình xác thực bằng cách thêm nó vào danh sách các nhà cung cấp như sau:

start / app.js

... const providers = [    ...    '@adonisjs/cors/providers/CorsProvider',    '@adonisjs/shield/providers/ShieldProvider',    '@adonisjs/session/providers/SessionProvider',    '@adonisjs/auth/providers/AuthProvider',    '@adonisjs/validator/providers/ValidatorProvider' ]

Đến đây bạn đã cài đặt và đăng ký nhà cung cấp trình xác thực trong ứng dụng của bạn , hãy tạo trình xác thực tùy chỉnh để xác thực thông tin nhập của user trong quá trình đăng ký bằng lệnh sau:

adonis make:validator Register

Thao tác này sẽ tạo file Register.js trong folder App/validators . Mở file bằng:

nano app/Validators/Register.js

Thêm mã sau vào file :

app / Validators / Register.js

'use strict' class Register {   get rules () {     return {       name:'required',       email:'required|email|unique:users',       password:'required|min:8'     }   }    get messages(){     return{       'name.required':'Full name is required',       'email.required':'email is required',       'email.unique':'email already exists',       'password.required':'password is required',       'password.min':'password should be at least 8 characters'     }   } } module.exports = Register

Bạn xác định các luật cho các trường cụ thể trong ứng dụng của bạn . Nếu xác thực không thành công bất kỳ lúc nào, trình xác thực sẽ tự động đặt lỗi dưới dạng thông báo flash và user sẽ được chuyển hướng trở lại biểu mẫu.

Lưu và thoát khỏi file sau khi bạn chỉnh sửa xong.

Cuối cùng, để thêm kiểu dáng cho ứng dụng của bạn, hãy mở file sau:

nano public/style.css

Thay thế nội dung của nó bằng những thứ sau:

/public/style.css

@import url('https://fonts.googleapis.com/css?family=Montserrat:300');  html, body {   height: 100%;   width: 100%; }  body {   font-family: 'Montserrat', sans-serif;   font-weight: 300;   background-image: url("/splash.png");   background-color: #220052; }  * {   margin: 0;   padding: 0; }  a {   color: inherit;   text-decoration: underline; }  p {   margin: 0.83rem 0; }  .quote-wrapper {   margin-top: 20px; }  .quote-wrapper a {   text-decoration: none; }  .quote-wrapper a:hover {   color: #ffffff; }  .empty-quote {   color: #ffffff; }  form {   padding: 20px; }

Trong file này, bạn cập nhật kiểu CSS của ứng dụng trong style.css .

Bạn đã cài đặt và đăng ký một nhà cung cấp trình xác thực nhằm mục đích kiểm tra thông tin đầu vào của user trong quá trình đăng ký. Bạn cũng đã cập nhật nội dung của biểu định kiểu để thêm nhiều kiểu cho ứng dụng. Trong bước cuối cùng, bạn sẽ kiểm tra ứng dụng của bạn .

Bước 6 - Cung cấp ứng dụng

Trong bước này, bạn sẽ cung cấp ứng dụng của bạn và tạo user và password để kiểm tra xác thực. Bạn cũng sẽ thêm báo giá vào ứng dụng của bạn và xem báo giá này trên trang chủ.

Để kiểm tra ứng dụng của bạn, hãy khởi động server phát triển bằng lệnh sau từ folder root của ứng dụng:

adonis serve --dev

Thao tác này sẽ khởi động ứng dụng trên cổng được xác định bên trong file .env root , là 3333 . Điều hướng đến http: // localhost: 3333 từ trình duyệt của bạn.

Trích dẫn trang chủ ứng dụng

Trang chủ hiện đang trống vì bạn chưa tạo bất kỳ báo giá nào. Bấm vào nút Đăng ký .

Trang đăng ký

Nhập thông tin chi tiết của bạn và nhấp vào nút Gửi để hoàn tất quá trình đăng ký. Bạn sẽ được chuyển hướng đến trang đăng nhập. Nhập địa chỉ email và password của bạn để xác thực.

Trang đăng nhập

Khi bạn đã xác thực, hãy nhấp vào nút Tạo Báo giá .

Tạo trang báo giá

Nhập báo giá và chuyển đến trang Xem tất cả để xem báo giá của bạn.

Xem tất cả trang báo giá

Bạn đã thử nghiệm ứng dụng của bạn bằng cách tạo và xác thực user , sau đó viết trích dẫn.

Kết luận

Trong hướng dẫn này, bạn đã xây dựng một ứng dụng web với AdonisJs. Bạn cài đặt ứng dụng bằng AdonisJs CLI và tận dụng CLI để tạo các file có liên quan khác như bộ điều khiển, mô hình và chế độ xem.

Bạn có thể xây dựng các ứng dụng web với khuôn khổ này dù kích thước và độ phức tạp của chúng. Vui lòng download mã nguồn cho dự án này tại đây trên GitHub. Để khám phá các tính năng khác, bạn cũng có thể truy cập tài liệu chính thức .

Nếu bạn muốn khám phá một số hướng dẫn khung JavaScript khác của ta , hãy xem phần sau:

Tags:

Các tin liên quan

Cách cài đặt MySQL mới nhất trên Debian 10
2019-07-25
Cách triển khai ứng dụng cốt lõi ASP.NET với server MySQL bằng Nginx trên Ubuntu 18.04
2019-07-23
Cách tối ưu hóa MySQL với Bộ đệm truy vấn trên Ubuntu 18.04
2019-06-12
Cách di chuyển database MySQL sang PostgreSQL bằng pgLoader
2019-05-28
Cách cấu hình SSL / TLS cho MySQL trên Ubuntu 18.04
2019-05-17
Cách thiết lập WordPress với MySQL trên Kubernetes bằng Helm
2019-05-07
Cách cho phép truy cập từ xa vào MySQL
2019-03-07
Cách sửa chữa bảng bị hỏng trong MySQL
2019-03-07
Cách khắc phục sự cố lỗi socket trong MySQL
2019-03-07
Cách giải quyết sự cố trong MySQL
2019-03-07