在进行前端页面开发时,为了调试方便,需要在本地启动一个静态文件服务器,而不需要与后端api服务一起部署。 常用静态文件服务器 01. anywhere 使用简单,需要nodejs环境。...安装:npm install anywhere -g 使用:anywhere --help 在任何需要访问静态文件的地方,直接运行即可访问:anywhere -p 8080 详见:https://...www.npmjs.com/package/anywhere 02. http-server 使用简单,需要nodejs环境。...安装:npm install http-server -g 使用:http-server [path] [options] 在任何需要访问静态文件的地方,直接运行即可访问:http-server -...p 8080 详见:https://www.npmjs.com/package/http-server 03. python http.server模块 这是python自带的模块,使用简单,需要安装
yii2使用nginx部署上线时访问非index.php页面显示404错误【遇到的坑】 如:访问首页(index.php)正常 ? 访问其他页面(非index.php)显示404错误 ?
同一个项目不同的页面,部署在同一个环境中的表现也不统一。 同一个项目同一个页面部署同一个环境,在 Chrome 和 Safari 中的表现也不统一。...它利用内存缓存来存储用户访问过的页面状态。...排除其他可能影响的因素,单纯通过http-server启动本地的 html 文件来验证下问题,因为页面要进入 bfcache,首要的前提是以 http/https 协议访问 首先安装: npm install...bfcache 中,因为这可能会破坏任何试图访问它的页面,尽可能使用rel="noopener"` 去打开 4、命中 bfcache 的同时如何更新数据 监听 pageshow/pagehide 事件...而当 persisted 属性的值为 true 时,并不能保证页面一定对被缓存。这意味着浏览器试图将页面缓存,但可能会由于一些因素导致无法进行缓存。
它足够强大,足以用于生产用途,但它既简单又易于破解,可用于测试,本地开发和学习 应用场景 1、局域网访问静态页面 访问本地计算机中的文件都是基于file协议,如果要开放我们的本地文件给局域网人员访问,是不能使用...而基于http协议的http-server就是一个不错的选择 2、处理页面跨域 当页面含有跨域的请求,此时可以利用http-server,使用命令 http-server -p 8080 -P https...://abc.org //-p 本地运行端口 -P 将所有无法在本地解析的请求代理到给定的URL进行处理 3、验证前端页面是否打包正常 现在的项目很多都前后端分离的架构,前端通常会打包dist文件丢到测试或者其他环境...要禁用缓存,请使用-c-1。 -U或--utc在日志消息中使用UTC时间格式。 -P或者将--proxy所有无法在本地解析的请求代理到给定的URL。...示例 进入目标文件夹,输入hs或者http-server命令,不过推荐使用如下命令 http-server -c-1 只输入http-server的话,更新了代码后,页面不会同步更新。
包括属性绑定、事件绑定、插值绑定以及双向绑定,主要用于组件内的变量在页面中的显示以及页面等。 服务。这包括两方面,一个是访问RESTFUL的服务,另一个是用来保存本地变量的。...访问RESTFUL的服务通常是使用Promise来进行异步回调使用的,访问本地变量的服务则要注意不要写成全局的变量,否则就会出现类似所有同时访问网站的用户都共享同一个变量的尴尬场面。。。 依赖注入。...项目发布 如果是测试环境,直接ng serve就可以用node服务器在本地的默认4200端口显示页面了。...但是,用测试环境你会发现项目非常的巨大,一个啥依赖都没有的'Hello world'就足足有3MB的大小,这显然是用户无法接受的。 那么为什么他会有这么大呢?...不过对于真正的生产环境我们显然不能用node服务器,我这里用的是nginx来部署,具体步骤如下: 使用命令ng build --prod --aot来生成dist/文件夹。
而我们最终希望,我们开发的项目,生成好一堆文件,然后随便通过任何一个 http 服务就能跑起来,也就是,还原成我们熟悉的 html+css+js 的模式。 好,这章,我们来讲解这部分内容。...安装 http-server 启动 http 服务 我们进入 dist 文件夹,然后启动一个 http 服务,来看看可以不可以访问。...安装好了之后正常我们就能够使用 http-server 命令来跑服务了。但是,这个世界不正常的时候是很多的嘛!...我们编辑 config/index.js 文件,找到: assetsPublicPath: '/', 把 '/' 修改为你要放的子目录的路径就行了。这里,我要放到 /dist/ 目录下面。...实际开发中,你只需要把 dist 文件夹中打包好的文件,给运维他们,让他们去部署到真实的服务器环境就好了。
上述三种方法中,比如页面的内容展示,点击、滑动等效果可以测试,但是如果有多点触摸的缩放、旋转时,必须要真机操作。所以我们需要搭建一个本地服务,本地局域网内,允许手机访问本地网页。...移动端访问的时候,需要使用第三种方法进行访问,如果访问的不是index.html,是中文的文件时,手机不能直接使用ip+中文名的方法,需要在电脑上复制下路径,中文乱码以后的地址,建议大家起文件名不要使用中文和数字...2.4、http-server http-server 服务依赖于node,要先安装node.js。除此不需要其他任何框架和工具。...3:进入到需要访问的文件目录下,运行命令: http-server 运行结果如图: 4:停止服务,使用 ctr+c 选择 y 停止服务。...上述几种主要用于访问简单的html多页面文件,不依赖于其他框架。 三、框架启动服务 常见的VUE、React、Angular框架创建的项目,会自动下载很多依赖的包,自动生成配置文件。
所以要保证有两批用户能在同一时间体验到不同的功能。这就要求我们准备两台服务器,分别部署不同的代码版本。 如果你已经有了一台服务器,也可以通过在不同端口部署服务的方式来模拟两台服务器。...简单来讲,你在任何一台服务器上进行的任何操作命令,Jenkins 都可以帮你完成,只要你提前在Jenkins上创建好任务,指定任务内容和触发时机,比如定时触发或者在特定的情况下触发。...02 代码准备 准备两份代码 因为要做灰度部署,所以需要准备两份不一样的代码,以验证我们实施的灰度操作是否生效。这里选择使用Angular 的Angular-CLI 来创建代码。...ng build --prod 配置Nginx 在上述完成Nginx 的安装操作时,我们访问服务器的IP 看到的是Nginx 的页面,现在我们想访问到自己的页面,首先把上面打包得到的A-CanaryDemo...这里为了简单起见,我们使用名字为canary 的cookie 来区分,如果检测到这个cookie 的值为devui,就访问灰度边机器,否则就访问正常边机器。
所以要保证有两批用户能在同一时间体验到不同的功能。这就要求我们准备两台服务器,分别部署不同的代码版本。 如果你已经有了一台服务器,也可以通过在不同端口部署服务的方式来模拟两台服务器。...02 代码准备 准备两份代码 因为要做灰度部署,所以需要准备两份不一样的代码,以验证我们实施的灰度操作是否生效。这里选择使用Angular 的Angular-CLI 来创建代码。... canaryDemocd canaryDemo // 运行完这个命令后访问http://localhost:4200 查看页面信息 ng serve 访问localhost 的4200 端口查看页面,...ng build --prod 配置Nginx 在上述完成Nginx 的安装操作时,我们访问服务器的IP 看到的是Nginx 的页面,现在我们想访问到自己的页面,首先把上面打包得到的A-CanaryDemo...这里为了简单起见,我们使用名字为canary 的cookie 来区分,如果检测到这个cookie 的值为devui,就访问灰度边机器,否则就访问正常边机器。
> [options] 创建一个新的 Angular 项目,默认在当前所在目录下 参数 描述 --dry-run -d 只输出要创建的文件和执行的操作,实际上并没有创建项目 --verbose -v...Angular 项目 参数 描述 --dry-run -d 只输出要创建的文件和执行的操作,实际上并没有创建项目 --verbose -v 输出详细信息 --skip-npm 在项目第一次创建时不执行任何...pathN参数是一个有效的JavaScript路径,如“users [1] .userName”。 该值将被强制转换为正确的类型,或者如果类型无法强制,则会抛出错误。...默认为“production” --branch= 推送页面的git分支。...默认为“gh-branch” --skip-build 在发布之前跳过构建项目 --gh-token= 用于部署的API令牌,必须.
reactjs最大的作用就是用来开发ui组件,比如用它开发移动端页面,也是今年移动端前端化的推动者。...概念与区别 本人也在React与Angular两大体系里纠结了好久,还使用React Native做了几个UI,彷徨于两大前端框架之前。...React缺点: Web Componet的MVC分离不够彻底。 JSX描述的页面模板与JS代码没有办法完全分开。 无法接受代码的同时还夹个HTML代码这样原始的方式。...有官方的UI方案Material Design供选择 官工具链相对于React要成熟 有angular-cli这个便利化的工具,并提供E2E的测试,用以方便测试,并保证项目的质量。...附:angular-cli的教程与源码地址
题目需求: 服务器IspSrv上的工作任务 在 IspSrv 上导入 OpenDayLight 软件包; 启动 OpenDayLight 的 karaf 程序,并安装如下组件: feature:install...odl-l2switch-switch-ui feature:install odl-mdsal-apidocs feature:install odl-dluxapps-applications 使用...Mininet 和 OpenVswitch 构建拓扑,连接 ODL 的 6653 端口如下拓扑结构: 在浏览器上可以访问 ODL 管理页面查看网元拓扑结构; 通过 OVS 给 S2 下发流表,使得...H2 与 H1、H3 无法互通; H1 启动 HTTP-Server 功能,WEB 端口为 8080,H3 作为 HTTP-Client,获取 H1 的 html 网页配置文件。...实验压缩包获取: SDN环境压缩包 点击下载(提取码CJ6y) 点击查看视频部署 项目实施 上传文件: distribution-karaf-0.6.0-Carbon.zip mininet
后来,接手的新项目中: Angular-CLI:v8.x 由于升级了 Angular 版本,同样也升级了 Angular-CLI 版本,导致 v8.x 版本的 node 已经无法编译 angular 项目...无奈,升级了 node 版本,随之而来的就是 node-sass v4.8.0 版本无法使用,又导致构建失败,所以又得安装新版本 node-sass。...但,我的办公网络无法访问外网啊! 虽然有内网的 Npm 仓库,但也只下载了 windows-build-tools 这个包,这包里是一堆去访问外网下载东西的脚本啊,对我来说,这解决方案没用啊!...问题就在于 Visual C++ Build Tools,这个 Mircosoft 的东西,要搞离线安装,是真的麻烦。...github 的 issue 里找找,通常都能找到你遇到的问题 不能联网 办公网络通常无法访问外网,但都会有自己内部的镜像仓库,所以下载基本的 node 之类的库是没有问题的,上面的解决步骤也一样可以参考执行
前言 在我们进行开发时,有时候遇到通过HTTP协议对服务器的数据进行访问的需求,因此我们需要搭建一个HTTP服务器,上文已讲解了通过界面配置HTTP服务器,本文使用命令行的方式在windows下通过Node.js...,可以直接http-server开启部署服务,可以直接阅读四 若执行http-server -v结果为**‘http-server -v’ 不是内部或外部命令,也不是可运行的程序 或批处理文件...npm install http-server -g命令进行全局安装http-server服务 2、确认安装成功 命令行下输入命令http-server -v可查看该服务是否安装成功 四、开启部署服务...1、开启部署服务 命令行下输入http-server命令,输入命令后,窗口中会有2个浏览地址,复制其中一个地址在浏览器中即可访问 2、浏览器访问验证 我们可以打开Desktop查看相关信息...3、Postman访问验证 使用postman接口测试软件,执行GET命令查看桌面fota文件夹内部的内容
首先我们要确保pm2软连接设置成功,首先使用pm2 -v查询pm2版本,查询成功则代表我们可以正常使用pm2命令进行node进程服务的控制 ?...后台服务启动成功,下一步就是需要打包我们的前端项目部署到nginx的80端口,我的项目前端使用了angular框架,所以需要在全局安装angular-cli脚手架,命令:npm install -g angular-cli...我们可以尝试访问111.230.239.103试试能不能访问到我的博客首页 ? 可以发现我们前端部署成功了,但是取不到数据库的数据,我们刚才测试后端接口的文章数据全部无法显示。这是什么原因呢?...可以看到图中的http://111.230.239.103/api/client/articleList接口404未找到无法访问,这是什么原因呢?...可以发现,我们后端的server服务是运行在4001端口,但是我们前端访问没有懈怠端口号,就是访问的80端口,因为端口不一致导致跨域请求,所以无法取到我们数据库中的数据。
第一步,升级@angular/cli 创建Angular5项目,要更新angular-cli到1.5版本以上(其实angular-cli已换成@angular/cli)。.../cli 如果你使用的是Angular CLI 1.0.0-beta.28或以下版本, 你需要先卸载angular-cli包,从angular-cli向 @angular/cli转化: npm uninstall.../cli npm cache clean npm install -g @angular/cli@latest 注:如果npm版本大于5就使用npm cache verify去代替上述npm cache...注:如果要升级旧项目,本地包也需要升级,就先cd 项目,然后执行下述命令: rm -rf node_modules dist npm install --save-dev @angular/cli@...即可看到页面。
例子 为了测试,我写一个简单的例子。没有用到任何复杂的框架,就是一个简单的HTML加上网络请求的JS。 http-server命令直接运行(推荐小技巧:使用npm install -g http-server安装一个简单的服务器。)...,在浏览器输入地址http://127.0.0.1:8080访问该页面。 ? 点击页面上的click按钮,就会触发这个错误。在Fundebug的控制台可以看到报错信息,如下所示: ?...一个http的get请求访问http://127.0.0.1:8080/example/,然后返回404。...第一时间发现HTTP请求出现状况; 及时告知后端服务器出了问题,快速应对; 分析前端其它bug的时候多了一份信息参考; 用户反馈服务无法使用的时候,可以快速知道问题原因。
领取专属 10元无门槛券
手把手带您无忧上云