nodejs学习

Turingzk

已于 2024-06-17 15:30:57 修改

阅读量250

点赞数 8

文章标签：学习

于 2024-03-14 23:02:31 首次发布

本文链接：https://blog.csdn.net/weixin_47387140/article/details/136694759

版权

使用nodejs作为服务端，在页面上通过访问后端(),查询服务器列表信息，在下拉框中展示。

一、准备环境:安装nodejs,使用npm下载构架项目所需模块

项目结构:

project-root
|-- public
|   |-- favicon.ico
|-- views
|   |-- index.ejs
|-- app.js

安装nodejs,npm install express mysql helmet(提供CSP放行的插件) path(获取项目路径)

我的projectroot为/opt/nodejs-v10

二、编写应用代码app.js

cd /opt/nodejs-v10

mkdir -p {views,public}

vim app.js

//使用express模块创建应用
//引用模块，赋值给变量
const express = require('express');
const mysql = require('mysql');
const helmet = require('helmet');
const path = require('path');

const app = express();

// 配置数据库连接
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});

// 连接数据库
db.connect(err => {
  if (err) {
    console.error('数据库连接失败:', err);
  } else {
    console.log('数据库连接成功');
  }
});

// 设置模板引擎为 EJS（可以根据需要选择其他模板引擎）
app.set('view engine', 'ejs');
//寻找视图路径
app.set('views', path.join(__dirname, 'views'));

// 使用 express.static 提供静态资源 --加载favicon.ico图标
app.use(express.static(path.join(__dirname, 'public')));

//使用helmet设置CSP放行
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    // 添加其他必要的 CSP 指令
  },
}));

// 定义路由，处理 GET 请求
app.get('/list', (req, res) => {
  // 查询数据库中的服务器列表
  const query = 'SELECT * FROM servers';
  db.query(query, (err, results) => {
    if (err) {
      console.error('查询数据库失败:', err);
      res.status(500).send('服务器内部错误');
    } else {
      // 渲染网页并传递服务器列表数据
      res.render('index', { servers: results });
    }
  });
});

// 启动服务器，监听端口
const PORT = 8888;
app.listen(PORT, () => {
  console.log(`服务器已启动，监听端口 ${PORT}`);
});

##创建视图文件

vim 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>
<!--加载icon文件-->
 <link rel="icon" href="/root/favicon.ico" type="image/x-icon">
</head>
<body>

  <h1>服务器列表</h1>
  
  <label for="serverSelect">选择服务器：</label>
  <select id="serverSelect">
    <% servers.forEach(server => { %>
      <option value="<%= server.id %>"><%= server.name %></option>
    <% }); %>
  </select>

</body>
</html>

##启动服务

systemctl enable myapp --now