使用人人开源快速搭建项目前后端框架（附带商品分类管理示例），生成CRUD代码以及前端界面

最新推荐文章于 2023-08-07 13:26:36 发布

Bug哆哆

最新推荐文章于 2023-08-07 13:26:36 发布

阅读量2.1k

点赞数

分类专栏：全栈后端文章标签：工具

本文链接：https://blog.csdn.net/baikunlong/article/details/113767007

版权

后端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

全栈

7 篇文章 0 订阅

订阅专栏

进入码云，搜索人人开源，来到主页
在这里插入图片描述
克隆这三个项目，把renren-generator和renren-fast导入到后端，renren-fast-vue为前端项目。
导入后端后记得在父工程添加module：

然后使用修改renren-generator逆向生成我们需要的所有基础代码。

修改application.yml

改成需要生成的数据库。
修改配置信息
修改生成模板
因为该项目默认用的shiro，如果不想用，则需要改下模板：
然后启动项目：
全选生成，然后直接拖到项目目录即可：

导入后，会发现各种爆红，因为缺少依赖：
在这里插入图片描述

所以我们需要创建一个通用module，gulimall-common。
在这里推荐使用阿里的资源，官方的最近不太好使了：
在这里插入图片描述
添加相关依赖pom.xml（javax.servlet后的依赖为阿里微服务组件，不用要删了）：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.atguigu.gulimall</groupId>
    <artifactId>gulimall-common</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>gulimall-common</name>
    <description>每一个微服务公共的依赖，bean，工具类等</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
        <!--        mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpcore -->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpcore</artifactId>
            <version>4.4.12</version>
        </dependency>


        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

        <!--    导入mysql驱动    -->
        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.17</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>

        <!--        服务注册/发现-->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>

        <!--        配置中心来做配置管理-->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
        </dependency>

        <dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
            <version>2.0.1.Final</version>
        </dependency>


    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>2.1.0.RELEASE</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

</project>

然后在其他模块引入该模块：

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

可以看到解决了一部分依赖报错：
在这里插入图片描述
剩下的就需要去renren-generator里拷贝工具类了：

经过测试发现缺少以下几个类（还有其他的一些自己找找吧，只要是renren里的都能直接复制），然后发现导入的包名和我们的包名不太一样，如果每个类都手动改得累死：
在这里插入图片描述
所以直接修改common模块的包名：

可以看到项目已经不报错了。

然后根据上诉步骤，把其他module的代码都生成出来就行了。

然后随便找个模块测试，先编写下yml：

spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://192.168.56.10:3306/gulimall_sms
    driver-class-name: com.mysql.cj.jdbc.Driver
#  cloud:
#    nacos:
#      discovery:
#        server-addr: 127.0.0.1:8848
  application:
    name: gulimall-coupon


mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto
server:
  port: 7000

然后启动项目测试接口是否可用(优惠劵数据库没数据，接口可用就行)：
在这里插入图片描述
到此后端的框架就搭建完毕了。

来到前端项目renren-fast-vue目录。

执行命令num install，如果报错，可以参考：https://www.cnblogs.com/zaevn00001/p/13447071.html

然后执行num run dev即可运行。

来到后端项目：
在这里插入图片描述
创建数据库，名字随意，然后执行对应数据库类型的sql脚本。

启动后端项目renren-fast（默认是用得dev配置文件，记得修改下数据库）。

访问localhost:8001：
在这里插入图片描述
账号密码均为admin，登录成功后：

到这里环境的搭建就结束了。

示例

实现一个品牌管理的增删改查。

首先需要把renren-fast这个微服务注册到nacos服务注册中心：

		<!--        服务注册/发现-->
		<dependency>
			<groupId>com.alibaba.cloud</groupId>
			<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
			<version>2.1.0.RELEASE</version>
		</dependency>

然后配置application name和nacos地址，添加服务注册发现注解@EnableDiscoveryClient：
在这里插入图片描述
然后注释下CorsConfig下的允许跨域代码（因为待会要使用网关配置）：

重启renren-fast微服务。

在网关微服务编写允许跨域配置类：

package com.atguigu.gulimall.gateway.config;

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 CorsWebFilter(source);
    }
}

编写网关的yml：

spring:
  cloud:
    gateway:
      routes:
        - id: gulimall-product
          uri: lb://gulimall-product
          predicates:
            #匹配规则是从上到下的，所以越细的规则放越上面
            - Path=/api/product/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}
        - id: renren-fast
          uri: lb://renren-fast # 地址为renren-fast微服务
          predicates:
            - Path=/api/** # 只要是/api下的任何请求，都视为走renren-fast微服务
          filters:
            # renren-fast默认请求地址都是/renren-fast这个前缀（其实可以改，这里只是为了学学RewritePath知识点）
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment} #参考gateway官网的重写地址RewritePath

然后重新启动网关。

来到前端：
因为要统一接口地址，在static/config/index.js修改成网关地址：

/**
 * 开发环境
 */
;(function () {
  window.SITE_CONFIG = {};

  // api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

  // cdn地址 = 域名 + 版本号
  window.SITE_CONFIG['domain']  = './'; // 域名
  window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)
  window.SITE_CONFIG['cdnUrl']  = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
})();

把生成的前端代码拷贝到前端项目：
在这里插入图片描述

进入系统配置下菜单：
在这里插入图片描述
然后修改下权限验证的代码（默认只能查询）：

现在再看就能实现增删改查了：

随便添加个：

添加成功，说明基础的增删改查已经不需要手写了。

Bug哆哆

关注

0
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
使用人人开源快速搭建项目前后端框架（附带商品分类管理示例），生成CRUD代码以及前端界面

进入码云，搜索人人开源，来到主页克隆这三个项目，把renren-generator和renren-fast导入到后端，renren-fast-vue为前端项目。导入后端后记得在父工程添加module：然后使用修改renren-generator逆向生成我们需要的所有基础代码。修改application.yml改成需要生成的数据库。修改配置信息修改生成模板因为该项目默认用的shiro，如果不想用，则需要改下模板：然后启动项目：全选生成，然后直接拖到项目目录即
复制链接

扫一扫