Bagaimanakah axios dan bahagian hadapan SpringBoot memanggil antara muka bahagian belakang untuk interaksi data?-javaTutorial-php.cn

Bagaimanakah axios dan bahagian hadapan SpringBoot memanggil antara muka bahagian belakang untuk interaksi data?

WBOY

Lepaskan： 2023-05-13 10:34:13

ke hadapan

2214 orang telah melayarinya

1. Pengenalan

Untuk sistem yang lengkap, interaksi bahagian hadapan dan bahagian belakang adalah penting. Proses ini boleh dibahagikan kepada langkah berikut:

Bahagian hadapan memulakan a permintaan kepada bahagian belakang dan antara muka bahagian belakang menerimanya Selepas melepasi parameter bahagian hadapan, ia mula memanggil kaedah lapisan demi lapisan untuk memproses data Bahagian belakang mengembalikan data akhir kepada antara muka bahagian hadapan. Selepas permintaan bahagian hadapan berjaya, data diberikan kepada antara muka

2. Struktur projek

Teknologi bahagian hadapan : axios

Teknologi back-end : SpringBoot (ini tidak penting, tetapi anda mesti mempunyai laluan akses ke lapisan kawalan, yang merupakan kaedah yang dipanggil sepadan dengan alamat permintaan. Anda boleh menggunakan rangka kerja SSM, Rangka kerja SSH, dsb.)

Bagaimanakah axios dan bahagian hadapan SpringBoot memanggil antara muka bahagian belakang untuk interaksi data?

Di atas ialah struktur fail umum, saya percaya pemprosesan data bahagian belakang semua orang tidak lebih daripada:

Lapisan kawalan menerima permintaan bahagian hadapan dan memanggil kaedah antara muka lapisan perniagaan yang sepadan
Kelas pelaksanaan lapisan perniagaan melaksanakan antara muka lapisan perniagaan
Kaedah kelas pelaksanaan lapisan perniagaan memanggil antara muka lapisan data
Fail pelaksanaan lapisan data (mapper.xml) melaksanakan antara muka lapisan data
Kemudian hasil pemprosesan dikembalikan lapisan demi lapisan

3 Penulisan kod

Kami hanya memperkenalkan antara muka bahagian hadapan + lapisan kawalan. Yang pertama ialah antara muka bahagian hadapan

Langkah pertama: Perkenalkan fail yang berkaitan

Bagaimanakah axios dan bahagian hadapan SpringBoot memanggil antara muka bahagian belakang untuk interaksi data?

Axios di sini ialah fail yang diperlukan untuk kami memulakan permintaan Fail ini akan diberikan pada akhir artikel.

Kod bahagian hadapan adalah seperti berikut:

<%@ 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>

Salin selepas log masuk

Kod lapisan kawalan bahagian belakang adalah seperti berikut:

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

Salin selepas log masuk

Jelas sekali, semua orang harus melihat Anda faham, bahagian hadapan boleh membawa data semasa menghantar permintaan, seperti nombor akaun, kata laluan, dll. Selepas bahagian belakang menerimanya, ia boleh memprosesnya, dan kemudian mengembalikannya memproses hasil ke bahagian hadapan.

Selepas bahagian hadapan menerimanya, ia boleh Diberikan, atau memberikan gesaan bahawa operasi itu berjaya.

Kesan:

Bagaimanakah axios dan bahagian hadapan SpringBoot memanggil antara muka bahagian belakang untuk interaksi data?

4. Gunakan

1. fungsi Ditambah baharu)

Kod bahagian hadapan:

 <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>

Salin selepas log masuk

rrree

Kod bahagian belakang

<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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah axios dan bahagian hadapan SpringBoot memanggil antara muka bahagian belakang untuk interaksi data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!