Artikel ini ialah artikel perkongsian tentang rangka kerja dan alatan Web Dalam artikel ini, saya akan meringkaskan dan berkongsi 18 daripada rangka kerja dan alatan web saya yang paling disyorkan.
ialah platform peringkat rendah. Untuk menjadikan kerja pembangun mudah dan cekap, komuniti telah mencipta lebih daripada beribu-ribu perpustakaan. Seiring berjalannya waktu, terdapat banyak perpustakaan yang sangat baik untuk dipilih oleh semua orang:
// server.js
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})// server.js
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello World';
});
app.listen(3000);// app.controller.ts
import { Get, Controller, Render } from '@nestjs/common';
import { AppService } from './app.service';
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
@Get()
@Render('index')
render() {
const message = this.appService.getHello();
return { message };
}
}// app/controller/home.js
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
this.ctx.body = 'Hello world';
}
}
module.exports = HomeController;Next.js: Rangka kerja React menyediakan pengalaman pembangunan yang baik dan menyediakan persekitaran pengeluaran Semua ciri: pemaparan sebelah pelayan, sokongan TypeScript, prefetching laluan dan banyak lagi.
// first-post.js
export default function FirstPost() {
return <h1>First Post</h1>
}// index.tsx
export async function loader({ request }) {
return getProjects();
}
export async function action({ request }) {
const form = await request.formData();
return createProject({ title: form.get("title") });
}
export default function Projects() {
const projects = useLoaderData();
const { state } = useTransition();
const busy = state === "submitting";
return (
<div>
{projects.map((project) => (
<Link to={project.slug}>{project.title}</Link>
))}
<Form method="post">
<input name="title" />
<button type="submit" disabled={busy}>
{busy ? "Creating..." : "Create New Project"}
</button>
</Form>
</div>
);
}Gatsby: Penjana tapak statik berdasarkan React dan GraphQL, dengan pemalam dan ekosistem yang sangat kaya.
// src/pages/index.js
import * as React from 'react'
const IndexPage = () => {
return (
<main>
<title>Home Page</title>
<h1>Welcome to my Gatsby site!</h1>
<p>I'm making this by following the Gatsby Tutorial.</p>
</main>
)
}
export default IndexPage// index.js
'use strict';
const Hapi = require('@hapi/hapi');
const init = async () => {
const server = Hapi.server({
port: 3000,
host: 'localhost'
});
server.route({
method: 'GET',
path: '/',
handler: (request, h) => {
return 'Hello World!';
}
});
await server.start();
console.log('Server running on %s', server.info.uri);
};
process.on('unhandledRejection', (err) => {
console.log(err);
process.exit(1);
});
init();// server.js
const fastify = require('fastify')({ logger: true })
// Declare a route
fastify.get('/', async (request, reply) => {
return { hello: 'world' }
})
// Run the server!
const start = async () => {
try {
await fastify.listen(3000)
} catch (err) {
fastify.log.error(err)
process.exit(1)
}
}
start()// PostsController.js
import Post from 'App/Models/Post'
export default class PostsController {
public async index () {
return Post.all()
}
public async store ({ request }) {
return request.body()
}
}// app.ts
import feathers from '@feathersjs/feathers';
interface Message {
id?: number;
text: string;
}
class MessageService {
messages: Message[] = [];
async find () {
return this.messages;
}
async create (data: Pick<Message, 'text'>) {
const message: Message = {
id: this.messages.length,
text: data.text
}
this.messages.push(message);
return message;
}
}
const app = feathers();
app.use('messages', new MessageService());
app.service('messages').on('created', (message: Message) => {
console.log('A new message has been created', message);
});
const main = async () => {
await app.service('messages').create({
text: 'Hello Feathers'
});
await app.service('messages').create({
text: 'Hello again'
});
const messages = await app.service('messages').find();
console.log('All messages', messages);
};
main();Loopback.io: Memudahkan untuk membina aplikasi moden dengan penyepaduan yang kompleks.
// hello.controller.ts
import {get} from '@loopback/rest';
export class HelloController {
@get('/hello')
hello(): string {
return 'Hello world!';
}
}Nx: 使用NestJS、Express、React、Angular等进行全栈monorepo开发的工具包，Nx有助于将您的开发从一个团队构建一个应用程序扩展到多个团队协作开发多个应用程序！
Sapper: Sapper是一个用于构建各种规模的Web应用程序框架，具有出色的开发体验和灵活的基于文件系统的路由，提供SSR等等。
Socket.io: 用于构建实时网络应用程序的WebSocket框架。
// index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});Strapi: Strapi是一种灵活的开源无头CMS，它让开发人员可以自由选择自己喜欢的工具和框架，同时允许编辑者轻松管理他们的内容。
以上就是我推荐的Node.js Web框架和工具，如果有更好的推荐欢迎在评论区评论。
更多node相关知识，请访问：nodejs 教程！
Atas ialah kandungan terperinci Disyorkan untuk berkongsi 18 rangka kerja dan alatan web yang patut diketahui dalam Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
