软件测试实战项目02：前端环境

测试奇谭，BUG不见。

大家好，我是谭叔。

本期开始搭建软件测试项目的前端环境。

在搭建之前，我先申明一点：请认真并仔细按照教程操作，关注我写的每一句话。如果有所遗漏，都会导致环境搭建失败。

项目目录

如果你还没有获取app-shizhan资料，请参考：

软件测试项目实战01：项目说明

获取项目后，按如下目录解压：

其中，最重要的是code文件夹：

一、安装HBuilderX

访问https://www.dcloud.io/hbuilderx.html，根据你的操作系统，下载对应的版本。

这里以windows举例：

下载好后，将其解压即可。为了方便演示，我新建了一个文件夹APPtest。

tips：最好使用英文目录!

二、运行demo代码

解压完毕后，打开HBuilderX，选择打开目录，打开app-shizhan–code–01-demo–yoshop2.0-uniapp文件夹。

打开文件夹后，HBuilderX左侧会展示项目列表，此时，点击项目选中它，然后运行到谷歌Chrome浏览器。

tips：需要选中该项目，再点击运行到浏览器。否则会报无法运行的错误。

在运行的过程中，会报插件缺失的错误：

此时，你只需点击报错提示的链接，按图示方法安装缺失的插件。

tips：安装插件需要注册账号。

注册账号+验证邮箱+社区身份验证参考链接：

https://dev.dcloud.net.cn/

https://ask.dcloud.net.cn/account/setting/profile/

插件安装成功后，点击小三角运行按钮，重新运行它。

运行成功后，浏览器会自动打开前端页面。

三、解决跨域问题

此时，虽然打开了页面，但是因为跨域问题，我们拿不到商城的数据，会提示网络请求出错。

我们需要安装一个谷歌插件来解决此问题。

01 在浏览器地址栏输入：chrome://extensions/ 打开谷歌浏览器拓展程序坞。

02 打开app-shizhan文件夹，将allow-cors-access-control.crx文件拖拽进刚刚访问的谷歌浏览器拓展程序坞。

03 安装成功，如图操作，点击浏览器右上角的图标，将插件固定在浏览器上。

04 点击插件，并点击Toggle ON按钮，使插件变为橙色，完成安装。

四、使用程序

至此，demo演示程序安装完毕。

刷新页面，数据、图片、文案等，都能正常展示了。你可以上手实操，使用它的各个功能。

但是，因为是demo代码，请求的接口是商城作者提供的，你无法修改商城的数据，比如添加、删除商品，增加商品分类，随意注册账号等操作。

如果想任意修改，自由操作，还需要搭建一套本地服务。

下期，我们便来完成它！