SpringBoot+JPA+Vue cli3+axios+ElementUI Demo：登陆功能的实现（遵循restful风格）

0、写在前面

这几天本菜鸟一直在研究SpringBoot+Vue cli3+axios+ElementUI的整合，今天终于跑通了整个流程，特此记录，也希望能帮助到看到这篇博客的新手朋友们。

1、前端代码

1.1、创建vuecli项目并将脚手架清理干净

如果需要参考点这里

1.2、添加依赖
本项目前端使用了
运行依赖：ElementUI、axios
开发依赖：less-loader（需要安装less）
使用可视化操作安装即可

全局配置依赖
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入全局样式表
import './assets/css/global.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 全局挂载axios
import axios from 'axios'
// 配置请求的路径
axios.defaults.baseURL = 'http://localhost:8088/api'
Vue.prototype.$http = axios

// 全局配置ElementUI
Vue.config.productionTip = false
Vue.use(ElementUI)

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

axios配置和跨域问题点这里

1.3、创建一个新的单文件组件
在这一步之前，先assets目录下创建css目录，新建一个全局样式表

global.css

/* 全局样式表 */
html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}

在components目录下创建新文件
Login.vue

<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!-- 登陆表单区域 ref定义区域对象的名称 -->
      <el-form :model="loginForm" :rules="loginFormRules" ref="loginFromRef" class="login_form">
          <!-- 这里prop规定了验证规则 placeholder输入框内提示文字 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入账号" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
            <!-- 这里验证表单的方法和充值方法都需要获得区域对象 -->
          <el-button type="primary" @click="login('loginFromRef');">登陆</el-button>
          <el-button type="info" @click="resetForm('loginFromRef')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 这是表单的数据绑定对象
      loginForm: {
        username: 'admin',
        password: 'admin123'
      },
      // 这是表单验证规则对象,在输入框标签使用prop规定验证规则
      loginFormRules: {
        // 验证规则
        username: [
        // required(是否必填),message(提示信息),trigger(触发条件)
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {

    // 登陆函数
    login (formName) {
    // 表单提交验证,验证对象valid是否为真,否,则拒绝提交表单
      this.$refs[formName].validate(valid => {
        if (!valid) return
        // 调用axios发起请求,并传输表单数据
        this.$http.post('/login', this.loginForm)
          // 接受返回数据result对象,验证状态码
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              // 当状态码正确时跳转页面
              console.log(successResponse.data.message)
              // 路由重定向
              this.$router.replace({ path: '/index' })
            } else {
              // 当状态码错误时，调用openError方法
              this.openError(successResponse.data.message)
            }
          })
          .catch(failResponse => {
          })
      })
    },
    // 重置函数
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 状态错误提示框
    openError (message) {
      this.$message.error(message)
    }
  }
}
</script>

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

// 登陆盒子样式
.login_box {
  width: 450px;
  height: 300px;
  background-color: #ffffff;
  border-radius: 3px; //圆角
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

   // 头像盒子样式
  .avatar_box {
    // less语句的嵌套
    height: 130px;
    width: 130px;
    border: 1px, solid, #eeeeee;
    padding: 10px;
    background-color: white;
    border-radius: 50%; //圆角
    box-shadow: 0 0 10px #dddddd; //盒子阴影
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    // 图片盒子的样式
    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
  // 登陆表单的样式
  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    //允许你以某种方式定义某些元素，以适应指定区域
    //border-box:指定宽度和高度（最小/最大属性）确定元素边框。
    //也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
    box-sizing: border-box;
  }
    // 按钮的样式
  .btns {
    display: flex;
    justify-content: flex-end; //justify-content 用于设置盒子元素的对齐方式:flex-start(左对齐),flex-end(右对齐),center(居中)
  }
}
</style>

添加一个简单的主页组件，新建Index.vue

<template>
    <div>
        <h1>没错你已经登陆成功了,这里就是主页</h1>
    </div>
</template>
<script>
export default {
}
</script>

1.4、配置路由

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Index from '../components/Index.vue'

Vue.use(VueRouter)

const routes = [

  //路由重定向，访问首页自动挑战到登陆页面
  { path: '/', redirect: '/login' },
  // 路由组件注册
  { path: '/login', component: Login },
  { path: '/index', component: Index }
]

const router = new VueRouter({
  routes
})

export default router

前端的代码到这里就全部准备好了，运行试试

由于后端没有在运行，所以只能看看前端的页面效果。
接下来搭建后端的代码。

2、后端代码

1.1、首先创建一个springboot项目

需要参考点这里

1.2、数据库

本项目只有登陆一个功能，所以只有一个表
往表中添加一个数据

1.3、spring boot使用JPA

需要参考点这里

1.4、项目的配置文件

#配置自己的数据库
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=UTC
#数据库用户名
spring.datasource.username=root
#数据库密码
spring.datasource.password=admin
spring.datasource.driver-class-username=com.mysql.cj.jdbc.Driver

#配置JPA
spring.jpa.properties.hibernate.hbm2ddl.auto=update
#显示sql语句
spring.jpa.show-sql=true
#服务运行端口
server.port=8088

1.5、创建实体类

user类

package com.tianqicode.testjpa.bean;

import javax.persistence.*;

@Entity
@Table(name = "user")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    private int id;

    @Column(name = "name")
    private String username;

    @Column(name = "password")
    private String password;

    public int getId() {
        return id;
    }

    public void setId(int 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;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

RestfulApi类

package com.tianqicode.testjpa.bean;

public class ResultApi {

    /**
     * 定义静态的状态码
     */
    public static int SUCCESS_CODE = 200;
    public static int FAIL_CODE = 400;

    /**
     * 返回状态码，表示一种错误类型
     * 请求成功，状态码为200
     */
    private int code;

    /**
     * 对错误代码的详细解释
     */
    private String message;

    /**
     * 返回的结果包装在value中，value可以是单个对象
     */
    private Object data;

    //无参的构造函数
    public ResultApi() {

    }

    //含参的构造函数
    public ResultApi(int code, String message, Object data) {

        this.code = code;
        this.data = data;
        this.message = message;
    }

    //返回无数据，无描述的成功result对象
    public static ResultApi success() {
        return new ResultApi(SUCCESS_CODE,null,null);
    }

    //返回仅无数据的成功result对象
    public static ResultApi success(String message) {
        return new ResultApi(SUCCESS_CODE,message,null);
    }

    //返回有数据无描述的成功result对象
    public static ResultApi success(Object data) {
        return new ResultApi(SUCCESS_CODE,"",data);
    }

    //返回失败的result对象并添加描述
    public static ResultApi fail(String message) {
        return new ResultApi(FAIL_CODE,message,null);
    }


    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

1.6、创建Dao接口

UserDao接口

package com.tianqicode.testjpa.dao;

import com.tianqicode.testjpa.bean.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserDao extends JpaRepository<User, Integer> {

//	添加根据username查询user方法
    User findByUsername(String s);
}

1.7、创建Service类

UserService类

package com.tianqicode.testjpa.service;

import com.tianqicode.testjpa.bean.User;
import com.tianqicode.testjpa.dao.UserDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {

    @Autowired
    UserDao userDao;


    //添加用户方法
    public void addUser(User user) {

        userDao.save(user);

    }

    //根据username查找user
    public User findByName(String name) {

        User user = userDao.findByUsername(name);

        return user;
    }


}

1.8、创建Controller类

UserController类

package com.tianqicode.testjpa.controller;

import com.tianqicode.testjpa.bean.ResultApi;
import com.tianqicode.testjpa.bean.User;
import com.tianqicode.testjpa.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {

    @Autowired
    UserService userService;

	//支持跨域访问的注解
    @CrossOrigin
    @PostMapping("api/login")
    @ResponseBody
    public ResultApi loginService(@RequestBody User loginUser) {

        String name = loginUser.getUsername();
        String password = loginUser.getPassword();

        System.out.println(name);

        User user = userService.findByName(name);

        System.out.println(user);
        System.out.println(loginUser);

        if (user != null) {
            if (user.getPassword().equals(password)) {
                System.out.println("登陆成功");
            } else {
//                System.out.println("密码错误");
                return ResultApi.fail("密码错误!");
            }
        } else {
//            System.out.println("用户不存在");
            return ResultApi.fail("用户不存在！");
        }
        return ResultApi.success("登陆成功");

    }
}

3、测试

到此为止，前后端就都已经部署好了
前后端的服务都跑起来
输入正确或错误的账号密码测试功能是否都正确实现吧