人人开源--开发脚手架搭建

摘要

本文主要记录如何搭建人人开源的开发脚手架，方便个人学习使用。按照本文的记录可帮助实现人人开源的前后端的环境搭建，逆向工程的配置使用，避免前后端分离带来的跨域问题（并不是最终解决方案）。

材料准备

1. 前往人人开源下载前后端项目和代码生成器

   • renren-fast 后端系统
   • renren-fast-vue 前端系统
   • renren-generator 代码生成器

2. 将 renren-fast 项目拷贝到项目中并添加到夫工程的 pom.xml 中

   

数据库搭建

1. 在数据库中创建项目对应的数据库
2. 拷贝 renren-fast/db 中的 MySQL.sql 到数据库中执行生成表

3. 将数据库信息对接到 renren-fast 的 application-dev.yml 中

逆向工程

逆向工程参数

• 连接数据库：在 application-dev.yml 中绑定

• 修改模板（renren-generator）

  • 在 generator.properties 中修改参数

    

1. 在 renren-generator 中的 resources.template 中的 controller ,将 RequiresPermissions 的 import 删除并将 controller 中的 @RequiresPermissions 注释掉

2. 启动renren-generator，访问 localhost:80/

3. 选择微服务对应的所有表并生成代码，将生成的代码导入到相应的微服务中

   

导入逆向工程生代码

1. 将生成的 main 文件夹复制到相应的微服务中

2. 在 application 中配置 jdbc 连接，设置 mybatis-plus 扫描路径设置微服务端口号

3. 在 pom.xml 中添加 gulimall-common 依赖

   <dependency>
       <groupId>com.kun.gulimall</groupId>
       <artifactId>gulimall-common</artifactId>
       <version>0.0.1-SNAPSHOT</version>
   </dependency>
   

配置网关路由以及路径重写

1. 启动 VS Code 后 renren-fast 开发平台上创建一个商品分类的功能模块，配置一个 category 菜单列表

2. 在 /src/views/modules/ 下创建一个 category.vue 文件

3. 导入 element.eleme.cn 下的 Tree 树形控件模板

4. 配置一个 getMenus() 请求并添加到创建时调用

   

5. 配置 index.js 下的 api 请求地址，统一转发到 Gateway 网关端口

   

6. gateway微服务配置前端请求转发

   在gateway微服务中的application配置请求转发规则

   

7. 解决跨域的问题

   首先先了解一下什么是跨域？简单可以理解是浏览器的安全限制，防止脚本影响安全

   

   浏览器报错信息

   

   解决登陆问题（并不是最终的解决方案，方便本地环境的搭建和开发）对所有进来的请求进行全域转发

   具体实现：在 gateway 服务中创建 GulimallCorsConfiguration 配置类

   import org.springframework.context.annotation.Bean;
   import org.springframework.context.annotation.Configuration;
   import org.springframework.web.cors.CorsConfiguration;
   import org.springframework.web.cors.reactive.CorsWebFilter;
   import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
   
   @Configuration
   public class GulimallCorsConfiguration {
   
       @Bean
       public CorsWebFilter corsWebFilter(){
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   
           CorsConfiguration corsConfiguration = new CorsConfiguration();
   
           //1、配置跨域
           corsConfiguration.addAllowedHeader("*");
           corsConfiguration.addAllowedMethod("*");
           corsConfiguration.addAllowedOrigin("*");
           corsConfiguration.setAllowCredentials(true);
   
           source.registerCorsConfiguration("/**",corsConfiguration);
           return new CorsWebilter(source);
       }
   }