springboot + axios + vue实现一个简单的用户登录

最新推荐文章于 2024-05-24 20:23:06 发布

头脑空空的憨包

最新推荐文章于 2024-05-24 20:23:06 发布

阅读量3.1k

点赞数 9

分类专栏：练习文章标签： vue spring java

本文链接：https://blog.csdn.net/qq_30380233/article/details/115407542

版权

练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用springboot+axios+vue做一个简单的用户登录

一起交流学习

1.基本环境的搭建及其配置文件

我的基本项目结构
在这里插入图片描述
yaml配置文件

在这里我配置了mybatis和web路径以及mapper.xml文件的路径，如果你是mysql8及其以上，那么就需要在url中加入一些参数。我这里使用的mysql8，数据源用的Druid。

spring:
  application:
    name: myuser
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/db?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone = Asia/Shanghai
server:
  servlet:
    context-path: /myuser
mybatis:
  type-aliases-package: com.cbh.entity
  mapper-locations: classpath:/com/cbh/mapper/*.xml

需要导入的pom依赖： 导入的依赖有mybatis,druid数据源,mysql驱动,lombok。

<dependencies>
        <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.1.4</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.4</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

2.接下来就是一些代码的具体实现

2.1首先是entity实体类

package com.cbh.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private int id;
    private String username;
    private String password;
}

2.2 controller类(UserController)

package com.cbh.controller;

import com.cbh.entity.User;
import com.cbh.service.UserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.ObjectUtils;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@CrossOrigin
@Slf4j
@RequestMapping("/user")
@RestController
public class UserController {

    @Autowired
    private UserService userService;

    /*
    用户登录
     */
    @PostMapping("/login")
    private Map<String, Object> login(@RequestBody User user) {
        User dbUser;
        Map<String, Object> map = new HashMap<>();
        try {
            //通过前端传来的user对象，将其封装在dbUser中
            dbUser = userService.login(user);
            //判断从数据库中查询出来的dbUser是否为空
            if (!ObjectUtils.isEmpty(dbUser)) {
                map.put("status", true);
                map.put("message", "登录成功,点击确定跳转到主页");
                map.put("user", dbUser);
            } else {
                //通过用户名查询该用户是否存在数据库
                dbUser = userService.findUserByUserName(user.getUsername());
                if (!ObjectUtils.isEmpty(dbUser)) {
                    //如果存在
                    map.put("status", false);
                    map.put("message", "密码错误");
                } else {
                    map.put("status", false);
                    map.put("message", "用户名不存在");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            map.put("message", e.getMessage());
        }
        return map;
    }
}

需要添加上跨域的注解@CrossOrigin

2.3 UserMapper接口

package com.cbh.dao;

import com.cbh.entity.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper {

    //用户登录
    User login(User user);
    //通过用户名判断该用户名是否存在
    User findUserByUserName(String username);
}

2.3 UserMapper.xml 用来实现sql语句的编写

	<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cbh.dao.UserMapper">
    <select id="login" parameterType="user" resultType="user">
        select * from t_user where username = #{username} and password = #{password}
    </select>
    <select id="findUserByUserName" parameterType="string" resultType="user">
        select * from t_user where username = #{username}
    </select>
</mapper>

2.4 业务层的编写 UserService 以及 UserServiceImpl

package com.cbh.service;

import com.cbh.entity.User;
import org.springframework.stereotype.Service;

@Service
public interface UserService {

    User login(User user);

    //通过用户名判断该用户名是否存在
    User findUserByUserName(String username);
}

package com.cbh.service.impl;

import com.cbh.dao.UserMapper;
import com.cbh.entity.User;
import com.cbh.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public User login(User user) {
        return userMapper.login(user);
    }

    @Override
    public User findUserByUserName(String username) {
        return userMapper.findUserByUserName(username);
    }

}

一定不要忘记在mapper接口、service接口、serviceimpl实现类上添加注解!!!

前端部分

前端用到的就是通过axios发送请求，去请求UserController中的接口。需要的工具：axios.js、jQuery、vue.js

在这里我是直接把html放在static目录下的，下边是用bootstrap做的一个简单的登录页面。如果要用到bootstrap的话，需要去导入bootstrap的css样式表。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--    jquery-->
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="icon" type="image/x-icon" href="img/icon.png"/>
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">


</head>

<body class="bg-gradient-primary">
<div id="app">
    <div class="col-md-3 m-login-form-margin-top">
        <div class="text-center">
            <h1 class="h4 text-gray-900 mb-4">用户登录!</h1>
        </div>
        <form class="user" action="" class="m-login-form">
            <div class="form-group">
                <span v-text="loginUsernameMsg" style="color: red"></span>
                <input type="text" class="form-control form-control-user" id="login_account"
                       v-model="user.username" placeholder="请输入账号">
            </div>
            <div class="form-group">
                <span v-text="loginPasswordMsg" style="color: red"></span>
                <input type="password" class="form-control form-control-user" id="login_pwd"
                       v-model="user.password" placeholder="请输入密码">
            </div>
            <font color="red"></font>
            <button type="button" class="btn btn-primary btn-user btn-block m-login-btn-focus"
                    id="loginsubmit" @click="login">登录
            </button>
            <hr>
        </form>
        <hr>
    </div>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            user: {},
            loginUsernameMsg: "",
            loginPasswordMsg: ""
        },
        methods: {
            login() {
                let _this = this;
                let login_account = $('#login_account').val();
                let login_pwd = $('#login_pwd').val();
                if (login_account.length == 0) {
                    _this.loginUsernameMsg = "用户名不能为空！";
                    _this.loginPasswordMsg = "";
                } else if (login_pwd.length == 0) {
                    _this.loginUsernameMsg = "";
                    _this.loginPasswordMsg = "密码不能为空！";
                } else {
                    axios.post("http://localhost:8080/myuser/user/login", _this.user).then(res => {
                        //如果登录成功!
                        if (res.data.status) {
                            alert(res.data.message);
                        } else {
                            alert(res.data.message);
                        }
                    })
                }
            },
        },
    })
</script>

对上边页面的一些解释:
1.首先需要给页面挂载vue 我用的id=app进行挂载
2.在vue数据域部分定义user对象通过user.username以及user.password进行双向绑定
3.绑定之后在提交的时候通过方法体传参的方法发送post请求给后端接口
4.发送请求后通过调用后端接口方法，传递一些信息给前端页面。
5.结束

新手操作。。。。。我只是个新手

头脑空空的憨包

关注

9
点赞
踩
36

收藏

觉得还不错? 一键收藏
6
评论
springboot + axios + vue实现一个简单的用户登录

使用springboot+axios+vue做一个简单的用户登录一起交流学习1.基本环境的搭建及其配置文件我的基本项目结构yaml配置文件在这里我配置了mybatis和web路径以及mapper.xml文件的路径，如果你是mysql8及其以上，那么就需要在url中加入一些参数。我这里使用的mysql8，数据源用的Druid。spring: application: name: myuser datasource: type: com.alibaba.druid
复制链接

扫一扫