当前位置:首页 » 网页前端 » 前端本地测试环境
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端本地测试环境

发布时间: 2023-06-02 22:01:37

❶ 怎样搭建web项目测试环境_测试环境的搭建

在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分大伍哪解为诸多个小项目,然后使用bbozookeeper或者springCloud来构建微服务,前端则会是一个单独的项目,前台的请求通过微服务来调用。但是,不同与传统的web项目,这类前后端分离的项目如何在开发中部署和运行呢?

当前后端分离时,后端项目一定会被加载到tomcat的webapp目录下面,但是前端的资源院该如何被访问到呢?这里以tomcat这个中间件为例,探讨在开发这类项目的时候,如何让前后端分离的项目部署并且运行起来,即后端项目部署在tomcat之后如何在运行时访问静态滚码资源(非上线部署)。

主要有两种方案:1.在本地通过Nginx来处理这些静态资源。2、将静态资源统一放入一个javaweb应用中,并将自动生成的war包随后端项目一期丢入tomcat。下面详细介绍

一、使用Nginx来访问静态资源。

在本地安装nginx并且修改nginx.conf,修改相关配置,将web访问的端口的资源进行更改,配置如下:

server{listen80;server_namelocalhost;charsetutf-8;#aess_loglogs/host.aess.logmain;

location/{proxy_passtomcat_pool;proxy_redirectoff;

proxy_set_headerHOST$host;

proxy_set_headerX-Real-IP$remote_addr;

proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;

client_max_body_size10m;

client_body_buffer_size128k;

proxy_connect_timeout90;

proxy_send_timeout90;

proxy_read_timeout90;

proxy_buffer_size4k;

proxy_buffers432k;

proxy_busy_buffers_size64k;

proxy_temp_file_write_size64k;

}

location~.*.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|ttf|eot|map)${

rootD:Workspacesesop-html;indexindex.html;

}

listen对象改为你本地的tomcat访问端口,最下面location中的root改为你前端项目中静态资源的位置,这样就可以实现只部署后端的项目就能访问前端的页面了。

二、将前端项目转换为动态的web项目,随后端项目一起丢入tomcat

这个方案省去了在本地安装和配置nginx,但是也只适用于开发阶段项目的部署运行和调试,真正在生产环境通常前后端项目会部署在不同的服务器。

如果是IntellijIdea,在导入前端项目之后,右键项目addframeworksupport-->webapplication,这时将会把前端项目转换为一个javaweb项目,然后将静态资源放在生成的web目录下即可。

如果是eclipse,可以新建一个javaweb项目然后将静态资源放入web或橘含者webcontent目录下,或者直接先导入前端项目,然后通过projectfacts将项目转换为dynamicweb项目并勾选js等相关配置。

然后,运行项目时把后端的war包和前端的war包一同添加到deployment中运行即可。

❷ 前端工程师浏览器测试环境怎样搭建

将php-5.4.14安装\解压到D盘或别的盘即可。

如上:APMServ5.2.6安装\解压到D盘或别的盘就可以。如文件夹里边F:\APMServ5.2.6\www\htdocs网站软件程序上传到【网站根目录"htdocs"】即可。MySQL数据库文件存放目录:MySQL5.1\data或MySQL4.0\data,MySQL默认用户名:root,密码为空 【点击启动软件后】在浏览器输入http://127.0.0.1或127.0.0.1迅雷、QQ旋风、BT等下载软件启动后默认会占用80端口,导致APMServ无法启动。解决方法:先关闭这些软件,启动APMServ。

Dreamweaver8是美国Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具编辑,工具有很多,个人习惯选择适合自己的这里只是举例:

最后将你编辑好的网页\网站程序通过FlashFXP上传到你的空间,本地搭建的环境上传到:\APMServ5.2.6\www\htdocs根目录下或直接复制到文件夹也行。

5
以上说的是本地搭建网站环境,要想做网站还是建议购买空间\域名

❸ 如何用手机进行本地前端调试

第一步:连接电脑与手机
 
1. 手机打开“开发者选项”
安卓手机进入“设置”—>“关于手机”—> 在“版本号”上点7次(或其他的版本号位置,一个个试肯定有……)
然后“开发者选项”就出现在“设置”里面了。
 
2. 手机打开“USB调试”
进入“开发者选项”—>打开“USB调试”(如果想手机长亮还要打开“不锁定屏幕”)
 
3. 连接并允许调试
用USB数据线将手机与电脑连接—>手机上出现“允许该电脑调试”时点“允许”(可能会晚点出现,先去第二步)
 
第二步:用电脑启动手机浏览
 
1. 打开chrome的inspect
在电脑chrome地址栏中输入chrome://inspect—>勾选“Discover USB devices”
如无意外在Devices中会出现手机型号。
如果没有,再确认下:开发者选项、USB调试、允许该计算机调试
 
2. 手机打开chrome app
在手机中打开chrome,这时电脑的chrome inspect中会出现输网址的地方。
 
3. 测试手机浏览的控制
在电脑chrome inspect输入框中随便输个在线网址,点Open,手机chrome就会打开该页面。用电脑chrome可以控制刷新、关闭,但是用来调试的inspect点开是空白,应该是被墙了。
 
第三步:用手机测试本地页面
 
1. 开启本地服务器
对的,很遗憾手机chrome不能进行静态页面的调试。
所以必须开本地服务器,所幸现在有gulp+webserver,用法这里不讲了。
总之,完成这一点后,你应该在电脑上用 http://localhost 来浏览网页了。
 
2. 电脑chrome开启端口转发
在chrome inspect中点“Port forwarding...”—>把端口和localhost链接输进去(比如8000和localhost:8000)—>勾选“Enable port forwarding”—>Done
 
3. 打开手机浏览localhost
如:输入http://localhost:8000 点Open
这样手机就能打开页面了。

❹ vue部署到测试环境,doc文件下载前端报错

这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),需要通过vue-cli脚手架搭建一个代理模式访问API接口。因为,本地测试环境默认访问的前端地址是 http://localhost:8080/,除非AP接口也是这地址和接口,不然必然出现跨域问题(跨域是浏览器的限制)

❺ 前端环境的安装与配置

前端环境的安装与配置?一、工具安装
1.编辑器
2.Git(分布式的代码管理工具)
3.Photoshop
4.Nodejs链接
二、 环境配置
1.配置git:

1.1 设置Git的user name和email:
$ git config --global user.name "name"
$ git config --global user.email "[email protected]"
1.2 生成SSH密钥过程:(看需求配置)
$ ssh-keygen -t rsa -C "[email protected]"

3个回车,密码为空。
Your identification has been saved in /home/tekkub/.ssh/id_rsa.
Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.
The key fingerprint is:

………………

最后得到了两个文件:id_rsa和id_rsa.pub

添加密钥到ssh:

登陆gitlab, Profile Settings -> SSH Keys -> ADD SSH KEYS ,找到本地的id_rsa.pub文件,复制出里面的内容,添加到 key 内,此时 Title 会自动填上你的邮箱,没有的话手动填写, ADD KEY
1.3 拉取代码到本地(权限)

创建一个存放项目的文件夹,在该文件夹下,单击右键,选择git bash,打开git命令框,编写命令:git clone [email protected]:xx/xx.git(可以在gitlab项目中找到存放地址,gitlab地址:http://gitlab.vchangyi.com ),按回车,就可以从gitlab上clone代码到本地文件夹
1.4 手动安装nodejs,如果是pc端安装的话,nodejs版本不能过低。

安装最新版的话npm安装项目依赖会有问题,手机端gulp无法启动,所以建议安装nodejs V6。
1.5 测试node是否安装成功

在git 命令窗或者node 命令窗中输入命令 :node -v
1.6 同理,测试npm是否安装成功npm -v
1.7安装gulp

在项目下打开git 命令窗,从淘宝源上自行安装,这个时间需要等待和耐心,也会有网络原因导致安装失败,如果安装失败可以多来几次,直到成功为止。
如果是pc端:npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads

npm 安装时候 持久使用淘宝源 设置:
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry


npm info express

❻ 前端的跨域问题理解

前端真的的是乱的一笔。--来自iOS开发者的一声哀鸣

需要把前端看成两部分,一部分是页面,另一部分是接口(或者加数据资源)。前端页面中调接口是有限制的,同源策略(SOP)要求我们调用的接口必须和页面在同一域名下,说是为了保证数据的安全。所谓同源:协议+域名+端口

但实际情况是,在前后端分离的大趋势下,好多页面和接口的服务器分布在不同的域名下。比如在开发时,前端页面分为本地环境、测试环境、仿真环境、正式环境,而接口也分为测试环境、仿真环境、正式环境,当然也可以有本地环境。他们在不同的域名下或IP下或者端口下,是不同源的。或者平时我们也能遇到需要调用不同的服务器数据资源。显然,同源策略保障了部分安全的同时,给开发造成了很多的麻烦。

所以,跨域问题是每个前端绕不过去的坎儿。

解决办法有两个方向,一个是前端解决,一个是服务端接口解除限制。

前端解决就是通过jsonp、jquery ajax、axios配置代理等。还有个简单的,比如Mac用户,可以使用Charles工具设置代理,临时使用。
服务端解决可以通过nginx反向代理设置允许跨域请求的域名、或者设置Access-Control-Allow-Origin,允许跨域资源共享等。
具体解决方案可参考 https://segmentfault.com/a/1190000011145364

反观iOS,轮廓简直不要太清晰,大部分时候只用专注于开发,没有各种乱七八糟的事情。