前后端分离【spring+vue】项目基础案例

前后端分离项目基础案例

该案例使用springboot+vue为基础，基于mybatisplus generator快速生成代码，使用mybatis plus调用数据库

前端创建

配置好环境，直接输入

vue create vue项目名

之后按照提示进行版本的选择，之后cd进入目录+npm run serve运行项目

【如果已经有项目，直接npm install安装依赖后运行项目】

如果需要一些第三方依赖，可以直接 npm install 依赖名进行安装/或者在create的过程中不使用默认配置，直接进行一些第三方依赖的对勾选择（不要回车）–比如vue-router和axios之类的一些基础第三方依赖。

后端创建

后端直接创建一个spring initer，改好名字，选好版本号

这里建议选择2.7稳定版本的springboot版本（3.x的要求高版本jdk）

项目配置+自动生成代码

后端主要是使用一些基础的注解实现后端的访问

自动生成代码

mybatisplus generator自动生成代码

首先引入pom依赖

<!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-generator -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.5.1</version>
</dependency>

在测试目录写入一下（也可以使用lombok使用@Test注解），直接运行生成对应数据库表格下的entity,mapper,service,controller,以及输出目录下。基于mybatisplus天然写好的增删改查特性，你就已经实现了这些实体类的增删改查（对了，这些表格需要自己涉及，你可以涉及一个基础的表格进行生成测试）

package com.neusoft.springboottest1;

import com.baomidou.mybatisplus.generator.config.OutputFile;
import com.baomidou.mybatisplus.generator.FastAutoGenerator;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.boot.test.web.client.TestRestTemplate;
import org.springframework.http.ResponseEntity;

import java.util.Collections;

import static org.assertj.core.api.Assertions.assertThat;
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
class Springboottest1ApplicationTests {
    @Autowired
    private TestRestTemplate template;
    @Test
    public void getHello() throws Exception {
        ResponseEntity<String> response = template.getForEntity("/", String.class);
        assertThat(response.getBody()).isEqualTo("Greetings from Spring Boot!");
    }
    public static void main(String[] arg)
    {
        FastAutoGenerator.create("jdbc:mysql://localhost:3306/test0330?useUnicode=true&characterEncoding=utf8&serverTimezoneGMT%2B8&useSSL=true&rewriteBatchedStatements=true", "root", "123456")
                .globalConfig(builder -> {
                    builder.author("ylw") // 设置作者
//                            .enableSwagger() // 开启 swagger 模式
                            .fileOverride() // 覆盖已生成文件
                            .outputDir("D:\\page\\2023\\3\\springboot_test\\springboottest1\\src\\main\\java"); // 指定输出目录
                })
                .packageConfig(builder -> {
                    builder.parent("com.neusoft.springboottest1") // 设置父包名
                            .moduleName("deptModel") // 设置父包模块名
                            .pathInfo(Collections.singletonMap(OutputFile.mapperXml, "D:\\page\\2023\\3\\springboot_test\\springboottest1\\src\\main\\resources\\mapper")); // 设置mapperXml生成路径
                })
                .strategyConfig(builder -> {
                    builder.addInclude("emp","dept","salgrade"); // 设置需要生成的表名
//                            .addTablePrefix("t_", "c_"); // 设置过滤表前缀
                })
                .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
                .execute();
    }
}

自动生成如下项目结构，其中controller为你的url的管理的地方

可以简单理解调用关系为：controller->service->mapper-》（看不见）底层数据库代码【】

可以配置如下将sql获取到的代码如同日志一般输出

mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

前后端结合

后端提供数据，前端提供静态页面，并获取后端数据，使其成为动态网页

后端接口实现

后端需要从controller开始配置【如果你只是要使用，核心就是记住这些注解的用法】

@RestController：声明这是一个返回数据的controller

@RequestMapping：包含get和post请求两种方式的url配置

@Autowired：自动装配写好的一些服务【service和mapper通常都定义好，用这个注解引入】

@GetMapping和@PostMapping和@PutMapping和@DeleteMapping，四种注解配置，通常get用于请求页面，post用于提交数据，put用于修改数据，delete用于删除数据

下面是一个controller的示例，调用一个service

@RestController
@RequestMapping("/deptModel/emp")
@CrossOrigin(origins = "*")
public class EmpController {
    @Autowired
    private EmpServiceImpl iEmpService;
    @GetMapping("/getByName")
    public List<Emp> hello(String name) {
        return iEmpService.getByName(name);
    }
}

service的接口如下【基于java的思想，通用的通过定义接口，有其他的类进行实现】

public interface IEmpService extends IService<Emp> {
    public List<Emp> getByName(String name);
}

serviceImpl如下

如下并没有调用mapper，因为直接使用了mybatisplus的wrapper进行定义了查询条件

@Service
public class EmpServiceImpl extends ServiceImpl<EmpMapper, Emp> implements IEmpService {
    @Override
    public List<Emp> getByName(String name) {
        LambdaQueryWrapper<Emp> wrapper= new LambdaQueryWrapper<Emp>();
        wrapper.eq(Emp::getEname, name);
        List<Emp> userList = list(wrapper);
        return userList;
    }
}

这样后端的接口就实现完成

前端调用

前端主要就是通过axios或者ajax等获取数据，vue3的axios获取后端接口数据示例如下：
该案例获取了一个用户名为SMITH的用户数据【这里应该作为参数而不是直接写进去，我是图省事】

mounted() {
  var this_ = this;
  axios.get("http://localhost:8081/deptModel/emp/getByName?name=SMITH")
      .then((data)=>{
        console.log(data);
        console.log(this_);
        this_.user = data.data[0];
      })
}

如果前端并不擅长，可以去网上找一些模板，然后接入axios获取后端接口。

总结

这样一个简单的案例就实现了，实际上，当我们实现了这样一个小demo，离做一个成型的网站并没有多远的距离

在学习路上，要给自己足够多的足够高频的正反馈就能让自己喜欢上学习，而做出这样的一个小demo就是一个小的正反馈