使用vue中的axios请求后台（springboot工程)

1.项目结构

2.pom

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.wo</groupId>
    <artifactId>vue_first</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

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

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

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

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
    <dependency>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
       <optional>true</optional>
    </dependency>
    </dependencies>

</project>

3.application.yml

server:
  port: 8080
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/qf?useUnicode=true&characterEncoding=utf8&useSSL=false
  jpa:
    database: MYSQL
    generate-ddl: true
    show-sql: true

4.controller

@RestController
public class StudentController {
    @Autowired
    StudentService studentService;

    @RequestMapping("/findAll")
    public List<TbStudent> findAll(){
        return studentService.findAll();
    }

    @RequestMapping("/saveAndUpdate")
    public String saveAndUpdate(@RequestBody TbStudent tbStudent){
        try {
            studentService.saveAndUpdateStudent(tbStudent);
        }catch (Exception ex){
            return "fail";
        }
        return "success";
    }

    @RequestMapping("/findById")
    public TbStudent findById(@RequestBody Map map){
        String id = (String) map.get("id");
        return studentService.findById(Integer.valueOf(id));
    }

    @RequestMapping("/del")
    public void del(@RequestBody Map map){
        Integer id = (Integer) map.get("id");
        studentService.deleteById(Integer.valueOf(id));
    }

}

5.dao

public interface StudentRespository extends JpaRepository<TbStudent,Integer> {
}

6.pojo

@Data
@Entity
@Table(name = "Tb_sys_student")
public class TbStudent {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id ;

    private String name;

    private Integer age;

    private Integer sex;

    private String address;

}

7.service

public interface StudentService {

    List<TbStudent> findAll();

    TbStudent findById(Integer id);

    void saveAndUpdateStudent(TbStudent tbStudent);

    void deleteById(Integer integer);
}

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    StudentRespository studentRespository;

    @Override
    public List<TbStudent> findAll() {
        return studentRespository.findAll();
    }

    @Override
    public TbStudent findById(Integer id) {
        return studentRespository.findById(id).get();
    }

    @Override
    public void saveAndUpdateStudent(TbStudent tbStudent) {
        studentRespository.saveAndFlush(tbStudent);
    }

    @Override
    public void deleteById(Integer integer) {
        studentRespository.deleteById(integer);
    }
}

8.启动类

@SpringBootApplication
public class VueApplication {
    public static void main(String[] args) {
        SpringApplication.run(VueApplication.class);
    }
}

9.页面

9.1 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vuejs/vuejs-2.5.16.js"></script>
<script src="vuejs/axios-0.18.0.js"></script>
<body>
<div id="myVue">
<input type="button" @click="insert()" value="增加">
<table border="1">
    <tr>
        <th>序号</th>
        <th>学生姓名</th>
        <th>学生年龄</th>
        <th>学生性别</th>
        <th>学生住址</th>
        <th>操作</th>
    </tr>
    <tr v-for="(student,index) in studentList">
        <td>{{index+1}}</td>
        <td>{{student.name}}</td>
        <td>{{student.age}}</td>
        <td>{{student.sex==0?'女':'男'}}</td>
        <td>{{student.address}}</td>
        <td>
            <input type="button" @click="update(student.id)" value="修改">
            <input type="button" @click="del(student.id)" value="删除">
        </td>
    </tr>
</table>
</div>
<script>
    new Vue({
        el:'#myVue',
        data:{
            studentList:[]
        },
        methods:{
            insert:function () {
                window.location.href="insert.html";
            },
            update:function (id) {
                //请求后端
                window.location.href="update.html";
                window.localStorage.setItem("id",id);
            },
            del:function (id) {
                var _this=this;
                axios.post("/del",{"id":id}).then(function (res) {
                    if(res.status==200){
                        _this.findAll();
                    }
                })
            },
            findAll:function () {
                //去后台取数据
                var _this=this;
                axios.get("findAll").then(function (res) {
                    console.log(res.data)
                    _this.studentList=res.data
                }).catch(function (error) {
                    alert(error);
                })
            }
        },
        mounted(){
            this.findAll();
        }
    })
</script>

</body>
</html>

9.2 insert.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vuejs/vuejs-2.5.16.js"></script>
<script src="vuejs/axios-0.18.0.js"></script>
<body>


<div id="myVue">
    <form >
        姓名： <input v-model="student.name" name="username">
        年龄： <input v-model="student.age"  name="age">
        性别： <input v-model="student.sex"  name="age">
        地址： <input v-model="student.address"  name="age">
        <input v-on:click="sub()" type="button" value="提交">
    </form>
</div>

<script>
    new Vue({
        el:'#myVue',
        data:{
            student:{}
        },
        methods:{
            sub:function () {
                //请求后端去进行增加即可
                axios.post("/saveAndUpdate",this.student).then(function (res) {
                    if (res.data=="success"){
                        window.location.href="index.html"
                    }else{
                        alert("增加失败！！！");
                    }
                })
            }
        }
    })
</script>
</body>
</html>

9.3 update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vuejs/vuejs-2.5.16.js"></script>
<script src="vuejs/axios-0.18.0.js"></script>
<body>
<div id="myVue">
    <form >
        <input v-model="student.id" type="hidden" name="username">
        姓名： <input v-model="student.name" name="username">
        年龄： <input v-model="student.age"  name="age">
        性别： <input v-model="student.sex"  name="age">
        地址： <input v-model="student.address"  name="age">
        <input v-on:click="sub()" type="button" value="提交">
    </form>
</div>
<script>
    new Vue({
        el:'#myVue',
        data:{
            student:{}
        },
        methods:{
            sub:function(){
                //请求后端去进行修改即可
                axios.post("/saveAndUpdate",this.student).then(function(res){
                    if (res.status==200){
                        window.location.href="index.html";
                    }
                })
            }
        },
        mounted(){

            var id = window.localStorage.getItem("id");
            //携带id请求后端获取数据展示在页面上
            var _this = this;
            axios.post("/findById",{"id":id}).then(function(res){
                _this.student=  res.data;
            })

        }
    })
</script>
</body>
</html>