整合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

"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.0modelVersion>
    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.7.15version>
        <relativePath/> 
    parent>
    <groupId>org.examplegroupId>
    <artifactId>ch10vuecrudapiartifactId>
    <version>1.0version>
 
    <properties>
        <java.version>17java.version>
        <maven.compiler.source>17maven.compiler.source>
        <maven.compiler.target>17maven.compiler.target>
        <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
    properties>
 
    <dependencies>
 
        
        <dependency>
            <groupId>com.baomidougroupId>
            <artifactId>mybatis-plus-boot-starterartifactId>
            <version>3.5.3.2version>
            <exclusions>
                <exclusion>
                    <groupId>com.zaxxergroupId>
                    <artifactId>HikariCPartifactId>
                exclusion>
            exclusions>
        dependency>
 
        
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>8.0.33version>
        dependency>
        
        <dependency>
            <groupId>com.alibabagroupId>
            <artifactId>druid-spring-boot-starterartifactId>
            <version>1.2.19version>
        dependency>
 
 
 
        
        <dependency>
            <groupId>org.yamlgroupId>
            <artifactId>snakeyamlartifactId>
            <version>2.0version>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>
 
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-devtoolsartifactId>
            <scope>runtimescope>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-configuration-processorartifactId>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
            <scope>testscope>
        dependency>
    dependencies>
 
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombokgroupId>
                            <artifactId>lombokartifactId>
                        exclude>
                    excludes>
                configuration>
            plugin>
        plugins>
    build>
 
project>

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

 
<template>
  <h3>{{ msg.name }}h3>
  <el-button @click="abc">getel-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>