搭建前后端分离项目

一、前端VUE项目（WebStorm）
1、首先进入vue项目路径

2、执行命令vue init webpack javalsj-vue

3、cd进入项目文件夹，并执行命令cnpm install
4、通过命令npm run dev运行项目

5、浏览器中输入cmd提示的端口测试访问


6、测试完毕后ctrl+c停止服务，执行cnpm install axios安装axios
7、编写项目代码

BlogHeader.vue

<template>
    <div>
        页面头部
    </div>
</template>

<script>
export default {
  name: 'BlogHeader'
}
</script>

BlogFooter.vue

<template>
    <div>
        页面尾部
    </div>
</template>

<script>
export default {
  name: 'BlogFooter'
}
</script>

BlogLogin.vue

<template>
  <div>
    <blog-header></blog-header>
    <hr/>
    <div>
      用户名:<input type="text" v-model="loginInfoVo.username" placeholder="请输入用户名" />
      <br/>
      密码：<input type="password" v-model="loginInfoVo.password" placeholder="请输入密码" />
      <br/>
      <button v-on:click="login">登录</button>
      <br/>
      登录验证情况：<textarea cols="30" rows="10" v-model="responseResult"></textarea>
    </div>
    <hr/>
    <blog-footer></blog-footer>
  </div>
</template>

<script>
import blogHeader from '@/components/common/BlogHeader.vue'
import blogFooter from '@/components/common/BlogFooter.vue'

export default {
  name: 'BlogLogin',
  // blogHeader、blogFooter组件给申明到components里面然后在template里面使用
  components: { blogHeader, blogFooter },
  data () {
    return {
      loginInfoVo: { username: '', password: '' },
      responseResult: []
    }
  },
  methods: {
    login () {
      this.$axios
        .post('/login', {
          username: this.loginInfoVo.username,
          password: this.loginInfoVo.password
        })
        .then(successResponse => {
          this.responseResult = JSON.stringify(successResponse.data)
          if (successResponse.data.code === 200) {
            this.$router.replace({path: '/index'})
          }
        })
        .catch(failResponse => {})
    }
  }
}
</script>

BlogIndex.vue

<template>
  <div>
    <blog-header></blog-header>
    <hr/>
    <div>
      这是首页，嘻嘻嘻。
    </div>
    <hr/>
    <blog-footer></blog-footer>
  </div>
</template>

<script>
import blogHeader from '@/components/common/BlogHeader.vue'
import blogFooter from '@/components/common/BlogFooter.vue'

export default {
  name: 'BlogIndex',
  // blogHeader/blogFooter组件给申明到components里面然后在template里面使用
  components: { blogHeader, blogFooter }
}
</script>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 引用axios，并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = 'https://localhost:8443/api'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import BlogLogin from '@/components/manage/BlogLogin.vue'
import BlogIndex from '@/components/home/BlogIndex.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/index',
      name: 'BlogIndex',
      component: BlogIndex
    },
    {
      path: '/manage',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'BlogLogin',
      component: BlogLogin
    }
  ]
})

config/index.js(修改proxyTable内容)

// 路由接口代理配置
proxyTable: {
  '/api': {
    target: 'https://localhost:8443',
    changeOrigin: true,
    pathRewrite: {
        '^/api': ''
    }
  }
}

8、运行程序看效果

二、后端SpringBoot项目（IEDA）
1、初始化SpringBoot项目
2、编写项目代码

VueLoginInfoVo.java

package com.javalsj.blog.pojo.vo;

/**
 * @description Vue登录页面demo信息对象实体
 */
public class VueLoginInfoVo {

	private String username;

	private String password;

	public String getUsername() {
		return username;
	}

	public String getPassword() {
		return password;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public void setPassword(String password) {
		this.password = password;
	}

}

Result.java

package com.javalsj.blog.result;

/**
 * @description 统一 API响应结果封装
 */
public class Result {
	/**
	 * 响应状态码
	 */
	private int code;
	/**
	 * 响应提示信息
	 */
	private String message;
	/**
	 * 响应结果对象
	 */
	private Object data;

	Result(int code, String message, Object data) {
		this.code = code;
		this.message = message;
		this.data = data;
	}

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

}

ResultCode

package com.javalsj.blog.result;

/**
 * @description 响应码枚举，参考 HTTP状态码的语义
 */
public enum ResultCode {
	/**
	 * 成功
	 */
	SUCCESS(200),
	/**
	 * 失败
	 */
	FAIL(400),

	/**
	 * 未认证（签名错误）
	 */
	UNAUTHORIZED(401),

	/**
	 * 接口不存在
	 */
	NOT_FOUND(404),

	/**
	 * 服务器内部错误
	 */
	INTERNAL_SERVER_ERROR(500);

	public int code;

	ResultCode(int code) {
		this.code = code;
	}

}

ResultFactory.java

package com.javalsj.blog.result;

/**
 * @description 响应结果生成工厂类
 */
public class ResultFactory {

	public static Result buildSuccessResult(Object data) {
		return buidResult(ResultCode.SUCCESS, "成功", data);
	}

	public static Result buildFailResult(String message) {
		return buidResult(ResultCode.FAIL, message, null);
	}

	public static Result buidResult(ResultCode resultCode, String message, Object data) {
		return buidResult(resultCode.code, message, data);
	}

	public static Result buidResult(int resultCode, String message, Object data) {
		return new Result(resultCode, message, data);
	}
}

LoginController.java

package com.javalsj.blog.controller;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.javalsj.blog.pojo.vo.VueLoginInfoVo;
import com.javalsj.blog.result.Result;
import com.javalsj.blog.result.ResultFactory;

import java.util.Objects;

@Controller
public class LoginController {

	/**
	 * 登录控制器，前后端分离用的不同协议和端口，所以需要加入@CrossOrigin支持跨域。
	 * 给VueLoginInfoVo对象加入@Valid注解，并在参数中加入BindingResult来获取错误信息。
	 * 在逻辑处理中我们判断BindingResult知否含有错误信息，如果有错误信息，则直接返回错误信息。
	 */
	@CrossOrigin
	@RequestMapping(value = "/api/login", method = RequestMethod.POST, produces = "application/json; charset=UTF-8")
	@ResponseBody
	public Result login(@RequestBody VueLoginInfoVo loginInfoVo, BindingResult bindingResult) {
		if (bindingResult.hasErrors()) {
			String message = String.format("登陆失败，详细信息[%s]。", bindingResult.getFieldError().getDefaultMessage());
			return ResultFactory.buildFailResult(message);
		}
		if (!Objects.equals("javalsj", loginInfoVo.getUsername()) || !Objects.equals("123456", loginInfoVo.getPassword())) {
			String message = String.format("登陆失败，详细信息[用户名、密码信息不正确]。");
			return ResultFactory.buildFailResult(message);
		}
		return ResultFactory.buildSuccessResult("登陆成功。");
	}
}

3、阿里云获取域名和SSL证书