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 相关文章推荐
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
python3.7 的新特性详解
2019/07/25 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
合作意向书模板
2014/03/31 职场文书
体育专业自荐书
2014/05/29 职场文书
创建文明城市标语
2014/06/16 职场文书
社区创先争优承诺书
2014/08/30 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang