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 相关文章推荐
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
原生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多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php无序树实现方法
2015/07/28 PHP
php实现word转html的方法
2016/01/22 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
jquery中done和then的区别(详解)
2017/12/19 jQuery
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
Python性能优化技巧
2015/03/09 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
小学生感恩演讲稿
2014/04/25 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
教师远程研修感悟
2015/11/18 职场文书
Ruby处理CSV数据方法详解
2022/04/18 Ruby