Bagaimana untuk menyesuaikan antara muka jsp dalam vue

Vue ialah rangka kerja progresif untuk membina antara muka pengguna. Ia menggunakan corak seni bina MVVM (Model-View-ViewModel), yang boleh mengurus dan mengendalikan paparan dan lapisan data dengan mudah. Dalam Vue, kita boleh memanggil antara muka api belakang melalui permintaan ajxa untuk mendapatkan data, tetapi kadangkala kita perlu memanggil antara muka jsp untuk mendapatkan data Jadi bagaimanakah Vue melaraskan antara muka jsp?

1 Interaksi antara jsp dan vue

Untuk jsp dan vue berkomunikasi antara satu sama lain, kita perlu mentakrifkan antara muka di muka hadapan untuk menerima data yang dikembalikan oleh jsp. Vue memanggil jsp melalui antara muka, dan jsp mengembalikan data dan kemudian menghantar data kembali ke Vue melalui antara muka. Peranan utama jsp adalah sebagai lapisan tengah, bertanggungjawab untuk memanggil perkhidmatan back-end. Mari kita lihat langkah-langkah pelaksanaan khusus.

2. Langkah pelaksanaan khusus

1. Tentukan antara muka dalam komponen Vue untuk menerima data yang dikembalikan oleh jsp.

//定义接口
var obj = {
    call: function(data) {},
    callError: function(data) {},
    callbackName: ''
}

2. Gunakan respons json untuk mengembalikan data dalam jsp Apa yang perlu diperhatikan di sini ialah sebelum memulangkan data, anda perlu mendapatkan Nama panggilan balik yang ditakrifkan oleh Vue dan mengembalikannya sebagai. nama fungsi panggil balik, supaya Vue Data akan diterima dengan betul.

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    //获取前台传递的callback参数，该参数是前台定义的接口名
    String callback = request.getParameter("callback");
    String result = "{msg:\"调用jsp成功\"}";
    if(callback != null && !callback.equals("")){
        out.println(callback + "(\&#39;" + result + "\&#39;)");
    }else{
        out.println(result);
    }
    out.flush();
    out.close();
%>

3. Panggil antara muka jsp dalam komponen Vue

//调用jsp接口
var scriptEle = document.createElement('script');
scriptEle.src = 'http://localhost/app.jsp?callback=' + obj.callbackName + '&params=' + JSON.stringify(data);
document.head.appendChild(scriptEle);

4. Ringkasan

Di atas ialah antara muka untuk Vue untuk memanggil langkah pelaksanaan khusus jsp. Dengan mentakrifkan antara muka halaman hadapan untuk menerima data pemulangan jsp, dan kemudian memanggil antara muka jsp melalui permintaan ajax, interaksi data bahagian hadapan dan bahagian belakang direalisasikan. Untuk aplikasi web yang dibangunkan menggunakan Vue, anda boleh memilih secara fleksibel untuk memanggil antara muka yang berbeza untuk mendapatkan data mengikut keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan antara muka jsp dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!