敏捷——前后端联调/springboot整合mybatis

添加数据后端：

1. 准备工作

1）创建 springboot 工程，导入 mybatis 依赖、mysql驱动、web、导入lombok依赖

    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.20</version>
        <scope>provided</scope>
    </dependency>

2）创建数据库用户表 user

create database demo0407;
use demo0407;
CREATE TABLE `user` (
                        `id` INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
                        `name` VARCHAR(255) NOT NULL,
                        `gender` VARCHAR(10) NOT NULL,
                        `birth_date` DATE NOT NULL,
                        `phone` VARCHAR(20) NOT NULL,
                        `email` VARCHAR(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3）在 pojo 包里面创建对应的实体类 User，使用 @Data注解，自动get, set, 构造方法

import java.util.Date;
@Data 
public class User {
    private String name;
    private String gender;
    private Date birthDate;
    private String phone;
    private String email;
}

！！！注意！！！前后端务必参数命名、类型相同 

2. 配置 mybatis

1）IDEA连接数据库，输入用户名 root 和密码 123456

2）编写 application.properties 或者 application.yml 文件，连接数据库四大参数，顺便改个端口号

以 application.yml 为例：需要更改参数

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/students //改成自己的数据库名
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver


# MyBatis 配置
mybatis:
  mapper-locations: classpath:mapper/*.xml

3. 写 mapper 包下 UserMapper 接口和方法

mapper 包下创建接口 UserMapper，并写方法。

接口 UseMapper 上写注解 @Mapper，

@Mapper
public interface UserMapper {
    void insertUser(User user);
}

4. 写 XML 配置文件

1）创建 XML 映射文件。

在 resource下创建和接口一样的包名和接口名（使用 / 代替 .）

2）写 XML 映射文件属性

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="">
 
</mapper>

namespace 属性为 Mapper接口全限定名一致，copy reference

3）在 XML 文件中编写 sql 语句，sql 中的 id：与Mapper 接口中的方法名一致，并保持返回类型一致

记得更改 user 路径名字 

    <insert id="insertUser" parameterType="com.example.demo20230927.User">
    //也就是后面新建User类的路径
        INSERT INTO user (name, gender, birth_date, phone, email)
        VALUES (#{name}, #{gender}, #{birthDate}, #{phone}, #{email})
    </insert>

5. 写 controller 层

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserMapper userMapper;
    @PostMapping("/add")
    public String addUser(@RequestBody User user) {
        userMapper.insertUser(user);
        return "用户添加成功";
    }
}

添加数据前端：

1. 准备工作

引入 element-ui：

安装：

npm i element-ui

main.js 中引入 elementUI 组件：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

引入 axios :

 安装：

npm install axios

 在单个组件 <scrpit> 标签中引入 axios：

import axios from 'axios';

2. 设置代理

在 vue.config.js 文件中配置 devServer 属性：

 devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:9999",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }

<template>
  <div class="='/about'">
    <h1>Add User</h1>
    <form @submit.prevent="submitUser">
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="user.name" required><br>

      <label for="gender">Gender:</label>
      <input type="text" id="gender" v-model="user.gender" required><br>

      <label for="birthDate">Birth Date:</label>
      <input type="date" id="birthDate" v-model="user.birthDate" required><br>

      <label for="phoneNumber">Phone:</label>
      <input type="tel" id="phoneNumber" v-model="user.phone" required><br>

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="user.email" required><br>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      user: {
        name: '',
        gender: '',
        birthDate: '',
        phone: '',
        email: ''
      }
    }
  },
  methods: {
    submitUser() {
      axios.post('/api/user/add', this.user)
        .then(response => {
          console.log('添加成功');
          // Optionally redirect or show a success message
        })
        .catch(error => {
          console.error('There was a problem with your axios operation:', error);
          // Handle error
        });
    }
  }
}
</script>