springboot和vue的前后端分离技术的相关配置

版权声明：欢迎转载，注明作者和出处就好！如果不喜欢或文章存在明显的谬误，请留言说明原因再踩哦，谢谢，我也可以知道原因，不断进步！ https://blog.****.net/csonst1017/article/details/85329865

因为新进入的公司现在做的项目是前后端分离的，后端用的是springboot加mybatis，登录验证用的是secutiry,前端用的是vue.js。而我之前都是在做前后端一起开发的，所以在这方面还不是太明白，百度了许多资料，终于成功实现登录功能了（json参数传递）。
在这里借助一位老哥的前端vue.js代码代码链接，但是用这位老哥的前端代码过程中出了一些问题，在这里把一些需要注意的地方写出来。

前端：

vue项目文件夹\src\main.js

vue项目文件夹\config\index.js

注意这两个个配置，这是用axios进行端口转发的配置，配的地址一定要和后端springboot配置的server端口地址一样，如图。

我后端springboot配置文件是yml，配置的是8082端口，那么vue项目文件夹\src\main.js的axios地址配置和proxyTable里的也要配成跟后端一样的（http://localhost:8082），因为实现前后端分离就是，我运行vue项目，浏览器输入vue项目的地址（http://localhost:8080），然后通过这个配置项把数据进行端口转发到后端的端口。这样就不需要把前端的文件放进springboot项目里去了，各自开发各的，知道彼此的端口就行了。

还有就是登陆页点击提交的地址问题：
vue项目文件夹\src\components\manage\BlogLogin.vue

画圈里的地址是后端controller层的mapping地址，我把controller层图贴出来。

记住不需要把前端文件放进后端的项目文件夹里，之前放进去弄半天，后来才知道原来不需要，直接npm run dev把vue项目跑起来然后浏览器输vue的地址端口会自动转发传参数！！！（极度舒服）

后端:
因为后端代码是公司的，所以不好贴出来，在这里就只贴login的把。

package com.likemoney.controller;

import com.likemoney.dao.entity.Employee;
import com.likemoney.form.LoginUserForm;
import com.likemoney.config.security.SecurityUserDetails;
import com.likemoney.config.security.jwt.JwtTokenUtil;
import com.likemoney.log.factory.LogTaskFactory;
import com.likemoney.model.ResponseBean;
import com.likemoney.utils.PasswordEncoder;
import com.likemoney.service.IEmployeeService;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
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.RestController;

import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;

import static com.likemoney.utils.HttpKit.getIp;

/**
 * @author gj
 * @date 2018/12/20
 */
@RestController
public class LoginController {
    private static final Logger log = LogManager.getLogger(LoginController.class);
    @Autowired
    private AuthenticationManager authenticationManager;
    @Autowired
    //对redis进行操作
    private RedisTemplate<String, Object> redisTemplate;
    @Autowired
    private IEmployeeService iEmployeeService;
    @Value("${jwt.header}")
    private String header;
    @CrossOrigin
    @PostMapping("/admin/login")
    public ResponseBean login(HttpServletResponse response, @RequestBody @Valid LoginUserForm userForm) {
        Employee employee = iEmployeeService.getByAccount(userForm.getUserName());
        //调用ProviderManager的authenticate方法进行验证（
//        实际是方法中调用类中的List<AuthenticationProvider> providers集合中的各个AuthenticationProvider接口实现类中的authenticate(Authentication authentication)方法进行验证），默认DaoAuthenticationProvider
//        认证通过返回带有权限信息的authentication，AuthenticationManager的实现类ProviderManager
        //获取账户信息和密码匹配都在该方法里，详见https://www.jianshu.com/p/32fa221e03b7
        final Authentication authentication = authenticationManager.authenticate(
                //UsernamePasswordAuthenticationToken的超父类是Authentication
                new UsernamePasswordAuthenticationToken(
                        userForm.getUserName(),
                        PasswordEncoder.encode(userForm.getPassword(), employee.getEmployeeBirthday().getTime())
                )
        );
        //验证通过则把用户权限信息封装到spring全局缓存SecurityContextHolder中
        SecurityContextHolder.getContext().setAuthentication(authentication);
        //getPrincipal()返回的其实是一个UserDetails的实例,UserDetails是Spring Security中一个核心的接口。其中定义了一些可以获取用户名、密码、权限等与认证相关的信息的方法
        //认证通过后会将该UserDetails赋给认证通过的Authentication的principal
        final SecurityUserDetails userDetails = (SecurityUserDetails) authentication.getPrincipal();

        String token = JwtTokenUtil.generateToken(userDetails);
        response.addHeader(header, token);
        userDetails.setToken(token);
        //opsForValue()操作字符串
        redisTemplate.opsForValue().set("auth" + employee.getEmployeePhone(), userDetails, 60L, java.util.concurrent.TimeUnit.MINUTES);
        com.likemoney.log.LogManager.me().executeLog(LogTaskFactory.loginLog(userDetails.getId(), getIp()));
        return new ResponseBean(200, "Login success");
    }

}

在这里返回的是一个JSON类对象，里面存JSON数据。贴上代码。

package com.likemoney.model;
/**
 * @author jgh
 * @date 2018/8/20
 */
public class ResponseBean {

    // http 状态码
    private int code;

    // 返回信息
    private String msg;

    // 返回的数据
    private Object data;

    public ResponseBean(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public ResponseBean(int code, String msg) {
        this.code = code;
        this.msg = msg;
    }

    public int getCode() {
        return code;
    }

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

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

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

随便输个账号密码测试，接收到后端传过来的json数据，测试成功，实现了参数传递功能。

好了，目前就只做到登录前后端分离了，后面可能会更新其他模块的博客（可能）。有什么问题欢迎大家在评论区互相交流！必答！