Axios와 SpringBoot 프런트엔드는 데이터 상호작용을 위해 백엔드 인터페이스를 어떻게 호출합니까?-java지도 시간-php.cn

Axios와 SpringBoot 프런트엔드는 데이터 상호작용을 위해 백엔드 인터페이스를 어떻게 호출합니까?

WBOY

풀어 주다： 2023-05-13 10:34:13

앞으로

2229명이 탐색했습니다.

1. 소개

전체 시스템을 위해서는 프런트엔드와 백엔드 상호 작용이 필수적입니다. 이 프로세스는 다음 단계로 나눌 수 있습니다.

프런트 엔드가 백엔드에 요청을 시작합니다. -엔드 인터페이스는 프런트엔드 매개변수를 수신하고, 레이어별로 메소드 호출을 시작합니다. 백엔드는 데이터를 처리하고 프런트엔드 요청이 성공한 후 최종 데이터를 프런트엔드 인터페이스로 반환합니다. 인터페이스

2. 프로젝트 구조

프런트엔드 기술 : axios

백엔드 기술 : SpringBoot(상관없지만, 컨트롤 레이어에 대한 액세스 경로가 있어야 합니다. -요청 주소에 해당하는 호출 메소드를 사용할 수 있습니다.)

Axios와 SpringBoot 프런트엔드는 데이터 상호작용을 위해 백엔드 인터페이스를 어떻게 호출합니까?

위는 일반적인 파일 구조라고 생각합니다. 모두의 백엔드 데이터 처리는 문제 없습니다. :

컨트롤 레이어는 프런트 엔드 요청을 수신하고 해당 비즈니스 레이어 인터페이스 메서드를 호출합니다.
비즈니스 레이어 구현 클래스는 비즈니스 레이어 인터페이스를 구현합니다.
데이터 레이어는 메서드 내에서 호출됩니다. 비즈니스 계층 구현 클래스 인터페이스
데이터 계층 구현 파일(mapper.xml)은 데이터 계층 인터페이스
를 구현하고 처리 결과는 계층별로 반환됩니다

3. 코드 작성

우리는 프론트엔드 인터페이스 + 제어 레이어 소개

1단계: 관련 파일 소개

Axios와 SpringBoot 프런트엔드는 데이터 상호작용을 위해 백엔드 인터페이스를 어떻게 호출합니까?

여기 있는 axios는 요청을 시작하는 데 필요한 파일입니다. 기사 끝에서.

프런트엔드 코드는 다음과 같습니다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试</title>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/axios.min.js"></script>
</head>
<body>
<span id="text">我是前端默认值</span>
<script>
    window.onload =function() {  //一加载界面就调用
        $.ajax({url:"testTest?num=1",success:function(result){
                document.getElementById("text").innerHTML=result;
            }});
    };
</script>
</body>
</html>

로그인 후 복사

백엔드 제어 계층 코드는 다음과 같습니다.

    @RequestMapping("/testTest")  //控制层
    @ResponseBody
    public int testTest(int num) {
        if(num==1) return 1;
        if(num==2) return 2;
        return 0;
    }

로그인 후 복사

분명히 프론트엔드가 데이터를 전달할 수 있는 경우를 살펴보신 후 이해하셔야 합니다. 계좌 번호, 비밀번호 등과 같은 요청을 보냅니다. 백엔드가 이를 수신한 후 처리한 다음 처리 결과를 프런트엔드에 반환합니다.

프런트엔드가 이를 수신한 후 렌더링하거나 프롬프트를 제공할 수 있습니다. 작전이 성공했다는 것.

효과:

Axios와 SpringBoot 프런트엔드는 데이터 상호작용을 위해 백엔드 인터페이스를 어떻게 호출합니까?

4.

1, 문자열, 쉐이핑 등 사용(새로운 기능)

프런트 엔드 코드:

 <el-dialog title="创建车辆装备" :visible.sync="insertVisible" width="30%">
        <el-form :model="equipment" ref="equipment" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="name">
                <el-input v-model="equipment.name"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-input v-model="equipment.type"></el-input>
            </el-form-item>
            <el-form-item label="库存数量" prop="inventory">
                <el-input type="number" v-model="equipment.inventory"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="insertVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertEquipment" data-toggle="modal" data-target="#myModal">确 定</el-button>
              </span>
    </el-dialog>

로그인 후 복사

<script type="text/javascript">
    new Vue({
        el:"#box",
        data:{
            id:"",			//装备主键
            equipment:{},				//一条equipment数据
            insertVisible:false //新增提示框控制器:true显示/false隐藏
        },
        methods:{
            //打开新增提示框
            openInsertPanel:function(){
                this.insertVisible = true;
                this.equipment = {};
            },
            //创建equipment
            insertEquipment:function(){
                var name = this.equipment.name;
                var type = this.equipment.type;
                var inventory = this.equipment.inventory;
                var that = this;
                axios.put("insertEquipment?name="+name+"&type="+type+"&inventory="+inventory).then(function(result){
                    if(result.data.status){
                        that.selectAllEquipment();
                        that.insertVisible = false;
                    }else{
                        that.$message.error(result.data.message);
                        that.insertVisible = false;
                    }

                });
            },
        }
    });
</script>

로그인 후 복사

백엔드 코드

    @RequestMapping("/insertEquipment")  //增加装备
    @ResponseBody
    public ResultMap insertEquipment(String name, String type,String inventory) {
        try {
            int realInventory=Integer.valueOf(inventory);
            Equipment equipment=new Equipment(name,type,realInventory);
            equipmentService.insertEquipment(equipment);
            resultMap.setStatus(true);
        } catch (Exception e) {
            resultMap.setStatus(false);
            resultMap.setMessage(e.getMessage());
        }
        return resultMap;
    }

로그인 후 복사

위 내용은 Axios와 SpringBoot 프런트엔드는 데이터 상호작용을 위해 백엔드 인터페이스를 어떻게 호출합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!