Laravel-Vue开发初探一：技术栈分析

倪德业

2023-12-01

一、Web开发原理

我本身是个Unity手游全栈程序员，所以这里很多知识点，我会用手游开发的原理去类比。
和手游类似，Web开发也分为前端和后端。

1. 前端

前端负责界面搭建和界面中的逻辑实现，和美术对接--类似于Unity程序员
需要使用的技术包括但不限于

HTML – 负责基本显示元素，就是都有啥
CSS – 负责设定HTML里显示元素的具体属性，比如颜色，大小，布局等，就是长啥样
JS – 可以通过逻辑控制任何显示元素的动态变化，就是干啥事

上面就是Web前端开发的三驾马车，缺一不可。
当然，这些东西就像是最原始的C语言，你可以用，但是为了避免自己重新造轮子，就要用到std::class/boost之类流行的框架和库，来帮我们封装基础功能，节省时间：

Vue – 基于JS的前端框架，给我感觉很像是Unity的GUI框架，帮我们实现了脚本和显示元素的绑定，能通过简单的模板语法，来控制HTML和CSS的具体布局。
TailwindCSS – 这个正准备学一下，大概了解下，就是CSS的框架，帮我们定制完善的CSS样式的，毕竟，要自己去实现一个拖动/下来条之类的效果，还是费不少劲。

2. 后端

后端负责提供数据返回和DB操作，类似于C++/Java/PHP等服务器程序员
需要使用到的技术包括但不限于

PHP – 后端语言比较单纯，PHP什么都能干了，操作DB，组装数据，算法逻辑等等
Mysql
Linux
Nginx – 这里涉及到一个问题，就是前端和后端使用什么来通信。Nginx就是帮我们将前端和后端联系到一起的代理。前端的网络请求，先要送达Nginx，经过解析，才能送到到后端。有点像是Socket链接里的Socket Server，本身不负责逻辑，只负责协议转发。
Laravel – PHP虽然足够好用，但是框架的魅力就是它天然的帮我们做到完全解耦。另外，这是一个生态圈，很多开箱即用的附加服务，也是新手上车的最好Demo。比如我这里用的JetStream。我就不需要自己再去实现一个登录系统了。
NodeJS – 基于JS的后端框架。增加了JS人员的就业范围，哈哈。前端用到了Vue，所以我就大概看了看NodeJS的内容，实际上永不太到，当然也有过一刻心动–要是后端用NodeJS，岂不是一门语言就打天下了？可以JS还不太熟悉，以后有机会可以试试。

3. 其他

其他就是一些在学习Laravel Demo的过程中，接触到的辅助技术。
不是必须，但是了解后会对这个开发流程有更清晰的认识。

Vagrant/Homestead – 毕竟是Windows开发，所以虚拟机必不可少
Docker – 这是个偶然的机会让我知道了它。我之前还在愁，Web开发需要用到这么多的服务，如果真要量产实装，甚至无网络环境，该如何是好。Docker完美的解决了这个问题~
GitBash – 这是个很好用的控制台工具，可以完美替代Win的CMD，关键是很多Linux命令和工具都可以在上面直接使用，让远程操控变的异常顺滑。
1. 管理员模式：这个要说一下，因为我们是Win -> SSH -> Linux(虚拟机)，所以后面有些工具如NPM，就会遇到Permission相关问题。要么每个命令都加前缀sudo提权，要么，简单点，就用管理员模式打开GitBash就行了~
composer – PHP用来管理工具包的工具

开源的魅力就是，人家造好的轮子，我们拿来用就行了。Laravel本身也是composer提供的众多工具包的其中一个。

这里介绍个文件：composer.json

这里记录了你的工程需要依赖的所有工具，我们执行composer require xxx命令后，这个文件中就会记录对应的包名，然后顺便下载对应的代码，安装到工程的vender目录

如果你不小心删除了vender目录里的东西，不要紧，执行下composer install --no-plugins，文件就会被重新下载回来。这就是这个文件的作用。

说下可能遇到的问题：

$ composer require doctrine/dbal
Plugin initialization failed

Windows虚拟机执行的时候会遇到软连接一类的bug，所以这里需要改变执行命令

$ composer require doctrine/dbal --no-plugins
或者
$ composer install --no-plugins

npm – NodeJS用来管理工具包的工具
也是开源产品的集大成者。
这里也有类似的文件：package.json
它对应的命令是: npm install xxx --no-bin-links
它对应的安装目录是node_modules
重新将依赖文件下载到本地的命令是npm install --no-bin-links，不加模块名就行了

可能遇到的问题一：

$ npm install
syscall symlink Error......

仍然是软连接的问题

$ npm install --no-bin-links

可能遇到的问题二：

$ npm install --no-bin-links
permisstion denied ...

权限问题，要么用上文GitBash说的管理员模式，要么加前缀sudo

$ sudo npm install --no-bin-links

可能遇到的问题三：

$ npm run dev
sh: 1: node_modules/webpack/bin/webpack.js: not found

这就是依赖丢文件了，先试试npm install
如果不起作用，那么就全清掉重来吧：

$ rm -rf node_modules/
$ rm package-lock.json -f
$ npm cache clear --force
$ npm install -D --no-bin-links

然后问题解决：
$ npm run dev
$ npm run watch-poll

Git/SourceTree – 版本管理工具，推荐上码云，Github实在太慢
这里有个文件介绍下：.gitignore

如果你已经将整个工程下载下来，想必你也发现，vender和node_modules这两个目录里，依赖真TM多啊，文件数至少2W+

这么多的文件，要是用Git去管理，每次更新岂不是累死。

而聪明的你应该已经发现，这两个目录恰恰不需要去版本控制，我们只需要保存好
composer.json 和 package.json，然后用各自的install命令去更新官方的库不就行了？

所以，我们可以在这个.gitignore文件里加上我们想要过滤的版本控制目录

/node_modules/
/vendor/

搞定！

PHPStorm
这个工具没啥说的，只是有个问题需要注意下，各位有可能遇到这个报错：

$ npm run dev
   node\r file not found ...

这个问题困扰了我好久：
windows的换行符是\r\n(CRLF)， Mac/Linux是\n(LF)
因为我们在Linux下执行命令，所以如果被执行文件中有\r，就会导致上面的错误
解决方法：

PHPStorm点击工程根路径
-> File -> File Properties -> Line Separators -> LF

这个单独拿出来说

二、通信原理

1. 传统HTTP请求

传统的网页通信流程，应该是下面流程的一个循环

浏览器输入URL
DNS (Domain Name System) 解析
TCP (Transmission Control Protocol) 链接
HTTP (HyperText Transfer Protocol) 请求
服务器返回HTML内容
HTML解析 & CSS渲染
JS 解析执行

每当用户在浏览器上点击一个新连接，都要完成上面的所有步骤，最直观的体验就是，每次浏览器都要空白一下。

2. SPA

我是一个搬运工：
　　单页Web应用（single page web application, SPA）,就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序，是指在浏览器中运行的应用，在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。
　　
　　速度：更好的用户体验，让用户在web app感受native app的速度和流畅，
　　MVC：经典MVC开发模式，前后端各负其责，后端只需要提供数据接口
　　AJAX：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。
　　路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载，这个也就是哈希。

Vue本身就是这样一个框架。说白了，就是用户打开我们的首页的时候，我们就已经把所有的页面代码都给它了。之后，前端只会发送AJAX异步请求，后端也不会再返回整个Web页面，而是通过API的方式，返回Json数据而已。

3. Inertia

SPA的缺点其他还好，就是第一次打开因为要返回所有页面数据，这个本身会比较费。所以Laravel8使用的Jetstream，集成了Inertia。
简单说，它就是把每个页面的数据单独返回，同事，又不会重新load整个页面。兼顾了两者。

4. Laravel-mix

这个要单独拎出来说一下，是因为我被他坑了一下。发现自己无论怎么改代码，刷新测试页面都没啥变化，直到我理解了webpack的用处。

Unity客户端也好，Web前端也好，都有打包的概念，说白了，就是压缩资源大小，减少用户等待时间。

所以我之前改了没用，就是因为客户端使用的和我写的，是两个文件。。

Laravel-mix框架下，我们编辑的文件都在resource目录下，而客户端访问的文件，都在public目录下。前后端开发分离后，我们编写的文件，必须要生成到public后，才能真正生效。

4.1 工具

结合前面说的打包概念，Laravel-mix闪亮登场！

先说下这个文件webpack.mix.js，这里记录了我们需要打包的文件（应该只需要入口文件，因为webpack可以帮我们找到依赖关系）
所以你自己增加的测试入口，需要在这里配置好。

然后就是这个命令npm run dev,它的作用，是帮我们运行文件package.json::scripts::dev里的命令

npm run  NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

它的作用，就是利用webpack脚本，帮我们把resource目录里的内容，打包到public中

4.2 问题

我要经常改代码，那怎么办，每次改完都要去重新运行一次npm run dev？
理论上是的，不过它给我们提供了更好的方式：npm run watch-poll
很简单，就是执行一个不退出的监控进程，实时检查我们的resource目录，一旦有变化，自动打包。

总结

好了，最近一段时间的学习积累就这么多，后面要正式开始界面搭建了。希望一切顺利~