Vue调用后端java接口的实例代码


Posted in Javascript onOctober 28, 2019

前段时间 做了个学校的春萌项目,其中用到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接口的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
原生js实现商品筛选功能
Oct 28 #Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 #Javascript
JavaScript制作3D旋转相册
Aug 02 #Javascript
微信小程序工具函数封装
Oct 28 #Javascript
js实现3D照片墙效果
Oct 28 #Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 #Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 #Javascript
You might like
php 错误处理经验分享
2011/10/11 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
js操作二级联动实现代码
2010/07/27 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
小程序api实现promise封装过程解析
2019/11/21 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
党员自我批评与反省材料
2014/02/10 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
教师个人师德总结
2015/02/06 职场文书
雨花台导游词
2015/02/06 职场文书