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
           

效果展示

注冊案例成果

其他案例成果

一個流程步驟類似，增改改查效果都已經實作了，暫時不貼代碼了，後續有空再補齊，貼幾張成果圖