首页 学习教程 Java教程 正文
我要投稿

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

Java教程
2023-01-21 0 527

目录

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前后端分离内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

收藏 (0) 点赞 (0)

：本文采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可， 转载请附上原文出处链接。
1、本站提供的源码不保证资源的完整性以及安全性，不附带任何技术服务！
2、本站提供的模板、软件工具等其他资源，均不包含技术服务，请大家谅解！
3、本站提供的资源仅供下载者参考学习，请勿用于任何商业用途，请24小时内删除！
4、如需商用，请购买正版，由于未及时购买正版发生的侵权行为，与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中，请提前注册好百度网盘账号，下载安装百度网盘客户端或其他网盘客户端进行下载；
6、本站部分资源文件是经压缩后的，请下载后安装解压软件，推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益，请邮件联系： 442469558@qq.com 进行处理！

猪小侠源码-最新源码下载平台 Java教程 SpringBoot+mybatis+Vue实现前后端分离项目的示例 http://www.20zxx.cn/463534/xuexijiaocheng/javajc.html

猪小侠源码，优质资源分享网

也想出现在这里？点击联系我~
常见问题

免费下载或者VIP会员专享资源能否直接商用？

  • 本站所有资源版权均属于原作者所有，均只能用于参考学习，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担
查看详情

提示下载完成但无法解压？

  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，建议提前注册好百度网盘账号，使用百度网盘客户端下载
查看详情

相关文章

日常工作中关于 JSON 转换的经验大全（Java）
日常工作中关于 JSON 转换的经验大全（Java）
Java教程
2个月前 1
Java 互联网项目如何防止集合堆内存溢出（一）
Java 互联网项目如何防止集合堆内存溢出（一）
Java教程
2个月前 1
Spring动态定时任务之ScheduledTaskRegistrar
Spring动态定时任务之ScheduledTaskRegistrar
Java教程
2个月前 1
Jpackage-制作无需预装Java环境的Jar可执行程序
Jpackage-制作无需预装Java环境的Jar可执行程序
Java教程
2个月前 1
深度探究MyBatis的一对多查询配置：灵活运用关联查询
深度探究MyBatis的一对多查询配置：灵活运用关联查询
Java教程
2个月前 1
Java JNDI 与 Spring 集成的秘诀：揭秘 Java JNDI 与 Spring 框架的无缝协作
Java JNDI 与 Spring 集成的秘诀：揭秘 Java JNDI 与 Spring 框架的无缝协作
Java教程
2个月前 1
Lambda表达式在Java中的奇妙之旅：函数式编程的实践指南！
Lambda表达式在Java中的奇妙之旅：函数式编程的实践指南！
Java教程
2个月前 1
从零开始学Spring Boot系列-集成mybatis
从零开始学Spring Boot系列-集成mybatis
Java教程
2个月前 1
猜你喜欢
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
最新更新动态
热门标签
广告位招租 到期时间：2083/04/30
猪小侠消费返现商业模式 到期时间：2083/04/30
终身会员招募中 到期时间：2083/04/30
热门文章
热门评论
  • 猪小侠源码：

    做猪小侠源码的代理，提供一站式服务

  • 柯：

    如果你不懂得搭建网站或者服务器，小程序，源码之类的怎么办？ 第一通过本站学习各种互联网的技术 第二就是联系客服，我帮帮你搭建（当然要收取部分的费用） 第三成为我们的代理，我们提供整套的服务。

    • 终身VIP会员限时钜惠
    首页 投稿 菜单 vip 登陆