欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

SpringBoot+mybatis+Vue实现前后端分离项目的示例

程序员文章站 2022-06-16 21:29:33
目录一、springboot环境搭建1、项目的数据库2、项目所需依赖3、application.yml文件4、入口类二、vue实现前后端分离1、前端页面2、springboot控制层3、mapper文...

vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查

一、springboot环境搭建

1、项目的数据库

SpringBoot+mybatis+Vue实现前后端分离项目的示例

/*
 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、入口类

SpringBoot+mybatis+Vue实现前后端分离项目的示例

@springbootapplication
@mapperscan("com.tjcu.dao")
public class empapplication {
    public static void main(string[] args) {
        springapplication.run(empapplication.class,args);
    }
}

二、vue实现前后端分离

1、前端页面

SpringBoot+mybatis+Vue实现前后端分离项目的示例

<!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实现前后端分离项目的示例的文章就介绍到这了,更多相关springboot+mybatis+vue前后端分离内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!