SpringBoot+mybatis+Vue实现前后端分离小项目

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 🍅程序员小王的博客:程序员小王的博客🍅 欢迎点赞 👍 收藏 ⭐留言 📝🍅 如有编辑错误联系作者,如果有比较好的文章欢迎分享给我,我会取其精华去其糟粕🍅java自学的学习路线:java自学的学习路线

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

一、SpringBoot环境搭建

1、项目的数据库

9.png


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

10.png

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

二、vue实现前后端分离

1、前端页面

11.png

<!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>


3、项目完整源代码

gitee开源:https://gitee.com/wanghengjie563135/springboot_mybatis_vue.git

12.png


相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
12天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
84 1
|
15天前
|
Java 数据库连接 Maven
springBoot:项目建立&配置修改&yaml的使用&resource 文件夹(二)
本文档介绍了如何创建一个基于Maven的项目,并配置阿里云仓库、数据库连接、端口号、自定义启动横幅及多环境配置等。同时,详细说明了如何使用YAML格式进行配置,以及如何处理静态资源和模板文件。文档还涵盖了Spring Boot项目的`application.properties`和`application.yaml`文件的配置方法,包括设置数据库驱动、URL、用户名、密码等关键信息,以及如何通过配置文件管理不同环境下的应用设置。
|
13天前
|
JavaScript 前端开发 Java
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。
206 1
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
|
19天前
|
Java Maven Android开发
eclipse如何导入springboot项目
本文介绍了如何在Eclipse中导入Spring Boot项目。
19 1
eclipse如何导入springboot项目
|
13天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第8天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建并配置 Spring Boot 项目,实现后端 API 和安全配置。接着,使用 Ant Design Pro Vue 脚手架创建前端项目,配置动态路由和菜单,并创建相应的页面组件。最后,通过具体实践心得,分享了版本兼容性、安全性、性能调优等注意事项,帮助读者快速搭建高效且易维护的应用框架。
22 3
|
14天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第7天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建 Spring Boot 项目并配置 Spring Security。接着,实现后端 API 以提供菜单数据。在前端部分,使用 Ant Design Pro Vue 脚手架创建项目,并配置动态路由和菜单。最后,启动前后端服务,实现高效、美观且功能强大的应用框架。
17 2
|
13天前
|
Java Maven Spring
springboot学习一:idea社区版本创建springboot项目的三种方式(第三种为主)
这篇文章介绍了在IntelliJ IDEA社区版中创建Spring Boot项目的三种方法,特别强调了第三种方法的详细步骤。
44 0
springboot学习一:idea社区版本创建springboot项目的三种方式(第三种为主)
|
13天前
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
61 0
|
14天前
|
Java 应用服务中间件 Maven
SpringBoot Maven 项目打包的艺术--主清单属性缺失与NoClassDefFoundError的优雅解决方案
SpringBoot Maven 项目打包的艺术--主清单属性缺失与NoClassDefFoundError的优雅解决方案
170 0
|
19天前
|
JavaScript 前端开发 数据可视化
【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。
【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。
40 0