Vue調(diào)用后端java接口的實(shí)例代碼
更新時(shí)間:2019年10月28日 17:18:56 作者:2heal
今天小編就為大家分享一篇Vue調(diào)用后端java接口的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
前段時(shí)間 做了個(gè)學(xué)校的春萌項(xiàng)目,其中用到vue連接后端java接口。
先上后端接口代碼:
package controller; import net.sf.json.JSONObject; import util.DBUtil; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; import java.sql.Connection; import java.sql.Date; import java.sql.PreparedStatement; import java.sql.ResultSet; @WebServlet(name = "login",urlPatterns = "/login") public class login extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { HttpSession session = request.getSession(true); String username = request.getParameter("username"); String password = request.getParameter("password"); DBUtil dbUtil = new DBUtil(); Connection connection = dbUtil.getConnection(); PreparedStatement preparedStatement; ResultSet rs; String psw=""; String sql = "select password from `user` where username=?"; try { preparedStatement = connection.prepareStatement(sql); preparedStatement.setInt(1,Integer.parseInt(username)); rs = preparedStatement.executeQuery(); while (rs.next()){ psw = rs.getString("password"); } } catch (Exception e){ e.printStackTrace(); } if (password.equals(psw)){ session.setAttribute("username",username); response.getWriter().print("true"); } else response.getWriter().print("false"); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
前端調(diào)用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <script src="node_modules/vue/dist/vue.js"></script> <!--axios基于promise--> <script src="node_modules/axios/dist/axios.js"></script> <script src="login.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> <link rel="stylesheet" href="login.css" rel="external nofollow" > </head> <body> <div class="login_interface" id="interface_height"> <img src="ic_login_logo.png" alt="" class="login_logo"> <span id="login_head">智慧圖書管理平臺(tái)</span> <div class="login_input"> <img src="ic_login_number.png" alt="" class="login_number"> <input type="text" value="請(qǐng)輸入賬號(hào)" id="input_number" v-model="username"> </div> <div class="login_input" id="add_top"> <img src="ic_login_password.png" alt="" class="login_number"> <input type="text" value="請(qǐng)輸入密碼" id="input_password" v-model="password"> </div> <button class="login_unselected" id="tick"></button> <span id="remember_password">記住密碼</span> <button id="registered_now"><a href=""><span style=" rel="external nofollow" color: grey">立即注冊(cè)</span></a></button> <button id="login" @click="login()">登錄</button> </div> <script> new Vue({ el:'#interface_height', data:{ username:'', password:'' }, methods:{ login:function () { this.$http.post('login',{username:this.username,password:this.password},{emulateJSON:true}).then(function(res){ console.log(res.data); window.location.href = 'index.html'; },function(res){ console.log(res.status); }); } }, created:function(){ } }) </script> </body> </html>
以上這篇Vue調(diào)用后端java接口的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- java ZXing生成二維碼及條碼實(shí)例分享
- JAVA解析XML字符串簡(jiǎn)單方法代碼案例
- Java簡(jiǎn)易登錄注冊(cè)功能實(shí)現(xiàn)代碼解析
- Vue+Java 通過websocket實(shí)現(xiàn)服務(wù)器與客戶端雙向通信操作
- Vue.Js及Java實(shí)現(xiàn)文件分片上傳代碼實(shí)例
- Java基于jeeplus vue實(shí)現(xiàn)簡(jiǎn)單工作流過程圖解
- vue+ java 實(shí)現(xiàn)多級(jí)菜單遞歸效果
- Vue請(qǐng)求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例
- 一個(gè)Java程序猿眼中的前后端分離以及Vue.js入門(推薦)
- vue+element+Java實(shí)現(xiàn)批量刪除功能
- java+vue實(shí)現(xiàn)添加單選題、多選題到題庫(kù)功能
- vue+Java后端進(jìn)行調(diào)試時(shí)解決跨域問題的方式
- Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例
相關(guān)文章
vue項(xiàng)目index.html中使用環(huán)境變量的代碼示例
在Vue3中使用環(huán)境變量的方式與Vue2基本相同,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目index.html中使用環(huán)境變量的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法
這篇文章主要介紹了說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01使用 Vue cli 3.0 構(gòu)建自定義組件庫(kù)的方法
本文旨在給大家提供一種構(gòu)建一個(gè)完整 UI 庫(kù)腳手架的思路。通過實(shí)例代碼給大家講解了使用 Vue cli 3.0 構(gòu)建自定義組件庫(kù)的方法,感興趣的朋友跟隨小編一起看看吧2019-04-04