MVC 应用程序学习笔记

什么是MVC？

MVC是一种软件设计模式，它将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。模型表示应用程序的核心（比如数据、数据库操作、业务逻辑等），视图负责展示数据，控制器则负责处理用户交互，并操作模型和视图。MVC模式使得代码易于维护和拓展。

如何在应用程序中实现MVC？

模型层实现

模型层通常包含数据存储和业务逻辑。例如，在一个购物网站上，模型可能包含产品信息、订单、顾客信息等。在这个例子中，使用MySQL数据库来保存数据。以下是模型层的示例代码：

Copy Code
// 数据库连接配置
const dbConfig = {
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'shopping'
};

// 创建数据库连接池
const pool = mysql.createPool(dbConfig);

// 查询所有商品
function getAllProducts(callback) {
  pool.query('SELECT * FROM products', (error, results, fields) => {
    if (error) throw error;

    callback(results);
  });
}

// 添加订单
function addOrder(order, callback) {
  pool.query('INSERT INTO orders SET ?', order, (error, results, fields) => {
    if (error) throw error;

    callback(results.insertId);
  });
}

视图层实现

视图层负责展示模型层的数据。在我们的购物网站上，我们可以有很多视图展示不同的数据，例如产品列表、购物车、订单页面等等。以下是视图层的示例代码：

Copy Code
<html>
  <head>
    <title>My Shopping Site</title>
  </head>
  <body>
    <h1>My Shopping Site</h1>
    <ul>
      <% for (let i = 0; i < products.length; i++) { %>
        <li><%= products[i].name %> - $<%= products[i].price %></li>
      <% } %>
    </ul>
  </body>
</html>

控制器层实现

控制器负责处理用户交互并将请求发送到模型和视图层。在购物网站的例子中，当用户添加商品到购物车时，控制器负责从模型层获取商品信息并将其展示在视图层中。以下是控制器的示例代码：

Copy Code
// 添加商品到购物车
app.post('/cart/add', (req, res) => {
  const productId = req.body.productId;

  // 查询商品信息
  getProductById(productId, product => {
    // 将商品添加到购物车
    cart.addProduct(product);

    // 重定向到购物车页面
    res.redirect('/cart');
  });
});

如何使用MVC模式拓展应用程序？

MVC模式使得应用程序易于拓展和维护。例如，在购物网站上，我们可以轻松地添加新的视图来展示订单历史记录，或者添加对新的付款方式的支持。同时，我们可以根据需要添加新的模型和控制器来处理新的业务逻辑。

总结

MVC模式将应用程序分为三个主要部分：模型、视图和控制器。模型层包含数据存储和业务逻辑，视图层负责展示数据，控制器层负责处理用户交互并操作模型和视图。MVC模式使得应用程序易于拓展和维护。