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

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

(0)

相关推荐

  • 详解vue配置后台接口方式

    在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export

  • vuejs前后端数据交互之从后端请求数据的实例

    本文将向大家介绍一种用vue-resource从后端请求数据的方法. 比如说从后端请求一张表过来, (1)首先,在data中return一个msg:[]数组来接收表的数据: (2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails: methods:{ showDetails:function(){ this.$http.get(baseURL+"api/条件").then(function(res){ this.msg = res.body; }); } } 这

  • vue webpack开发访问后台接口全局配置的方法

    在实际开发中,使用vue 后就是前后端分离开发了,这时候我们就需要访问后台的接口来拿到数据,需要URL,name,password来获取到token才能正常使用接口,下面就来配置. 1.找到config文件夹,在prod.env.js中添加一下代码(若没有此JS,自己创建一个就可以了) 'use strict' module.exports = { NODE_ENV: '"production"', API_ROOT: '"//123.116.245.150:18081/ap

  • vue最简单的前后端交互示例详解

    一.学习 vue 面临的问题 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳

  • vue+Java后端进行调试时解决跨域问题的方式

    今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的问题,这时可以怎么做呢? 首先,要了解什么叫跨域访问? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,举个例子: http://www.123.com/index.html 调用 http

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

    前段时间 做了个学校的春萌项目,其中用到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

  • vue+mockjs模拟数据实现前后端分离开发的实例代码

    本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记. 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回

  • vue输入节流,避免实时请求接口的实例代码

    在做搜索的时候,当搜索页面只有一个输入框.没有确定按钮的时候,只能在用户输入时请求服务端,查询数据.这样会导致频繁的发送请求,造成服务端压力. 解决这个问题,可以使用vue做输入节流. 1.创建一个工具类,debounce.js /*** * @param func 输入完成的回调函数 * @param delay 延迟时间 */ export function debounce(func, delay) { let timer return (...args) => { if (timer)

  • vue 调用 RESTful风格接口操作

    首先是简单的java接口代码 写了四个让前端请求的接口,以下为代码 @GetMapping("/v1/user/{username}/{password}") public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){ return Result.succResult(200,username

  • springboot vue项目管理后端实现接口新增

    目录 基于 springboot+vue 的测试平台开发继续更新. 一.编写实体类 Project 二.创建数据表 修改 application.properties 中的配置 三.编写 ProjectDAO 接口 四.编写 ProjectService 类 自定义异常类 五.编写 ProjectController 类 六.测试新增接口 /project/add 基于 springboot+vue 的测试平台开发继续更新. 接下来开发项目管理,是一个很常规的功能:有列表页.查询.新增.编辑,删

  • Java回调函数实例代码详解

    首先说说什么叫回调函数? 在WINDOWS中,程序员想让系统DLL调用自己编写的一个方法,于是利用DLL当中回调函数(CALLBACK)的接口来编写程序,使它调用,这个就 称为回调.在调用接口时,需要严格的按照定义的参数和方法调用,并且需要处理函数的异步,否则会导致程序的崩溃. 这样的解释似乎还是比较难懂,这里举个简 单的例子: 程序员A写了一段程序(程序a),其中预留有回调函数接口,并封装好了该程序.程序员B要让a调用自己的程序b中的一个方法,于是,他通过a中的接口回调自己b中的方法.目的达到

  • Java反射机制实例代码分享

    本文旨在对Java反射机制有一个全面的介绍,希望通过本文,大家会对Java反射的相关内容有一个全面的了解. 阅读本文之前,大家可先行参阅<重新理解Java泛型>. 前言 Java反射机制是一个非常强大的功能,在很多大型项目比如Spring, Mybatis都可以看见反射的身影.通过反射机制我们可以在运行期间获取对象的类型信息,利用这一特性我们可以实现工厂模式和代理模式等设计模式,同时也可以解决Java泛型擦除等令人苦恼的问题.本文我们就从实际应用的角度出发,来应用一下Java的反射机制. 反射

  • vue实现PC端录音功能的实例代码

    录音功能一般来说在移动端比较常见,但是在pc端也要实现按住说话的功能呢?项目需求:按住说话,时长不超过60秒,生成语音文件并上传,我这里用的是recorder.js 1.项目中新建一个recorder.js文件,内容如下,也可在百度上直接搜一个 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMed

  • springboot vue项目后端列表接口分页模糊查询

    目录 基于 springboot+vue 的测试平台开发 一.分页插件 二.实现接口 1. 编写 Service 层 2. 编写 Controller 层 三.测试接口 1. 测试分页 2. 测试条件查询 基于 springboot+vue 的测试平台开发 继续更新 打开项目管理,就需要看到列表里展示项目数据,比如这样(截图是这个前端框架的demo,仅作示意): 那么对应到我们平台的项目管理功能,就需要有: 列表展示添加的项目数据 可以通过项目名称查询指定的项目 新增项目 编辑项目 其他功能..

  • Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

随机推荐