Rumah > Artikel > hujung hadapan web > perkhidmatan binaan nodejs dan vue
perkhidmatan binaan nodejs dan vue
- PHPzasal
- 2023-05-25 15:51:08506semak imbas
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:
8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
<title>My Vue App</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
82a735c72ba30f96210377df991ebafe
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
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!');
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');});
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:
8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
<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>73a6ac4ed44ffec12cee46588e518a5e
现在，我们需要将这个文件作为我们的服务的响应。修改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、总结
Atas ialah kandungan terperinci perkhidmatan binaan nodejs dan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!