springboot+vue+nginx简单实现前后端分离

转载:https://www.toutiao.com/i6670849596903653902/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1&timestamp=1553332095&app=news_article&utm_source=weixin&utm_medium=toutiao_android&group_id=6670849596903653902

 

目前软件架构都比较流行前后端分离,前后端的分离也实现了前后端架构的分离,带来的好处 —— 整个项目的开发权重往前移,实现真正的前后端解耦,动态资源和静态资源分离,提高了性能和扩展性。

SpringBoot与vue 进行前后端分离,主要有这么两种方式:

⑴ 利用vue项目 打包(npm run build命令)出来的dist文件夹拷贝到springboot项目的static 文件目录。

⑵ 利用 nginx 的反向代理,不用将dist目录拷贝到static文件目录下。

第一种方式网上教程比较多,我着重讲一下第二种。。。

  1. 开始进行创建Vue项目,假定你已经安装好了npm,安装vue脚手架 vue-cli.

springboot+vue+nginx简单实现前后端分离

 

2.我安装的vue-cli版本是3.0以上版本,使用 vue-cli自带的图形化界面命令 vue ui创建项目,简单直接。

springboot+vue+nginx简单实现前后端分离

 

springboot+vue+nginx简单实现前后端分离

 

3.创建好vue项目之后,执行web界面任务-运行按钮,执行打包,生成dist目录。

springboot+vue+nginx简单实现前后端分离

 

4.建立简单的 springboot项目,设置端口号为9090,如下:

springboot+vue+nginx简单实现前后端分离

 

springboot+vue+nginx简单实现前后端分离

 

5.将打包好的dist目录路径 部署到nginx中,怎么安装部署nginx这里就不说了(自行百度)。打开nginx目录,nginxconf ginx.conf 文件 ,配置如下:

springboot+vue+nginx简单实现前后端分离

 

项目运行效果:

springboot+vue+nginx简单实现前后端分离

 

springboot+vue+nginx简单实现前后端分离

 

这样,一个简单的前后端分离demo就整合完成了。