Vue+SpringBoot+跨域实现对数据库的增删改查

搭建项目

pom.xml依赖

<dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--整合mybatis所需要的依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <!--     分页插件   -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>

        <!--数据库驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <!--阿里巴巴-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.22</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <!--模板-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
            <version>1.9.22</version>
        </dependency>

        <!--Lombok插件-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

    </dependencies>

application.yml

#修改端口号
server:
  port: 8080


  servlet:
    encoding:
      charset: UTF-8
      force: true
      enabled: true
  tomcat:
    uri-encoding: UTF-8     # tomcat的URI编码


#数据库
spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/user?useUnicode=true&characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver

#配置静态资源
  web:
   resources:
    static-locations: classpath:/static/,classpath:/templates/


mybatis:
  #别名
  type-aliases-package: com.yzx.boot.entity

  #xml配置
  mapper-locations: classpath:mybatis/*.xml

#控制台输出SQL语句,log4j
logging:
  level:
    com.yzx.boot.mapper: debug


#thymeleaf模板
thymeleaf:
  cache: false
  check-template-location: true
  enabled: true
  mode: LEGACYHTML5
  prefix: classpath:/templates/
  servlet:
    content-type: text/html
  suffix: .html

后台代码:

控制层:controller

package com.yzx.boot.controller;

import com.github.pagehelper.PageInfo;
import com.yzx.boot.entity.Emp;
import com.yzx.boot.service.user.EmpService;
import com.yzx.boot.util.JsonData;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@Controller
@RestController
@CrossOrigin
@RequestMapping(value = "/emp")
public class EmpController {

    @Resource
    private EmpService empService;


    //查询全部
    @RequestMapping("/list")
    public Object list(Emp obj) {
        List<Emp> list = empService.find(obj);
        System.out.println(list);
        return JsonData.buildSuccess(new PageInfo<>(list));
    }

    //删除
    @RequestMapping("/del")
    public  Object  del(Integer id){
        int i=empService.del(id);
        return  JsonData.buildSuccess(i>0?"删除成功！":"删除失败！");
    }

    //查询单个
    @RequestMapping("/findByID")
    public  Object  findByID(Integer id){
        Emp emp=empService.findByID(id);

        System.out.println(emp);
        if(emp!=null){
            return  JsonData.buildSuccess(emp);
        }
        return null;
    }

    //修改
    @RequestMapping("/upd")
    public  Object  upd(Emp  obj){
        int i=empService.upd(obj);
        return  JsonData.buildSuccess(i>0?"修改成功！":"修改失败！");
    }


    //添加
    @RequestMapping("/add")
    public  Object  add(@RequestBody Emp  obj){
        int i=empService.add(obj);

        return  JsonData.buildSuccess(i>0?"添加成功！":"添加失败！");
    }
}

实体类entity:

package com.yzx.boot.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Emp {
        /**
    *员工ID
    **/
    private  Integer id;
    /**
    *员工姓名
    **/
    private  String name;
    /**
    *员工年龄
    **/
    private  Integer age;
    /**
    *员工工资
    **/
    private  Double salary;

}

mapper层：

package com.yzx.boot.mapper;


import com.yzx.boot.entity.Emp;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface EmpMapper {
//    List<Emp> login(Emp emp);

    List<Emp> find(Emp   emp);
    int  del(Integer  id);
    Emp findByID(Integer  id);
    int upd(Emp emp);
    int add(Emp emp);
}

service层:

package com.yzx.boot.service.user;

import com.yzx.boot.entity.Emp;
import com.yzx.boot.entity.Userinfo;

import java.util.List;


public interface EmpService {

  //  Emp login(Emp emp);

    List<Emp> find(Emp   emp);
    int  del(Integer  id);
    Emp findByID(Integer  id);
    int upd(Emp emp);
    int add(Emp emp);
}

serviceimpl：

package com.yzx.boot.service.user;


import com.yzx.boot.entity.Emp;
import com.yzx.boot.mapper.EmpMapper;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;


@Service
public class EmpServiceimpl implements EmpService {
    @Resource
    private EmpMapper empmapper;
//    @Override
//    public Emp login(Emp emp) {
//        List<Emp> list = empmapper.login(emp);
//        if (list != null && list.size() > 0) {
//            return list.get(0);
//        }
//        return null;
//    }



    @Override
    public List<Emp> find(Emp emp) {

        return empmapper.find(emp);
    }

    @Override
    public int del(Integer id) {
        return empmapper.del(id);
    }

    @Override
    public Emp findByID(Integer id) {
        return empmapper.findByID(id);
    }

    @Override
    public int upd(Emp emp) {
        return empmapper.upd(emp);
    }

    @Override
    public int add(Emp emp) {
        System.out.println(emp);
        return empmapper.add(emp);

    }
}

前台代码:html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		
		
		</style>
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<div> <button @click="add()"> 添加 </button> </div>
			<hr />
			<table border="1">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>工资</th>
					<th>操作</th>
				</tr>
				<tr v-for="it,i in items" :key="i">
					<td>{{it.id}}</td>
					<td>{{it.name}}</td>
					<td>{{it.age}}</td>
					<td>{{it.salary}}</td>
					<td>
						<button @click="del(i)"> 删除 </button>
						<button @click="upp(i)"> 修改 </button>
					</td>
				</tr>
			</table>
			<hr />
			<div v-if="isShow">
				<input type="hidden" v-model="item.id" />
				姓名:<input type="text" v-model="item.name" /><br />
				年龄:<input type="text" v-model="item.age" /><br />
				工资:<input type="text" v-model="item.salary" /><br />
				<input type="button" value="保存" @click="save()" /><br />
			</div>

		</div>
	</body>
	<script src="js/axios.min.js"></script>
	<script src="js/vue.js"></script>
	<script>
		var instance = axios.create({
			timeout: 5000, //修改请求超时时间
			baseURL: "http://localhost:8080"
		});
		
		var app = new Vue({
			el: "#app",
			data: {
				msg: "es6语法+vue实现增删改查",
				items: [],
				item: {},
				isShow: false
			},
			methods: {
				add() {
					this.isShow = !this.isShow;
				},
				save() {
					let url = this.item.id?"/emp/upd":"/emp/add";
					
					
					alert(url);
					instance.post(url, this.item).then(da => {
						console.log("箭头函数", this);
						this.items = da.data;
						this.find();
						this.isShow = !this.isShow;
						location.reload();
					}).catch(function(err) {
						console.log(err);
					});
				},
				find() {
					instance.get("/emp/list").then(da => {
						console.log("箭头函数", this);
						this.items = da.data.data.list;
					}).catch(function(err) {
						console.log(err);
					});
				},
				del(i) {
					instance.get("/emp/del?id=" + this.items[i].id).then(da => {

						this.items.splice(i, 1);
					}).catch(function(err) {
						console.log(err);
					});
				},
				upp(i) {
					
					this.item = this.items[i];
					this.isShow = true;
					
				}

			},
			created() {
				this.find();
			}
		});
	</script>
</html>