Spring boot 和Vue前后端分离

项目的技术：

• 前端–Vue.js
• 后端–SpringBoot2.0 + SSM框架
• 使用Nginx解决请求转接与跨域问题

项目源码地址：vue-springboot-demo

构建前端项目——Vue.js

1.安装nodejs

• 从nodejs官网(http://nodejs.cn/download/)下载安装包
• 选择对应版本安装（同时安装npm ），此处省略安装步骤
• 验证：使用node -v和npm -v来验证是否安装成功，若安装成功则会看到相应的版本信息。

2.安装cnpm

    安装cnpm是因为使用npm install安装包时速度很慢，所以建议安装cnpm后使用cnpm install来安装包。
    安装命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装vue-cli脚手架

cnpm install -g vue-cli

4.使用vue-cli创建项目

vue init webpack 项目名

在当前目录下生成以项目名命名的vue项目目录。

5.安装项目依赖

    上面脚手架自动生成的vue项目不能直接运行，需要加载上项目需要的依赖包才能运行。进入项目顶层目录输入命令 cnpm install安装项目所需的依赖包资源。（博主在下载第三方开源项目运行的时候，有时会遇到奇怪的报错，然后通过先执行cnpm rebuild node-sass，后执行cnpm install解决，此步骤不是必须的。）
    本项目需要执行命令cnpm install axios安装axios。

6.在已初始化的Vue项目中的进行二次开发

例子参考：vue项目

7.运行项目

    项目准备完毕后，现在可以运行vue初始项目看效果了。
在项目顶层目录下，输入命令npm run dev来运行项目。

8.浏览器访问项目

构建后端项目——SpringBoot + SSM

    例子用IDEA创建的SpringBoot项目，Maven管理依赖，MySQL作为数据库，Mybatis作为ORM框架，JSON传输数据。参考：ssm_demo
    若要启动该示例，首先需要建立ssm_demo数据库，导入项目下的user.sql表。

让前端访问后端接口&Nginx解决跨域问题

安装Nginx，Nginx配置如下：

server {
	    listen       8988;
        server_name  127.0.0.1;

        location / {
            proxy_pass http://127.0.0.1:8080;
        }
		
		location /api {
		    proxy_pass http://127.0.0.1:8060; #后端项目地址
			proxy_set_header Host $http_host;
		}
	  
	}

配置完成后，启动nginx。

一个完整的Demo

    分别启动ssm_demo(MySQL实例要启着)和vue_demo两个项目，再启动nginx即可。配置Nginx，使用Nginx配置中监听的端口（如示例中的8988）进行访问。