bs架构的项目示例

原创

mob64ca12e20c7d 2024-08-14 08:47:33 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e20c7d的原创作品，请联系作者获取转载授权，否则将追究法律责任

BS架构项目示例及其实现

什么是BS架构？

BS（Browser-Server）架构是一种以浏览器为客户端、服务器为数据处理中心的应用程序架构。与传统的CS（Client-Server）架构相比，BS架构将数据和逻辑处理移到服务器端，用户通过浏览器进行访问。这种架构具有较高的灵活性、可维护性和易部署性，广泛应用于互联网应用和企业内部管理系统。

BS架构的优势

跨平台支持：用户只需一个浏览器，无需考虑操作系统和终端设备。
自动更新：所有的更新和补丁都可以在服务器端完成，用户无需下载和安装。
集中管理：所有数据和逻辑在服务器端处理，便于数据管理和安全控制。

示例项目：在线任务管理系统

在本节中，我们将创建一个简单的在线任务管理系统，展示如何使用BS架构进行开发。

技术栈

前端：HTML, CSS, JavaScript
后端：Node.js + Express
数据库：MongoDB

项目规划

以下是我们的项目甘特图，展示了项目的基本时间节点。

gantt
    title 项目甘特图
    dateFormat  YYYY-MM-DD
    section 需求分析
    需求讨论           :a1, 2023-11-01, 5d
    需求确认           :after a1  , 3d
    section 设计阶段
    系统架构设计       :a2, after a1  , 5d
    前端设计           :after a2  , 5d
    section 开发阶段
    后端开发           :a3, after a2  , 10d
    前端开发           :after a3  , 10d
    section 测试阶段
    单元测试           :after a3  , 5d
    集成测试           :after a3  , 5d
    section 部署阶段
    部署到服务器       :after a3  , 3d

代码实现

1. 创建后端服务

首先，我们需要安装所需的包。可以使用npm：

npm install express mongoose body-parser cors

接下来，我们创建一个简单的Express应用：

// server.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(bodyParser.json());

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

// 定义任务模型
const TaskSchema = new mongoose.Schema({
  title: String,
  completed: Boolean,
});

const Task = mongoose.model('Task', TaskSchema);

// 获取任务列表
app.get('/tasks', async (req, res) => {
  const tasks = await Task.find();
  res.json(tasks);
});

// 新建任务
app.post('/tasks', async (req, res) => {
  const newTask = new Task(req.body);
  await newTask.save();
  res.json(newTask);
});

// 启动服务器
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

2. 创建前端页面

在前端，我们可以使用简单的HTML和JavaScript进行交互：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线任务管理系统</title>
</head>
<body>
    任务列表
    <ul id="task-list"></ul>
    <input type="text" id="task-input" placeholder="输入新任务" />
    <button onclick="addTask()">添加任务</button>

    <script>
        async function fetchTasks() {
            const response = await fetch('http://localhost:5000/tasks');
            const tasks = await response.json();
            const taskList = document.getElementById('task-list');
            taskList.innerHTML = '';
            tasks.forEach(task => {
                const li = document.createElement('li');
                li.textContent = task.title;
                taskList.appendChild(li);
            });
        }

        async function addTask() {
            const taskInput = document.getElementById('task-input');
            await fetch('http://localhost:5000/tasks', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ title: taskInput.value, completed: false }),
            });
            taskInput.value = '';
            fetchTasks();
        }

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

状态图

在应用中，我们可以用状态图表示一个任务的生命周期。

stateDiagram
    state "新任务" as Task_New {
        [*] --> 提交
        提交 --> 待处理 : 提交后
    }

    state "待处理" as Task_Pending {
        待处理 --> 进行中 : 开始
        进行中 --> 完成 : 结束
        完成 --> [*]
    }