Spring Boot + Vue前后端分离（三）实现登录功能

你好，【程序职场】专注于：Spring Boot ，微服务和前端APP开发，闲暇之余一起聊聊职场规划，个人成长，还能带你一起探索副业赚钱渠道，在提升技术的同时我们一起交流敏捷流程提高工作效率，从技术到管理一步步提升自我！

标签：一个执着的职场程序员！

上篇文章为大家讲述了 Spring Boot + Vue前后端分离（二）前端Vue启动流程；本篇文章接着上篇内容继续为大家介绍如何前后端分离实现登录功能。

本文是Spring Boot + Vue前后端分离系列的第三篇，了解前面的文章有助于更好的理解本文：

1.Spring Boot + Vue前后端分离（一）前端Vue环境搭建
2.Spring Boot + Vue前后端分离（二）前端Vue启动流程

前言

(一).前端登录页面实现

(二).后端登录功能实现

上一篇大家都学习到了vue前端的启动流程，相信对于小伙伴来说都是很easy的，我们今天主要说一下前后端分离实现登录功能，让我们知道前后端分离到底是什么？是怎么实现的？

(一).前端登录页面实现
#登录页面

前端页面开发比较简单，我们这里也不做过多的渲染，后期会做这些界面效果。

右键项目目录 src\components ，操作 New -> Vue Component，命名为 Login

内容如下：

<template>  <div>    账号: <input type="text" v-model="loginForm.username" placeholder="请输入账号"/>    <br><br>    密码: <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>    <br><br>    <button v-on:click="login">登录账号</button>  </div></template>
<script>
export default {  name: 'Login',  data () {    return {      loginForm: {        username: '',        password: ''      },      responseResult: []    }  },  methods: {    login () {      this.$axios        .post('/login', {          username: this.loginForm.username,          password: this.loginForm.password        })        .then(successResponse => {          if (successResponse.data.code === 200) {            this.$router.replace({path: '/index'})          } else {            alert('登录失败！')          }        })        .catch(failResponse => {        })    }  }}</script>
解释：
<template> 标签中简单的写了一个登录界面， methods 中定义了登录操作，即向后端 /login 接口发送数据，获得相应成功后，页面跳转到 /index（成功页面）。

#成功主页面HomePage.vue

<template>  <div>    恭喜你，登录成功啦！！！    公众号：【程序职场】  欢迎你  </div></template>
<script>export default {  name: 'HomePage'}</script>
<style scoped></style>
解释：

右键 src\components 文件夹，新建一个目录 home，在 home 下新建一个 HomePage.vue ，即首页组件。

#设置反向代理

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'// 设置反向代理，前端请求默认发送到 http://localhost:8082/var axios = require('axios')axios.defaults.baseURL = 'http://localhost:8082/'// 全局注册，之后可在其他组件中通过 this.$axios 发送数据Vue.prototype.$axios = axiosVue.config.productionTip = false
/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '<App/>'})
解释：

这里需要注意的是，使用了模块 axios，如果没有安装过该模块的，会报错，所以需要进入到项目文件夹中，执行 npm install --save axios，以安装这个模块。

#配置页面路由

import Vue from 'vue'import Router from 'vue-router'// 导入刚才编写的组件import HomePage from '@/components/home/HomePage'import Login from '@/components/Login'
Vue.use(Router)
export default new Router({  routes: [    // 下面都是固定的写法    {      path: '/login',      name: 'Login',      component: Login    },    {      path: '/index',      name: 'HomePage',      component: HomePage    }  ]})

文件目录：src\router\index.js

该内容不错过多说明了，很简单的操作。

#跨域支持

为了让后端能够访问到前端的资源，需要配置跨域支持。

在 config\index.js 中，找到 proxyTable 位置，做跨域的支持。

'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {  dev: {
    // Paths    assetsSubDirectory: 'static',    assetsPublicPath: '/',    proxyTable: {      '/': {        target: 'http://localhost:8082',        changeOrigin: true,        pathRewrite: {          '^/': ''        }      }    },    // Various Dev Server settings    host: 'localhost', // can be overwritten by process.env.HOST    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined    autoOpenBrowser: false,    errorOverlay: true,    notifyOnErrors: true,    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    // Use Eslint Loader?    // If true, your code will be linted during bundling and    // linting errors and warnings will be shown in the console.    useEslint: true,    // If true, eslint errors and warnings will also be shown in the error overlay    // in the browser.    showEslintErrorsInOverlay: false,
    /**     * Source Maps     */
    // https://webpack.js.org/configuration/devtool/#development    devtool: 'cheap-module-eval-source-map',
    // If you have problems debugging vue-files in devtools,    // set this to false - it *may* help    // https://vue-loader.vuejs.org/en/options.html#cachebusting    cacheBusting: true,
    cssSourceMap: true  },
  build: {    // Template for index.html    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths    assetsRoot: path.resolve(__dirname, '../dist'),    assetsSubDirectory: 'static',    assetsPublicPath: '/',
    /**     * Source Maps     */
    productionSourceMap: true,    // https://webpack.js.org/configuration/devtool/#production    devtool: '#source-map',
    // Gzip off by default as many popular static hosts such as    // Surge or Netlify already gzip all static assets for you.    // Before setting to `true`, make sure to:    // npm install --save-dev compression-webpack-plugin    productionGzip: false,    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to    // View the bundle analyzer report after build finishes:    // `npm run build --report`    // Set to `true` or `false` to always turn it on or off    bundleAnalyzerReport: process.env.npm_config_report  }}

好了，到这里前端页面已经做好了，运行项目可以看到登录页面了。

执行 npm run dev，或双击 dev（start 也一样）脚本，查看登录页面效果。

我所有的操作都是用的 cnpm 相对比npm快。

(二).后端登录功能实现

后端开发我是用的是 idea 首先需要新建一个项目，选择web，mysql，jpa等，这里我就不做截图说明了，pom文件内容如下：

<?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>com.cxzc.mycxzc</groupId>    <artifactId>demo</artifactId>    <version>0.0.1-SNAPSHOT</version>    <packaging>war</packaging>    <name>demo</name>    <description>Demo project for Spring Boot</description>
    <properties>        <java.version>1.8</java.version>    </properties>
    <dependencies>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-web</artifactId>        </dependency>
        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-data-jpa</artifactId>        </dependency>
        <dependency>            <groupId>mysql</groupId>            <artifactId>mysql-connector-java</artifactId>            <version>5.1.40</version>        </dependency>
        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-tomcat</artifactId>            <scope>provided</scope>        </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>    </dependencies>
    <build>        <plugins>            <plugin>                <groupId>org.springframework.boot</groupId>                <artifactId>spring-boot-maven-plugin</artifactId>            </plugin>        </plugins>    </build>
</project>
#数据库创建和数据添加

后端的数据库我们用到了mysql，首先需要我们创建数据库名字cxzc-vue，然后执行如下命令添加数据。

-- ------------------------------ Table structure for user-- ----------------------------DROP TABLE IF EXISTS `user`;CREATE TABLE `user` (  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,  `username` varchar(255) DEFAULT NULL,  `password` varchar(255) DEFAULT NULL,  PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
-- ------------------------------ Records of user-- ----------------------------INSERT INTO `user` VALUES ('1', 'admin', 'admin');
#数据库配置

server.port=8082
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/cxzc-vue?characterEncoding=UTF-8spring.datasource.username=rootspring.datasource.password=rootspring.datasource.driver-class-name=com.mysql.jdbc.Driverspring.jpa.hibernate.ddl-auto = none

#新建 User类

package com.cxzc.mycxzc.demo.bean;import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import javax.persistence.*;
@Entity@Table(name = "user")@JsonIgnoreProperties({"handler","hibernateLazyInitializer"})
public class User {    @Id    @GeneratedValue(strategy = GenerationType.IDENTITY)    @Column(name = "id")    int id;
    String username;    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;    }}

@Entity 表示这是一个实体类
@Table(name=“user”) 表示对应的表名是 user

#数据访问对象 UserDAO

package com.cxzc.mycxzc.demo.dao;import com.cxzc.mycxzc.demo.bean.User;import org.springframework.data.jpa.repository.JpaRepository;
public interface UserDAO extends JpaRepository<User,Integer> {    User findByUsername(String username);    User getByUsernameAndPassword(String username,String password);}

Data Access Object（数据访问对象，DAO）即用来操作数据库的对象，这个对象可以是我们自己开发的，也可以是框架提供的。这里我们通过继承 JpaRepository 的方式构建 DAO。

由于使用了 JPA，无需手动构建 SQL 语句，而只需要按照规范提供方法的名字即可实现对数据库的增删改查。

如 findByUsername，就是通过 username 字段查询到对应的行，并返回给 User 类。

# UserService 数据对象的实现

package com.cxzc.mycxzc.demo.service;import com.cxzc.mycxzc.demo.bean.User;import com.cxzc.mycxzc.demo.dao.UserDAO;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;@Servicepublic class UserService {    @Autowired    UserDAO userDAO;
    public boolean isExist(String username) {        User user = getByName(username);        return null!=user;    }
    public User getByName(String username) {        return userDAO.findByUsername(username);    }
    public User get(String username, String password){        return userDAO.getByUsernameAndPassword(username, password);    }
    public void add(User user) {        userDAO.save(user);    }}

这里是对 UserDAO 做了一次封装，一般来讲，我们在 DAO 中只定义基础的增删改查操作，而具体的操作，需要由 Service 来完成。当然，由于我们做的操作原本就比较简单，所以这里看起来只是简单地重命名了一下，比如把 “通过用户名及密码查询并获得对象” 这种方法命名为 get。

#控制器 LoginController

package com.cxzc.mycxzc.demo.controller;import com.cxzc.mycxzc.demo.bean.User;import com.cxzc.mycxzc.demo.response.Result;import com.cxzc.mycxzc.demo.service.UserService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.*;import org.springframework.web.util.HtmlUtils;
import java.util.Objects;
@Controllerpublic class LoginController {    @Autowired    UserService userService;
    @CrossOrigin    @PostMapping(value = "/login")    @ResponseBody    public Result login(@RequestBody User requestUser) {        String username = requestUser.getUsername();        username = HtmlUtils.htmlEscape(username);
        User user = userService.get(username, requestUser.getPassword());        if (null == user) {            return new Result(400);        } else {            return new Result(200);        }    }}

登录控制器是主要控制部分，通过 UserService 提供的 get 方法查询数据库，如果返回的对象为空，则验证失败，否则就验证成功。

到这里后端的开发也完成了，让我们启动后端项目，同时运行前端项目，访问 http://localhost:8080/#/login，输入用户名 admin，密码 admin，成功进入 localhost:8080/#/index

源码链接： https://github.com/ProceduralZC/itcxzc/tree/master/vue_test

好了，通过前后端分离实现登录功能到这里就ok了，敬请期待下篇。。。

作者：小小蒲公英

Spring Boot + Vue前后端分离（三）实现登录功能

猜你喜欢