Nodejs新手作品：我的第一个网站。就三个页面，折腾了两星期。。。请试用一下。感谢。

Nodejs新手作品：我的第一个网站。就三个页面，折腾了两星期。。。请试用一下。感谢。

http://118.244.155.95:3000/ 偶会积极改进。。

15 回复

当然可以！以下是一个简单的Node.js新手作品的示例，该作品包含三个页面：首页、关于我们页和联系我们页。这个示例使用了Express框架来快速搭建网站。

示例代码

首先，确保你已经安装了Node.js和npm。然后，创建一个新的项目目录，并初始化项目：

mkdir my-first-website
cd my-first-website
npm init -y

接下来，安装Express框架：

npm install express

创建一个名为app.js的文件，并添加以下代码：

const express = require('express');
const app = express();
const port = 3000;

// 设置模板引擎
app.set('view engine', 'ejs');

// 首页路由
app.get('/', (req, res) => {
    res.render('index', { title: '首页' });
});

// 关于我们页路由
app.get('/about', (req, res) => {
    res.render('about', { title: '关于我们' });
});

// 联系我们页路由
app.get('/contact', (req, res) => {
    res.render('contact', { title: '联系我们' });
});

// 启动服务器
app.listen(port, () => {
    console.log(`App is running at http://localhost:${port}`);
});

接下来，我们需要安装EJS模板引擎：

npm install ejs

然后，在项目根目录下创建一个名为views的文件夹，并在这个文件夹里创建三个文件：index.ejs、about.ejs 和 contact.ejs。

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1>欢迎来到首页</h1>
    <p>这是一个简单的Node.js网站。</p>
    <a href="/about">关于我们</a>
    <a href="/contact">联系我们</a>
</body>
</html>

views/about.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1>关于我们</h1>
    <p>这是关于我们的页面。</p>
    <a href="/">返回首页</a>
</body>
</html>

views/contact.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1>联系我们</h1>
    <p>这是联系我们的页面。</p>
    <a href="/">返回首页</a>
</body>
</html>

运行应用

最后，运行你的应用：

node app.js

现在，你可以通过浏览器访问http://localhost:3000来查看你的网站。希望这个简单的示例能帮助你更好地理解如何使用Node.js和Express来构建基本的Web应用！

如果你有任何问题或需要进一步的帮助，请随时提问！


估计服务挂了，打不开~

这个完全是前端的工作…

英雄传说零之轨迹 啥时候有汉化哦，哎

我也想说你这完全是前端的东西。。。。

继续努力

打不开，看不到效果

用动态DNS吧…

服务器过期了。。就一个月的有效期。没钱啊。

感觉很不错哦~~

着实非常不错， 无论是美工还是idea，能开源不？

https://github.com/fyddaben/psv_nodejs

前台全部采用jqueryMobile的框架，所以手机看起来应该也还可以。就是图片太多，每次加载耗时太慢。node后台主要练习了mongodb数据库的增删查改以及图片的上传。

不错，学习了。。

好看！

感谢你的分享！很高兴看到你在Node.js上制作了自己的第一个网站。以下是对你网站的几个建议和一些简单的示例代码来帮助你进一步完善它。

建议：

  1. 路由管理： 你可以使用Express框架来简化路由处理。Express是Node.js中最流行的Web应用框架之一，可以让你更方便地处理不同URL的请求。

  2. 模板引擎： 使用EJS、Pug等模板引擎来生成HTML页面，可以使代码更加整洁和易于维护。

  3. 静态文件服务： 使用Express内置的中间件express.static来提供静态资源（如CSS、JavaScript、图片）。

  4. 错误处理： 添加适当的错误处理逻辑，以便在出现错误时给用户提供有用的反馈信息。

示例代码

假设你已经有了三个页面：主页、关于页和联系页。

// 引入依赖包
const express = require('express');
const app = express();

// 设置模板引擎为EJS
app.set('view engine', 'ejs');

// 静态文件目录
app.use(express.static('public'));

// 路由定义
app.get('/', (req, res) => {
    res.render('home'); // 渲染 home.ejs 模板
});

app.get('/about', (req, res) => {
    res.render('about'); // 渲染 about.ejs 模板
});

app.get('/contact', (req, res) => {
    res.render('contact'); // 渲染 contact.ejs 模板
});

// 错误处理
app.use((req, res, next) => {
    res.status(404).send('Sorry, this page does not exist.');
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

文件结构

  • server.js - 主程序文件
  • views/
    • home.ejs
    • about.ejs
    • contact.ejs
  • public/
    • css/
    • js/
    • images/

希望这些建议和示例代码能够帮助你改进你的项目。继续加油！

回到顶部