使用react或vue增强多页面应用程序的各个部分

Question

我正在开发一个企业应用程序与java和hibernate与spring mvc在服务器端,并使用jquery在客户端(不是SPA).

现在在搜索页面中我使用ajax并获得唯一的json响应,但我不想在每个搜索或分页请求中写下面这样的内容.

function(ajaxData) {
    ....
    $('#search').html('' +
        '<div class="search-container">' + 
          '<div class="search-item">' +
             '<div class="title-item">'+ajaxData.title+'</div>' + 
             ...
             ...
          '</div>' + 
        '</div>'
    )
    ....
}

我认为使用此页面中的jsx一个react或vue 组件很容易刷新结果.

我还想重用一些html块,我认为用react或者很容易vue

我曾经建立了一个小型的SPA项目,它是关于npm和webpack捆绑的,但我真的不想使用它们,因为我有一个多页面应用程序,它非常适合我的项目.

我认为同样的事情facebook是做的,他们使用反应,但facebook不是SPA.

我怎样才能实现这种混合方式？

Answer 1

我过去做过类似的事情.我在DOM中注入了一个小的反应组件.

我是这样做的:

在JSX中创建一个React组件,让我们调用它Demo:

export class Demo extends React.Component {
    render() {
        return <h1>This is a dummy component.</h1>
    }
}

现在使用renderToStaticMarkup函数来获取静态html.

const staticMarkup = renderToStaticMarkup(<Demo PASS_YOUR_PROPS/>);

你有HTML,现在你可以使用innerHTML在所需的位置插入这个标记.

如果我误解了你的问题,请道歉.

UPDATE

我们也可以用它render()来达到这个目的.例:

document.getElementById("button").onclick = () => {
  render(
    <Demo PASS_YOUR_PROPS/>,
    document.getElementById("root")
  );
};

使用render()和renderToStaticMarkup的工作解决方案:https://codesandbox.io/s/w061xx0n38

渲染()

将ReactElement渲染到提供的容器中的DOM中,并返回对该组件的引用.

如果之前将ReactElement呈现到容器中,则会对其执行更新,并且仅在必要时改变DOM以反映最新的React组件.

renderToStaticMarkup()

这不会创建额外的DOM属性,例如React在内部使用的data-react-id.如果你想将React用作一个简单的静态页面生成器,这很有用,因为剥离额外的属性可以节省大量的字节.

Answer 2

由于你有一个没有构建步骤的现有多页面应用程序(即没有webpack/babel),我相信一个非常简单的方法来实现你想要的是使用Vue.js.

您可以定义模板并仅更新数据.

以下是您将如何处理问题中显示的代码的演示:

new Vue({
  el: '#app',
  data: {
    ajaxDataAvailable: false,
    ajaxData: {
      title: '',
      results: []
    }
  },
  methods: {
    fetchUsers() {
      this.ajaxDataAvailable = false; // hide user list
      $.getJSON("https://jsonplaceholder.typicode.com/users", (data) => {
        this.ajaxData.title = 'These are our Users at ' + new Date().toISOString();
        this.ajaxData.results = data;
      	this.ajaxDataAvailable = true; // allow users to be displayed
      });
    }
  }
})

/* CSS just for demo, does not affect functionality could be existing CSS */
.search-container { border: 2px solid black; padding: 5px; }
.title-item { background: gray; font-weight: bold; font-size: x-large; }
.result-item { border: 1px solid gray; padding: 3px; }

<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div id="app">
  <button @click="fetchUsers">Click to fetch the Users</button><br><br>

  <div class="search-container" v-if="ajaxDataAvailable">
    <div class="search-item">
      <div class="title-item"> {{ ajaxData.title }}</div>
      <div class="result-item" v-for="result in ajaxData.results">
        Name: {{ result.name }} - Phone: {{ result.phone }} - Edit name: <input v-model="result.name">
      </div>
    </div>
  </div>

</div>

在这个例子中,我们有:

• 一种fetchUsers执行ajax调用的方法;
• 该fetchUsers方法绑定到via 的click事件(这是一个简写).<button>@click="methodName"v-on:click="methodName"
• 一个v-if(v-if="ajaxDataAvailable")使.search-containerdiv隐藏到ajaxDataAvailable属性之前true.
• 在模板中的一些数据的使用插值渲染:{{ ajaxData.title }}请注意,此挑选从声明的对象值data:的Vue的实例(的一部分new Vue({...下面的代码),并自动更新,只要ajaxData.title改变(里面发生了什么fetchUsers方法时,Ajax调用完成.
• 使用以下方式呈现列表v-for:v-for="result in ajaxData.results".这在ajaxData.results数组中迭代,在fetchUsers方法内部进行了更新.
• 使用<input>带有v-model指令的元素,它允许我们result.name直接编辑值(这也会自动更新模板).

Vue还有很多,这只是一个例子.如果需要,可以进行更详细的演示.

至于集成到现有应用程序中,您可以将此代码粘贴到任何HTML页面中,它已经可以正常工作,无需任何webpack/babel.