如何在 eclipse 中将 ReactJs 与 Spring MVC 集成

Question

我是ReactJS新手，在我将angularJS用于客户端之前。但是现在我想将其与SpringMVC上的当前应用程序集成。现在我想ReactJS集成为客户端而不是angularJS，请帮助我。如果有任何例子，请帮忙。我正在使用eclipse ide.

Answer 1

尝试创建一个视图(jsp/html/xhtml(并将UI构建输出链接到该视图。 你可以使用webpack作为 UI(React( 的构建工具，它将返回捆绑文件。

然后可以包含它以使用脚本标记进行查看。请注意，您可以使用 webpack-dev-server 进行 UI 开发，并尝试使用 Proxy 来使用 spring-mvc 服务。这是一种推荐的方式。如果您使用Maven作为 Java 的构建工具，则可以使用包含 webapp 下所有 JS 的文件夹。

网络包参考 ： https://webpack.js.org/

示例Webpack.config.js以供参考。

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
main: './src/scripts/main.js',
engine: './src/scripts/engine/Engine.js',
debugger: './src/scripts/debug/Debugmain.js',
client: './src/scripts/clientcode/Client.js'
},
output: {
path: path.resolve('./dist/client'),
filename: '[name].js',
publicPath: '/dist/client/',
chunkFilename: '[name].js'
},
devtool: 'inline-sourcemap',
cache: true,
resolve: {
alias: { ByteBuffer: 'bytebuffer' }
},
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'react-hot-loader'
},
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['react', 'es2015'],
compact: false
}
},
{
enforce: 'pre',
test: /.(js|jsx)$/,
exclude: /node_modules/,
include: [path.join(__dirname, './src', 'scripts')],
loader: 'eslint-loader'
},
{
test: /.less$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
loader: 'css-loader?sourceMap!less-loader?sourceMap'
})
},
{
test: /.(eot|woff|woff2|ttf|otf|png|jpg)$/,
loader: 'file-loader?name=images/[name].[ext]'
}
]
},
devServer: {
port: 8080,
stats: 'errors-only',
proxy: {
'/api': {
target: 'http://localhost:20404', //http://localhost:20403/',
secure: false
}
},
historyApiFallback: {
index: 'debug.html'
}
},
plugins: [
new ExtractTextPlugin({
filename: './styles/main.css',
allChunks: true
})
],
resolve: {
modules: ['src/scripts', 'node_modules'],
extensions: ['.jsx', '.js'],
unsafeCache: true,
alias: {
components: path.resolve(__dirname, 'src', 'scripts', 'components'),
routes: path.resolve(__dirname, '.', 'routes'),
draggable_tab: path.resolve(__dirname, 'src', 'scripts', 'lib'),
utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
engine: path.resolve(__dirname, 'src', 'scripts', 'engine')
}
}
};