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

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

Login.vue

2.建立后端springboot项目，依赖有web, mabatis, mysql Driver, druid-spring-boot-starter(druid数据源),lombok(偷懒必备)

pom.xml

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.2.4.RELEASE
         
    
    per.liam
    shop
    0.0.1-SNAPSHOT
    shop
    vue-shop 的后端项目

    
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.1.1
        

        
            org.springframework.boot
            spring-boot-devtools
            runtime
            true
        
        
            mysql
            mysql-connector-java
            runtime
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
        
            com.alibaba
            druid-spring-boot-starter
            1.1.21
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

3. 创建数据库
   

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);
}

7. 编写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;
        }
    }
}

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

Vue.prototype.$http = Axios

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

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

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

10. 解决该问题，在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/'

11. 重新编译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;
    }
}