前段时间 做了个学校的春萌项目，其中用到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 {
}
}
前端调用：
<!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\">智慧图书管理平台</span>
<div class=\"login_input\">
<img src=\"ic_login_number.png\" alt=\"\" class=\"login_number\">
<input type=\"text\" value=\"请输入账号\" 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=\"请输入密码\" 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\">立即注册</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调用后端java接口的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容