springBoot前后端联调demo

最新推荐文章于 2024-05-21 19:27:08 发布

杨白告

最新推荐文章于 2024-05-21 19:27:08 发布

阅读量446

点赞数

本文链接：https://blog.csdn.net/weixin_48984179/article/details/122795201

版权

笔记同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

SpringBoot

6 篇文章 0 订阅

订阅专栏

1.后端

package com.yangho.controller;

import com.baomidou.mybatisplus.extension.api.R;
import com.yangho.Domain.Result;
import com.yangho.Domain.Role;
import com.yangho.service.RoleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.lang.reflect.Method;
import java.util.List;

/**
 * @ClassName RoleController
 * @Description
 * @Author Yanghao2
 * @Date 2022/2/1 15:45
 * @Version V1.0
 */
@RestController
/*@CrossOrigin  //全部域名放行*/

@RequestMapping("/roles"
)public class RoleController {

    @Autowired
    private RoleService roleService;

    @CrossOrigin  //指定方法放行
    @GetMapping
    public Result findAll() {

        return new Result(true,roleService.findAll());
    }

    @PostMapping
    public Result insert(@RequestBody(required = false) Role role) {

        return new Result(roleService.insert(role));
    }

    @PutMapping
    public Result update(@RequestBody Role role) {
        return new Result(roleService.updateByEntry(role));
    }
}

2.前端


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpringBoot前后端联调测试</title>

</head>
<body>
<script src="../static/js/Axios.js"></script>
<script src="../static/js/Vue.js"></script>
<div id="app">
    <input type="submit" v-on:click = "getAll" value="查询全部" >
    {{ message }}
    <table border="1" cellspacing="0" align="center">
        <thead align="center" >
        <td>序号</td>
        <td>姓名</td>
        <td>简介</td>
        </thead>
        <tr v-for = "(item,index) in roleArr" align="center">
            <td>{{ item.id }}</td>
            <td>{{item.roleName}}</td>
            <td>{{item.roleDesc}}</td>
        </tr>
    </table>
</div>

<script>

    var app = new Vue({
        el:'#app',
        data:{
            message:"你好！111",
            roleArr :[]
        },
        methods: {
            getAll:function () {
                alert("!!!")
                that = this
                axios.get("http://localhost:8080/roles").then((Result) =>{
                    console.log(Result)
                    var i = -1
                    for (var role of Result.data.data) {
                        i++
                        console.log(role)
                        /*this.roleArr.push[i]({id,roleName,roleDesc})
                        this.roleArr.id = role.id
                        this.roleArr.roleName = role.roleName
                        this.roleArr.roleDesc = role.roleDesc*/
                        this.roleArr.push(role)

                        }



                    console.log(this.roleArr)
                }),function (err) {
                    console.log(err)
                }
            }
        }
    })

</script>
</body>
</html>

杨白告

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springBoot前后端联调demo

1.后端package com.yangho.controller;import com.baomidou.mybatisplus.extension.api.R;import com.yangho.Domain.Result;import com.yangho.Domain.Role;import com.yangho.service.RoleService;import org.springframework.beans.factory.annotation.Autowired;i.
复制链接

扫一扫