perkhidmatan binaan nodejs dan vue-Soal Jawab bahagian hadapan-php.cn

perkhidmatan binaan nodejs dan vue

PHPz

Lepaskan： 2023-05-25 15:51:08

asal

485 orang telah melayarinya

Dalam dunia pembangunan web hari ini, JavaScript telah menjadi bahasa arus perdana. Ia bukan sahaja boleh dilaksanakan pada bahagian penyemak imbas, tetapi juga memberikan sokongan yang kuat pada bahagian pelayan. Node.js ialah persekitaran berjalan JavaScript back-end sumber terbuka yang dibina pada enjin Chrome V8, manakala Vue ialah rangka kerja UI yang ringan, berprestasi tinggi dan mudah digunakan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Node.js dan Vue untuk membina pelayan dan menulis beberapa kod sampel mudah.

1. Pasang Node.js

Mula-mula, kita perlu memasang persekitaran Node.js secara setempat. Pemasangan Node.js adalah sangat mudah, cuma muat turun pakej pemasangan dan ikut arahan untuk memasangnya. Selepas pemasangan selesai, buka terminal dan masukkan perintah nod –v untuk menyemak nombor versi Node.js bagi memastikan Node.js boleh berjalan seperti biasa.

2. Buat projek

Buka terminal dan masukkan direktori kerja yang sesuai, contohnya:

$ mkdir my-project
$ cd my-project

Dalam direktori akar projek, cipta fail package.json:

$ npm init

Ikuti gesaan untuk mengisi maklumat projek. Fail ini akan merekodkan kebergantungan dan konfigurasi projek kami.

3. Pasang Vue

Masukkan arahan berikut dalam terminal:

$ npm install vue

Selepas pemasangan selesai, kami mencipta fail dinamakan Untuk fail index.html, kemudian perkenalkan CDN Vue:

<title>My Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Salin selepas log masuk

<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!'
        }
    });
</script>

Salin selepas log masuk

Dalam kod sampel ini, kami menggunakan Vue untuk memaparkan paparan secara dinamik dan menambah Data terikat ke dalam templat. Sintaks mengikat data Vue sangat ringkas Gunakan {{ }} untuk mengikat data pada templat, supaya kami boleh mengemas kini kandungan yang dipaparkan oleh templat pada masa jalan.

4. Perkhidmatan Bina Node.js

Seterusnya, kami menggunakan Node.js untuk membina perkhidmatan. Dalam direktori akar projek, buat fail bernama server.js dan masukkan kod berikut di dalamnya:

const http = require('http');

const server = http. (req, res) => {

res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!

Salin selepas log masuk

');
});

server.listen(3000, () => {

console.log('Server running at http://localhost:3000/');

Salin selepas log masuk

});

Coretan kod ini mencipta pelayan HTTP mudah dan mendengar pada port 3000. Kami boleh menggunakan modul http yang disediakan oleh Node.js sendiri untuk mencipta dan mengurus pelayan Modul ini menyediakan beberapa API biasa untuk protokol HTTP, seperti createServer, dengar, dsb.

5. Benamkan aplikasi Vue ke dalam perkhidmatan

Sekarang, kami akan membenamkan aplikasi Vue ke dalam perkhidmatan kami. Kami menambah kod berikut pada fail index.html:

<head>
    <title>My Vue App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            }
        });
    </script>
</body>

Salin selepas log masuk

现在，我们需要将这个文件作为我们的服务的响应。修改server.js文件如下：

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/html');
    fs.readFile('index.html', (err, data) => {
        if (err) throw err;
        res.end(data);
    });
});

server.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

这个修改后的代码片段会读取index.html文件，并将其发送到客户端。这样，我们的服务就能够将Vue应用呈现到用户的浏览器中。

6、总结

Salin selepas log masuk

Atas ialah kandungan terperinci perkhidmatan binaan nodejs dan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!