欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringBoot+mybatis+Vue實現(xiàn)前后端分離項目的示例

 更新時間：2021年12月21日 09:40:17   作者：小王java  
本文主要介紹了SpringBoot+mybatis+Vue實現(xiàn)前后端分離項目的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue前后端分離實現(xiàn)功能：員工的增刪改（先實現(xiàn)數(shù)據(jù)回顯之后，再進行修改）查

一、SpringBoot環(huán)境搭建

1、項目的數(shù)據(jù)庫

/*
 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>

    <!--數(shù)據(jù)源連接池-->
    <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  #數(shù)據(jù)源類型
    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實現(xiàn)前后端分離

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:{     //定義數(shù)據(jù)
      msg:"ems員工管理系統(tǒng)",
      emps:[],
      emp:{}
    },
    methods:{   //定義函數(shù)
       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進行管理 根據(jù)雙向綁定原理 emp數(shù)據(jù)變化 會影響頁面 從而在表單中展示當前員工
                     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實現(xiàn)前后端分離項目的示例的文章就介紹到這了,更多相關SpringBoot+mybatis+Vue前后端分離內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • SpringBoot中的@CrossOrigin注解詳解

    SpringBoot中的@CrossOrigin注解詳解

    這篇文章主要介紹了SpringBoot中的@CrossOrigin注解詳解,跨源資源共享（CORS）是由大多數(shù)瀏覽器實現(xiàn)的W3C規(guī)范,允許您靈活地指定什么樣的跨域請求被授權,而不是使用一些不太安全和不太強大的策略,需要的朋友可以參考下
    2023-11-11
  • java GUI實現(xiàn)五子棋游戲

    java GUI實現(xiàn)五子棋游戲

    這篇文章主要為大家詳細介紹了java GUI實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • SpringBoot+OCR?實現(xiàn)圖片文字識別

    SpringBoot+OCR?實現(xiàn)圖片文字識別

    本文主要介紹了SpringBoot+OCR 實現(xiàn)圖片文字識別，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-12-12
  • Spring整合MyBatis圖示過程解析

    Spring整合MyBatis圖示過程解析

    這篇文章主要介紹了Spring整合MyBatis圖示過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-11-11
  • Java數(shù)組轉換為集合的相關方法

    Java數(shù)組轉換為集合的相關方法

    在Java中我們經(jīng)常需要將數(shù)組從一種類型轉換為另一種類型,下面這篇文章主要給大家介紹了關于Java數(shù)組轉換為集合的相關方法,文中通過圖文及代碼介紹的非常詳細,需要的朋友可以參考下
    2024-01-01
  • Java編程訪問權限的控制代碼詳解

    Java編程訪問權限的控制代碼詳解

    這篇文章主要介紹了Java編程訪問權限的控制代碼詳解，涉及包名，公共的和私有的等相關內容，分享了相關代碼示例，小編覺得還是挺不錯的，具有一定借鑒價值，需要的朋友可以參考下
    2018-01-01
  • Java 如何解決跨域問題

    Java 如何解決跨域問題

    這篇文章主要介紹了Java 如何解決跨域問題，幫助大家更好的理解和學習使用Java，感興趣的朋友可以了解下
    2021-03-03
  • java多線程中的生產(chǎn)者和消費者隊列詳解

    java多線程中的生產(chǎn)者和消費者隊列詳解

    這篇文章主要介紹了java多線程中的生產(chǎn)者和消費者隊列詳解,隊列,是一種數(shù)據(jù)結構,除了優(yōu)先級隊列和LIFO隊列外,隊列都是以FIFO(先進先出)的方式對各個元素進行排序的,需要的朋友可以參考下
    2024-01-01
  • SpringBoot整合ActiveMQ的詳細步驟

    SpringBoot整合ActiveMQ的詳細步驟

    昨天仔細研究了activeMQ消息隊列,也遇到了些坑,下面這篇文章主要給大家介紹了關于SpringBoot整合ActiveMQ的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • jmeter的時間戳函數(shù)使用

    jmeter的時間戳函數(shù)使用

    在使用jmeter做接口測試的時候，經(jīng)常會要用到日期這種函數(shù)，本文主要介紹了jmeter的時間戳函數(shù)使用，感興趣的可以了解一下
    2021-11-11

最新評論