Java栈非SPA企业应用：用React/Vue优化搜索分页HTML渲染

嘿，太懂你这种用jQuery拼HTML拼到崩溃的感受了——那种字符串拼接不仅容易写错标签，后期维护起来更是头大。针对你的多页应用场景，React和Vue都能完美解决这个问题，而且完全不需要把整个应用改成SPA，咱们可以渐进式地只改造搜索页面这一块，成本极低，上手也快。

下面分别给你两种方案的具体实现思路和代码示例：

React 方案（渐进式集成） #

因为是多页应用，咱们不用搞复杂的Webpack打包，直接通过CDN引入React和ReactDOM就能用，零配置起步：

1. 首先在搜索页面的<head>里加这些CDN链接：

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- 要支持JSX语法，得加Babel的CDN -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. 然后写一个React组件来渲染搜索结果，代替原来的字符串拼接：

<script type="text/babel">
// 定义搜索结果组件，接收后端返回的数据作为props
function SearchResult({ data }) {
  return (
    <div className="search-container">
      {/* 用map循环渲染每个搜索项，key要唯一（比如用数据的id） */}
      {data.map(item => (
        <div key={item.id} className="search-item">
          <div className="title-item">{item.title}</div>
          {/* 这里可以直接加其他字段，结构和HTML完全一致，再也不用拼字符串了 */}
          <div className="desc-item">{item.description}</div>
          <div className="time-item">{item.createTime}</div>
        </div>
      ))}
    </div>
  );
}

// 原来的Ajax请求逻辑保留，只改success回调
function fetchSearchData(keyword, page) {
  $.ajax({
    url: '/your-search-api', // 替换成你的后端接口地址
    method: 'GET',
    data: { keyword, page },
    success: function(ajaxData) {
      // 不用拼HTML了，直接把数据传给React组件渲染到#search容器
      const root = ReactDOM.createRoot(document.getElementById('search'));
      root.render(<SearchResult data={ajaxData} />);
    }
  });
}

// 绑定搜索按钮事件（原来的jQuery逻辑可以保留）
$('#search-btn').click(() => {
  const keyword = $('#keyword-input').val();
  fetchSearchData(keyword, 1);
});

// 分页按钮事件示例
$('.page-btn').click(function() {
  const page = $(this).data('page');
  const keyword = $('#keyword-input').val();
  fetchSearchData(keyword, page);
});
</script>

React方案的优势： #

• JSX结构和原生HTML几乎一致，可读性极强，再也不会出现字符串拼接的语法错误
• 组件可以复用，如果其他页面也有类似的列表展示，直接拿过来用就行
• 数据和视图自动关联，不用手动操作DOM更新内容

Vue 方案（渐进式集成） #

Vue的模板语法更贴近传统HTML，学习成本更低，同样适合渐进式改造：

1. 先在页面里引入Vue的CDN：

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

2. 在页面的<body>里，把原来的#search容器改成Vue的模板：

<div id="search">
  <!-- Vue模板直接写在这里，和HTML几乎一样 -->
  <div class="search-container">
    <!-- 用v-for循环渲染搜索项，:key指定唯一标识 -->
    <div v-for="item in searchResults" :key="item.id" class="search-item">
      <div class="title-item">{{ item.title }}</div>
      <div class="desc-item">{{ item.description }}</div>
      <div class="time-item">{{ item.createTime }}</div>
    </div>
  </div>
</div>

3. 然后写Vue的逻辑代码，替换原来的HTML拼接：

<script>
const { createApp } = Vue;

// 创建Vue实例，挂载到#search容器
const app = createApp({
  data() {
    // 定义响应式数据，用来存搜索结果
    return {
      searchResults: []
    };
  },
  methods: {
    // 封装搜索请求方法
    fetchSearchResults(keyword, page) {
      $.ajax({
        url: '/your-search-api',
        method: 'GET',
        data: { keyword, page },
        success: (ajaxData) => {
          // 直接给响应式数据赋值，Vue会自动更新视图
          this.searchResults = ajaxData;
        }
      });
    }
  }
}).mount('#search');

// 绑定搜索按钮事件
$('#search-btn').click(() => {
  const keyword = $('#keyword-input').val();
  app.fetchSearchResults(keyword, 1);
});

// 分页按钮事件示例
$('.page-btn').click(function() {
  const page = $(this).data('page');
  const keyword = $('#keyword-input').val();
  app.fetchSearchResults(keyword, page);
});
</script>

Vue方案的优势： #

• 模板语法非常直观，几乎不用学习就能上手
• 响应式数据自动更新视图，完全不用手动操作DOM
• 同样可以把搜索列表抽成独立组件，方便后续复用

通用注意事项 #

1. 不用重构整个应用：只需要改造搜索页面的视图渲染部分，原来的jQuery逻辑（比如表单验证、Ajax请求）都可以保留
2. 兼容性：CDN引入的React/Vue都是生产环境版本，兼容性很好，支持绝大多数现代浏览器
3. 后续扩展：如果以后想逐步把其他页面也改成React/Vue，用同样的方式渐进式改造就行，不用一次性推翻重来

内容的提问来源于stack exchange，提问作者Hayi