SpringBoot+Vue项目所遇到的坑

桃森

已于 2023-12-01 23:49:05 修改

阅读量929

点赞数 21

文章标签： spring boot vue.js java

于 2023-12-01 23:08:04 首次发布

本文链接：https://blog.csdn.net/nayis/article/details/134735037

版权

环境配置

node.js：v20.9.0
vue：2.9.6
IDEA：2023.1
Mybatis-Plus：3.4.1
Mybatis-Plus-Generator（旧版生成器）：3.4.1
MySQL：8.0.13
lombok：IDEA2023.1已经内置了，下面有具体的操作流程，使其插件可以运行起来
jdk17

整体思路

数据库的设计一定是最重要的，先行的，不然界面的设计就会受阻，现在最主要的便是权限（采用一级标题）的设计。

后端配置

lombok配置（IDEA2023.1有效）

dependency使IDEA2023.1自动从repositories所指向的地方获取合适的lombok。

<dependency>
	<groupId>org.projectlombok</groupId>
	<artifactId>lombok</artifactId>
	<version>edge-SNAPSHOT</version>
</dependency>

		
<repositories>
	repository>
	<id>projectlombok.org</id>
	<url>https://projectlombok.org/edge-releases</url>
	</repository>
</repositories>

之后在 settings中按照下述描述，勾选enable annotation processing，后面重新启动IDEA2023.1即可。

MyBatis-Plus-Generator配置（版本），旧版本生成器

依赖配置

<!--        Mybatis-Plus依赖配置-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus</artifactId>
            <version>3.4.1</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>

        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.30</version>
        </dependency>

        <dependency>
            <groupId>com.spring4all</groupId>
            <artifactId>swagger-spring-boot-starter</artifactId>
            <version>1.9.1.RELEASE</version>
        </dependency>

Mybatis-Plus旧版生成器代码

package com.hgms.Utils;                     //改成自己的包

import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringPool;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

public class CodeGenerator {
    //读取控制台内容
    public static String scanner(String tip) {
        Scanner scanner = new Scanner(System.in);
        StringBuilder help = new StringBuilder();
        help.append("请输⼊" + tip + "：");
        System.out.println(help.toString());
        if (scanner.hasNext()) {
            String ipt = scanner.next();
            if (StringUtils.isNotBlank(ipt)) {
                return ipt;
            }
        }
        throw new MybatisPlusException("请输⼊正确的" + tip + "！");
    }
    /**
     * 操作步骤：
     * 1.修改数据源包括地址密码信息，对应代码标记：⼀、 下同
     * 2.模块配置，可以修改包名
     * 3.修改模板（这步可忽略）
     * @param args
     */
    public static void main(String[] args) {
        // 代码⽣成器
        AutoGenerator mpg = new AutoGenerator();
        // 全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir")+"/hgms_backend";     //对应的是自己的项目名称
        gc.setOutputDir(projectPath + "/src/main/java");
        gc.setAuthor("hgms");
        gc.setOpen(false);
        gc.setSwagger2(true);                           //实体属性 Swagger2 注解
        gc.setBaseResultMap(true);                      // XML ResultMap
        gc.setBaseColumnList(true);                     // XML columList
        //去掉service接⼝⾸字⺟的I, 如DO为User则叫UserService
        gc.setServiceName("%sService");
        mpg.setGlobalConfig(gc);
        // 数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        // 修改数据源
        dsc.setUrl("jdbc:mysql://localhost:3306/hgms?characterEncoding=UTF-8&serverTimezone=GMT%2B8");
        // dsc.setSchemaName("public");
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");          //MySQL-8配置
        dsc.setUsername("root");
        dsc.setPassword("root");
        mpg.setDataSource(dsc);
        // 包配置
        PackageConfig pc = new PackageConfig();
        //pc.setModuleName(scanner("模块名"));
        // ⼆、模块配置
        pc.setParent("com.hgms")                            //对应在java路径下
                .setEntity("entity")
                .setMapper("mapper")
                .setService("service")
                .setServiceImpl("service.impl")
                .setController("controller");
        mpg.setPackageInfo(pc);
        // ⾃定义配置
        InjectionConfig cfg = new InjectionConfig() {
            @Override
            public void initMap() {
                // to do nothing
            }
        };
        // 如果模板引擎是 freemarker
        String templatePath = "templates/mapper.xml.ftl";
        // 如果模板引擎是 velocity
        // String templatePath = "/templates/mapper.xml.vm";
        // ⾃定义输出配置
        List<FileOutConfig> focList = new ArrayList<>();
        // ⾃定义配置会被优先输出
        focList.add(new FileOutConfig(templatePath) {
            @Override
            public String outputFile(TableInfo tableInfo) {
                // ⾃定义输出⽂件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发⽣变化！！
                return projectPath + "/src/main/resources/mapper/" + pc.getModuleName()
                        + "/" + tableInfo.getEntityName() + "Mapper" +
                        StringPool.DOT_XML;
            }
        });
 /*
 cfg.setFileCreate(new IFileCreate() {
 @Override
 public boolean isCreate(ConfigBuilder configBuilder, FileType fileType,
String filePath) {
 // 判断⾃定义⽂件夹是否需要创建
 checkDir("调⽤默认⽅法创建的⽬录，⾃定义⽬录⽤");
 if (fileType == FileType.MAPPER) {
 // 已经⽣成 mapper ⽂件判断存在，不想重新⽣成返回 false
 return !new File(filePath).exists();
 }
 // 允许⽣成模板⽂件
 return true;
 }
 });
 */
        cfg.setFileOutConfigList(focList);
        mpg.setCfg(cfg);
        //3⽣成代码并测试
        //四、实现增删改查
        // 配置模板
        TemplateConfig templateConfig = new TemplateConfig();
        // 配置⾃定义输出模板
        //指定⾃定义模板路径，注意不要带上.ftl/.vm, 会根据使⽤的模板引擎⾃动识别
        // 三、修改模板
 /*templateConfig.setEntity("templates/entity2.java");
 templateConfig.setService("templates/service2.java");
 templateConfig.setController("templates/controller2.java");
 templateConfig.setMapper("templates/mapper2.java");
 templateConfig.setServiceImpl("templates/serviceimpl2.java");*/
        templateConfig.setXml(null);
        mpg.setTemplate(templateConfig);
        // 策略配置
        StrategyConfig strategy = new StrategyConfig();
        strategy.setNaming(NamingStrategy.underline_to_camel);
        strategy.setColumnNaming(NamingStrategy.underline_to_camel);
        // strategy.setSuperEntityClass("你⾃⼰的⽗类实体,没有就不⽤设置!");
        //strategy.setSuperEntityClass("BaseEntity");
        strategy.setEntityLombokModel(true);
        strategy.setRestControllerStyle(true);
        // 公共⽗类
        //strategy.setSuperControllerClass("BaseController");
        // strategy.setSuperControllerClass("你⾃⼰的⽗类控制器,没有就不⽤设置!");
        // 写于⽗类中的公共字段
        // strategy.setSuperEntityColumns("id");
        strategy.setInclude(scanner("表名，多个英⽂逗号分割").split(","));
        strategy.setControllerMappingHyphenStyle(true);
        //strategy.setTablePrefix(pc.getModuleName() + "_");
        // 忽略表前缀tb_,⽐如说tb_user,直接映射成user对象
        // 四、注意是否要去掉表前缀
        //strategy.setTablePrefix("tb_");
        mpg.setStrategy(strategy);
        mpg.setTemplateEngine(new FreemarkerTemplateEngine());
        mpg.execute();
    }
}

最后要在生成的mapper文件中加入@Mapper，如下所示

package com.hgms.mapper;

import com.hgms.entity.Room;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;                //@Mapper所需引入的模块

/**
 * <p>
 * 房间 Mapper 接口
 * </p>
 *
 * @author hgms
 * @since 2023-12-01
 */
@Mapper
public interface RoomMapper extends BaseMapper<Room> {

}

前端配置

配置操作（关键语句）

全局操作

安装node.js
npm install -g cnpm --registry=https://registry.npmmirror.com
用管理员身份打开cmd
cnpm install -g vue-cli
cnpm install -g webpack
vue init webpack xxx
vue install
vue run dev

局部安装依赖（一般都不建议全局安装太多依赖）

cnpm install element-ui -S
cnpm install babel-plugin-component -D （不是必须的）

// element ui写的是这样的，但是一般行不通

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

//Vue的.babelrc改成下面的就ok了
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ["transform-vue-jsx", "transform-runtime"]
  ]
}

//main.js在添加下述即可

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

桃森

关注

21
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
SpringBoot+Vue项目所遇到的坑

之后在 settings中按照下述描述，勾选enable annotation processing，后面重新启动IDEA2023.1即可。dependency使IDEA2023.1自动从repositories所指向的地方获取合适的lombok。最后要在生成的mapper文件中加入@Mapper，如下所示。Mybatis-Plus旧版生成器代码。
复制链接

扫一扫