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接口的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
详解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
-
vue+Java后端进行调试时解决跨域问题的方式
今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的问题,这时可以怎么做呢? 首先,要了解什么叫跨域访问? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,举个例子: http://www.123.com/index.html 调用 http
-
vue最简单的前后端交互示例详解
一.学习 vue 面临的问题 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳
-
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
-
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调用后端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=