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

涉及知识点

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

2.mybatisplus的使用

3.vue的vite文件配置

4.vue springboot 前后端数据交互

后端

1.建立项目的配置文件

src/main/resources/application.yml

java 复制代码
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

XML 复制代码
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.15</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>org.example</groupId>
    <artifactId>ch10vuecrudapi</artifactId>
    <version>1.0</version>

    <properties>
        <java.version>17</java.version>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>

        <!-- mybatis-plus-boot-starter -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.3.2</version>
            <exclusions>
                <exclusion>
                    <groupId>com.zaxxer</groupId>
                    <artifactId>HikariCP</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <!-- hmysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.33</version>
        </dependency>
        <!-- com.alibaba/druid-spring-boot-starter -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.19</version>
        </dependency>



        <!-- org.yaml/snakeyaml -->
        <dependency>
            <groupId>org.yaml</groupId>
            <artifactId>snakeyaml</artifactId>
            <version>2.0</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>
3.建立数据库表
sql 复制代码
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

java 复制代码
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

java 复制代码
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<String> dbs(){
        return dm.dbs();
    }

    @GetMapping("/list")
    public List<User> 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
java 复制代码
//cn.webrx.mapper
@Mapper
public interface UserMapper extends BaseMapper<User> {}

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

//cn.webrx.service
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

前端

axios拦截器封装

/src/lib/http.js

javascript 复制代码
//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

javascript 复制代码
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

javascript 复制代码
<script setup>
import {getUsers,addUser} from '@/lib/user'
import {ref} from 'vue'
import {ElMessage} from "element-plus";
const msg = ref({id: 0, name: ''})
function abc(){
  getUsers('/users',{},d=>{
    ElMessage(d.name)

    console.log(d)
  })
}
const form = ref({
  name: '李四',
  account: 'admin',
  password: '123',
  birthday: '2013-10-25'
})

function add() {
  addUser("/addUser", form.value, data => {
    if (data.code === 200) {
      ElMessage({type: 'success', message: data.msg})
    } else {
      ElMessage({type: 'error', message: data.msg})
    }
  })
}
</script>

<template>
  <h3>{{ msg.name }}</h3>
  <el-button @click="abc">get</el-button>

  <!-- 添加用户 -->
  <el-row>
    <el-col :span="20" :offset="2">
      <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"/>
        </el-form-item>

        <el-form-item label="账号">
          <el-input type="text" v-model="form.account"/>
        </el-form-item>

        <el-form-item label="密码">
          <el-input type="password" v-model="form.password"/>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="11">
            <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="请选择出生日期"
                style="width: 100%"/>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add">添加新用户</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped>

</style>
相关推荐
摇滚侠1 天前
Spring Boot 3零基础教程,WEB 开发 自定义静态资源目录 笔记31
spring boot·笔记·后端·spring
摇滚侠1 天前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 遍历 笔记40
spring boot·笔记·thymeleaf
武天1 天前
Vue项目中有封装过axios吗?怎么封装的?
vue.js
jiangzhihao05151 天前
升级到webpack5
前端·javascript·vue.js
橘子海全栈攻城狮1 天前
【源码+文档+调试讲解】基于SpringBoot + Vue的知识产权管理系统 041
java·vue.js·人工智能·spring boot·后端·安全·spring
Json_1 天前
学习springBoot框架-开发一个酒店管理系统,熟悉springboot框架语法~
java·spring boot·后端
掘金安东尼1 天前
官方:什么是 Vite+?
前端·javascript·vue.js
kkkkk0211061 天前
微服务学习笔记(黑马商城)
java·spring boot·spring·spring cloud·sentinel·mybatis·java-rabbitmq
冲鸭ONE1 天前
新手搭建Spring Boot项目
spring boot·后端·程序员
数智顾问1 天前
Flink ProcessFunction 与低层级 Join 实战手册:多流广告计费精确去重
java·spring boot·spring