一、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命令和工具都可以在上面直接使用,让远程操控变的异常顺滑。
- 管理员模式:这个要说一下,因为我们是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目录,一旦有变化,自动打包。
总结
好了,最近一段时间的学习积累就这么多,后面要正式开始界面搭建了。希望一切顺利~