SoFunction
Updated on 2025-03-08

Vue calls backend java interface instance code

Some time ago, I did a school’s spring cute project, which used vue to connect to the backend Java interface.

First, the backend interface code:

package controller;

import ;
import ;

import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;

@WebServlet(name = "login",urlPatterns = "/login")
public class login extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    HttpSession session = (true);
    String username = ("username");
    String password = ("password");
    DBUtil dbUtil = new DBUtil();
    Connection connection = ();
    PreparedStatement preparedStatement;
    ResultSet rs;
    String psw="";
    String sql = "select password from `user` where username=?";
    try {
      preparedStatement = (sql);
      (1,(username));
      rs = ();
      while (()){
        psw = ("password");
      }
    }
    catch (Exception e){
      ();
    }
    if ((psw)){
      ("username",username);
      ().print("true");
    }
    else
    ().print("false");
  }

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

  }
}

Front-end call:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <script src="node_modules/vue/dist/"></script>
  <!--axiosbased onpromise-->
  <script src="node_modules/axios/dist/"></script>
  <script src=""></script>
  <script src="/vue-resource/1.5.1/"></script>
  <link rel="stylesheet" href="" rel="external nofollow" >
</head>
<body>
<div class="login_interface" >
  <img src="ic_login_logo.png" alt="" class="login_logo">
  <span >Smart library management platform</span>
  <div class="login_input">
    <img src="ic_login_number.png" alt="" class="login_number">
    <input type="text" value="Please enter your account"  v-model="username">
  </div>
  <div class="login_input" >
    <img src="ic_login_password.png" alt="" class="login_number">
    <input type="text" value="Please enter your password"  v-model="password">
  </div>
  <button class="login_unselected" ></button>
  <span >Remember the password</span>
  <button ><a href=""><span style=" rel="external nofollow" color: grey">Register now</span></a></button>
  <button  @click="login()">Log in</button>
</div>
<script>
  new Vue({
    el:'#interface_height',
    data:{
      username:'',
      password:''
    },
    methods:{
      login:function () {
        this.$('login',{username:,password:},{emulateJSON:true}).then(function(res){
          ();
           = '';
        },function(res){
          ();
        });
      }
    },
    created:function(){
    }
  })
</script>
</body>
</html>

The above example code for Vue calling back-end java interface is all the content I share with you. I hope you can give you a reference and I hope you can support me more.