SpringBoot+mybatis+Vue實現前後端分離項目的示例

Posted on 2021-12-21 by WalkonNet

一、SpringBoot環境搭建

1、項目的數據庫

/*
 Navicat Premium Data Transfer

 Source Server         : windows
 Source Server Type    : MySQL
 Source Server Version : 80022
 Source Host           : localhost:3306
 Source Schema         : ems

 Target Server Type    : MySQL
 Target Server Version : 80022
 File Encoding         : 65001

 Date: 19/12/2021 16:27:43
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_emp
-- ----------------------------
DROP TABLE IF EXISTS `t_emp`;
CREATE TABLE `t_emp`  (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `salary` double NOT NULL,
  `age` int NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of t_emp
-- ----------------------------
INSERT INTO `t_emp` VALUES (2, '楊福君', 9000, 19);
INSERT INTO `t_emp` VALUES (6, '鄧正武', 18000, 25);
INSERT INTO `t_emp` VALUES (8, '王恒傑', 12000, 21);
INSERT INTO `t_emp` VALUES (9, '張西', 8000, 20);

SET FOREIGN_KEY_CHECKS = 1;

2、項目所需依賴

<!--繼承springboot的父項目 ,放在dependencies平級下-->
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.5.RELEASE</version>
  </parent>
  <dependencies>
    <!--springboot依賴-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter</artifactId>
    </dependency>
    <dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>2.1.2</version>
    </dependency>

    <!--引入springboot的web支持-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!--mysql-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.16</version>
    </dependency>

    <!--數據源連接池-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.12</version>
    </dependency>

    <!--引入springboot的test支持-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
    </dependency>

  </dependencies>
</project>

3、application.yml文件

server:
  port: 8080
  servlet:
    context-path: /ems
spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource  #數據源類型
    driver-class-name: com.mysql.cj.jdbc.Driver   #加載驅動
    url: jdbc:mysql://localhost:3306/ems?useSSL=false&serverTimezone=UTC
    username: root
    password: root
mybatis:
  mapper-locations: classpath:com/tjcu/mapper/*Mapper.xml #指定mapper文件所在的位置,其中classpath必須和mapper-locations分開
  type-aliases-package: com.tjcu.entity

4、入口類

@SpringBootApplication
@MapperScan("com.tjcu.dao")
public class EmpApplication {
    public static void main(String[] args) {
        SpringApplication.run(EmpApplication.class,args);
    }
}

二、vue實現前後端分離

1、前端頁面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>emp manager</title>
</head>
<body>
<div id="app">
  <center><h2>{{msg}}</h2></center>
  <hr/>
  <center>
    <form>
      編號：<input type="text" v-model="emp.id" placeholder="添加默認為null"/><br/>
      名稱：<input type="text" v-model="emp.name"/><br/>
      薪資：<input type="text" v-model="emp.salary"/><br/>
      年齡：<input type="text" v-model="emp.age"/><br/>
      <input type="button" value="添加/修改" @click="add()"/>
      <br/>
      <br/>
      <br/>
    </form>
  </center>
  <table border="1" cellspacing="0" cellpadding="0" width="80%" align="center">
    <tr>
      <td>編號</td>
      <td>名稱</td>
      <td>年齡</td>
      <td>薪資</td>
      <td>操作</td>
    </tr>
    <tr v-for="(emp,index) in emps">
      <td>{{index+1}}</td>
      <td>{{emp.name}}</td>
      <td>{{emp.salary}}</td>
      <td>{{emp.age}}</td>
      <td><input type="button" value="刪除" @click="del(emp.id)">
          <input type="button" value="修改" @click="queryOne(emp.id)"></td>
    </tr>
  </table>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script src="js/axios.min.js"></script>
<script>
  new Vue({
    el:"#app" , //指定vue實例的作用范圍
    data:{     //定義數據
      msg:"ems員工管理系統",
      emps:[],
      emp:{}
    },
    methods:{   //定義函數
       queryAll(){
         var vue=this;
         axios.get("http://localhost:8080/ems/emp/queryall")
         .then(function (response) {
           console.log(response.data);
           vue.emps = response.data;
         }).catch(function (error) {
           console.log(error.data);
         })
       },
      add(){
         var vue=this;
        console.log(vue.emp);
        axios.post("http://localhost:8080/ems/emp/add",vue.emp)
        .then(function () {
          vue.queryAll();
          console.log("添加成功");
          vue.emp={};
        })
        .catch(function () {
          console.log("添加失敗")
        })
      },
      queryOne(id){
         if(window.confirm("你確定修改嗎？")){
           var  vue=this;
           axios.get("http://localhost:8080/ems/emp/queryOne?id="+id)
                   .then(function (response) {
                     //將查詢的結果嫁給vue中的emp進行管理 根據雙向綁定原理 emp數據變化 會影響頁面 從而在表單中展示當前員工
                     vue.emp=response.data;
                     console.log("查詢成功");
                   }).catch(function () {
             console.log("查詢失敗")
           })
         }
      },
      del(id){
         if(window.confirm("你確定刪除嗎？")){
           var  vue=this;
           axios.get("http://localhost:8080/ems/emp/delete?id="+id)
           .then(function () {
             vue.queryAll();
             console.log("刪除成功")
           }).catch(function () {
             console.log("刪除失敗")
           })
         }
      }
    },
    created(){
        this.queryAll();
    }
  })
</script>

2、springBoot控制層

/**
 * @author 王恒傑
 * @date 2021/12/17 15:52
 * @Description:
 */
@Controller
@CrossOrigin
@ResponseBody
public class EmpController {
    @Autowired
    private EmpService empService;

    @RequestMapping("/emp/queryall")
    public  List<Emp> queryall(){
        List<Emp> emps = empService.showEmp();
        return emps;
    }

    /**
     * 刪除
     * @param id
     */
    @RequestMapping("/emp/delete")
    public void delete(Integer id){
        empService.deleteById(id);
    }
    @RequestMapping("/emp/add")
    public void add(@RequestBody Emp emp){
        if(emp.getId()!=0){
            empService.updateEmp(emp);
        }else {
            emp.setId(null);
            empService.insertEmp(emp);
        }
    }

    @RequestMapping("/emp/queryOne")
    public Emp query(Integer id){
        Emp emp = empService.selectEmpById(id);
        return emp;
    }
}

3、mapper文件

<mapper namespace="com.tjcu.dao.EmpDao">

    <insert id="insertEmp">
        insert into t_emp
        values (#{id}, #{name}, #{salary}, #{age})
    </insert>

    <select id="showEmp" resultType="emp">
        select *
        from t_emp
    </select>

    <update id="updateEmp">

        update t_emp
        <set>
            <if test="name!=null">
                name=#{name},
            </if>
            <if test="salary!=null">
                salary=#{salary},
            </if>
            <if test="age!=null">
                age=#{age}
            </if>
        </set>
        where id=#{id}
    </update>

    <delete id="deleteById">
        delete from t_emp where id=#{id}
    </delete>
    <select id="selectEmpById" resultType="emp">
        select *
        from t_emp where id=#{id}
    </select>

</mapper>

4、項目完整源代碼

gitee開源：https://gitee.com/wanghengjie563135/springboot_mybatis_vue.git

到此這篇關於SpringBoot+mybatis+Vue實現前後端分離項目的示例的文章就介紹到這瞭,更多相關SpringBoot+mybatis+Vue前後端分離內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

SpringBoot+mybatis+Vue實現前後端分離項目的示例

目錄

一、SpringBoot環境搭建

1、項目的數據庫

2、項目所需依賴

3、application.yml文件

4、入口類

二、vue實現前後端分離

1、前端頁面

2、springBoot控制層

3、mapper文件

4、項目完整源代碼

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

一、SpringBoot環境搭建

1、項目的數據庫

2、項目所需依賴

3、application.yml文件

4、入口類

二、vue實現前後端分離

1、前端頁面

2、springBoot控制層

3、mapper文件

4、項目完整源代碼

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆