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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
js严格模式总结(分享)
Aug 22 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
京东优选小程序的实现代码示例
Feb 25 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多个文件及图片上传实例详解
2014/11/10 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
javascript动画浅析
2012/08/30 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
vue.js的提示组件
2017/03/02 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
提升Python程序运行效率的6个方法
2015/03/31 Python
python实现井字棋游戏
2020/03/30 Python
pyenv命令管理多个Python版本
2017/03/26 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
缴纳养老保险的证明
2014/01/10 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
个人年底工作总结
2015/03/10 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript