GET http://localhost:18086/css/all.css:浏览器无法访问项目下的静态资源

  在做畅购商城项目时,浏览器无法访问项目下的静态资源,报错信息如下图所示。老师只提了一个可能原因:不能用相对路径href="./css/all.css",改为绝对路径href="/css/all.css"
在这里插入图片描述
  当然这只是其中之一问题,查看项目代码发现target目录下没有生成静态资源的文件夹,静态资源也就无从访问。这种问题在之前的博客也有介绍,碰到好几次了,调试bug需要耐心和积累,急躁不得。
在这里插入图片描述
解决办法: 加入resources约束

<resources>
		<resource>
             <directory>src/main/resources</directory>
             <includes>
                 <include>**/*.yml</include>
                 <include>**/*.properties</include>
                 <include>**/*.xml</include>
                 <include>**/*.html</include>
             </includes>
             <filtering>false</filtering>
         </resource>
         <resource>
             <directory>src/main/resources/static</directory>
         </resource>
<resources>

如下图所示,静态资源成功编译到target目录。
在这里插入图片描述
  至此,问题还是没有解决。百度,谷歌都是类似的答案,没有解决,一晃一个下午就过去了,想死的心都有了!无奈之下,又只能用匹配大法,github上code了一个可以跑的springboot结合thymeleaf的案例,图片资源拷贝到该案例工程,可以成功运行!

在这里插入图片描述
  比对之下发现,错误原因在于自己没有指定项目路径,项目工程无法根据href="/css/all.css"生成静态资源的绝对路径。在application.properties配置文件中加入如下代码即可:

# Path to project 指定项目路径
project.base-dir=file:///D://project//workspace65//changgou//springboot-thymeleaf
# Templates reloading during development
spring.thymeleaf.prefix=${project.base-dir}/src/main/resources/templates/
spring.thymeleaf.cache=false
# Static resources reloading during development
spring.resources.static-locations=${project.base-dir}/src/main/resources/static/

  以上为application.properties配置,可以自行转换为application.yml配置加入自己的项目中,以下是搜索web微服务application.yml完整配置。

server:
  port: 18086
eureka:
  client:
    service-url:
      defaultZone: http://127.0.0.1:7001/eureka
  instance:
    prefer-ip-address: true
feign:
  hystrix:
    enabled: true

project.base-dir: file:///D://project//workspace65//changgou//changgou-parent//changgou-web//changgou-web-search
# Templates reloading during development
spring:
  thymeleaf:
    cache: false
    prefix: ${project.base-dir}/src/main/resources/templates/
  application:
    name: search-web
  main:
    allow-bean-definition-overriding: true


  # Static resources reloading during development
  resources:
    static-locations: ${project.base-dir}/src/main/resources/static/

至此,又可以愉快地撸商城项目了!
在这里插入图片描述

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,您需要先安装Node.js和React,并创建一个React项目。接下来,您可以按照以下步骤进行操作: 1. 在您的项目根目录下创建一个名为 `server` 的文件夹,并在其中创建一个名为 `data.json` 的文件,用于存储todo应用的数据。 2. 在 `server` 文件夹中创建一个 `server.js` 文件,用于启动后端服务器。在该文件中,您需要使用以下代码: ```javascript const express = require('express'); const app = express(); const cors = require('cors'); const fs = require('fs'); app.use(cors()); app.use(express.json()); const dataPath = './server/data.json'; app.get('/api/todos', (req, res) => { const data = JSON.parse(fs.readFileSync(dataPath)); res.json(data.todos); }); app.post('/api/todos', (req, res) => { const data = JSON.parse(fs.readFileSync(dataPath)); const newTodo = req.body; data.todos.push(newTodo); fs.writeFileSync(dataPath, JSON.stringify(data)); res.json(newTodo); }); const port = 3001; app.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); }); ``` 该代码使用了 `express` 框架搭建了一个后端服务器,并在 `data.json` 文件中存储了todo应用的数据。其中,`GET /api/todos` 接口用于获取所有todo数据,`POST /api/todos` 接口用于新增一条todo数据。 3. 在项目根目录下,运行以下命令安装依赖: ``` npm install cors express fs ``` 4. 接下来,您需要在React项目中使用 `axios` 库来调用后端接口并获取todo数据。在您的React组件中,可以使用以下代码: ```javascript import React, { useState, useEffect } from 'react'; import axios from 'axios'; const TodoList = () => { const [todos, setTodos] = useState([]); useEffect(() => { axios.get('http://localhost:3001/api/todos') .then(res => setTodos(res.data)); }, []); return ( <ul> {todos.map(todo => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ); }; export default TodoList; ``` 该代码使用了 `axios` 库发起了一个GET请求来获取所有todo数据,并将数据存储到 `todos` 状态中。您可以在您的组件中使用 `todos` 状态来渲染您的todo列表。 5. 最后,您需要在您的React项目中使用 `webpack` 来编译您的静态资源。在您的项目根目录下,可以使用以下命令来安装 `webpack` 和 `webpack-cli`: ``` npm install webpack webpack-cli --save-dev ``` 6. 接下来,您需要在项目根目录下创建一个名为 `webpack.config.js` 的文件,并添加以下代码: ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'server/static'), }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, }, { test: /\.ts(x?)$/, exclude: /node_modules/, use: { loader: 'ts-loader', }, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, }; ``` 该代码使用了 `webpack` 来编译您的React项目,并将静态资源编译到了 `server/static` 目录下。 7. 最后,您可以使用以下命令来启动您的React项目后端服务器: ``` npm run start ``` 该命令会同时启动React项目后端服务器,并在浏览器中打开您的todo应用。您可以在浏览器中访问 `http://localhost:3000` 来查看您的应用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值