45、web实验-抽取公共页面

45、web实验-抽取公共页面

在Web开发中，为了提高代码复用性和维护效率，通常会将页面中重复的部分抽取出来，形成公共页面或组件。以下是关于“抽取公共页面”的讲解：

#### 抽取公共页面的原因

- **减少代码重复**：避免在不同页面中重复编写相同的代码。

- **提高维护效率**：修改公共部分后，所有引用该部分的页面都会自动更新。

- **增强代码可读性**：使页面结构更加清晰，便于开发和维护。

#### 抽取公共页面的步骤（以Thymeleaf模板引擎为例）

1. **创建公共页面**

    - 将重复的代码片段（如头部导航、侧边栏、底部等）提取出来，存放在一个独立的HTML文件中，例如`common.html`。

    - 使用`th:fragment`属性为每个公共片段命名，方便后续引用。

   ```html

   

   

       

   

   

       

   

   

       

   

   ```

2. **引用公共页面**

    - 在其他需要使用公共片段的页面中，通过`th:insert`、`th:replace`或`th:include`属性引入公共片段。

   ```html

   

   

   

       

       

   

   

       

       

       

       

       

   

   

   ```

#### 不同引入方式的区别

- **`th:insert`**：将公共片段的内容插入到指定标签内部，保留原标签。

- **`th:replace`**：用公共片段的内容替换指定标签及其内容。

- **`th:include`**：将公共片段的内容插入到指定标签内部，但不保留公共片段的根标签。

#### 示例说明

假设有一个网站，所有页面都有相同的头部导航和底部版权信息。可以将这些公共部分抽取到`common.html`中，然后在每个页面中引用。

- **`common.html`**

  ```html

 

     

 

 

     

 

  ```

- **`index.html`**

  ```html

 

 

     

     

 

 

     

     

欢迎访问首页

     

 

 

  ```

通过抽取公共页面，可以简化代码，提高开发效率，并确保网站风格的一致性。