Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js

Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js

Show

Ever wondered how data is passed from your front-end (HTML, CSS, and JavaScript) to your back-end? Well, wonder no more. I'll be showing you a simple setup on how this is done.

Pre-requisite

1) You know your HTML
2) You have a basic understanding of Node.js (it's okay if you don't. Click Here to learn the basics of Node.js and its basic setups.)
3) Have some understanding of asynchronous programming.
4) Have Node.js on your computer.
Note: Download Node.js from the official website Here. Make sure to download the one that has the LTS on it. The installation is pretty straightforward. Just click next till it’s done.
5) Have some understanding of Linux terminal commands. (I'm guessing you probably have some sort of Linux terminal like Git Bash Installed)

Front-End Setup

I like to separate my client from my server-side so it's easier to deploy my application. You can create an empty folder on your desktop (You can name it anything. I named mine testapp) and then open it on your IDE and create a folder named client. Inside the client folder, we are simply going to create 2 HTML files. One called Login and the other signup. You should have something like this

Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js
Inside the login.html, we'll do this inside. In the signup.html, we'll do the same except we'll add an additional input with a name attribute of "fullname".
Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js

code explanation: Now looking at that picture, you'll notice a couple of things. The form element is wrapped around the input element and the form element is given the action attribute and method attribute. What do those attributes do? Think of the action attribute as a guide, that directs the user's inputs or requests to the proper server-side route. It just carries the information to the appropriate spot on the server. Now let's talk about the method, what is that? The method just describes what kind of action the user is performing. There's the
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

0,
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

1,
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

2,
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

3, and
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

4 methods. Say the user wanted to click a button to get some information that would be a
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

1 method or if they wanted to delete an item from their list then that would be a
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

6 method. If they wanted to update everything in their list, they would use a
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

3 method but if they only wanted to update selected fields in their list, they would use a
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

4 method. for this tutorial, The user is trying to login into their account and that means that they need to send their data across to our servers, and as such a
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

0 method is used. If you also look at the input elements, you'll see that we have a name attribute attached to it. What does that do? It is used to reference the form-data after submitting the form.

Thiết lập back-end

Đối với phía máy chủ của chúng tôi, chúng tôi sẽ sử dụng Node.js và diễn tả một khung nút để quay lên máy chủ của chúng tôi. Vì vậy, hãy bắt đầu. Trước tiên chúng ta sẽ tạo một thư mục có tên là máy chủ trong thư mục gốc. Thay đổi thư mục vào thư mục máy chủ bằng cách nhập

// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

1. Cậu nên có vài thứ như thế này.
Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js

Lưu ý: của bạn sẽ trông hơi khác một chút. Lý do đường dẫn tệp của tôi trông giống như vậy là do thư mục TestApp của tôi nằm trong một thư mục có tên là tài liệu học tập. Đừng lo lắng điều này sẽ không ảnh hưởng đến mã của bạn.

Thiết lập các phụ thuộc

Vì chúng tôi ở trong thư mục máy chủ của chúng tôi, chúng tôi sẽ nhập

// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

2 bên trong thiết bị đầu cuối. Chỉ cần nhấn Enter trên tất cả các lời nhắc được trình bày. Điều này sẽ tạo một tệp "packge.json". Tệp này sẽ giữ các phụ thuộc mà máy chủ của chúng tôi sẽ cần phải hoạt động. Sau khi hoàn thành, chúng tôi sẽ chạy một bộ lệnh khác. Trong thiết bị đầu cuối của bạn, loại
// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

3. Các lệnh này sẽ cài đặt các mô -đun nút cùng với các phụ thuộc vào máy chủ của bạn. Tệp pack.json của bạn sẽ trông như thế này
Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js

Thiết lập tệp máy chủ

Điều tiếp theo chúng ta cần làm là tạo tệp thực tế sẽ giúp máy chủ của chúng tôi chạy và chạy. Hãy chắc chắn rằng bạn vẫn ở trong thư mục máy chủ của bạn. Tiếp theo tạo một index.js. Bây giờ chúng tôi sẽ thêm mã sau bên trong nó.

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000



// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

//You can use this to check if your server is working
app.get('/', (req, res)=>{
res.send("Welcome to your server")
})


//Route that handles login logic
app.post('/login', (req, res) =>{
    console.log(req.body.username) 
    console.log(req.body.password) 
})

//Route that handles signup logic
app.post('/signup', (req, res) =>{
console.log(req.body.fullname) 
console.log(req.body.username)
console.log(req.body.password) 
})

//Start your server on a specified port
app.listen(port, ()=>{
    console.log(`Server is runing on port ${port}`)
})

Nhập chế độ FullScreenen EXIT Mode FullScreen

Mã Giải thích: Hãy nhớ những phụ thuộc mà chúng tôi đã cài đặt sớm hơn, chúng tôi cần sử dụng chúng bên trong tệp index.js của chúng tôi. Chúng ta cần nhập chúng vào tệp. Chúng tôi làm điều đó bằng cách yêu cầu chúng và gán chúng cho một biến để sử dụng dễ dàng. Bạn có thể đặt tên cho các biến bất cứ thứ gì nhưng nó được chấp nhận rộng rãi để đặt tên cho chúng như bạn thấy ở đây.

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

Nhập chế độ FullScreenen EXIT Mode FullScreen

Mã Giải thích: Hãy nhớ những phụ thuộc mà chúng tôi đã cài đặt sớm hơn, chúng tôi cần sử dụng chúng bên trong tệp index.js của chúng tôi. Chúng ta cần nhập chúng vào tệp. Chúng tôi làm điều đó bằng cách yêu cầu chúng và gán chúng cho một biến để sử dụng dễ dàng. Bạn có thể đặt tên cho các biến bất cứ thứ gì nhưng nó được chấp nhận rộng rãi để đặt tên cho chúng như bạn thấy ở đây.

// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

Nhập chế độ FullScreenen EXIT Mode FullScreen

Mã Giải thích: Hãy nhớ những phụ thuộc mà chúng tôi đã cài đặt sớm hơn, chúng tôi cần sử dụng chúng bên trong tệp index.js của chúng tôi. Chúng ta cần nhập chúng vào tệp. Chúng tôi làm điều đó bằng cách yêu cầu chúng và gán chúng cho một biến để sử dụng dễ dàng. Bạn có thể đặt tên cho các biến bất cứ thứ gì nhưng nó được chấp nhận rộng rãi để đặt tên cho chúng như bạn thấy ở đây.

//Route that handles login logic
app.post('/login', (req, res) =>{
    console.log(req.body.username) 
    console.log(req.body.password) 
})

//Route that handles signup logic
app.post('/signup', (req, res) =>{
console.log(req.body.fullname) 
console.log(req.body.username)
console.log(req.body.password) 
})

Nhập chế độ FullScreenen EXIT Mode FullScreen

Mã Giải thích: Hãy nhớ những phụ thuộc mà chúng tôi đã cài đặt sớm hơn, chúng tôi cần sử dụng chúng bên trong tệp index.js của chúng tôi. Chúng ta cần nhập chúng vào tệp. Chúng tôi làm điều đó bằng cách yêu cầu chúng và gán chúng cho một biến để sử dụng dễ dàng. Bạn có thể đặt tên cho các biến bất cứ thứ gì nhưng nó được chấp nhận rộng rãi để đặt tên cho chúng như bạn thấy ở đây.

app.listen(port, ()=>{
    console.log(`Server is running on port ${port}`)
})

Nhập chế độ FullScreenen EXIT Mode FullScreen

Mã Giải thích: Hãy nhớ những phụ thuộc mà chúng tôi đã cài đặt sớm hơn, chúng tôi cần sử dụng chúng bên trong tệp index.js của chúng tôi. Chúng ta cần nhập chúng vào tệp. Chúng tôi làm điều đó bằng cách yêu cầu chúng và gán chúng cho một biến để sử dụng dễ dàng. Bạn có thể đặt tên cho các biến bất cứ thứ gì nhưng nó được chấp nhận rộng rãi để đặt tên cho chúng như bạn thấy ở đây.

Những phụ thuộc đó làm gì? Câu hỏi hay. Sự phụ thuộc đầu tiên là rõ ràng. Express giúp bạn dễ dàng tạo một máy chủ với nút mà không cần gõ nhiều dòng mã. Trước tiên chúng ta cần nhập nó và sau đó gán nó cho một biến gọi là

// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

4 theo cách đó chúng ta có thể dễ dàng sử dụng nó ở bất cứ đâu. Người tiếp theo là người chơi thuốc phân tích cơ thể. Nó chịu trách nhiệm phân tích các cơ quan yêu cầu đến trong một phần mềm trung gian trước khi bạn xử lý nó. CORS (chia sẻ tài nguyên có nguồn gốc từ chéo) Vì mặt trước và phần cuối của chúng tôi sẽ có trên các máy chủ khác nhau, chúng tôi cần một cái gì đó cho phép họ chia sẻ dữ liệu vì các trình duyệt không cho phép điều này vì lý do bảo mật. Chúng tôi có một biến gọi là
// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

5 với giá trị ________ 26 (bạn có thể cung cấp cho cổng của mình bất kỳ số nào). Đây là nơi máy chủ phụ trợ của chúng tôi sẽ đến. Sự phụ thuộc cuối cùng là Nodemon. Điều này chỉ đơn giản là giúp chúng tôi phát hiện các thay đổi được thực hiện trong tập lệnh máy chủ của chúng tôi và cập nhật máy chủ của chúng tôi. Hãy nghĩ về nó như là máy chủ trực tiếp để phát triển phụ trợ. Một vài dòng tiếp theo là của chúng tôi chỉ sử dụng các gói khác nhau mà chúng tôi đã cài đặt.
Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js
Remember we left this

//You can use this to check if your server is working
app.get('/', (req, res)=>{
res.send("Welcome to your server")
})

Nhập chế độ FullScreenen EXIT Mode FullScreen


Mã Giải thích: Hãy nhớ những phụ thuộc mà chúng tôi đã cài đặt sớm hơn, chúng tôi cần sử dụng chúng bên trong tệp index.js của chúng tôi. Chúng ta cần nhập chúng vào tệp. Chúng tôi làm điều đó bằng cách yêu cầu chúng và gán chúng cho một biến để sử dụng dễ dàng. Bạn có thể đặt tên cho các biến bất cứ thứ gì nhưng nó được chấp nhận rộng rãi để đặt tên cho chúng như bạn thấy ở đây.

Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js

Những phụ thuộc đó làm gì? Câu hỏi hay. Sự phụ thuộc đầu tiên là rõ ràng. Express giúp bạn dễ dàng tạo một máy chủ với nút mà không cần gõ nhiều dòng mã. Trước tiên chúng ta cần nhập nó và sau đó gán nó cho một biến gọi là // We are using our packages here app.use( bodyParser.json() ); // to support JSON-encoded bodies app.use(bodyParser.urlencoded({ // to support URL-encoded bodies extended: true})); app.use(cors()) 4 theo cách đó chúng ta có thể dễ dàng sử dụng nó ở bất cứ đâu. Người tiếp theo là người chơi thuốc phân tích cơ thể. Nó chịu trách nhiệm phân tích các cơ quan yêu cầu đến trong một phần mềm trung gian trước khi bạn xử lý nó. CORS (chia sẻ tài nguyên có nguồn gốc từ chéo) Vì mặt trước và phần cuối của chúng tôi sẽ có trên các máy chủ khác nhau, chúng tôi cần một cái gì đó cho phép họ chia sẻ dữ liệu vì các trình duyệt không cho phép điều này vì lý do bảo mật. Chúng tôi có một biến gọi là // We are using our packages here app.use( bodyParser.json() ); // to support JSON-encoded bodies app.use(bodyParser.urlencoded({ // to support URL-encoded bodies extended: true})); app.use(cors()) 5 với giá trị ________ 26 (bạn có thể cung cấp cho cổng của mình bất kỳ số nào). Đây là nơi máy chủ phụ trợ của chúng tôi sẽ đến. Sự phụ thuộc cuối cùng là Nodemon. Điều này chỉ đơn giản là giúp chúng tôi phát hiện các thay đổi được thực hiện trong tập lệnh máy chủ của chúng tôi và cập nhật máy chủ của chúng tôi. Hãy nghĩ về nó như là máy chủ trực tiếp để phát triển phụ trợ. Một vài dòng tiếp theo là của chúng tôi chỉ sử dụng các gói khác nhau mà chúng tôi đã cài đặt.

Các dòng dưới đây mô tả các tuyến đường của chúng tôi. Các tuyến đường là nơi người dùng sẽ gửi thông tin đăng nhập và đăng ký của họ đến và ở đây, chúng tôi sẽ lưu thông tin và sau đó trả lời người dùng bằng cách đăng nhập/đăng nhập chúng.

Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js
and this for login.html
Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js

Now that's done, you can go to either the signup.html page or the login.html page enter some information in the input like this,
Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js

press enter and whatever you entered on the frontend will show up in your terminal like this
Hướng dẫn how to connect javascript to node js - cách kết nối javascript với nút js

Như bạn có thể thấy, dữ liệu chúng tôi nhập vào mặt trước của chúng tôi hiển thị trong phần phụ trợ của chúng tôi. Chúng tôi chỉ console. đã đăng nhập dữ liệu. Bạn có thể lưu trữ dữ liệu trong một số cơ sở dữ liệu, trả lời nỗ lực đăng ký với trang bảng điều khiển, v.v. Nếu bạn có bất kỳ câu hỏi nào, vui lòng hỏi trong các bình luận bên dưới.

Tôi có thể sử dụng JavaScript trong Node JS không?

Node.js cho phép bạn chạy JavaScript trên máy chủ..

Làm cách nào để giao tiếp với JavaScript và Node JS?

Cách dễ nhất?Thiết lập Express và để mã phía máy khách của bạn giao tiếp thông qua AJAX (ví dụ: sử dụng jQuery)..Set up Express and have your client side code communicate via Ajax (for example, using jQuery). (function() { var app, express; express = require("express"); app = express. createServer(); app.

JavaScript hoạt động như thế nào với Node JS?

Nó được sử dụng làm dịch vụ phụ trợ nơi JavaScript hoạt động ở phía máy chủ của ứng dụng.Bằng cách này, JavaScript được sử dụng trên cả phía trước và phụ trợ.Nút.JS chạy trên công cụ Chrome V8, chuyển đổi mã JavaScript thành mã máy, nó có khả năng mở rộng cao, nhẹ, nhanh và tốn dữ liệu.javascript works on the server-side of the application. This way javascript is used on both frontend and backend. Node. js runs on chrome v8 engine which converts javascript code into machine code, it is highly scalable, lightweight, fast, and data-intensive.

Làm cách nào để chạy tệp JavaScript trong Node JS?

Cách thông thường để chạy một nút.Chương trình JS là chạy lệnh nút có sẵn trên toàn cầu (sau khi bạn cài đặt Node.js) và chuyển tên của tệp bạn muốn thực thi.Trong khi chạy lệnh, hãy đảm bảo bạn đang ở trong cùng một thư mục chứa ứng dụng.run the globally available node command (once you install Node. js) and pass the name of the file you want to execute. While running the command, make sure you are in the same directory which contains the app.