喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

其实这两个项目当时刚做好的时候，我就把它们部署到服务器上了，以帮助小伙伴们更好的查看效果。但是那个是一台国外服务器，之所以购买国外服务器，主要是嫌国内备案麻烦，当然也有其他大家都懂的原因。

国外服务器有方便的地方，同时也有很多不便，例如网络不稳，随时有失联的风险。所以我在 2018 年年初，虽然把这两个项目都部署在服务器上，但是很多小伙伴的访问体验都不好，主要还是网络的问题。后来一段时间，经过几轮围剿与反围剿，这台服务器就彻底和松哥失联了。

失联之后，因为工作比较忙，我也就懒得去折腾了，所以导致微人事和 V 部落大家在很长一段时间内无法在线查看效果。

2. 重新上线

---

最近因为有一些其他的计划，于是购买了阿里云服务，完事之后就是备案，所有东西都搞定之后，想着先把微人事和 V 部落部署起来，方便大家查看效果。

说干就干，我首先规划了两个二级域名：

• vblog.itboyhub.com

• vhr.itboyhub.com

这两个二级域名分别用来部署 V 部落和微人事。

大家可以通过这两个地址查看效果：

微人事

V 部落

为了确保每位小伙伴都能看到完整的演示效果，防止有的小伙伴不慎把所有数据清空了，导致其他小伙伴啥都看不到，我只开通了演示账户的查询和部分字段的更新权限，因此大家在查看演示效果时，可能会有一些涉及到增删改的操作会执行失败，请勿见怪，将项目部署到本地运行之后，就可以查看完整效果了。

3. 技能树

---

既然都写到这儿了，就和大家聊一聊这两个部署是怎么实现的。

3.1 部署方案选择

大家知道前后端分离部署的时候，我们有两种不同的方案：

• 一种就是将前端项目打包编译之后，放到后端项目中（例如 Spring Boot 项目的 src/main/resources/static 目录下）

• 另外一种则是将前端打包之后的静态资源用 Nginx 来部署，后端单独部署只需要单纯的提供接口即可。

一般在公司项目中，我们更多的是采用后者。不过松哥这里部署为了省事，我采用了第一种方案。（以后抽空我会和大家聊聊第二种部署方案）

3.2 域名映射

域名映射这块简单，登录阿里云后台，添加两个 A 记录即可。

3.3 启动 Spring Boot

将微人事和 V 部落分别打包上传到服务器，这个过程应该就不用我多说了吧，然后分别启动这两个项目，两个项目的默认端口分别是 8081 和 8082，命令如下：

nohup java -jar vblog.jar > vblog.log &

nohup java -jar vhr.jar > vhr.log &

将两个项目的运行日志分别写入到 vblog.log 和 vhr.log 文件中。

启动成功之后，我们就可以通过 itboyhub.com:8081 和 itboyhub.com:8082 两个端口来分别访问这两个项目了。但是这还没达到松哥的目标，我想通过二级域名来访问，并且想通过 80 端口来访问，这就要借助 Nginx 了。

注意

启动完成后，大家需要登录阿里云后台，确认 8081 和 8082 端口已经开启。

3.4 Nginx 配置

Nginx 的基本用法，大家可以参考松哥的这篇旧文：

• Nginx 极简入门教程！

这里我们主要来看看 Nginx 的配置。

由于有两个二级域名，而且未来服务器还要配置其他域名，因此域名要能够做到动态解析，因此在具体配置如下：

server {

listen 80;

server_name *.itboyhub.com;

if ($htt{p}_{h}ost\ast {"}^{(}.\ast ?)\dot{i}tboyhub\dot{c}om$") {

set $domain $1;

}

其他配置…

}

• 首先监听的端口为 80

• 二级域名则用一个通配符 * 代替

• 接下来在 if 语句用，通过正则表达式提取出二级域名的名字，交给变量 $domain，以备后用。

接下来配置转发规则：

location / {

if ($domain ~* “vhr”) {

proxy_pass http://itboyhub.com:8082;

}

if ($domain ~* “vblog”) {

proxy_pass http://itboyhub.com:8081;

}

tcp_nodelay on;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

index index.html;

}

• 当定义的 $domain 中包含 vhr 字符时，将请求转发到 http://itboyhub.com:8082

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

前端面试题汇总

JavaScript

前端资料汇总