2023全网最简单但实用的SpringBoot+Vue前后端分离项目实战[青青菜鸟]-笔记+心得

目录

一、前言

二、写项目的步骤

1.创建一个springBoot项目，勾选上web,然后别管了

 2.前端环境准备和创建

3.登录修改

 4.继续后端项目。

 （1）首先我们先写一个CodeGenernator类，来生成以下四个包，尊的很方便 

（2）实现相关接口，并通过postman对其进行测试。

（3）然后就是实现前后端对接了

---

一、前言

        我本身基础比较薄弱，像是springBoot和Vue还没完全学会的那种，但此番为了完成课设，不得不去开始学习，但是又看不懂，于是乎找了个视频进行学习。

二、写项目的步骤

1.创建一个springBoot项目，勾选上web,然后别管了

 2.前端环境准备和创建

后台搭建好了以后，咱们开始写前端。那么在这里呢，博主用的是vue-admin-template框架，这里就有版本的限制了。因为vue-admin-template对Node.js的版本有限制，所以我们需要对自己原来的Node.js版本进行更改。在这里的话，我原来Node版本是18+的，但是不匹配，所以这里需将其卸载然后重装，然后18+的版本是有配套的Npm的，所以这里需要更改npm的版本。我用的Node.js是16.12.0，配套的npm大家可以去官网查，我的是8.2.0,可以用如下命令对npm进行更新。

1 升级到指定版本

   npm i -g npm@5.6.0

2 升级到最新版本
  npm install -g npm  或者 npm i -g latest

3.升级到最稳定版本

   npm i -g stable

 用第一个命令就可以了。

3.登录修改

这里因为前后端还没有相连，所以登录这个页面的验证是已经写好了的。包括在后面前后端相连后，如果输入一个正确的账号密码，却提示用户名和密码是错误的也不用担心，去vue里面找到validate.js文件，直接搜就行。也在这儿进行修改就可以了。

 4.继续后端项目。

 （1）首先我们先写一个CodeGenernator类，来生成以下四个包，尊的很方便 

代码如下:

package com.lantu;

import com.baomidou.mybatisplus.generator.FastAutoGenerator;
import com.baomidou.mybatisplus.generator.config.OutputFile;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;

import java.util.Collections;

public class CodeGenerator {
    public static void main(String[] args) {
//       容易改变的放前面
        String url = "jdbc:mysql:///xdb";
        String username = "root";
        String password = "12315";
        String author = "laoda";
        String outputDir = "E:\\HighView\\x-admin\\src\\main\\java";
        String basePackage = "com.lantu";
        String moduleName = "sys";
        String mapperLocation = "E:\\HighView\\x-admin\\src\\main\\resources\\mapper" + moduleName;
        String tableName = "x_user,x_menu,x_role,x_role_menu,x_user_role";
        String tablePrefix = "x_";
        FastAutoGenerator.create(url, username, password)
                .globalConfig(builder -> {
                    builder.author(author) // 设置作者
                            //.enableSwagger() // 开启 swagger 模式
                            //.fileOverride() // 覆盖已生成文件
                            .outputDir(outputDir); // 指定输出目录
                })
                .packageConfig(builder -> {
                    builder.parent(basePackage) // 设置父包名
                            .moduleName(moduleName) // 设置父包模块名
                            .pathInfo(Collections.singletonMap(OutputFile.xml, mapperLocation)); // 设置mapperXml生成路径
                })
                .strategyConfig(builder -> {
                    builder.addInclude(tableName) // 设置需要生成的表名
                            .addTablePrefix(tablePrefix); // 设置过滤表前缀
                })
                .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
                .execute();
    }

}

但是要注意的是，自动生成的mapper.xml文件和mapper中的文件并不在一个包下，所以我们需要将其剪贴到mapper中，不然会报以下错误。

org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.lantu.sys.mapper.UserMapper.getRoleNamesByUserId

生成四个包以后，entity包是实体类，mapper里面是接口，接口里面有方法，mapper.xml里面是对数据的操作，比如说增删查改。Controller包里面主要是实现页面的相关功能。

（2）实现相关接口，并通过postman对其进行测试。

（3）然后就是实现前后端对接了

首先在Vue项目中，打开src中的api中的user.js

 将其更改成现在这个样子就行，注意不要写错。

 然后打开最底下的.env.development文件

 改成自己后台的端口号。

 然后在后台项目中打开CorsConfig文件。改成vue项目运行之后弹出来的那个端口号就行。 

至此，结束。加油哦，你一定可以顺利完成的。