Question

应用程序未呈现，我收到“无法加载资源：服务器响应状态为404（未找到）”

我已经在here中提到了答案并尝试了添加脚本“start”的解决方案：“webpack --progress -p --config webpack.config.js --watch”来打包。杰森，但它不起作用。

我的代码：

C：/Users/user/workspace/CrunchifyTutorials/src/main/js/app.js

import React from 'react';
const ReactDOM = require('react-dom');

import Body from './Body';

global.React = React;

ReactDOM.render(
        <div>
            <p>Hello world</p>
            <Body />
        </div>
  , document.getElementById('react'));

C：/Users/user/workspace/CrunchifyTutorials/src/main/js/Body.js

import React from 'react';
import axios from 'axios';

export default class Body extends React.Component {

    componentDidMount() {
            var url = 'http://localhost:8084/crunchifytutorials/api/verify';

            return axios.get(url).then(function (res) {
                console.log(response.data);
                console.log(response.status); 
            }, function (res) {
                console.log("error2");
                throw new Error(res.response.data.message);
            });    
    }

    render() {
        return (
            <div>
                 hello world in check
            </div>
        )
    }
}

C：/Users/user/workspace/CrunchifyTutorials/src/main/resources/templates/index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>ReactJS + Java REST</title>
</head>
<body>

    <div id="react"><h1>hello</h1></div>
    <script src="built/bundle.js"></script>
</body>
</html>

bundle.js位于C：/Users/user/workspace/CrunchifyTutorials/src/main/resources/static/built/bundle.js

我已经检查过，webpack.js运行，当我进行构建和运行时，bundle.js会更新。

C：/Users/user/workspace/CrunchifyTutorials/package.json

{
  "name": "ReactJS Java Rest API",
  "version": "0.1.0",
  "description": "ReactJS Java Rest API",
  "author": "nuser",
  "license": "Apache-2.0",
  "dependencies": {
    "axios": "^0.16.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "rest": "^1.3.1",
    "webpack": "^1.12.2"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "bootstrap": "^3.3.5",
    "css-loader": "^0.16.0",
    "file-loader": "^0.8.4",
    "less": "^2.5.1",
    "less-loader": "^2.2.0",
    "react-bootstrap": "^0.31.0",
    "style-loader": "^0.12.3",
    "webpack": "^2.6.1"
  }
}

C：/Users/user/workspace/CrunchifyTutorials/webpack.config.js

var path = require('path');

var node_dir = __dirname + '/node_modules';

module.exports = {
    entry: './src/main/js/app.js',
    devtool: 'sourcemaps',
    cache: true,
    debug: true,
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        loaders: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            },
            { test: /\.less/, loader: 'style!css!less' },
            { test: /\.css/, loader: 'style!css' }
        ]
    }
};

C：/Users/user/workspace/CrunchifyTutorials/WebContent/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
          http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    version="3.0">
    <display-name>CrunchifyRESTJerseyExample</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>Jersey Web Application</servlet-name>
        <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Jersey Web Application</servlet-name>
        <url-pattern>/api/*</url-pattern>
    </servlet-mapping>
</web-app>

C：/Users/user/workspace/CrunchifyTutorials/WebContent/META-INF/context.xml

<?xml version="1.0" encoding="UTF-8"?>
<Context path="/CrunchifyTutorials"/>

我想知道当应用呈现时web.xml或context.xml是否影响了起始页面，我尝试了几个链接，如http://localhost:8084/CrunchifyTutorials或http://localhost:8084/CrunchifyTutorials等，但它们都得到了404响应。

React js app上的404错误，找不到资源

0 个答案: