Spring Boot + Vue前后端分离(一)前端Vue环境搭建

你好,【程序职场】专注于:Spring Boot ,微服务 和 前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索 副业赚钱渠道,在提升技术的同时我们一起交流 敏捷流程 提高工作效率,从技术到管理一步步提升自我!
 
标签:一个执着的职场程序员!

前后端分离已经成为互联网项目开发的主流使用方式。

通过 nginx + Tomcat 的方式,中间加一个 nodejs有效的进行解耦,并且前后端分离会为以后的大型分布式架构,弹性计算架构,微服务架构,多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等)打下坚实的基础。

这个步骤也是一种进化之路。

我的开源项目  一点知识学院  技术是spring boot +easyui ,但是不是前后端分离的,ui界面还是有点旧了,有些朋友说是否可以更换一套ui,还有朋友在学习的时候说能不能做成前后端分离。

这个当然会满足支持我的朋友,为了能更好的做好前后端分离,我也做了很多准备,从项目的需求,到原型图,再到选择框架技术,最终决定从现在搞起前后端分离的技术,并且不定时的更新有关的技能,最后会开源一个项目,和一点知识学院一样 会是一个完整的项目,拿来即用的那种,希望对大家有帮助,也多谢大家的支持。

说到前后端分类,我们需要了解它的有点,就是我们为什么使用前后端分离?

有一下几点,可能会更多,但是目前我看到的几点如下:

  1. 可以实现真正的前后端解耦,前端服务器使用 nginx。

  2. 发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。

  3. 在大并发情况下,可以同时水平扩展前后端服务器

  4. 减少后端服务器的并发/负载压力。

  5. 即使后端服务器暂时超时或者宕机了,前端页面也会正常访问,只不过数据显示不出来而已。

  6. 接口可以公用

  7. 页面显示的东西再多也不怕,因为是异步加载。

  8. nginx 支持热部署,不用重启服务器,前端无缝升级。

  9. 增加代码的维护性&易读性(前后端耦合在一起的代码读起来相当费劲)

  10. 提升开发效率,因为可以前后端并行开发,而不是像以前的强依赖

  11. 在nginx 中部署证书,外网使用http访问,并且只开发443和80端口,其他端口一律关闭(防止黑客户端口扫描),内网使用http,性能和安全都有保障

  12. 前端大量的组件代码得以复用!

目录:
1,安装node.js

2,安装cnpm

3,cnpm安装脚手架vue-cli

4,构建项目

5,安装项目依赖

6,运行项目

下面我们开启我们的vue学习之旅吧!!!
1,安装node.js

首先 进入Node.js官网:https://nodejs.org/en/,选择需要的版本下载并安装Node.js。

 

 

下载后文件格式如下:

 

#安装Node

 

 

 

#验证Node.js是否安装好

打开cmd命令行窗口。输入node -v即可得到对应的Node.js版本。

 

npm包管理器是集成在Node.js中的,所以在安装Node.js的时候就已经自带了npm,输入npm -v可得到npm的版本。

如果需要将 npm版本更新到最新版本,可以输入以下命令npm -g install npm,更新npm至最新版本。

2,安装cnpm

安装 cnpm 执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org , 国内镜像(npm 国内镜像 https://npm.taobao.org/)cnpm 命令代替默认的npm命令,赖包加载速度快并且没有任何限制。

3,cnpm安装脚手架vue-cli

为什么使用脚手架?
vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK。

在命令行中运行命令 cnpm install -g vue-cli 安装脚手架。


4,构建项目

好了,上面的几个需要的工具和环境已经配置好了,下一步我们需要构建项目了。

构建项目分如下几步:
1,进入项目需要存储的路径目录下,
2,输入新建项目命令 vue init webpack test-vue,执行后会自动生成vue项目。

效果如下:
进入项目目录。

创建项目

5,安装项目依赖

安装项目依赖用以项目的开发,很简单一样命令搞定。

首先进入到项目目录下 ,然后输入命令 cnpm install 安装项目所需的依赖包资源。

6,运行项目

项目准备完毕后,输入命令npm run dev 来运行项目

项目运行成功后浏览器访问地址 http://localhost:8080 就可以啦。

 

好的,vue的环境搭建到这里就ok了,后面就可以和springboot后端框架做前后端分离了,期待下篇。。。

 

作者:小小蒲公英

展开阅读全文

Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值