How to implement the front and back end separation project with SpringBoot+mybatis+Vue

This article mainly shows you "SpringBoot+mybatis+Vue how to achieve front-end separation project", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "SpringBoot+mybatis+Vue how to achieve front-end separation project" this article.

1. Setting up the SpringBoot environment 1. Database of the project

/ * 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 16:27:43*/SET NAMES utf8mb4;SET FOREIGN_KEY_CHECKS 12 16:27:43*/SET NAMES utf8mb4;SET FOREIGN_KEY_CHECKS = 0 -Table structure for tantalismempmuri-DROP TABLE IF EXISTS `temp` CREATE TABLE `temp` (`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 tactile empWhile-INSERT INTO `temp`VALUES (2, 'Yang Fujun', 9000, 19); INSERT INTO `temp`VALUES (6, 'Deng Zhengwu', 18000, 25); INSERT INTO `temp`VALUES (8, 'Wang Hengjie', 12000, 21) INSERT INTO `temp` VALUES (9, 'Zhangxi', 8000, 20); SET FOREIGN_KEY_CHECKS = 1 2 、 Project needs depend on org.springframework.boot spring-boot-starter-parent 2.2.5.RELEASE org.springframework.boot spring-boot-starter org.mybatis.spring.boot mybatis-spring-boot-starter 2.1.2 org.springframework.boot spring-boot-starter-web mysql mysql-connector-java 8 . 0.16 com.alibaba druid 1.1.12 org.springframework.boot spring-boot-starter-test 3 、 Application.yml file server: port: 8080 servlet: context-path: / emsspring: datasource: type: com.alibaba.druid.pool.DruidDataSource # data source type driver-class-name: com.mysql.cj.jdbc.Driver # load driver url: jdbc:mysql://localhost:3306/ems?useSSL=false&serverTimezone=UTC username: root password: rootmybatis: mapper-locations: classpath:com/tjcu/mapper/*Mapper.xml # specifies the location of the mapper file Classpath must be separated from mapper-locations type-aliases-package: com.tjcu.entity4, entry class

@ SpringBootApplication@MapperScan ("com.tjcu.dao") public class EmpApplication {public static void main (String [] args) {SpringApplication.run (EmpApplication.class,args);}} II. Vue to achieve front-end separation 1, front-end page

Emp manager {{msg}} No.: name: salary: age: number name Age salary Operation {{index+1} {{emp.name}} {{emp.salary}} {{emp.age} } new Vue ({el: "# app" / / specify the scope of vue instance data: {/ / define data msg: "ems employee Management system", emps: [], emp: {}}, methods: {/ / define function 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 (" add successfully "); vue.emp= {} ) .catch (function () {console.log ("add failed")})}, queryOne (id) {if (window.confirm ("are you sure you want to modify it?")) {var vue=this Axios.get ("http://localhost:8080/ems/emp/queryOne?id="+id). Then (function (response) {/ / marries the results of the query to the emp in vue for management according to the principle of two-way binding emp data changes affect the page to show the current employee vue.emp=response.data in the form. Console.log (query success);}) .catch (function () {console.log (query failure)})}}, del (id) {if (window.confirm ("are you sure you want to delete?")) {var vue=this; axios.get ("http://localhost:8080/ems/emp/delete?id="+id). Then (function () {vue.queryAll ()) Console.log ("deletion succeeded")}) .catch (function () {console.log ("deletion failed")}, created () {this.queryAll () 2. SpringBoot control layer / * * @ author Wang Hengjie * @ date 15:52 * @ Description: * / @ Controller@CrossOrigin@ResponseBodypublic class EmpController {@ Autowired private EmpService empService; @ RequestMapping ("/ emp/queryall") public List queryall () {List emps = empService.showEmp (); return emps Delete * @ 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 file insert into t_emp values (# {id}, # {name}, # {salary}, # {age}) select * from t_emp update t_emp name=# {name}, salary=# {salary} Age=# {age} where id=# {id} delete from t_emp where id=# {id} select * from t_emp where id=# {id} 4, project complete source code

Gitee open source: https://gitee.com/wanghengjie563135/springboot_mybatis_vue.git

These are all the contents of the article "how to implement the front-end separation project in SpringBoot+mybatis+Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!