Ⅰ web端自动化基础篇
一、自动化测试的好处
1、 缩短测试周期：计算机行业更新迭代快速，大量频繁的回归测试消耗时间，自动化测试能够将重复的实行交给计算机去做，加快测试速度。
2、避免人为出错：测试人员不可能持续高度集中，并且人类易受外界影响(头疼脑热，精神不振)，可能会造成人为错误
3、测试信息存储：自动化测试将测试信息和数据储存在文件中，思路清晰明确，交接方便
4、轻易获取覆盖率：自动化测试能够解放测试人员，使测试人员能够有更多的精力做那些非重复性的工作。
5、其他：自动化测试可以是实现自动或者定时执行
注意： 自动化测试的方向是对的，而且趋势也是如此，但是有些自动化实现不了的还是会手动测试的。
二、自动化分类
1、 整体分类
（1)自动化功能测试
（2)自动化性能测试
2、自动化功能测试的分类:
（1)单元测试：程序员搞定
（2)功能测试
（3)接口测试：大中型项目或长期项目可以采用自动化测试
3、性能测试主要是使用测试工具
（1）Loadrunner、Jmeter等，对软件进行压力测试、负载测试等等，因为这些无法用手工进行代替，所以必须自动化。
三、web自动化条件的使用和范围
1、前提条件
（1)手动测试已经完成,后期再不影响进度的前提下逐渐实现自动化
（ 2)项目周期长，重复性的工作都交给机器去实现
（ 3）需求稳定,项目变动不大
（4)自动化测试脚本复杂度比较低
（ 5)可重复利用
2、使用自动化测试的场景
（1)频繁的回归测试
（2)冒烟测试
（3)传统行业需求变化不大，应用频繁
（4)性能测试
四、web自动化常用的工具
1、QTP(收费)
2、Selenium(开源)
3、RFT(收费）
4、（1）元素定位工具：css选择器、xpath
（2）环境工具：（1)firefox35
（2)firebug插件
（3)firepath插件
5、什么是xpath：XPath即为XML路径语言，它是一种用来（标准通用标记语言的子集）在 HTML\XML 文档中查找信息的语言。
6、什么是xml：XML 指可扩展标记语言（EXtensible Markup Language）XML 是一种标记语言，很类似 HTMLXML 的设计宗旨是传输数据，而非显示数据
7、（1）xml是设计为传输和存储数据的。
（2）html是显示数据以及更好的显示数据
8、获取元素
（1）nodename：选取此节点的所有子节点
（2）/从根节点选取
（3）//从匹配选择当前节点选择文档的节点，不考虑位置
（4）“.”选取当前节点
（5）“..”选取当前节点的父节点
（6）@选取属性
Ⅱ web自动化测试计划和步骤
测试用例：前置、步骤、断言
项目周期长：功能会越来越复杂
历史功能：比较稳定
回归，历史功能
开发-接口自动化同步
项目-8大模块-2000左右用例数
1、熟悉业务
需求文档/手动测试/产品聊，了解模块之间的关系/测试人员
项目目前在测试的阶段，棘手的问题
2、分析
系统当中哪些模块适合自动化、哪些模块不适合
历史功能稳定性、功能复杂性
核心模块
使用频率模块，哪一个模块bug率目前偏高
测试团队、产品 开会讨论
筛选2个模块 400个功能测试用例
如果是接口 ---接口有多少个，每个接口有多少个用例
3、功能测试 ---筛选自动化测试用例----核心功能、主流程、主功能点---140
用例评审===
4、自动化计划
自动化类型：web/接口
框架选型：
团队人员：
搭框架、定规范
时间规划：用例编写时间2个半月
效果：覆盖率是多少---用例通过率---跟项目测试进度结合
Ⅲ Gitlab+Jenkins通过钩子实现自动部署web项目，图文详细教程
扩展参考：Jenkins+Gitlab通过脚本自动部署回滚web项目至集群
1）:Gitlab服务器：ubuntu 192.168.152.131 ---参考搭建：Linux安装gitlab，docker安装gitlab教程
2）:Jenkins服务器：ubunu 192.168.152.130 ---参考搭建：linux安装Jenkins，或docker安装Jenkins教程
在服务器上生成ssh-keygen，用于配置web服务器和Gitlab服务器。
3）:web服务器：centos 192.168.152.150 ---已搭建好LNMP环境
4）:开发者电脑：Windows+key密钥 （用于提交代码）
1：在gitlab创建项目Test Project
2.1）： 配置一个开发者电脑的ssh公钥到gitlab
配置一个开发者电脑的ssh公钥到gitlab，这样才能模拟开发上传代码到gitlab。
windows生成key过程及git安装，可参考：Windows下git和github的使用图文详细教程_the丶only的博客-CSDN博客_github win
在windows测试clone，和提交代码。
注：最新版git 已经将默认分支master改为main了。所以看到main，而不是master不要太奇怪
测试成功，在gitlab也显示有index.html文件。
2.2）： 配置jenkins公钥到gitlab
同理，同样需要jenkins公钥，因为jenkins也需要拉去gitlab的代码。
在 jenkins服务器 上查看公钥并复制添加到gitlab，并命名为jekins。
1：插件管理，安装插件
jenkins本身没什么功能，主要是依靠插件来实现各种强大的功能。
基本需要添加的插件：Gitlab Hook、Build Authorization Token Root、Publish Over SSH、Gitlab Authentication、Gitlab、Git Parameter
可以在 Manage Jenkins >> Manage Plugins 查看管理插件。在Available 选项搜索安装插件即可。
安装完成后，重启Jenkins。
2：添加需要部署的web主机
在 Manage Jenkins >> Configure System 中往下翻，找到 Publish over SSH 选项，点击add ssh server。
在Jenkins服务器上，查看私钥，注，是私钥，不是公钥。
将私钥填写在key位置，还有添加web服务器相关信息。
注：如果测试报错如下
Failed to connect or change directory
jenkins.plugins.publish_over.BapPublisherException: Failed to add SSH key. Message [invalid privatekey: [B@2e54414f]
是因为默认用ssh-keygen命令，默认生成了OPENSSH 格式密钥。而Jenkins暂时不支持这种私钥，私钥开头结尾如下：
所以，需要生成rsa密钥格式的。用开头说的ssh-keygen加其他参数生成即可。
私钥开头结尾如下：
再次测试，显示success，则成功。然后点击save保存即可。
3：构建任务项目
首页创建任务或者一个项目
命名为web-project，选择为freestyle project 自由项目。然后ok确认。
3.1）：源码管理 Source Code Management
选择源码管理，添加gitlab的项目clone地址。
注：最后路径选择分支，我gitlab主分支名字为main,如果是master，则写master，或者合并的其他分支。
在add添加用户
添加完成后，选择git用户，这时没有红色提醒，说明已成功连接
3.2）：构建触发器 Build Triggers
现在Build Triggers，勾选build when....，其他默认，并记下链接 http://192.168.152.130:8080/project/web-project
点击高级 advance 选项。
勾选filter branches regex选择，填写分支，生产token。其他默认
3.3）：构建 Build
选择Build 选项。选择ssh
添加web服务器
添加完毕，最后save保存。
1：添加钩子webhooks.
选择自己的项目Test Project，在设置setting里，选择钩子webhooks.
填写刚才记下的http://192.168.152.130:8080/project/web-project和token值。
最后Add webhook完成：
2：如添加失败，报错，更改Network
注：如填写失败提示Url is blocked: Requests to the local network are not allowed
还需更改Network选项。
3：测试钩子
添加完成后，下面会出现钩子选择。点击test中的，push event。
出现successful，即添加成功。
在Jenkins也可以看到刚才的测试时间信息。
在开发电脑上测试提交，我这里为Windows电脑测试。
打开Git Bash，输入以下命令：
提交成功，回到Jenkins，查看是否构建成功：
绿色显示构建成功，无错误显示。回到gitlab查看项目。
时间显示刚才也提交成功，无错误。最后在浏览器输入web地址测试，本人配置了web访问端口8082。所以输入IP加端口访问。
内容也已经自动更新成功。
完结撒花！！！
Ⅳ web自动化测试环境如何搭建
web自动化测试环境搭建主要包含如下几点:
1. Python 开发环境
2. 安装selenium包
3. 安装浏览器
4. 安装浏览器驱动 -- 保证能够用程序驱动浏览器，实现自动化测试.
如果想学习更多的内容,一个朋友在传智播客学习软件测试.现在月薪12K。
Ⅳ 怎样安装和破解激活WebStorm11
WebStorm 11.0.3汉化破解版http://www.ddooo.com/softdown/79201.htm，附注册码，有详细的安装图文教程。
WebStorm11安装教程：
1、解压安装包，运行“WebStorm-11.0.3.exe”开始安装
2、选择软件安装目录
3、选择是否创建桌面快捷方式和关联文件，根据提示完成安装
4、打开汉化补丁，将文件“resources_cn.jar”复制到安装目录，lib文件夹中
5、运行WebStorm 11桌面快捷方式，选择配置
6、弹出注册界面，选择“License server”，输入“http://15.idea.lanyus.com/”点击确定完成破解。
Ⅵ Web服务器配置方法教程
服务器是一种高性能计算机，作为网络的节点，存储、处理网络上80%的数据、信息，因此也被称为网络的灵魂。那么该如何配置Web服务器呢?如果你不知道，请看我整理的Web服务器配置方法详解吧!
2、单击窗口中的“添加/删除Windows组件”图标，弹出“Windows组件向导”对话框。
3、选中“向导”中的“应用程序服务器”复选框。单击“详细信息”按钮，弹出“应用程序服务器”对话框。
4、选择需要的组件，其中“Internet信息服务(IIS)”和“应用程序服务器控制台”是必须选中的。选中“Internet信息服务(IIS)”后，再单击“详细信息”按钮，弹出“Internet信息服务(IIS)”对话框。
5、选中“Internet信息服务管理器”和“万维网服务”。并且选中“万维网服务”后，再单击“详细信息”按钮，弹出“万维网服务”对话框。
6、其中的“万维网服务”必须选中。如果想要服务器支持ASP，还应该选中“Active Server Pages”。逐个单击“确定”按钮，关闭各对话框，直到返回图1的“Windows组件向导”对话框。
7、单击“下一步”按钮，系统开始IIS的安装，这期间可能要求插入Windows Server 2003安装盘，系统会自动进行安装工作。
8、安装完成后，弹出提示安装成功的对话框，单击“确定”按钮就完成了IIS的安装。
友情提示：如果想要同时装入FTP服务器，在“Internet信息服务(IIS)”对话框中应该把“文件传输协议(FTP)服务”的复选框也选中。
在IIS中创建Web网站
打开“Internet 信息服务管理器”，在目录树的“网站”上单击右键，在右键菜单中选择“新建→网站”，弹出“网站创建向导”：
网站描述就是网站的名字，它会显示在IIS窗口的目录树中，方便管理员识别各个站点。本例中起名为“枝叶的网站”。
网站IP地址：如果选择“全部未分配”，则服务器会将本机所有IP地址绑定在该网站上，这个选项适合于服务器中只有这一个网站的情况。也可以从 下拉式列表框中选择一个IP地址(下拉式列表框中列出的是本机已配置的IP地址，如果没有，应该先为本机配置IP地址，再选择。)
TCP端口：一般使用默认的端口号80，如果改为其它值，则用户在访问该站点时必须在地址中加入端口号。
主机头：如果该站点已经有域名，可以在主机头中输入域名。
主目录路径是网站根目录的位置，可以用“浏览”按钮选择一个文件夹作为网站的主目录。
网站访问权限是限定用户访问网站时的权限，“读取”是必需的，“运行脚本”可以让站点支持ASP，其它权限可根据需要设置。
单击“下一步”，弹出“完成向导”对话框，就完成了新网站的创建过程，在IIS中可以看到新建的网站。把做好的网页和相关文件复制到主目录中，通常就可以访问这个网站了。
访问网站的方法是：如果在本机上访问，可以在浏览器的地址栏中输入“http://localhost/”;如果在网络中其它计算机上访问，可以在浏览器的地址栏中输入“http://网站IP地址”。
说明：如果网站的TCP端口不是80，在地址中还需加上端口号。假设TCP端口设置为8080，则访问地址应写为“http://localhost:8080/”或“http://网站IP地址：8080”。
网站的基本配置
如果需要修改网站的参数，可以在“网站名字”上单击右键，在右键菜单中选择“属性”，可以打开“网站属性”对话框。
1、“网站”标签
“网站标识”：可以设置网站名字、IP地址、端口号。单击“高级”按钮可以设置主机头名。
2、“主目录”标签
在本地路径中可以设置主目录的路径名和访问权限。
3、“文档”标签
默认文档是指访问一个网站时想要打开的默认网页，这个网页通常是该网站的主页。如果没有启用默认文档或网站的主页文件名不在默认文档列表中，则访问这个网站时需要在地址中指明文件名。
默认文档列表中最初只有4个文件名：Default.htm、Default.asp、index.htm和Default.aspx。我用 “添加”按钮加入了一个index.asp，并用“上移”按钮把它移到了顶部。这主要是因为我的网站的主页名为“index.asp”，所以应该把它加入 列表，至于是否位于列表顶部倒是无关紧要的。
经过以上配置，一个Web网站就可以使用了。把制作好的网页复制到网站的主目录中，网站主页的文件名应该包含在默认文档中。打开浏览器，在地址栏中输入“http://本机IP地址”，就可以打开网站的主页。其它页面可以用网页中的超链接打开。
虚拟目录
虚拟目录可以使一个网站不必把所有内容都放置在主目录内。虚拟目录从用户的角度来看仍在主目录之内，但实际位置可以在计算机的其它位置，而且虚拟目录的名字也可以与真实目录不同。如：
图中用户看到的一个位于主目录下的文件夹“pic”，它的真实位置在服务器的“D:myimage”处，而主目录位于“C:mywww” 处。假设该网站的域名是“www.abc.com”，则用户访问“http://www.abc.com/pic/文件1”时，访问的实际位置是服务器的 “D:myimage文件1”，所以虚拟目录的真实名字和位置对用户是不可知的。
创建虚拟目录的方法 ：
打开 Internet 信息服务窗口，在想要创建虚拟目录的 Web 站点上 单击右键，选择“新建”→“虚拟目录”。弹出虚拟目录创建向导：
别名是映射后的名字，即客户访问时的名字;
路径：服务器上的真实路径名，即虚拟目录的实际位置;
访问权限：指客户对该目录的访问权限。
单击“下一步”按钮，弹出完成对话框，虚拟目录就建立成功了。把相关文件复制到虚拟目录中，用户就可以按照虚拟的树形结构访问到指定文件了。
通常虚拟目录的访问权限、默认文档等都继承自主目录，如果需要修改，可在“Internet 信息服务管理器”中的虚拟目录上单击右键，选择“属性”，就可以修改虚拟目录的参数设置了。
补充：服务器介绍
服务器，也称服务器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。
服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。
在网络环境下，根据服务器提供的服务类型不同，分为文件服务器，数据库服务器，应用程序服务器，WEB服务器等。
相关阅读：服务器常见问题有哪些
1.系统蓝屏、频繁死机、重启、反映速度迟钝
服务器的与我们平常电脑不论是硬件结构还是运行系统，都是极其类似的。因此，就如同我们的电脑一样，一样可能会感染病毒，同样会因为系统漏洞、软件冲突、硬件故障导致死机、蓝屏、重启等故障，同样会因为垃圾缓存信息过多而导致反应迟钝。
2.远程桌面连接超出最大连接数
由于服务器默认为允许连接数为2个，如果登陆后忘记注销，而是直接关闭远程桌面的话，服务器识别此次登陆还是留在服务器端的。出现这种情况，最常见的就是重启服务器，但是，如果是高峰期，重启服务器带来的损失是显而易见的。那么此时，就可以利用mstsc/console指令进行强行登陆了。打开“运行”框，键入“mstsc/v:xxx.xxx.xxx.xxx(服务器IP)/console”，即可强行登陆到远程桌面了。
3.无法删除的文件该怎么清理
遇到这种情况，可能是该文件还在运行中，可以重启删之，或者运行CMD，输入arrtib-a-s-h-r想要删除的文件夹名，最后输入del想要删除的文件夹名即可删除，运行该命令后无法恢复，请慎用。
4.系统端口隐患
对于服务器来说，首要保障稳定性和安全性。因此，我们仅需保证服务器最基本的功能即可，就像声卡都是默认禁止的。我们并不需要太多的功能，也不需要太多的端口支持。像一些不必要，而且风险较高的端口大可封掉。而一些必要的，又有风险的端口，比如:3389、80等端口，我们可以通过修改注册表的方法将其设置不特殊的秘密端口，这样服务器端口的安全隐患就不复存在了。
Ⅶ Web自动化的流程
web自动化流程
一. 了解需求，什么是系统的核心业务
二. 编写测试用例：用例名称，前置条件，测试数据，测试步骤，期望结果
三. 自动化代码的初步构建：所有的元素定位、元素操作、测试用例都写在一个模块中
问题：
1. 层次混乱，一旦页面元素调整，需要挨个寻找对应的测试模块，测试类，测试用例函数，不便于后期维护
2. 不便于代码的复用
四. 引入PO模式，进行分层设计：实现测试用例和页面对象分离
好处：
1. 层次清晰，相互独立，易维护
2. 页面对象可以多次调用，提高了代码的复用度
五. 引入单元测试框架unittest
六. 优化分层设计
将每个页面公共的属性和方法提取出来，封装成一个BasePage模块下的BasePage类，后期各个页面只需要继承它，就可以获得父类的所有属性和方法，这样不仅简化了代码，而且提高了复用度
七. 引入pytest：基于unittest，比unittest更"智能"
好处：
1. 可以通过打标记来运行特定的测试用例
2. 利用contest.py定义公共的fixture，多个测试类中都可以调用，不需要每个测试用例类都定义一遍环境准备和环境清理，简化了代码
3. pytest可以按一定规则自动发现测试用例，而unittest则需要向指定的测试套件中添加测试用例
4. 利用pytest-html库，可以生成自带的html报告和xml文件，而xml文件的好处是方便跟其它平台的集成和展示，方便做二次开发
八. 注意点
1. 做自动化前，要有独立的账号，避免外界环境的干扰
2. 页面顺序完全是由业务逻辑来决定，由测试用例来决定。因此在封装页面时不用考虑谁来调用它，不用考虑哪一个页面操作之后再来使用它(或者哪一个功能操作之后再来使用它)，应该考虑的是无论前面做了什么样的操作，谁来用它，任何一个步骤来调用它的时候，它都能正常的操作(这也是为什么一些页面的元素需要滚动操作)
3. 在封装功能时不要考虑在用例中是什么意思，只需要考虑在本页面是什么功能(比如：标详情页面获取余额功能的封装，不需要把函数命名为get_user_left_money_before_invest，而是在只考虑它的功能的情况下命名为get_user_left_money)
4. 在选标的过程中，不要指定特定的标名，而是要随机选择，因为页面上的标是会变的。因此测试数据的选取，用例的设计要遵循尽量不要依赖系统的原则，这样也提高了代码的稳定性
5. 投资操作的前置条件是：可用余额要大于投资金额，如何保证这个条件，有两种方法：
1) 后台充值足够多的钱
2) 判断当前用户余额够不够，不够就充值，可以调用查询接口查询用户余额，调用充值接口进行充值——因为API操作是非常快的，这也提高了测试用例的效率
6. 保证用例的独立性：每一个测试用例都要重新打开浏览器
Ⅷ 如何用自己的电脑搭建web服务器
如何用自己的电脑搭建web服务器
这个可以直接网络搜索就有的。第一条经验里面就有里面内容很详细。搭建的时候。要看清楚自己的电脑是什么系统。XP和WIN7的系统是有不同步骤的。
参考资料：:jingyan../article/9f63fb91d583b7c8400f0eef.
如何利用自己的电脑搭建WEB服务器
如何利用自己的电脑搭建WEB服务器？有各种方法，现在总结如下：
一、apache
1，下载wamp（windows+apache+mysql+php）环境安装包，解压到本地，就可以本地搭建web网站了，不过这种方法要求对代码和apache比较精通。
2，下载phpstudy环境安装包，解压到本地，这个环境适合学习及本地测试，操作非常小白，界面式操作。
3，下载upupw适配安装包，这个也是界面式的，可以选择IIS、APACHE、KANGLE等各种环境。
二、IIS
目前windows7以上版本的系统，都支持IIS7.0。操作步骤比较繁琐。
如何用自己的电脑搭建web服务器，让外网的用户访问
1、建议使用虚拟机，选择好你需要的平台，在机子上装好系统，以及对应的web服务端，然后在你的路由器上做好端口映射。
2、你要有个公网IP,如果没有固定IP的话，可以用动态域名还做。
1.咱们先假定是固定IP的，如何域名解析？（我在局域网中用静态IP，是固定的）
2.动态IP又如何域名解析？
3.自己的家的电脑想试试，还有就是学校的一台电脑服务器也想试试
如何搭建自己的Web服务器
安装护卫神.主机大师，一键安装web环境，支持IIS+ASP+ASP.+PHP+FTP+MYSQL+主机系统
如何用自己的电脑做一个WEB服务器
服务器具备的条件是24小时开机，因为要向外开放网络。web的话就必须搭建相应的环境，比如你制作的网站是asp环境就必须搭建asp环境的，还有php，jps等等，根据自己的需求安装环境，还有其他的web应用。搭建网站的条件是1.域名（等等）2.服务器（自己电脑，或者购买服务器）3.脚本（aspaspxphpjsp等等）为了防止别人入侵你的网站你可以安装相应的软件来防止别人入侵你的网站比如：安全宝，安全狗。
xp用户请下载iis for xp 的压缩包。网络一下即可
一、IIS的添加
请进入“控制面板”，依次选“添加/删除程序→添加/删除Windows组件”，将“Inter信息服务（IIS）”前的小钩去掉（如有），重新勾选中后按提示操作即可完成IIS组件的添加。用这种方法添加的IIS组件中将包括Web、FTP、NNTP和SMTP等全部四项服务。
二、IIS的运行
当IIS添加成功之后，再进入“开始→程序→管理工具→Inter服务管理器”以打开IIS管理器，对于有“已停止”字样的服务，均在其上单击右键，选“启动”来开启。
三、建立第一个Web站点
比如本机的IP地址为192.168.0.1，自己的网页放在D:Wy目录下，网页的首页文件名为Index.htm，现在想根据这些建立好自己的Web服务器。
对于此Web站点，我们可以用现有的“默认Web站点”来做相应的修改后，就可以轻松实现。请先在“默认Web站点”上单击右键，选“属性”，以进入名为“默认Web站点属性”设置界面。
1．修改绑定的IP地址：转到“Web站点”窗口，再在“IP地址”后的下拉菜单中选择所需用到的本机IP地址“192.168.0.1”。
2．修改主目录：转到“主目录”窗口，再在“本地路径”输入（或用“浏览”按钮选择）好自己网页所在的“D:Wy”目录。
3．添加首页文件名：转到“文档”窗口，再按“添加”按钮，根据提示在“默认文档名”后输入自己网页的首页文件名“Index.htm”。
4．添加虚拟目录：比如你的主目录在“D:Wy”下，而你想输入“192.168.0.1/test”的格式就可调出“E:All”中的网页文件，这里面的“test”就是虚拟目录。请在“默认Web站点”上单击右键，选“新建→虚拟目录”，依次在“别名”处输入“test”，在“目录”处输入“E:All”后再按提示操作即可添加成功。
5．效果的测试：打开IE浏览器，在地址栏输入“192.168.0.1”之后再按回车键，此时就能够调出你自己网页的首页，则说明设置成功！
四、添加更多的Web站点
1．多个IP对应多个Web站点
如果本机已绑定了多个IP地址，想利用不同的IP地址得出不同的Web页面，则只需在“默认Web站点”处单击右键，选“新建→站点”，然后根据提示在“说明”处输入任意用于说明它的内容（比如为“我的第二个Web站点”）、在“输入Web站点使用的IP地址”的下拉菜单处选中需给它绑定的IP地址即可（如图1）；当建立好此Web站点之后，再按上步的方法进行相应设置。
如何在自己的电脑上搭建web服务器
常见的Web服务器有IIS，d和tomcat。Httpd和tomcat只需要下载只需要下载二进制包，解压，从解压目录的bin目录下运行d.exe或者startup.bat启动即可。tomcat运行在java环境下，启动之前还需要安装java的jdk运行环境。另外，IIS自带在微软的Visual studio工具包里，安装好以后可以通过控制面板里面的安装或关闭windows功能添加启动服务。网络上都有相关安装教程，可以参阅。
如何用nodejs搭建web服务器
用nodejs搭建web服务器方法：
引入需要用到的几个模块：
协议模块
var = require('');
url解析模块
var url = require('url');
文件系统模块
var fs = require("fs");
路径解析模块
var path = require("path");
创建服务并在指定的端口监听：
创建一个服务
var Server = .createServer(this.processRequest.bind(this));
在指定的端口监听服务
Server.listen(port,function(){
console.log("[HttpServer][Start]","runing at :"+ip+":"+port+"/");
console.timeEnd("[HttpServer][Start]");
});
在创建服务的时候需要传递一个匿名函数processRequest 对请求进行处理，processRequest接收2个参数，分别是request和response, request对象中包含了请求的所有内容，response是用来设置响应头以及对客户端做出响应操作。
processRequest:function(request,response){
var hasExt = true;
var requestUrl = request.url;
var pathName = url.parse(requestUrl).pathname;
对请求的路径进行解码，防止中文乱码
pathName = decodeURI(pathName);
如果路径中没有扩展名
if(path.extname(pathName) === ''){
如果不是以/结尾的，加/并作301重定向
if (pathName.charAt(pathName.length-1) != "/"){
pathName += "/";
var redirect = ":"+request.headers.host + pathName;
response.writeHead(301, {
location:redirect
});
response.end();
}
添加默认的访问页面,但这个页面不一定存在,后面会处理
pathName += "index.";
hasExt = false; 标记默认页面是程序自动添加的
}
获取资源文件的相对路径
var filePath = path.join("/webroot",pathName);
获取对应文件的文档类型
var contentType = this.getContentType(filePath);
如果文件名存在
fs.exists(filePath,function(exists){
if(exists){
response.writeHead(200, {"content-type":contentType});
var stream = fs.createReadStream(filePath,{flags:"r",encoding:null});
stream.on("error", function() {
response.writeHead(500,{"content-type": "text/"});
response.end("<h1>500 Server Error</h1>");
});
返回文件内容
stream.pipe(response);
}else { 文件名不存在的情况
if(hasExt){
如果这个文件不是程序自动添加的，直接返回404
response.writeHead(404, {"content-type": "text/"});
response.end("<h1>404 Not Found</h1>");
}else {
如果文件是程序自动添加的且不存在，则表示用户希望访问的是该目录下的文件列表
var = "<head><meta charset='utf-8'></head>";
try{
用户访问目录
var filedir = filePath.substring(0,filePath.lastIndexOf('\'));
获取用户访问路径下的文件列表
var files = fs.readdirSync(filedir);
将访问路径下的所以文件一一列举出来，并添加超链接，以便用户进一步访问
for(var i in files){
var filename = files[i];
+= "<div><a href='"+filename+"'>"+filename+"</a></div>";
}
}catch (e){
+= "<h1>您访问的目录不存在</h1>"
}
response.writeHead(200, {"content-type": "text/"});
response.end();
}
}
});
},
Ⅸ 如何用webpack实现自动化的前端构建工作流
1.首先 git clonehttps://github.com/bjtqti/font-end-boilerplate.git 一份到本地
2.然后 npm install && npm run start
3. 最后打开浏览器，运行http://localhost:4000
5.解析一下这些目录的用途：
|- dist下面存放发布的js、css 文件 （自动生成）
|- node_moles 下面是npm安装的包文件 （自动创建）
|- src 存放具体的业务代码
|- task 存放webpack的配置代码
|- task
|- webpack.api.conf.js 用于webpack的api方式的配置文件 server.js用到
|- webpack.dev.conf.js 用于CLI方式使用webpack 的配置
|- webpack.prod.conf.js 用于生产环境打包输出的配置
|- .postcssrc.js post-loader的插件配置文件，由于后面用了postcss.config.js所以重命名了这个
|- .babelrc babel的配置文件，为了解析es6语法
|- .gitignore git的配置，指出要不参与版本控制的文件及文件夹
|- .package.json 包配置文件
|- postcss.config.js post-loader配置
|- README.md github.com自动创建的项目说明文件
|- server.js 本地开发调式用的web服务器
需要重点掌握的是package.json 其次是server.js 和 task相关的配置内容
先看看package.json:
{
"name": "shop",
"version": "1.0.0",
"description": "webapp frontend shop",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "webpack-dev-server --config ./task/webpack.dev.conf.js",
"build": "webpack --config ./task/webpack.prod.conf.js",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"mall",
"shop"
],
"author": "frog",
"repository": "https://github.com/bjtqti/font-end-boilerplate.git",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^2.1.2",
"html-webpack-plugin": "^2.29.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.0",
"webpack-hot-middleware": "^2.18.0"
},
"dependencies": {
"babel-plugin-transform-runtime": "^6.15.0"
}
}
这个文件其实就是一个json对象，里边重点掌scripts 的用法。比如start：node server.js 对应 npm run start （或 npm start) 这条命令就相当于是在node环境下运行了server.js
那么server.js(文件名可以自已定）里边保存了一些什么内容？
var express = require("express");
var webpack = require("webpack");
var path = require('path')
var app = express();
var webpackConfig = require("./task/webpack.api.conf.js");
var compiler = webpack(webpackConfig);
var devMiddleware = require('webpack-dev-middleware')(compiler, {
contentBase: webpackConfig.output.path,
publicPath: webpackConfig.output.publicPath,
//hot: true,
//stats: { colors: true },
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
//lazy: true,
//path:'/hmr',
log: () => {}
})
app.use(express.static('./dist'));
app.use(hotMiddleware)
app.use(devMiddleware)
app.listen(4000, function () {
console.log("Listening on port 4000!");
});
其实就是使用了express来搭建一个小型的开发服务器。然后引用webpack-dev-middleware和webpack-hot-middleware两个中间件，结合webpack.api.conf.js的配置，实现打包和热加载src下面的代码。由于这里涉及到express的知识，不打算涉及全栈的前端只需了解一下即可，因为后面还有一个封装好的工具可以替代这些工作--webpack-dev-server
所以我在script中添加了一个dev：webpack-dev-server 的命令，这全完是为了方便学习这两种方式的应用，实际上任选其中一种就好了，这一种可能会感觉更简单，因为它是第一种方式的封装，但是要深入的了解，还是建议看看第一种方式，Vue-cli也是采用的第一方式，因为它可供开发者自由支配的空间更大。唯一需要注意的是，如果使用webpack-dev-server的话，目前还不能用webpack3.0+。
接下来运行npm run build 看看，dist目录下是不是多了一些文件？这就是将来可以直接发布到线上的代码了。
到这里，打包，发布 都介绍完了，下面简单演示一下热替换（也就是所谓的无刷新替换效果）。为了演示方便，我在src下放了一些代码.
当我们打开http://localhost:4000的时候，浏览器上有一段绿色的文字:Hello world 还有一个时间毫秒数，加这个毫数的目的是为了演示，如果页面刷新了，数字会改变。
然后修改style.css中的内容，比如把字体颜色改成红色，浏览器上的字体颜色也相应的变化了，而数字没有发生改变。如果手动刷新的话，可以看到数字是会变化的。
这不仅会节省时间，而且对于要保存页面状态（比如某按钮选中）的情况非常有用。当我们修改hello.es6的时候，页面变成了自动刷新，这是因为我没有使用js的热替换加载器。
如果对html的修改，也想要自动刷新的话，需要用到插件，发出相应的事件。比如vue-cli中的方式：
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
这里只是发出一个通知：action:'reload'，要使页面自动重新加载，还需要有一个接收通知的代码：
比如在入口中加入：
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
这个地方比较深奥，没有弄明白也没关系，有其它方式同样可以实现。比如webpack-dev-server 内部已经自动完成了对不支持热替换的加载器，自动降为刷新。
这也是为什么在开发环境下使用了extract-text-webpack-plugin（提取css的插件）后，样式的热替换变成了刷新效果的原因。