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

更新时间:2023-04-04 04:21:53 阅读：评论：0

一、springboot环境搭建

1、项目的数据库

/* navicat prem机动车c1科目一考试ium data transfer source rver         : windows source rver type    : mysql source rver version : 80022 source host           : localhost:3306 source schema         : ems target rver type    : mysql target rver version : 80022 file encoding         : 65001 date: 19/12/2021 16:27:43*/t names 好听的繁体字网名utf8mb4;t 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 t 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 t = utf8mb4 collate = utf8mb4_0900_ai_ci row_format = dynamic;-- ------------------------------ records of t_emp-- ----------------------------inrt into `t_emp` values (2, '杨福君', 9000, 19);inrt into `t_emp` values (6, '邓正武', 18000, 25);inrt into `t_emp` values (8, '王恒杰', 12000, 21);inrt into `t_emp` values (9, '张西', 8000, 20);t foreign_key_checks = 1;

2、项目所需依赖

<!--继承springboot的父项目 ,放在dependencies平级下-->  <parent>    <groupid>org.springframework.boot</groupid>    <artifactid>spring-boot-starter-parent</artifactid>    <version>2.2.5.relea</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>      <grou适心娱目pid>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文件

rver:  port: 8080  rvlet:    context-path: /emsspring:  datasource:    type: com.alibaba.druid.pool.druiddatasource  #数据源类型    driver-class-name: com.mysql.cj.jdbc.driver   #加载驱动    url: jdbc:mysql://localhost:3306/ems?ussl=fal&rvertimezone=utc    urname: root    password: rootmybatis:  mapper-locations: classpath:com/tjcu/mapper/*mapper.xml #指定mapper文件所在的位置,其中classpath必须和mapper-locations分开  type-alias-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 chart="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 (respon) {           console.log(respon.data);           vue.emps = respon.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 (respon) {                     //将查询的结果嫁给vue中的emp进行管理 根据双向绑定原理 emp数据变化 会影响页面 从而在表单中展示当前员工                     vue.emp=respon.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@responbodypublic class empcontroller {    @autowired    private emprvice emprvice;    @requestmapping("/emp/queryall")    public  list<emp> queryall(){        list<emp> emps = emprvice.showemp();        return emps;    }    /**     * 删除     * @param id     */    @requestmapping("/emp/delete")    public void delete(integer id){        emprvice.deletebyid(id);    }    @requestmapping("/emp/add")    public void add(@request中国工会法body emp emp){        if(emp.getid()!=0){            emprvice.updateemp(emp);        }el {            emp.tid(null);            emprvice.inrtemp(emp);        }    }    @requestmapping("/emp/queryone")    public emp query(integer id){        emp emp = emprvice.lectempbyid(id);        return emp;    }}

3、mapper文件

<mapper namespace="com.tjcu.dao.empdao">    <inrt id="inrtemp">        inrt into t_emp        values (#{id}, #{name}, #{salary}, #{age})    </inrt>    <lect id="showemp" resulttype="emp">        lect *        from t_emp    </lect>    <update id="updateemp">        update t_emp        <t>            <if test="name!=null">                name=#{name},            </if>            <if test="salary!=null">                salary=#{salary},            </if>            <if test="age!=null经典网名">                age=#{age}            </if>        </t>        where id=#{id}    </update>    <delete id="deletebyid">        delete from t_emp where id=#{id}    </delete>    <lect id="lectempbyid" resulttype="emp">        lect *        from t_emp where id=#{id}    </lect></mapper>