SpringBoot+Vue+MySQL基础案例-增删改查

【个人学习项目记录】
技术栈：SpringBoot2.5.2+MySQL8.0.17+Vue2.9.6+MyBatis
开发工具：IDEA2020.1.2+Navicat+HBuilder X（Visual Studio Code）

创建项目

SpringBoot项目创建
pox.xml除了基本所需依赖外还需要添加以下两个依赖

 <dependency>
     <groupId>mysql</groupId>
     <artifactId>mysql-connector-java</artifactId>
     <scope>runtime</scope>
 </dependency>
 <dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.0</version>
</dependency>

vue-cli创建
在终端输入以下代码完成创建（vue_name）为项目名

vue init webpack vue_name

数据库（MySQL）创建
由于是基础案例，仅四个字段，编号、账号、密码、邮箱

SET FOREIGN_KEY_CHECKS=0;
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
  `password` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
  `email` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;

数据库连接

在application.yaml中添加语句，端口8080

#数据库连接
spring:
  datasource:
    name: test
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/springboot_vue?characterEncoding=utf-8&serverTimezone=UTC
    username: root
    password: root

因为跨域访问，所以创建config文件夹，在文件夹中创建CrosConfig.java文件，内容如下

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")                //映射路径，全局跨域访问设置
                .allowedOriginPatterns("*")       //开放ip、端口、域名的访问权限
                .allowedMethods( "GET", "POST", "PUT", "OPTIONS", "DELETE") //开放Http方法，允许跨域访问
                .allowCredentials(true)           //是否允许发送Cookie信息
                .maxAge(3600)                     //跨域允许时间
                .allowedHeaders("*");             //允许HTTP请求中的携带Header信息
    }
}

在Vue项目中src->main.js中添加如下代码，通过axios进行跨域

import axios from 'axios'
Vue.prototype.$axios = axios

注册案例

SpringBoot

在resources创建mapper->UserMapper.xml，添加如下代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.springboot_vue.dao.UserMapper">
    <insert id="register">
       insert into user (username, password) values (#{username}, #{password})
    </insert>
</mapper>

在application.yaml中添加MyBatis配置

mybatis:
  #对应mapper映射文件路径
  mapper-locations: classpath:mapper/*.xml
  #对应实体类路径
  type-aliases-package: com.example.springboot_vue.entity

创建entity->User.java

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private Integer id;
    private String username;
    private String password;
    private String email;
}

创建dao->UserMapper.java

@Mapper
public interface UserMapper {
    int register(String username, String password);
}

创建service->UserService.java

public interface UserService {
    public int addUser(String username, String password);
}

创建service->impl->UserServiceImpl.java

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    UserMapper userMapper;
    @Override
    public int addUser(String username, String password) {
        return userMapper.register(username, password);
    }
}

创建controller->UserController.java

@Controller
@CrossOrigin
public class UserController {
    @Autowired
    UserService userService;
    @ResponseBody
    @PostMapping("/registerUser")
    String register(@RequestBody User user) {
        int res = userService.addUser(user.getUsername(), user.getPassword());
        if(res == 1) {
            return "注册成功";
        } else {
            return "注册失败";
        }
    }
}

Vue

在main.js引入ElementUI（通过node.js工具在终端下载）

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

在src->router->index.js中添加页面跳转代码

export default new Router({
  //修改mode可以去掉#
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      //跳转的路径
      path: '/goUser',
      name: 'Reg_log_User',
      //跳转的组件
      component: Reg_log_User
    }
  ]
})

修改src->App.vue代码

<template>
  <div id="app">
     <img src="./assets/logo.png" style="width: 60px; height: 60px;">
     <br><br>
     <router-link to="/">首页</router-link>
     <router-link to="/findUser">用户页</router-link>
     <router-link to="/goUser">注册登录页</router-link>
     <br><br>
     <router-view></router-view>
  </div>
</template>

在src->components->Reg_log_User.vue

<template>
  <div>
    <el-input v-model="username" placeholder="请输入帐号" style="width: 50%;"></el-input><br><br>
    <el-input v-model="password" placeholder="请输入密码" style="width: 50%;"show-password></el-input><br><br>
    <el-button @click="login">登录</el-button>
    <el-button v-on:click="register">注册</el-button>
  </div>
</template>

<script>
  export default {
    name: 'Reg_log_User',
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      register: function() {
        this.$axios.post('http://localhost:8080/registerUser', {
          username: this.username,
          password: this.password
        }).then((response) => {
          console.log(response);
          alert('注册成功');
        }).catch((error) => {
          console.log(error);
        });
      }
    }
  }
</script>
<style scoped></style>

最后终端输入运行

npm run dev

效果展示

注册案例成果

其他案例成果

一个流程步骤类似，增改改查效果都已经实现了，暂时不贴代码了，后续有空再补齐，贴几张成果图