2019-07-26

Springboot+Ajax+Mybatis+Mysql实现异步登录

欢迎访问我的个人博客：http://www.xhcoder.com/

本人大学生，搞了三年的PHP，感觉PHP的生态还是不行，但是PHP仍然是全世界最好的语言！！！上手简单，能快速搭建起一个项目。由于快要找工作了想花一年的时间来搞搞Java，搞了一段时间后发现Java整套是真是完善，可扩展性很强，Java牛逼不是没有道理的。

搭建Springboot项目

springboot是建立在的spring生态的基础上的，以前看spring的时候，有两大概念是纠结了很久的，IOC（控制反转）以及AOP（面向切面的编程）。其实控制反转就是依赖注入，spring提供了一个IOC容器来初始化对象，解决对象间依赖管理和对象的使用，如@Bean、@Autowired等可以实现依赖注入，AOP目前理解是在一些日志框架场景中用到。
平时我们常见的web项目开发，使用的mvc框架、maven管理在springboot依然使用到，springboot最明显的好处是简化了新建一个项目时的各种配置过程，就连tomcat都不用配置了。可以看到我新建一个maven项目大目录结构是这样的


在这里插入图片描述

Maven依赖：

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

application.yml

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    username: root
    password: root
    driver-class-name: com.mysql.jdbc.Driver
    type: com.zaxxer.hikari.HikariDataSource
  thymeleaf:
    cache: false

login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户登录</title>

    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/supersized.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="page-container">
    <h1>用户登录</h1>
    <form>
        <input type="text" id="username" name="username" value="" placeholder="用户名">
        <input type="password" id="password" name="password" value="" placeholder="密码">
        <button type="button" onclick="login()">提交</button>
    </form><br />
</div>

<!-- Javascript -->
<script src="assets/js/jquery-1.8.2.min.js"></script>
<script src="assets/js/supersized.3.2.7.min.js"></script>
<script src="assets/js/supersized-init.js"></script>
<script src="assets/js/scripts.js"></script>
<!--<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->
<script>
    function login() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        $.ajax({
            type: "POST",
            url: "/login_ht",
            data: {
                username: username,
                password: password
            },
            dataType: "json",
            success: function(data){
                var msg = data.msg;
                alert(msg);
            }
        })
    }
</script>
</body>
</html>

实体类（entity里的Users类）

package com.example.demo.entity;

public class Users {
    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

定义基本的几个属性后，可以通过键盘上的“alt+insert”键，来进行自动添加该类自带的get和set方法，以及toString方法

mapper（mapper里的UserMapper类）：

package com.example.demo.mapper;


import com.example.demo.entity.Users;
import org.apache.ibatis.annotations.*;


@Mapper
public interface UserMapper {

    @Select("select * from user where id=#{id}")
    public Users getUserById(Integer id);

    @Select("select username from user where username=#{username} and password=#{password}")
    public String login(@Param("username") String username,@Param("password") String password);

    @Delete("delete from user where id=#{id}")
    public int deleteUserById(Integer id);

    @Options(useGeneratedKeys = true,keyProperty = "id")
    @Insert("insert into user(username,password) values(#{username},#{password})")
    public int insertUser(Users users);

    @Update("update user set password=#{password} where id=#{id}")
    public int updateUser(Users users);
}

这里我使用的是mybatis的注解的形式实现增删改查的，mybatis还提供了一个xml配置的方式，但是我觉得小demo还是使用注解的方式比较简单。当然这里的登录功能只需要用到查询。

注意一定要加上@Mapper注解，不然容器扫描不到。

UserService：
书写service，业务层，控制业务，主要负责业务逻辑模块的逻辑应用设计

package com.example.demo.service;


import com.example.demo.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {

    @Autowired
    UserMapper userMapper;

    public String login(String username,String password){
        return userMapper.login(username,password);
    }
}

LoginController：
controller控制层，负责具体的业务模块流程的控制，即页面访问控制，调用service层里面的接口控制具体的业务流程

package com.example.demo.controller;

import com.example.demo.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.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import javax.swing.*;
import java.util.HashMap;
import java.util.Map;

@Controller
public class LoginController {

    @Autowired
    UserService userService;

    @RequestMapping("/login")
    public String login(){
        return "login";
    }

    @ResponseBody
    @RequestMapping(value = "/login_ht", method = {RequestMethod.POST, RequestMethod.GET})
    public Map<String,Object> login(HttpServletRequest request, HttpSession session){
        Map<String,Object> map = new HashMap<String,Object>();
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String name = userService.login(username,password);
        System.out.println(username+password);
        System.out.println(name);
        session.setAttribute("name", name);
        if (name == null) {
            map.put("msg","用户名或密码错误");
        } 
        return map;
    }

    @RequestMapping("/success")
    public String success(){
        return "success";
    }
}

@RequestMapping(value = “/login_ht”, method ={RequestMethod.POST,RequestMethod.GET})
HttpServletRequest request

该value的值/login_ht要与ajax中url值一样，

注意这里一定要加上@ResponseBody注解！！这样才能将数据以Json格式返回到前台！

欢迎访问我的个人博客：http://www.xhcoder.com/

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,098评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,213评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,960评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,519评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,512评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,533评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,914评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,804评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,350评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,933评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2赞 342

推荐阅读更多精彩内容

  • 2019-07-26
    此文首发于个人博客 http://www.xhcoder.com/ 同步和异步的区别 同步的思想是所有的操作都做...
    戎码一生o_o阅读 204评论 0赞 0
  • 快速阅读，超级记忆
    《超级快速阅读》是速读团的第二本书籍。虽然已经了解了王者速读法的使用，但真正实际用起来还是觉得不上手，主要体现在于...
    棍影无双阅读 189评论 0赞 0
  • 佳佳敏感恩日记第42天
    感恩健康的身体，让我可以精力充沛。 感恩刚刚好的时间，7点出发去清远非常顺利。 感恩工作的机会，让我明白我不喜欢什...
    shamiy阅读 135评论 0赞 0