(前后端分离) Springboot + Vue 实现账户登录

使用 vue-cli 创建vue项目(我采用elementUI)，完成一个vue项目的基本配置，编写登录页面:Login.vue<template><div class="login_container"><div class="login_box"><div class="avatar_box">...

华仔哦

3376人浏览 · 2020-02-02 01:02:43

华仔哦 · 2020-02-02 01:02:43 发布

使用 vue-cli 创建vue项目(我采用elementUI)，完成一个vue项目的基本配置，编写登录页面:

<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/icon.jpeg" alt="头像">
      </div>

      <el-form ref="LoginFormRef" :model="LoginForm" :rules="LoginFormRules" class="login_form" label-width="auto">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="LoginForm.username" prefix-icon="iconfont icon-yonghu"/>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="LoginForm.password" prefix-icon="iconfont icon-mima" type="password"/>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="buttons">
          <el-button type="primary" @click="loginValidate">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data () {
      return {
        LoginForm: {
          username: '',
          password: ''
        },
        LoginFormRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      // 表单重置
      resetLoginForm () {
        this.$refs.LoginFormRef.resetFields()
      },
      loginValidate () {
        // 登录前校验
        this.$refs.LoginFormRef.validate(async status => {
          if (!status) return this.$message.error('格式错误！')
          // 发起登录请求
          const { data: res } = await this.$http.post('login', this.LoginForm)
          if (res !== 200) return this.$message.error('账号或密码错误，请重新输入！')
          window.sessionStorage.setItem('token', 'fhsdhfshfiudhfuishfuisdhfui')
          this.$message.success('登录成功！')
          await this.$router.push('/home')
          // TODO 有一个小bug：点击退出登陆后需要刷新页面才能输入信息进行登录，否则无法输入
          // 一天后，这个 bug 莫名其妙的好了
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .login_container {
    background-color: #2b4b6b;
    height: 100%;
  }

  .login_box {
    height: 300px;
    width: 450px;
    background-color: #fff;
    border-radius: 7px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;

      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .login_form {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 30px;
      box-sizing: border-box;
    }

    .buttons {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>

在这里插入图片描述
2.建立后端springboot项目，依赖有web, mabatis, mysql Driver, druid-spring-boot-starter(druid数据源),lombok(偷懒必备)

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>per.liam</groupId>
    <artifactId>shop</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>shop</name>
    <description>vue-shop 的后端项目</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</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.1.1</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </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>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.21</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

创建数据库

4.在application.yaml 中配置数据源

server:
  port: 8081
spring:
  datasource:
      url: jdbc:mysql://255.255.255:3306/shop
      username: root
      password: root
      driver-class-nae: com.mysql.cj.jdbc.Driver
      type: com.alibaa.druid.pool.DruidDataSource

5.编写实体类　User.java

package per.liam.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @author liam
 * @date 2020/2/1 下午9:14
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private String username;
    private String password;
}

6.编写dao层　UserDao.java

package per.liam.dao;

import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;
import per.liam.pojo.User;

/**
 * @author liam
 * @date 2020/2/1 下午9:17
 */
@Repository
public interface UserDao {
    /**
     * 根据用户名和密码查询用户信息
     * @param username 　用户名
     * @param password 密码
     * @return　用户
     */
    @Select("select * from shop.administrator where username=#{username} and password=#{password}")
    User queryUserByName(String username,String password);
}

编写controller层　LoginController.java

package per.liam.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import per.liam.dao.UserDao;
import per.liam.pojo.User;

/**
 * @author liam
 * @date 2020/2/1 下午9:57
 */
@RestController
public class LoginController {
    private final UserDao userDao;

    public LoginController(UserDao userDao) {
        this.userDao = userDao;
    }

    @PostMapping("/login")
    public int login(@RequestBody User user){
        User queryUser = userDao.queryUserByName(user.getUsername(), user.getPassword());
        // 查询不到该用户，即用户名或密码错误，返回404；否则返回200，登录成功
        if (queryUser == null){
            return 404;
        }else {
            return 200;
        }
    }
}

在vue项目的main.js 中给axios 配置请求根路径(即后端项目发布地址)

Vue.prototype.$http = Axios

Axios.defaults.baseURL = 'http://localhost:8081/'

两个项目都运行，然后登录试试看

在这里插入图片描述

毫无疑问，登录失败(No ‘Access-Control-Allow-Origin’)，因为跨域请求是不允许的(自己百度)

解决该问题，在vue项目中新建vue.config.js文件(vue-cli 3)

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'assets',
  devServer: {
    proxy: {
    // 这里还有很多要思考的问题
      '/api': {
        target: 'http://localhost:8081/',
        changeOrigin: true,　　// 允许跨域访问
        pathRewrite: {
          '^/api': 'http://localhost:8081/'　　// 路径重写
        }
      }
    }
  }
}

然后更改main.js 中的根路径

Vue.prototype.$http = Axios

Axios.defaults.baseURL = 'api/'

重新编译vue项目，再次访问，大功告成

注：vue 学习自ｂ站　黑马教程
Springboot 学习自 b 站　狂神说Java

注：若项目部署在服务器上，记得一定要在nginx的前端项目配置中添加如下配置

server {
    listen 80;

    server_name hzmaple.club www.hzmaple.club;

    location / {
        root /home/liam/dist;
        index index.html;
    }

#记得要添加这个配置
    location /api {
    rewrite ^/api/(.*)$ /$1 break;
    proxy_pass http://localhost:8081;
    }
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

华仔哦

@LAf_HUAZAI

已为社区贡献1条内容