公司的手机设备管理，第一次写Nodejs代码 = =

Nodejs 入门之作用了

Express
Mongodb
Bootstrap

https://github.com/6a209/Device-Manager

eggper 1楼

公司的手机设备管理，第一次写Nodejs代码 = =

最近我接手了一个新的项目——公司的手机设备管理。这是我第一次使用Node.js编写后端代码，所以我想分享一下我的入门经验和一些代码示例。

1. 环境搭建

首先，我们需要安装Node.js和npm（Node包管理器）。你可以从Node.js官网下载并安装最新版本的Node.js。安装完成后，可以通过以下命令检查是否安装成功：

node -v
npm -v

2. 项目初始化

接下来，我们需要创建一个新的项目文件夹，并在其中初始化一个新的Node.js项目。打开终端或命令提示符，然后执行以下命令：

mkdir device-manager
cd device-manager
npm init -y

这将生成一个package.json文件，用于管理项目的依赖关系。

3. 安装必要的库

在这个项目中，我们将使用Express作为Web框架、Mongodb作为数据库以及Bootstrap来快速构建前端界面。我们可以通过npm安装这些库：

npm install express mongoose bootstrap

4. 创建基本的Express应用

现在我们来创建一个基本的Express应用。在项目根目录下创建一个名为app.js的文件，并添加以下代码：

const express = require('express');
const mongoose = require('mongoose');

const app = express();

// 连接到MongoDB
mongoose.connect('mongodb://localhost/device-manager', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

// 定义设备模型
const DeviceSchema = new mongoose.Schema({
    name: String,
    model: String,
    serialNumber: String
});
const Device = mongoose.model('Device', DeviceSchema);

// 设置中间件
app.use(express.json());

// 路由定义
app.get('/devices', async (req, res) => {
    const devices = await Device.find();
    res.json(devices);
});

app.post('/devices', async (req, res) => {
    const { name, model, serialNumber } = req.body;
    const device = new Device({ name, model, serialNumber });
    await device.save();
    res.status(201).json(device);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

5. 前端界面

为了简化前端开发，我们可以使用Bootstrap来快速构建一个简单的用户界面。你可以在HTML文件中引入Bootstrap的CSS和JS文件，或者直接使用Bootstrap的CDN链接。

例如，在你的HTML文件中可以这样引入Bootstrap：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Device Manager</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1>Device Manager</h1>
        <form id="device-form">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" required>
            </div>
            <div class="form-group">
                <label for="model">Model</label>
                <input type="text" class="form-control" id="model" required>
            </div>
            <div class="form-group">
                <label for="serialNumber">Serial Number</label>
                <input type="text" class="form-control" id="serialNumber" required>
            </div>
            <button type="submit" class="btn btn-primary">Add Device</button>
        </form>
        <table class="table mt-3">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Model</th>
                    <th>Serial Number</th>
                </tr>
            </thead>
            <tbody id="device-list">
            </tbody>
        </table>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        document.getElementById('device-form').addEventListener('submit', async function(event) {
            event.preventDefault();
            const name = document.getElementById('name').value;
            const model = document.getElementById('model').value;
            const serialNumber = document.getElementById('serialNumber').value;

            const response = await fetch('/devices', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ name, model, serialNumber })
            });

            if (response.ok) {
                const device = await response.json();
                addDeviceToTable(device);
            }
        });

        async function loadDevices() {
            const response = await fetch('/devices');
            const devices = await response.json();
            devices.forEach(addDeviceToTable);
        }

        function addDeviceToTable(device) {
            const tableBody = document.getElementById('device-list');
            const row = tableBody.insertRow();
            row.insertCell().textContent = device.name;
            row.insertCell().textContent = device.model;
            row.insertCell().textContent = device.serialNumber;
        }

        loadDevices();
    </script>
</body>
</html>

通过上述步骤，我们已经创建了一个简单的手机设备管理系统。你可以根据需要进一步扩展和完善功能。希望这些代码对你有所帮助！

yibo5220 2楼

看到了这个;-)

在TM谁那！

sinazl 3楼

针对公司手机设备管理的需求，你可以使用Node.js来构建一个简单的应用。这里将介绍如何使用Express框架、MongoDB数据库和Bootstrap前端框架来搭建一个基本的手机设备管理系统。

示例代码

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

mkdir device-manager
cd device-manager
npm init -y

接下来，安装必要的依赖包：

npm install express mongoose bootstrap --save

1. Express后端服务

创建一个app.js文件，编写Express服务器的基本配置：

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// 连接到MongoDB
mongoose.connect('mongodb://localhost:27017/device-manager', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义设备模型
const DeviceSchema = new mongoose.Schema({
    name: String,
    model: String,
    status: String // 如：'active', 'inactive'
});

const Device = mongoose.model('Device', DeviceSchema);

// 路由
app.use(express.json());

app.get('/devices', async (req, res) => {
    const devices = await Device.find();
    res.json(devices);
});

app.post('/devices', async (req, res) => {
    const device = new Device(req.body);
    await device.save();
    res.status(201).send(device);
});

app.listen(3000, () => console.log('Server running on port 3000'));

2. Bootstrap前端界面

在HTML页面中引入Bootstrap样式表和JavaScript文件以提供用户界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Device Manager</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">Device Management System</h1>
        <!-- 设备列表 -->
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Model</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody id="device-list">
                <!-- 设备项将通过JavaScript动态添加 -->
            </tbody>
        </table>

        <!-- 添加新设备表单 -->
        <form id="new-device-form">
            <input type="text" name="name" placeholder="Name" class="form-control mb-2">
            <input type="text" name="model" placeholder="Model" class="form-control mb-2">
            <button type="submit" class="btn btn-primary">Add Device</button>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script>
        // 使用JavaScript加载设备数据并处理表单提交
    </script>
</body>
</html>

以上代码提供了Node.js后端服务和Bootstrap前端的基本结构。你可以根据实际需求扩展功能，如添加、删除或更新设备信息。