Vue+SpringBoot+Mybatis+Mysql前后端分离案例

Vue+SpringBoot整合Mybatis实现前后端分离实践

最新推荐文章于 2024-03-28 00:53:23 发布

原创

最新推荐文章于 2024-03-28 00:53:23 发布 · 3.8k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue #spring boot #mysql #mybatis

本文介绍了使用Vue、Spring Boot、Mybatis和Mysql构建前后端分离应用的案例。主要展示了在App.vue文件中添加增删改查操作的代码，以及通过前端交互实现数据库数据的修改，包括添加、获取所有员工信息、删除和更新用户信息的过程。

Vue+SpringBoot+Mybatis+Mysql前后端分离案例(二)

前端开发

main.js代码如下

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.prototype.$http= axios
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

App.vue代码

App.vue代码中添加了4个按钮用于增删改查的请求，数据信息均打印在控制台窗口，用户信息就不展示在界面上了。。

<template>
  <div id="app">
    <button id="btnAdd" @click="addUser">添加用户信息</button>
    <button id="btnDelete" @click="deleteUser">删除用户信息</button>
    <button id="btnUpdate" @click="updateUser">更改用户信息</button>
    <button id="btnGetAll" @click="getAllUser">获取所有用户信息</button>
  </div>
</template>
<script>
import axios from 'axios'

//删除用户信息的id(表中自增主键的id已为31)
var count=31;
export default {