springboot+vue.js 做前后端分离开发,将Vue部署到nginx服务器上(本地电脑上的示范)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wolf_goat/article/details/81201370

       刚来公司实习,接到一个前后端分离的项目,我是做后端的,但是本着“万事懂一点儿”的精神,我还是找资料看了一下这到底是怎么个开发方式。

springboot和vue结合的方案网络上的主要有以下两种:

1. 【不推荐】在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发。

2.【推荐】使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部署后的vue router路由需要在nginx中配置rewrite规则。

 

因为当前的水平有限,我就先介绍一个位于两者中间的开发模式,单页面的开发模式。顾名思义,后台服务器只有一个页面:也就是Vue项目的入口。

首先聊聊后端,后端其实没有什么新的内容,创建一个springboot项目,创建一个负责页面跳转的controller,其他就没了,根据个人的项目来设计,这里仅仅是一个简单的demo。下图是我的项目架构,注意的是在application.yml 中配置端口(在这里我配置的是8088)

然后我们在聊聊前端,首先是创建一个Vue的项目,利用脚手架创建一个完整的项目,大致步骤如下:

  • 安装node.js
  • 安装淘宝镜像(不然会慢的一X)
  • 全局安装webpack cnpm install webpack -g
  • 全局安装vue-cli (cnpm install -g vue-cli)
  • (用webpack模板来创建一个vue项目)vue init webpack my-project
  • 安装项目依赖 cd my-project / cnpm install
  • 启动项目
  • 编译vue为静态文件(npm run build)

启动项目后,页面如下

注意打包后:npm run build 会在项目中出现dist 文件夹,文件夹中有编译后的样式文件和index.html(代码如下)

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>my-project</title>
  <link href=/static/css/app.cca059254702f9ed953b7df749673cf4.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.7fed9fa7b7ba482410b7.js></script>
<script type=text/javascript src=/static/js/app.f16ac5c624284d30f5af.js></script>
</body>
</html>

下面就是将Vue项目部署到nginx上,这里Vue项目可以停止了,Ctrl+C

部署的步骤很简单,下载ngnix到电脑上,修改nginx 的配置文件nginx.config里的server项,我的配置如下

listen 8080;是项目监听的端口,如果你改为8088;那么浏览器输入localhost:8088就会跳转到Vue项目的首页

location是项目的定位, root定位到项目所在文件夹,index定位到首页HTML。

当然这个location还有很多写法,能写出很强大的功能不过也很麻烦我还没有来的及去看。

到这里部署就结束了,在不启动本地项目的情况下,通过nginx的端口和地址即可以访问。

最后的步骤就是整合:这一步就是重点了

将刚才打包之后产生的dist 文件中static 文件下东西放在resource的static文件下,index.html放在template下

注意这个springboot项目和nginx的listen 一致,此时可以nginx s stop 停止服务,启动springboot项目既可以访问。(效果图如下)

到此,一个demo就做完了。

 

 

 

展开阅读全文

没有更多推荐了,返回首页