Spring boot 和 Vue 前后端分离项目的启动部署(详细版)

一、首先拿到spring boot + vue项目,可以从git 上获取到

  1. spring boot 项目导入idea中启动,运行mian函数启动项目(tomcat端口改为80)

二、安装node(最新版)https://nodejs.org/en/download/(具体安装过程,查百度)

  1. 测试node和cpm是否成功
    1. 打开黑窗口(win键+x)点击:命令提示符管理员(必须以管理员运行)。
    2. 输入node -v  npm -v 
    3. 出现版本号为成功。

三、安装完node以后,黑窗口进入vue项目根路径下。

  1. 运行命令:npm  install   (下载必须的依赖,如果报错了就是node环境有问题,查百度重新搭环境)
  2. 运行完上面的命令以后在执行 : npm run build   (这个命令是打包)
  3. 出现这个说明已经打包成功:
  4. 成功以后你的vue项目下会出现一个dist的文件夹。
  5. 打包好vue项目以后,留着dist文件一会用到。

三、准备开始部署。

  1. 首先下载nginx服务器(我的nginx是安装到linux系统的,具体安装请自己查资料)
  2. 安装好nginx以后,在nginx下随便创建一个文件夹,然后把刚才dist里面的所有文件全部放到你刚在nginx下创建的文件夹里面,然后开始配置nginx(配置文件位置:nginx/conf/nginx.conf)
  3. 然后 vim nginx.conf (编辑这个文件)root:后面改成自己存放dist内容的文件路径, index:后面是固定的
  4. 配置完以后按esc 后   在按shirt+zz 退出保存。
  5. 然后到nginx目录下的sbin中启动nginx服务器 
  6. 启动:./nginx    重启:./nginx -s reload
  7. 好了现在已经把vue项目部署完了,接下来就是解决跨域问题。

四、处理跨域问题(因为俩个代码不在一个服务器中,vue项目在linux中,springboot项目在本地)

  1. 首先下载一个 SwitchHosts 工具。
  2. 打开(右键以管理员身份运行)
  3. 这个窗口让留着,别关掉,接下来就是修改你vue项目的请求路径了(很重要的一步)。
  4. 修改完以后,吧原来你在nginx下目录中的存放dist的文件删除(三个文件全部删除)然后重新按照上班的打包,在放进去然后在重启nginx。
  5. 然后运行vue项目,然后就可以正常拿到数据了。
展开阅读全文

SpringBoot实战教程:SpringBoot入门及前后分离项目开发

08-02
课程的实战源码是我在 GitHub 上开源项目 spring-boot-projects 中的其中一个项目代码,目前已有 2300 多个 star,项目截图如下: 由于项目比较受大家欢迎,因此心中就出现了将它做成教学视频的想法,也就是你现在了解的这个课程《SpringBoot入门及前后分离项目开发》,本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发。Spring Boot 介绍、前后分离、API 规范等内容旨在让读者更加熟悉 SpringBoot 及企业开发中需要注意的事项并具有使用 SpringBoot 技术进行基本功能开发的能力;这最后的项目实战为课程的主要部分,我会带着大家实际的开发一个前后分离Spring Boot 实践项目,让大家实际操作并从无到有开发一个线上项目,并学习到一定的开发经验以及其中的开发技巧,旨在让读者具有将 Spring Boot 真正应用于项目开发的能力; 以下为实践项目的页面和功能展示,分别为: 登录页面 列表页面(分页功能) 图片上传功能 富文本编辑器整合使用 实践项目的主要功能和页面就是这些,通过项目展示大家也能够感受到,在实际应用开发中的高频次功能都已经实现,稍加修改就可以运用到企业开发中,整个项目的开发模式为前后分离的模式,即 Spring Boot 提供后接口,前页面通过 Ajax 异步调用接口的方式与后服务器进行交互并将数据填充至页面中,这也是目前企业开发中比较重用的开发模式,希望大家能够了解并且能够实际的上手开发。

Springboot+Vue前后的分离整合项目实战

09-09
适用人群 Java开发人员,Vue开发人员,前后分离开发人员,权限管理和配置开发人员 课程概述 【讲师介绍】 讲师职称:               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。  【课程介绍】 技术选型 开发环境:Eclipse/Idea ,JDK 1.8以上  后技术 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F本以后的本),如下(节选):     持久层框架:MyBatis 3.x + Mybatis-plus 3.x 日志管理:SLF4J 1.7 + Log4j2 2.7 工具类:Apache Commons、Jackson 、fastjson、Gson 权限验证 前技术   Vue   Vue-cli ElementUI ---https://element.eleme.io/ JSX (JavaScript Xml) 前台的权限验证和路由设置 开发模式        前后分离的开发 数据库        Mysql5 IDE     Intellij Idea

Springboot+Vue+Shiro+ElementUI前后分离权限快速上手项目实战开发

09-09
适用人群 Java开发人员,Vue开发人员,前后分离开发人员,权限管理和配置开发人员 课程概述 【讲师介绍】 讲师职称:               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。  【课程介绍】 技术选型 开发环境:Eclipse/Idea ,JDK 1.8以上  后技术 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F本以后的本),如下(节选):     持久层框架:MyBatis 3.x + Mybatis-plus 3.x 日志管理:SLF4J 1.7 + Log4j2 2.7 工具类:Apache Commons、Jackson 、fastjson、Gson 权限验证 前技术   Vue   Vue-cli ElementUI ---https://element.eleme.io/ JSX (JavaScript Xml) 前台的权限验证和路由设置 开发模式        前后分离的开发 数据库        Mysql5 IDE     Intellij Idea
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值