SpringBoot整合Vue访问index.html出现404

SpringBoot的yml(properties、yaml)文件配置了禁用资源映射

有的项目可能为了要使用@ControllerAdvice与@ExceptionHandler来捕获controller层的异常,可能会在配置文件中配置了如下内容,从而禁用了资源映射:

spring:
  mvc:
    throw-exception-if-no-handler-found: true # 告诉 SpringBoot 当出现 404 错误时, 直接抛出异常
  resources:
    add-mappings: false # 告诉 SpringBoot 不要为我们工程中的资源文件建立映射

改为:

spring: 
  mvc: 
    throw-exception-if-no-handler-found: true
    static-path-pattern: /statics/**

或者添加一个配置类(前提是你的静态文件资源在resources/static目录下,如果不是,修改为对应的位置):

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 访问http://localhost:8080/static/*** 都会跳转到classpath:/static/下去找,即resources/static/
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }
}

然后可以在controller中添加一个映射,跳转到默认首页:

@Controller
public class AdminController {
    /**
     * 设置web主页面
     * @return
     */
    @GetMapping("/")
    public String index(){
        return "/static/index.html";
    }
}
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先需要安装好SpringBootVue,然后按照以下步骤整合vue-element-template实现登录功能: 1. 在vue-element-template中的src/api目录下新建一个user.js文件,用于定义登录接口: ``` import request from '@/utils/request' export function login(username, password) { return request({ url: '/login', method: 'post', data: { username, password } }) } ``` 2. 在vue-element-template中的src/views/login目录下新建一个index.vue文件,用于实现登录页面: ``` <template> <div class="login-container"> <div class="login-box"> <h2>登录</h2> <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px" class="login-form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">登录</el-button> </el-form-item> </el-form> </div> </div> </template> <script> import { login } from '@/api/user' export default { name: 'Login', data() { return { form: { username: '', password: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { login(this.form.username, this.form.password).then(response => { if (response.data.code === 0) { this.$message.success('登录成功') this.$router.push('/') } else { this.$message.error(response.data.msg) } }).catch(error => { console.log(error) }) } else { return false } }) } } } </script> <style scoped> .login-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .login-box { width: 400px; height: 400px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 20px; } .login-form { margin-top: 20px; } </style> ``` 3. 在SpringBoot中的controller中定义/login接口,用于处理登录请求: ``` @RestController public class UserController { @PostMapping("/login") public Result login(@RequestBody User user) { // 验证用户名和密码 if ("admin".equals(user.getUsername()) && "123456".equals(user.getPassword())) { return Result.ok(); } else { return Result.error("用户名或密码错误"); } } } ``` 4. 在SpringBoot中的application.properties中配置跨域访问: ``` # 允许跨域访问 spring.mvc.cors.allow-credentials=true spring.mvc.cors.allowed-origins=* spring.mvc.cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS spring.mvc.cors.allowed-headers=* ``` 这样就实现了SpringBootvue-element-template的整合,实现了登录功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值