改造RuoYi-vue(一)

/ springbootvue / 3 条评论 / 2673浏览

​ 修改开源项目https://gitee.com/y_project/RuoYi-Vue,进行自己的开发。

​ 本文主要围绕ruoyi讲述,允许跨域、前后端分离项目前端以及后端的代码编写。应用此项目需要你初步掌握vue.js 和 springboot。

本人是后端的程序员,并不熟悉vue所以下文讲解可能粗糙点。

注意:请从上之下看此篇博文。

检出项目

此处需要安装git 以使用git命令检出ruoyi-vue项目。

	git clone https://gitee.com/y_project/RuoYi-Vue.git

检出项目结果如下:

深度截图_选择区域_20200305141200

本文中将使用Visual Studio Code进行前端代码的书写,JetBrains idea修改后端代码。

前端代码

使用Visual Studio Code打开ruoyi-ui文件夹,以此点击终端->新建终端,在终端执行以下命令

npm install

npm run dev

前端跑起来之后,访问http://localhost:1024/ ,发现验证码没加载出来,F12查看Network发现请求了后台的

Failed to load resource: the server responded with a status of 401 (Unauthorized)
:1024/dev-api/captchaImage

访问后台接口失败,需要修改配置 .env.development 这个文件,将 VUE_APP_BASE_API = '/dev-api' 改为 http://127.0.0.1:8080

此处我会修改后端端口为8060,因为我的8080被docker某个镜像给占了。

后端

使用JetBrains idea打开ruoyi文件夹,此项目使用的是maven。

修改application-druid.yml数据库连接设置为本地的数据库地址,修改完成后将项目跑起来。

可能还需要修改 logback.xml 文件的 <property name="log.path" value="/home/ruoyi/logs" />,将value改为你本地的地址。

跨域

​ 将前后端都跑起来后发现验证码还是没加载出来,查看错误后发现是跨域问题。这是由于前后端都在同一台机器上的原因,如果你的部署或者开发不在同一台机器,可以忽略以下操作。

Cross-origin resource sharing (CORS) is a W3C specification implemented by most browsers that allows you to specify in a flexible way what kind of cross domain requests are authorized, instead of using some less secured and less powerful hacks like IFrame or JSONP.

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

Spring MVC支持跨域,在spring官方文档中可以看到在controller上使用@CrossOrigin就可以解决跨域问题。

你可以在后端项目 com.ruoyi.project.common.CaptchaController#getCode 方法上使用此方法。

但是前端向后端发起请求不止一个验证码图片的请求,我们需要一个全局的策略。按照spring官方所给的全局配置。

新建CorsConfig.class, 如下

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @program:
 * @description:
 * @author: 
 * @create: 
 */
@Configuration
public class CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }

}

因为ruoyi后端项目还使用了spring-security,还需一步配置,修改com.ruoyi.framework.config.SecurityConfig#configure(org.springframework.security.config.annotation.web.builders.HttpSecurity)方法(ruoyi的配置里面已经有spring-security配置,所以需要给里面加点东西)

@Override
    protected void configure(HttpSecurity httpSecurity) throws Exception
    {
        httpSecurity
                // CRSF禁用,因为不使用session
                .csrf().disable()
                // 认证失败处理类
                .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
                // 基于token,所以不需要session
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                // 过滤请求
                .authorizeRequests()
                // 对于登录login 验证码captchaImage 允许匿名访问
                .antMatchers("/login", "/captchaImage").anonymous()
                .antMatchers(
                        HttpMethod.GET,
                        "/*.html",
                        "/**/*.html",
                        "/**/*.css",
                        "/**/*.js"
                ).permitAll()
                .antMatchers("/profile/**").anonymous()
                .antMatchers("/common/download**").anonymous()
                .antMatchers("/swagger-ui.html").anonymous()
                .antMatchers("/swagger-resources/**").anonymous()
                .antMatchers("/webjars/**").anonymous()
                .antMatchers("/*/api-docs").anonymous()
                .antMatchers("/druid/**").anonymous()
                // 除上面外的所有请求全部需要鉴权认证
                .anyRequest().authenticated()
                .and()
                .cors()
                .and()
                .headers().frameOptions().disable();
        httpSecurity.logout().logoutUrl("/logout").logoutSuccessHandler(logoutSuccessHandler);
        // 添加JWT filter
        httpSecurity.addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
    }

添加了这样两行在最后

.cors()
.and()

重新启动后端程序,发现已经无跨域问题。

扩展

npm run XXX

https://segmentfault.com/q/1010000005694821

跨域

跨域的解释 -> https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

springBoot -> https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

spring-security -> https://docs.spring.io/spring-security/site/docs/4.2.x/reference/html/cors.html

  1. 基佬,留下你的评论。

    回复
  2. 基佬,留下你的评论。

    回复