SpringBoot+Vue项⽬实战笔记（⼆）：前后端结合测试（登录页⾯开发）
前⾔：关于开发环境
每位 Coder 都有⾃⼰偏好的开发⼯具，从⼤的⽅⾯划分主要有⽂本编辑器流和 IDE 流两种，我有⼀段时间也喜欢⽤编辑器（Sublime Text、Vim），但对我来说开发效率确实不如使⽤ IDE ⾼，所以就放弃了。不过需要修改某⼀代码⽚段时，使⽤编辑器还是⽐较便捷的。
虽说⼤家可以按照⾃⼰的情况任意选择⼯具，但做教程只能顾及其中⼀种，所以不好意思了读者⼤⼈们。
我⽐较习惯⽤ IntelliJ IDEA，在 Java 后端⽅⾯地位没得说，然⽽我前端也是⽤它做的。。。说实话没感到有什么不妥当的地⽅，界⾯什么的都和 WebStorm 差不多，只要不是只⽤ Eclipse 的同学，应该不会觉得别扭。
（⽤ Eclipse 的同学，是时候尝试改变了 /⼿动狗头）
今天我测试了⼀下，按照项⽬的 README 运⾏基本没有问题，有兴趣的⼩伙伴可以搞⼀下，如果发现新的问题请在评论区指出，感谢。
⼀、后端项⽬创建
这个就很简单了。在 IDEA 中新建项⽬，选择 Spring Initializr，点击 Next
输⼊项⽬元数据，Next
选择 Web -> Web，Next
最后是项⽬名称和项⽬地址，Finish 后等待项⽬⾃动初始化即可。
运⾏ Application.java
访问 localhost:8080，发现弹出了错误页⾯，OK，这就对了，因为我们啥页⾯都没做啊。
⼆、登录页⾯开发
1.关于前后端结合
nginx部署前端项目注意我们的项⽬是前后端分离的，这⾥的结合意思不是就不分离了，是如何把这俩分离的项⽬串起来⽤。
前⾯提到过前后端分离的意思是前后端之间通过 RESTful API 传递 JSON 数据进⾏交流。不同于 JSP 之类，后端是不涉及页⾯本⾝的内容的。
在开发的时候，前端⽤前端的服务器（Nginx），后端⽤后端的服务器（Tomcat），当我开发前端内容的时候，可以把前端的请求通过前端服务器转发给后端（称为反向代理），这样就能实时观察结果，并且不需要知道后端怎么实现，⽽只需要知道接⼝提供的功能，两边的开发⼈员（两个我）就可以各司其职啦。
艾玛做⼀个完整的教程真不容易，遇到的每个知识点感觉都能讲⼀堆。上次的⽂章被⼀位⽼哥反问是不是太着急了，也不知道是什么意思，我⾃⼰反思可能是讲的不够细吧，这⾥我就再啰嗦⼀下讲两句正向代理和反向代理。
正向代理就是，你要访问⼀个⽹站，⽐如“⾕弟弟”，然后发现访问不到，于是你访问了⼀个能访问到“⾕弟弟”的代理服务器，让它帮你拿到你想浏览的页⾯。
反向代理就是，你访问了⼀个⽹站，你以为它是“⾕弟弟”，但其实它是“⾕”，“⾕”知道你其实是想她弟，就取回“⾕弟弟”的内容给你看。作为⽤户的你，是不知道有这个过程的，这么做是为了保护服务器，不暴露服务器的真实地址。
知乎上有张神图可以描述这两种过程
2.前端页⾯开发
⾸先我们开发登录页⾯组件，右键src\components⽂件夹，New -> Vue Component，命名为Login，如果没有 Vue Component 这个选项，可以选择新建⼀个 File，命名为Login.vue即可。代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。