原生Ajax+springBoot实现用户登录

思路：用户输入登录信息——信息传到后台——数据库查询——比较查询结果——返回登录信息（成功/失败）

html页面代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>login</title>

     <script type="text/javascript" src="http://localhost:8080/ajax.js"></script>

 </head>

 <body>

 <form>

     <span>用户ID：</span><input style="margin:2px;" id="id" name="id"><br>

     <span>密码：</span><input type="password" style="margin:2px;" id="password" name="password"><br>

     <button style="margin:2px;" type="button" onclick="sumbit_name_sex()">登录</button>&nbsp;

     <button style="margin:2px;" type="reset">取消</button><br>

 </form>

 </body>

 </html>

外部ajax.js代码：

 function sumbit_name_sex() {

     var id=document.getElementById("id").value;

     var password=document.getElementById("password").value;

     var user={

         id:id,

         password:password,

     }

     //步骤一:创建异步对象s

     var ajax = new XMLHttpRequest();

     //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端

     ajax.open("post", "http://localhost:8080/login",true);

     ajax.setRequestHeader("Content-type","application/json; charset=utf-8");

     //步骤三:发送请求

     ajax.send(JSON.stringify(user));

     //步骤四:注册事件 onreadystatechange 状态改变就会调用

     ajax.onreadystatechange = function () {

         if (ajax.readyState == 4 && ajax.status == 200) {

             //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的

             console.log(ajax.responseText);//输入相应的内容

             if(ajax.responseText.length>=3){

                 alert("登录成功");

             }else{

                 alert("登录失败");

             }

             //window.location.href="";

         }else{

         }

     }

 }

后台controller层的代码：

 package com.jhc.taskmanage.controller;

 import com.alibaba.fastjson.JSONObject;

 import com.jhc.taskmanage.model.User;

 import com.jhc.taskmanage.service.UserService;

 import org.springframework.beans.factory.annotation.Autowired;

 import org.springframework.stereotype.Controller;

 import org.springframework.web.bind.annotation.RequestMapping;

 import org.springframework.web.bind.annotation.RestController;

 import javax.servlet.http.HttpServletRequest;

 import java.io.InputStreamReader;

 import java.util.List;

 @Controller

 @RestController

 public class UserController {

     @Autowired

     private UserService userService;

     @RequestMapping("/login")

     public List<User> login(HttpServletRequest request){

         InputStreamReader inputStreamReader= null;

         String json="";

         try{

             inputStreamReader=new InputStreamReader(request.getInputStream(),"utf-8");

             char[] buff=new char[1024];

             int length=0;

             while((length=inputStreamReader.read(buff))!=-1){

                 String json_temp=new String(buff,0,length);

                 json+=json_temp;

             }

         }catch (Exception ex){

         }

         JSONObject jsonObject=JSONObject.parseObject(json);

         String id=(String)jsonObject.get("id");

         String password=(String)jsonObject.get("password");

         return userService.login(id,password);

     }

 }

service层:

 package com.jhc.taskmanage.service;

 import com.jhc.taskmanage.model.User;

 import java.util.List;

 public interface UserService {

     List<User> login(String id,String password);

 }

 package com.jhc.taskmanage.service.impl;

 import com.jhc.taskmanage.dao.UserDao;

 import com.jhc.taskmanage.model.User;

 import com.jhc.taskmanage.service.UserService;

 import org.springframework.beans.factory.annotation.Autowired;

 import org.springframework.stereotype.Service;

 import java.util.List;

 @Service

 public class UserServiceImpl implements UserService {

     @Autowired

     private UserDao userDao;

     @Override

     public List<User> login(String id,String password){

         return userDao.login(id,password);

     }

 }

dao层：

 package com.jhc.taskmanage.dao;

 import com.jhc.taskmanage.model.User;

 import org.springframework.beans.factory.annotation.Autowired;

 import org.springframework.stereotype.Repository;

 import java.util.List;

 @Repository

 public interface UserDao {

     List<User> login(String id,String password);

 }

 package com.jhc.taskmanage.dao.impl;

 import com.jhc.taskmanage.dao.UserDao;

 import com.jhc.taskmanage.model.User;

 import org.springframework.beans.factory.annotation.Autowired;

 import org.springframework.jdbc.core.JdbcTemplate;

 import org.springframework.stereotype.Repository;

 import java.util.ArrayList;

 import java.util.List;

 import java.util.Map;

 @Repository

 public class UserDaoImpl implements UserDao {

     @Autowired

     private JdbcTemplate jdbcTemplate;

     @Override

     public List<User> login(String id,String password){

         String sql="select id, name, sex, age from user where id='"+id+"' and password='"+password+"';";

         List<Map<String,Object>> list=jdbcTemplate.queryForList(sql);

         List<User> userArrayList=new ArrayList<>();

         for(Map<String,Object> map:list){

             User user=new User();

             user.setId(map.get("id").toString());

             user.setName(map.get("name").toString());

             user.setSex(map.get("sex").toString());

             user.setAge(Integer.valueOf(map.get("age").toString()));

             user.setPassword("***********************");

             userArrayList.add(user);

         }

         return userArrayList;

     }

 }

model层：

 package com.jhc.taskmanage.model;

 import org.springframework.stereotype.Component;

 @Component

 public class User {

     private String id;

     private String name;

     private String sex;

     private int age;

     private String password;

     public User(){

     }

     public String getId() {

         return id;

     }

     public void setId(String id) {

         this.id = id;

     }

     public String getName() {

         return name;

     }

     public void setName(String name) {

         this.name = name;

     }

     public String getSex() {

         return sex;

     }

     public void setSex(String sex) {

         this.sex = sex;

     }

     public int getAge() {

         return age;

     }

     public void setAge(int age) {

         this.age = age;

     }

     public String getPassword() {

         return password;

     }

     public void setPassword(String password) {

         this.password = password;

     }

 }

spring boot启动类：

 package com.jhc.taskmanage;

 import org.springframework.boot.SpringApplication;

 import org.springframework.boot.autoconfigure.SpringBootApplication;

 @SpringBootApplication

 public class TaskmanageApplication {

     public static void main(String[] args) {

         SpringApplication.run(TaskmanageApplication.class, args);

     }

 }

配置文件application.properties:

 server.port=8080

 server.servlet.context-path=/

 #spring.mvc.static-path-pattern=/

 spring.resources.static-locations=classpath:/resources/,classpath:/static/,classpath:/js,classpath:/css,classpath:/image

 spring.mvc.view.prefix=/WEB-INF/jsp/

 spring.mvc.view.suffix=.jsp

 spring.datasource.url=jdbc:mysql://localhost:3306/myproject?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC

 spring.datasource.username=root

 spring.datasource.password=mysql

 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

 #spring.datasource.max-idle=10

 #spring.datasource.max-wait=10000

 #spring.datasource.min-idle=5

 #spring.datasource.initial-size=5

 #server.session.timeout=10

 server.tomcat.uri-encoding=UTF-8

运行截图：

欢迎纠错，不喜勿喷

原生Ajax+springBoot实现用户登录的更多相关文章

通过配置http拦截器，来进行ajax请求验证用户登录的页面跳转
在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...
springmvc3 拦截器,过滤ajax请求,判断用户登录,拦截规则设置
web.xml设置:(/拦截所有请求) <servlet> <servlet-name>dispatcher</servlet-name> <servlet- ...
4.EasyUI学习总结(四)——EasyUI组件使用 (通过用户登录来演示dialog、ajax的使用，serialize方法的使用，前后台怎样交互等)
一.EasyUI组件的简单介绍详细可看api: http://www.jeasyuicn.com/api/docTtml/index.htm easyUI提供了很多组件让我们使用,如下图所示: 很多 ...
ajax讲解：“创建用户”和“用户登录”练习
ajax可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. 接下来,将以例子的形式进行讲解例一:创建用户 ...
PHP+jQuery+Ajax实现用户登录与退…
用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 查看演示DEM ...
【京东账户】——Mysql/PHP/Ajax爬坑之用户登录
一.引言实现京东的账户项目,功能模块之一,用户登录.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录创建库:jd 创建表:登录表添加三条记录 CREATE ...
用户登录ajax局部刷新验证码
用户登录的时候,登录页面附带验证码图片,用户需要输入正确的验证码才可以登录,验证码实现局部刷新操作. 效果如图: 代码如下: #生成验证码及图片的函数 newcode.py import rando ...
[springboot 开发单体web shop] 5. 用户登录及首页展示
用户登录及前端展示用户登录在之前的文章中我们实现了用户注册和验证功能,接下来我们继续实现它的登录,以及登录成功之后要在页面上显示的信息. 接下来,我们来编写代码. 实现service 在com.l ...
DBCP(MySql)+Servlet+BootStrap+Ajax实现用户登录与简单用户管理系统
目录简介本次项目通过Maven编写本文最后会附上代码界面截图登录界面注册界面登录成功进入主页增加用户操作删除用户操作修改用户操作主要代码 Dao层代码 DBCP代码 Se ...

随机推荐

《深入理解java虚拟机》笔记（7）JVM调优（分代垃圾收集器）
以下配置主要针对分代垃圾回收算法而言. 一.堆大小设置年轻代的设置很关键 JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用 ...
AI入门丨开源学习资源推荐
现在AI大热,网上的资源也非常多,让人眼花缭乱.非科班的我,经过半年的摸索,也算马马虎虎入了坑.下面整理了我认为不错的学习资源,大部分我都看过,以分享给更多的人.我会不断保持更新,也欢迎大家补充. P ...
Coroutine(协程)模式与线程
概念协程(Coroutine)这个概念最早是Melvin Conway在1963年提出的,是并发运算中的概念,指两个子过程通过相互协作完成某个任务,用它可以实现协作式多任务,协程(coroutine ...
图解css3のborder-radius
早期制作圆角都是使用图片来实现.通过用1px 的水平线条来堆叠出圆角或者利用JavaScript等等方法,但是都是需要增加多个无意义的标签来实现,造成代码亢余.如今有了CSS3的圆角属性——borde ...
用TextWriterTraceListener实现建议log文件记录
log4net之类3方组件确实很方便,但是想写个小小的demo之类的程序,有点用不起啊. 微软自带的TraceListener要实现一个简易的日志帮助类还是很简单的,直接上代码,自己备用,也希望对同样 ...
洛谷 P2983 [USACO10FEB]购买巧克力Chocolate Buying
购买巧克力Chocolate Buying 乍一看以为是背包,然后交了一个感觉没错的背包上去. #include <iostream> #include <cstdio> #i ...
洛谷 P1203 [USACO1.1]坏掉的项链Broken Necklace
坏掉的项链Broken Necklace 难度:★ Code: #include <iostream> #include <cstdio> #include <cstri ...
iOS VIPER架构(一)
洋葱模型洋葱模型,是从冰山模型上演变而来的,用来进行层次分析的模型,这是Redux的洋葱模型. action从最外层传入,层层传递直至核心后,经过逐层事件触发,再次被分发出来,执行后续操作. 洋葱模 ...
win10 KMS激活
运行输入以管理员权限输入CMD 如果已安装密匙先卸载,没有的话可以跳过 slmgr -upk 卸载密匙命令输入对应版密匙以及KMS地址激活 1.键入命令:slmgr -ipk XXXXX-XXXX ...
安装指定版本的minikube
Minikube是什么? Kubernetes集群的安装和部署对于很多初学者来说是一道坎.为了方便大家开发和体验Kubernetes,Kubernetes开源社区提供了可以在本地部署的Minikube ...

原生Ajax+springBoot实现用户登录

原生Ajax+springBoot实现用户登录的更多相关文章

随机推荐

热门专题