简单搭建springboot+vue实现用户登录

描述：利用springboot整合mybatis-plus快速搭建用户登录后端项目。

1、建表：

-- 建表语句
CREATE TABLE `user_login` (
  `log_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '编号',
  `id` int(11) NOT NULL COMMENT '学员编号',
  `username` varchar(20) NOT NULL COMMENT '注册的用户名',
  `password` varchar(20) NOT NULL COMMENT '注册的密码',
  `tel_nummber` varchar(20) NOT NULL COMMENT '注册时的手机号',
  PRIMARY KEY (`log_id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

-- 插入数据
INSERT INTO managesystem.user_login (id, username, password, tel_nummber) VALUES(0, 'hello', '12345', '123456789990');

2、springboot整合mybatis-plus

1、导坐标

 <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>3.0.0</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</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>

        <!--druid-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.6</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>

        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
    </dependencies>

2、配置yml

server:
  port: 8088
  servlet:
    context-path: /ssm
  tomcat:
    uri-encoding: UTF-8


# 配置默认日志
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

spring:
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      # 设置时区 &servertimezone=UTC
      url: jdbc:mysql://localhost:3306/man?useSSL=false
      username: root
      password: 1111

3、dao层接口

@Mapper
public interface UserLoginMapper extends BaseMapper<UserLoginPO> {
}

4、实体类

@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("user_login")
public class UserLoginPO {
    private Integer logId;
    private Integer id;
    private String username;
    private String password;
    private String telNummber;
}

5、service层：

接口

public interface UserLoginService extends IService<UserLoginPO> {
    public UserLoginPO findByUsername(String username);
}

接口实现类

@Service
public class UserLoginServiceImpl extends ServiceImpl<UserLoginMapper, UserLoginPO> implements UserLoginService {
@Autowired
private UserLoginMapper userLoginMapper;
    @Override
    public UserLoginPO findByUsername(String username) {
        QueryWrapper wrapper = new QueryWrapper();
        wrapper.eq("username",username);
        return userLoginMapper.selectOne(wrapper);
    }
}

6、controller层

import com.kexun.entity.UserLoginPO;
import com.kexun.service.UserLoginService;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authc.IncorrectCredentialsException;
import org.apache.shiro.authc.UnknownAccountException;
import org.apache.shiro.authc.UsernamePasswordToken;
import org.apache.shiro.subject.Subject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Description:  用户登录
 * date 2023/1/15 15:31
 *
 * @author 
 * @since JDK 1.8
 */
@Controller
public class UserLoginController {
    @Autowired
    UserLoginService userLoginService;

    /**
     *  简单的登录判断
     */
    @GetMapping(value = "/login", produces = "text/html; charset=utf-8")
    @ResponseBody
    public String loginStatus(HttpServletRequest req) {
        //获取参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");


        Map<String, Object> map = new HashMap<>();
        map.put("username",username);
        map.put("password",password);
        List<UserLoginPO> userLoginPOS = userLoginService.getBaseMapper().selectByMap(map);

        //判断是否为空
        if(!userLoginPOS.isEmpty()){
            System.out.println(userLoginPOS);
            System.out.println("登录成功");
            System.out.println(username);
            System.out.println(password);
            return "登录成功";
        }else{
            System.out.println("登录失败");
            System.out.println(username);
            System.out.println(password);
            return "登录失败";
        }

    }

}

7、配置类

设置前端请求跨域处理   

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Description: 设置前端请求跨域处理                        
 * date: 2023/1/15 22:30
 *
 * @author ssm
 * @since JDK 1.8                        
 */   
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 放行全部请求类型
                .allowedMethods("*")
//                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 是否发送Cookie
                .allowCredentials(true)
                //暴露哪些头部信息
                .exposedHeaders("*");
    }
}

vue前端代码

此处我用的是vue2，搭建的项目。

1、进入需要创建项目的目录

 此处我是在d盘的根目录下创建vue项目，尽量以管理员运行cmd。

2、vue2为例

 

回车确定

3、项目创建完成

 

4、进入项目

 

5、运行项目

 选择local地址，浏览器打开。出现vue的logo，就表明成功了。

vue代码：

编写login组件，编写组件之前先删除框架自带的helloworld组件。

login组件

<template>
<body id="poster">
  <el-form class="login-container" label-position="left" label-width="0px">
    <h3 class="login_title">系统登录</h3>
    <el-form-item>
      <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>

    <el-form-item>
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>

    <el-form-item style="width: 100%">
      <el-button
        type="primary"
        style="width: 100%;background: #505458;border: none"
        v-on:click="login"
      >登录</el-button>
    </el-form-item>
  </el-form>
</body>
</template>
   
   
  <script>
export default {
  name: "Login",
  methods: {
    login() {
      this.$axios
        .get("http://localhost:8088/ssm/login", {
          params: {
            username: this.loginForm.username,
            password: this.loginForm.password
          }
        })
        .then(successResponse => {
          if (successResponse.data.code === 200) {
            //登陆成功将vue
            this.user = successResponse.data.data;
            //获取vue的对象的账户和密码，将值传给
            console.log(successResponse.data.data);
            this.$router.replace({ path: "/Index" });
          }
        })
        .catch(failResponse => {});vue
    }
  },
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      responseResult: []
    };
  }
};
</script>
   
  <style>
#poster {
  background: url("../assets/eva.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

body {
  margin: 0px;
  padding: 0;
}

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

将组件引入App.vue

<template>
  <div>
    <Login></Login>
  </div>
</template>

<script>
//引入组件
import Login from './components/Login'

export default {
  name: 'App',
  components: {
    Indes,
    Login
  }
}
</script>

下载axios组件和element-ui组件(下载命令可以自行百度)

main.js

import Vue from 'vue'
import App from './App.vue'
//引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//引入axios组件
import axios from 'axios'

Vue.prototype.$axios = axios

Vue.use(ElementUI)


// 关闭生产提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

图片：

vue启动命令 : npm run serve,

后台：引导类启动即可。 

此处我没有加主页面的组件。所以前台看不到效果。

前台点击登录

 

后台结果：