整合vue elementui springboot mybatisplus前后端分离的 简单增加功能 删改查未实现

涉及知识点

1.springboot项目启动创建  配置yml文件

2.mybatisplus的使用

3.vue的vite文件配置

4.vue springboot 前后端数据交互

后端

1.建立项目的配置文件

src/main/resources/application.yml

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    druid:
      username: root
      password:
      url: jdbc:mysql:/dbwx
      driver-class-name: com.mysql.cj.jdbc.Driver

2.建立项目

pom.xml

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.7.15
         
    
    org.example
    ch10vuecrudapi
    1.0

    
        17
        17
        17
        UTF-8
    

    

        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.5.3.2
            
                
                    com.zaxxer
                    HikariCP
                
            
        

        
        
            mysql
            mysql-connector-java
            8.0.33
        
        
        
            com.alibaba
            druid-spring-boot-starter
            1.2.19
        



        
        
            org.yaml
            snakeyaml
            2.0
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-devtools
            runtime
            true
        
        
            org.springframework.boot
            spring-boot-configuration-processor
            true
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok
                        
                    
                
            
        
    

3.建立数据库表

CREATE DATABASE `dbwx` DEFAULT CHARACTER SET utf8mb3;

use dbwx;

CREATE TABLE `t_user` (
  `id` bigint NOT NULL,
  `account` varchar(50) DEFAULT NULL,
  `passwd` varchar(32) DEFAULT NULL,
  `name` varchar(50) DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `account` (`account`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;

4.建立实体类

cn.webrx.pojo.User

package cn.webrx.pojo;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.time.LocalDate;
@Data @TableName("t_user")
public class User {
    @TableId
    private Long id;
    private String account;
    @TableField("passwd")
    private String password;
    private String name;
    private LocalDate birthday;
}

5.建立项目入口程序App

cn.webrx.App

package cn.webrx;

import cn.webrx.mapper.DbMapper;
import cn.webrx.pojo.User;
import cn.webrx.mapper.UserMapper;
import cn.webrx.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;
import java.util.Set;

@SpringBootApplication
@RestController
public class App {
    @Resource
    DbMapper dm;

    @Resource
    UserService us;

    @GetMapping("/dbs")
    public Set dbs(){
        return dm.dbs();
    }

    @GetMapping("/list")
    public List list(){
        return us.list();
    }



    @GetMapping("/users")
    public cn.webrx.beans.User getUser() {
        return new cn.webrx.beans.User(199, "李四六");
    }


    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

6.建立sevices

//cn.webrx.mapper
@Mapper
public interface UserMapper extends BaseMapper {}

//cn.webrx.service
public interface UserService extends IService {}

//cn.webrx.service
@Service
public class UserServiceImpl extends ServiceImpl implements UserService {
}

前端

axios拦截器封装

/src/lib/http.js

//http.js  request.js

//1 导入
import axios from 'axios'

//2 配置
axios.defaults.baseURL = '/api'
axios.defaults.timeout = 5000

//3 请求拦截器 - 添加请求拦截器
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    config.headers.token = '11111111111111111111'
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

//4 添加响应拦截器
axios.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response.data;
}, function (error) {
    // 对响应错误做点什么
    ElMessage({
        type: 'error',
        message: '响应失败'
    })
    return Promise.reject(error)
})

export default axios

./src/lib/user.js

import axios from './http'
//添加
export const addUser = async function (url, d, callback) {
     const data = await axios.post(url,d)
     await callback(data)
}

//删除

//显示 url,data

//修改
export const getUsers = async function (url, params, callback) {
     const data = await axios.get(url,params)
     await callback(data)
}

APP.vue