Spring Boot連接數據庫實現前後端分離開發（CRUD）

要求：Spring Boot開發工具、MySQL、VScode(前端開發工具)以及雲端服務器和Postman測試軟件

後端（Spring Boot開發工具）

Dept.java

package com.newer.work2.pojo;
/**
 * Dept實體類
 * @author Admin
 *
 */
public class Dept {

	/**
	 * 編號
	 */
	int id;
	
	/**
	 * 名稱
	 */
	String name;
	
	/**
	 * 所在地
	 * 
	 */
	String loc;

//	setters,gettters方法
	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getLoc() {
		return loc;
	}

	public void setLoc(String loc) {
		this.loc = loc;
	}

	//tostring方法
	@Override
	public String toString() {
		return "Dept [id=" + id + ", name=" + name + ", loc=" + loc + "]";
	}
	

	
	
}

DeptMapper.java

package com.newer.work2.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import com.newer.work2.pojo.Dept;

/**
 * MyBatis是sql的映射框架
 * @author Admin
 *
 */
@Mapper
public interface DeptMapper {

	/**
	 * Dept表執行插入語句
	 */
	@Insert("insert into dept(name,loc) values(#{name},#{loc})")
	void create(Dept dept);
	
	/**
	 * Dept表執行查詢操作
	 */
	
	@Select("select * from dept")
	List<Dept>findAll();
	
	/**
	 * Dept表根據id執行查詢操作
	 * 
	 */
	
	@Select("select * from dept where id=#{id}")
	Dept findById(int id);
	
	/**
	 * Dept 表執行更新操作
	 */
	@Update("update dept set name=#{name},loc=#{loc} where id=#{id}")
	void update(Dept dept);
	
	
	/**
	 * Dept 表執行刪除操作
	 */
	@Delete("delete from dept where id=#{id} ")
	void delete(int id);
	
}

DeptController.java

package com.newer.work2.controller;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.newer.work2.mapper.DeptMapper;
import com.newer.work2.pojo.Dept;

/**
 * RESTful API接口
 * @author Admin
 *
 */
//啓用跨域訪問
@CrossOrigin

@RestController
@RequestMapping("/api/v1/dept")
public class DeptController {

	
	/**
	 * 自動依賴注入
	 * @return
	 */
	
	@Autowired
	DeptMapper deptmapper;
	
//	Get
	@GetMapping
	public List<Dept> findAll() {
		return deptmapper.findAll();
	}
	
//	Get id
	@GetMapping("/{id}")
	public Dept findById(@PathVariable int id) {
		return deptmapper.findById(id);
	}
	
//	Post
	@PostMapping
	public void create(@RequestBody Dept dept) {
		deptmapper.create(dept);
	}
	
//	Put id
	@PutMapping("/{id}")
	public void update(@PathVariable int id,@RequestBody Dept dept) {
//		設置更新數據的id
		dept.setId(id);
		deptmapper.update(dept);
	}
	
//	Delete id
	@DeleteMapping("{id}")
	public void delete(@PathVariable int id) {
		deptmapper.delete(id);
	}
	
}

Staff.java

package com.newer.work2.pojo;
/**'
 * 實體類
 * @author Admin
 *
 */
public class Staff {

	/**
	 * 編號
	 */
	int id;
	
	/**
	 * 名字
	 */
	String name;
	
	/**
	 * 職位
	 */
	String job;
	
	
	/**
	 * 電話
	 */
	String phone;

//	getters setters 方法
	public int getId() {
		return id;
	}


	public void setId(int id) {
		this.id = id;
	}


	public String getName() {
		return name;
	}


	public void setName(String name) {
		this.name = name;
	}


	public String getJob() {
		return job;
	}


	public void setJob(String job) {
		this.job = job;
	}


	public String getPhone() {
		return phone;
	}


	public void setPhone(String phone) {
		this.phone = phone;
	}


	//tostring方法
	@Override
	public String toString() {
		return "Staff [id=" + id + ", name=" + name + ", job=" + job + ", phone=" + phone + "]";
	}
	

	
	
	
	
}

StaffMapper.java

package com.newer.work2.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import com.newer.work2.pojo.Staff;

/**
 * 數據持久化儲存
 * MyBatis是SQL映射框架
 * @author Admin
 *
 */

@Mapper
public interface StaffMapper {

	
/**
 * 表執行插入語句
 * @param staff
 */
	@Insert("insert into staff(name,job,phone) values(#{name},#{job},#{phone})")
	void save(Staff staff);
	
/**
 * 	表執行查詢語句
 * @return
 */
	@Select("select * from staff")
	List<Staff>findAll();
	
	
/**
 * 根據id從表執行查詢語句
 * @param id 查詢的id
 * 
 * @return 
 */
	@Select("select * from staff where id=#{id}")
	Staff findById(int id);
	
	
/**
 * 表執行更改功能
 * 
 */
	@Update("update staff set name=#{name},job=#{job},phone=#{phone} where id=#{id}")
	void update(Staff staff);
	
	
/**
 * 表執行刪除語句
 */
	@Delete("delete from staff where id=#{id}")
	void delete(int id);
}

StaffController.java

package com.newer.work2.controller;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.newer.work2.mapper.StaffMapper;
import com.newer.work2.pojo.Staff;

/**
 * 
 * 定義RESTful API接口
 * @author Admin
 *
 */
//啓用跨域訪問
@CrossOrigin
@RestController
@RequestMapping("/api/v1/staff")
public class StaffController {

	/**
	 * 依賴注入
	 */
	@Autowired
	StaffMapper staffMapper;
	
	
//	Get
	@GetMapping
	public List<Staff>findAll(){
		return staffMapper.findAll();
	}
	
	
//	通過id Get
//	@PathVariable:路徑變量
	@GetMapping("/{id}")
	public Staff findById(@PathVariable int id) {
		return staffMapper.findById(id);
	}
	
//	Post
	@PostMapping
	public void create(@RequestBody Staff staff) {
		staffMapper.save(staff);
	}
	
//	Put
	@PutMapping("/{id}")
	public void update(@PathVariable int id,@RequestBody Staff staff) {
		staff.setId(id);
		staffMapper.update(staff);
	}
	
//	Delete
	@DeleteMapping("/{id}")
	public void delete(@PathVariable int id) {
		staffMapper.delete(id);
	}
}

application.properties

#MySQL數據源
spring.datasource.url=jdbc:mysql://121.41.98.23:3306/test
spring.datasource.username=test
spring.datasource.password=test
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#顯示日誌信息
logging.level.web=debug

#顯示詳細信息
spring.http.log-request-details=true

#修改端口號
server.port=9000

前端（vscode）：

vuex+vueCLI+axios+router

App.vue

<template>
  <div>
    <!-- 麪包屑 -->
    <nav class="breadcrumb">
      <router-link class="breadcrumb-item" to="/">部門</router-link>

      <router-link class="breadcrumb-item" to="/about">職員</router-link>
    </nav>
    <!-- 展板 -->
    <div class="jumbotron jumbotron-fluid">
      <router-view />
    </div>
  </div>
</template>

<style>

axios.js

"use strict";

import Vue from 'vue';
import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

Plugin.install = function(Vue) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)

export default Plugin;

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component:About
  }
]

const router = new VueRouter({
  routes
})

export default router

Home.vue

// dept表
<template>
  <div class="row">
    <div class="col-lg-4 col-sm-12">
      <!-- 表單 -->

      <div class="form-group">
        <label for>部門名稱：</label>
        <input
          v-model="name"
          type="text"
          name
          id
          class="form-control"
          placeholder
          aria-describedby="helpId"
        />
      </div>
      <div class="form-group">
        <label for>部門所在地：</label>
        <input
          v-model="loc"
          type="text"
          name
          id
          class="form-control"
          placeholder
          aria-describedby="helpId"
        />
      </div>
      <!-- 創建按鈕 -->
      <button @click="add()" type="button" name id class="btn btn-primary btn-lg btn-block">創建</button>
    </div>
    <div class="col-lg-8 col-sm-12">
      <!-- 表格 -->
      <table class="table">
        <thead>
          <tr>
            <th>編號</th>
            <th>名稱</th>
            <th>所在地</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(dept, index) in depts" :key="index">
            <td>{{dept.id}}</td>
            <td>{{dept.name}}</td>
            <td>{{dept.loc}}</td>
            <td>
              <div class="row">
                <button
                  @click="edit(index)"
                  type="button"
                  name
                  id
                  class="btn btn-primary mr-3"
                  data-toggle="modal"
                  data-target="#modelId"
                >編輯</button>
                <!-- 模態框 -->
                <!-- Button trigger modal -->
                <!-- <button type="button" class="btn btn-primary btn-lg">
                  Launch
                </button>-->

                <!-- Modal -->
                <div
                  class="modal fade"
                  id="modelId"
                  tabindex="-1"
                  role="dialog"
                  aria-labelledby="modelTitleId"
                  aria-hidden="true"
                >
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">請輸入你要修改的部門信息：</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <div class="form-group">
                          <label for>部門編號：</label>
                          <input
                            v-model="editItem.id"
                            type="text"
                            name
                            id
                            class="form-control"
                            placeholder
                            aria-describedby="helpId"
                          />
                        </div>
                        <div class="form-group">
                          <label for>部門名稱：</label>
                          <input
                            v-model="editItem.name"
                            type="text"
                            name
                            id
                            class="form-control"
                            placeholder
                            aria-describedby="helpId"
                          />
                        </div>
                        <div class="form-group">
                          <label for>部門所在地：</label>
                          <input
                            v-model=" editItem.loc"
                            type="text"
                            name
                            id
                            class="form-control"
                            placeholder
                            aria-describedby="helpId"
                          />
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button
                          @click="update()"
                          type="button"
                          class="btn btn-primary"
                          data-dismiss="modal"
                        >確定</button>
                      </div>
                    </div>
                  </div>
                </div>
                <button @click="deletedept(dept.id)" type="button" name id class="btn btn-danger">刪除</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      // 部門名稱
      name: "",
      // 部門所在地
      loc: "",

      editIndex: 0,
      editItem: {}
    };
  },

  methods: {
    ...mapActions(["getdepts", "adddept", "deletedept","updatedept"]),

    // 創建部門的方法
    add: function() {
      // 把部門的字段封裝了成一個payload對象
      const payload = {
        // id:this.id,
        name: this.name,
        loc: this.loc
      };
      this.adddept(payload);
      // 清除原來的數據
      this.name='';
      this.loc='';
    },

    // 編輯部門數據的方法
    edit: function(i) {
      // 獲得編輯項的索引
      this.editIndex = i;
      this.editItem = {};
      this.editItem.id=this.depts[i].id;
      this.editItem.name = this.depts[i].name;

      this.editItem.loc = this.depts[i].loc;
    },

    // 更新部門數據的方法
    update: function() {
      // this.depts.splice(this.editIndex, 1, this.editItem);
      console.log(  this.editItem);
      
        this.updatedept(this.editItem)
    }
  },
  computed: {
    ...mapState(["depts"])
  },

  created() {
    this.getdepts();
  }
};
</script>

About.vue

// staff
<template>
  <div class="row">
    <div class="col-lg-4 col-sm-12">
      <!-- 表單 -->
      <div class="form-group">
        <label for>員工的名字：</label>
        <input
          v-model="name"
          type="text"
          name
          id
          class="form-control"
          placeholder
          aria-describedby="helpId"
        />
      </div>
      <div class="form-group">
        <label for>員工的職位：</label>
        <input
          v-model="job"
          type="text"
          name
          id
          class="form-control"
          placeholder
          aria-describedby="helpId"
        />
      </div>
      <div class="form-group">
        <label for>員工的電話：</label>
        <input
          v-model="phone"
          type="text"
          name
          id
          class="form-control"
          placeholder
          aria-describedby="helpId"
        />
      </div>
      <!-- 創建按鈕 -->
      <button @click="add()" type="button" name id class="btn btn-primary btn-lg btn-block">創建</button>
    </div>
    <div class="col-lg-8 col-sm-12">
      <!-- 表格 -->
      <table class="table">
        <thead>
          <tr>
            <th>編號</th>
            <th>名字</th>
            <th>職位</th>
            <th>電話</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(staff, index) in staffs" :key="index">
            <td>{{staff.id}}</td>
            <td>{{staff.name}}</td>
            <td>{{staff.job}}</td>
            <td>{{staff.phone}}</td>
            <td>
              <div class="row">
                <button
                  @click="edit(index)"
                  type="button"
                  name
                  id
                  class="btn btn-primary mr-3"
                  data-toggle="modal"
                  data-target="#modelId"
                >編輯</button>
                <!-- 模態框 -->
                <!-- Button trigger modal -->
                <!-- <button type="button" class="btn btn-primary btn-lg" >
                  Launch
                </button>-->

                <!-- Modal -->
                <div
                  class="modal fade"
                  id="modelId"
                  tabindex="-1"
                  role="dialog"
                  aria-labelledby="modelTitleId"
                  aria-hidden="true"
                >
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">請輸入你想要更改的員工信息：</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                          <div class="form-group">
                          <label for>員工的編號：</label>
                          <input
                            v-model="editItem.id"
                            type="text"
                            name
                            id
                            class="form-control"
                            placeholder
                            aria-describedby="helpId"
                          />
                        </div>
                        <div class="form-group">
                          <label for>員工的名字：</label>
                          <input
                            v-model="editItem.name"
                            type="text"
                            name
                            id
                            class="form-control"
                            placeholder
                            aria-describedby="helpId"
                          />
                        </div>
                        <div class="form-group">
                          <label for>員工的職位：</label>
                          <input
                            v-model="editItem.job"
                            type="text"
                            name
                            id
                            class="form-control"
                            placeholder
                            aria-describedby="helpId"
                          />
                        </div>
                        <div class="form-group">
                          <label for>員工的電話：</label>
                          <input
                            v-model="editItem.phone"
                            type="text"
                            name
                            id
                            class="form-control"
                            placeholder
                            aria-describedby="helpId"
                          />
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button
                          @click="update()"
                          type="button"
                          class="btn btn-primary"
                          data-dismiss="modal"
                        >確定</button>
                      </div>
                    </div>
                  </div>
                </div>
                <button @click="delstaff(staff.id)" type="button" name id class="btn btn-danger">刪除</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "About",
  data() {
    return {
      // 職員的名字
      name: "",
      // 職員的職位
      job: "",
      // 職員的電話
      phone: "",
      // 編輯索引
      editIndex: 0,
      // 編輯的內容
      editItem: {}
    };
  },

  methods: {
    ...mapActions(["getstaffs", "addstaff", "delstaff", "updatestaff"]),

    // 創建新員工的方法
    add: function() {
      const payload = {
        name: this.name,
        job: this.job,
        phone: this.phone
      };
      this.addstaff(payload);
      // 清除輸入框中的數據
      this.name = "";
      this.job = "";
      this.phone = "";
    },

    // 編輯員工信息的方法
    edit: function(i) {
      // 獲取編輯的索引
      this.editIndex = i;
      this.editItem = {};
      this.editItem.id=this.staffs[i].id;
      this.editItem.name = this.staffs[i].name;
      this.editItem.job = this.staffs[i].job;
      this.editItem.phone = this.staffs[i].phone;
    },

    // 更新員工信息的方法
    update: function() {
      this.updatestaff(this.editItem);
    }
  },

  computed: {
    ...mapState(["staffs"])
  },

  created() {
    this.getstaffs();
  }
};
</script>

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

const state = {
  // 部門列表
  depts: [],
  // 職員列表
  staffs: []
}
const mutations = {
  // 獲取部門數據的方法
  GETDEPTS(state, depts) {
    state.depts = depts;
  },

  // 創建部門的方法
  ADDDEPTS(state, dept) {
    state.depts.push(dept)
  },

  

  // 獲取職工數據的方法
  GETSTAFFS(state, staffs) {
    state.staffs = staffs;
  },

  // 創建員工數據的方法
  ADDSTAFF(state,staff){
    state.staffs.push(staff)
  }
}
const actions = {
  // 從服務端獲取部門數據
  getdepts(context) {
    const url = 'http://121.41.98.23:9000/api/v1/dept';
    axios.get(url)
      .then(res => {
        console.log(res);
        context.commit('GETDEPTS', res.data);
      })
      .catch(err => {
        console.error(err);
      })
  },


  //  向服務端增加部門數據
  adddept(context, payload) {
    const url = 'http://121.41.98.23:9000/api/v1/dept';
    axios.post(url, payload)
      .then(res => {
        console.log(res)
        context.commit('ADDDEPTS', res.data);

        // 再次從服務端獲取新的數據
        axios.get(url)
          .then(res => {
            console.log(res)
            context.commit('GETDEPTS', res.data)
          })
          .catch(err => {
            console.error(err);
          })
      })
      .catch(err => {
        console.error(err);
      })
  },


  // 刪除服務端的部門數據
  deletedept(context, id) {
    const url = `http://121.41.98.23:9000/api/v1/dept/${id}`
    axios.delete(url)
      .then(res => {
        console.log(res)


        // 刪除後再次從服務端獲取部門數據
        axios.get('http://121.41.98.23:9000/api/v1/dept')
          .then(res => {
            console.log(res)
            context.commit('GETDEPTS', res.data)
          })
          .catch(err => {
            console.error(err);
          })
      })
      .catch(err => {
        console.error(err);
      })
  },

  // 更新服務端的部門數據
  updatedept(context,payload){
    const url = `http://121.41.98.23:9000/api/v1/dept/${payload.id}`
    axios.put(url,payload)
    .then(res => {
      console.log(res)
      
      // 更新後從服務端獲取數據
      axios.get('http://121.41.98.23:9000/api/v1/dept')
      .then(res => {
        console.log(res)
        context.commit('GETDEPTS', res.data)

      })
      .catch(err => {
        console.error(err); 
      })
    })
    .catch(err => {
      console.error(err); 
    })

  },

  //  從服務端獲取員工數據
  getstaffs(context) {
    const url = 'http://121.41.98.23:9000/api/v1/staff';
    axios.get(url)
      .then(res => {
        console.log(res)
        context.commit('GETSTAFFS', res.data)
      })
      .catch(err => {
        console.error(err);
      })
  },

  // 向服務端新增員工數據
  addstaff(context,payload){
    const url = 'http://121.41.98.23:9000/api/v1/staff';
    axios.post(url,payload)
    .then(res => {
      console.log(res)
      context.commit('ADDSTAFF',res.data)
      //再次獲取服務端的員工數據
      axios.get('http://121.41.98.23:9000/api/v1/staff')
      .then(res => {
        console.log(res)
        context.commit('GETSTAFFS', res.data)
      })
      .catch(err => {
        console.error(err); 
      })
    })
    .catch(err => {
      console.error(err); 
    })
  },

  // 刪除服務端的員工數據
  delstaff(context,id){
    const url = `http://121.41.98.23:9000/api/v1/staff/${id}`
    axios.delete(url)
    .then(res => {
      console.log(res)
      // 再次獲取員工數據
      axios.get('http://121.41.98.23:9000/api/v1/staff')
      .then(res => {
        console.log(res)
        context.commit('GETSTAFFS', res.data)
      })
      .catch(err => {
        console.error(err); 
      })
    })
    .catch(err => {
      console.error(err); 
    })
  },

  // 修改服務端的員工數據
  updatestaff(context,payload){
    const url = `http://121.41.98.23:9000/api/v1/staff/${payload.id}`
    axios.put(url,payload)
    .then(res => {
      console.log(res)

      // 再次獲取服務端的員工數據
      axios.get('http://121.41.98.23:9000/api/v1/staff')
      .then(res => {
        console.log(res)
        context.commit('GETSTAFFS', res.data)
      })
      .catch(err => {
        console.error(err); 
      })
    })
    .catch(err => {
      console.error(err); 
    })
  }


}
const getters = {

}
export default new Vuex.Store({
  state: state,
  mutations: mutations,
  actions: actions,
  modules: {
  },
  getters: getters
})

界面效果如圖：

關於MySQL以及Postman的使用，感興趣的小夥伴可以去我的其他博客看，以上實現了前後端分離開發，大大減少了開發的時間。此外，有問題的歡迎留言！！！

Spring Boot連接數據庫實現前後端分離開發（CRUD）

後端（Spring Boot開發工具）

前端（vscode）：

關於遊戲付費的一點想法

我通過CKA和CKS啦！

MyBatis基礎知識

Spring Boot連接數據庫實現前後端分離開發（CRUD）

Spring Boot部署到雲端

解決Spring Boot中APPLICATION FAILED TO START的問題

解決瀏覽器提示從源地址http://localhost:8080'訪問XMLHttpRequest已被CORS策略阻止的問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結