股票场内基金交易,没时间盯盘?
说明
开发环境:windows 7
laravel版本: 5+
IDE: phpstorm
想从安装步骤的点滴找问题的所在
从这里说起
按照 core/readme.md 跑了一遍,发现很多不明白的地方。 问题有几个: gulp watch 之后
- 3000 端口和 3001 端口是什么关系?
- gulpfile.php 文件中的 proxy: ‘localhost:8000’ 这个 8000 端口又是什么?
- nginx 配置的 8001 端口又算什么?
- 3000 为什么访问不了? 3001 可以,8001 可以,8000 不可以,为什么?
唯一熟悉的是 8001 端口,这是对外访问服务器的端口。但是端口众多,以为 8001 被其他端口代理访问了。在 gulp watch 之前就有好多命令不知其然,比如 npm 、 bower 、 gulp 的关系。这些命令虽然都磕磕绊绊能执行完,但并不知道他们在做什么,只有控制台不断滚动的 information 和最后的停止没有报错就完事。这些问题和疑问交织在一起很烦人,还是有理一理的必要。
npm
npm 全称 Node Package Manager 。 npm 是伴随 nodejs 出现的一个包管理器,最开始只能支持 Node.js 的模块管理,但是后来, npm 官网经过一次改版,打出的口号是,javascript 的包管理器。所以,其已经不在局限于是 nodejs 。所以 nodejs 是一个前后全能型的 web 框架。摘自《bower 和 npm 的区别》
使用 npm 管理项目,一般工程目录下会有一个名为 package.json 的 json 格式文件,该文件定义了工程的名称、作者、仓库地址、开发时依赖的模块,该工程的使用版本等等。
gulp 和 bower
bower 用来下载项目依赖的 css 和 js,算是前端的包管理工具吧。
gulp 用于前端项目自动化工作流,如监控程序文件变化,检查 js 代码正确性,压缩 js ,源码转换到发布目录,启动 web 服务测试等等。一種常見應用是讓 Gulp 透過 watch 監看目錄,一旦檔案發生異動,就立即啟動編譯、打包等動作,實現連續整合的目標。 bower 与 npm 的区别可以看下这里的图。
gulpfile.php,这里放些 gulp 要做的任务、事儿、活儿。
elixir
打开 gulpfile.php 看到有 elixir ,查了一下,官网是这么说的:
Laravel Elixir 提供了简洁流畅的 API,让你能够为你的 Laravel 应用程序定义基本的 Gulp 任务。Elixir 支持许多常见的 CSS 与 JavaScrtip 预处理器,甚至包含了测试工具。
也就是 laravel 框架里有一个帮 gulp 做任务的工具,叫 Elixir 。 具体看一下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
elixir(function (mix) { mix .vendor() .angular('./angular/') .less('./angular/**/*.less', 'public/css') .copy('./angular/app/**/*.html', 'public/views/app/') .copy('./angular/directives/**/*.html', 'public/views/directives/') .copy('./angular/dialogs/**/*.html', 'public/views/dialogs/') .copy('./bower_components/font-awesome/fonts', 'public/fonts') .copy('./bower_components/bootstrap/fonts', 'public/fonts') .browserSync({ files: [ 'public/js/vendor.js', 'public/js/app.js', 'public/css/vendor.css', 'public/css/app.css', 'public/views/**/*.html' ], proxy: 'localhost:8001/index.php', logPrefix: "Laravel Eixir BrowserSync", logConnections: false, reloadOnRestart: false, notify: false, open: false }) .phpUnit(); }) |
第一行是 vender() ,这个是在 composer install 之后生成的 vender 目录。 composer 是 laravel 框架的包管理器,所以vender() 里面应该也有需要处理的 css 或者 js ,也就是也有任务需要处理,所在在这里统一进行处理。
第二行是处理 angular 文件夹里的东西。
第三行是将 angular 文件夹里的 .less 文件编译成 .css ,并放到 public/css/ 目录下。
第四-八行就是复制东西,复制 angular 目录下的 html 和 font 字体到 public 目录各自的归属目录。
第九行是下一小节要说的 browsersync 。
第十行是进行 phpunit 单元测试。
browsersync
browserSync是个前端神器,打开官网,可以了解到它的作用。正如其名“浏览器同步”,具体来说就是当你修改了 browserSync 所监视的文件,那么就会实时显示到浏览器上。
我们配置 browserSync 是基于 gulp 的,打开这个文档,它有具体的配置过程,然后我看到一段配置:
1 2 3 4 5 6 7 |
gulp.task('browser-sync', function() { browserSync.init({ proxy: "你的域名或IP" }); }); |
而我们的 gulpfile.php 中的 proxy 是 8000 ,这哪儿是 browsersync 要代理的地方!!我们这里应该修改成 localhost:8001/index.php ,这才是需要被代理的地址!!
然后接着看文档:
动态网站
如果您已经有其他本地服务器环境 PHP 或类似的,您需要使用代理模式。 BrowserSync 将通过代理URL(localhost:3000)来查看您的网站。
原来3000是默认的。
解答疑问
- 3000端口和3001端口是什么关系?
首先 browsersync 是一个测试工具,对前端的修改会实时地在 browsersync 这个容器里反映。
3000 和 3001 是 browsersync 的两个端口。
3001 是 browsersync 可视化控制页面的端口,控制所有的设备,同步推送更新等等。
3000 端口有两个用途:
– 1、用来代理接收来自8001的请求和响应。就是说,本来来自外部的访问(请求)都是从 8001 端口进来的,现在 browsersync 设置了 proxy:”localhost:8001/index.php” ,这样一来,你可以通过本地的 3000 端口来获取到 8001 的请求和响应。毕竟 browsersync 还不能直接对 8001 进行实时同步,不是一个系统的(一个是 browsersync 一个是 nginx )。
– 2、接收来自 3001 端口推送的实时更新,然后将 css 或者 js 或者 html 的变化实时反映到页面上。
- gulpfile.php 文件中的 proxy: ‘localhost:8000’ 这个 8000 端口又是什么?
这个是错误的端口(对本项目来说),这个端口的正确配置应该是 proxy: ‘localhost:8001/index.php’
- nginx 配置的 8001 端口又算什么?
这个宽口的目的没变,还是响应外部访问的请求。在项目没发布之前,用来被 3000 所代理,用于项目调试。
- 3000 为什么访问不了? 3001 可以, 8001 可以, 8000 不可以,为什么?
这个访问不了就是因为 proxy 配置错误,修正后可以访问。
修改完之后,”局势发生转变”,一切都理清了。按如下步骤走: 确定已修改了 proxy !!
1、gulp watch
2、打开浏览器,输入localhost:3000,此时可以访问到页面与localhost:8001/index.php一样的页面。
3、访问localhost:3001可以访问到browsersync的控制页面。
4、打开phpstorm,修改 public/views/app/login/login.html 中“用户名”的 input 标签,把 placeholder=”用户名” 去掉。
提示:为了看到效果( browsersync 的效果),最好让电脑屏幕上半部分露出 3000 页面中的用户名框,下半部分是 phpstorm ,然后做步骤4。
最后
这些端口都是可以修改的,通过命令行来修改,具体可以参考这篇说明。
想获得去掉 5 元限制的证券账户吗?

如果您想去掉最低交易佣金 5 元限制,使用微信扫描左边小程序二维码,访问微信小程序「优财助手」,点击底部菜单「福利」,阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」,按照文章步骤操作即可获得免 5 元证券账户,股票基金交易手续费率万 2.5。
请注意,一定要按照文章描述严格操作,如错误开户是无法获得免 5 元证券账户的。