摘要：进行测试之理论是目前很火的一个测试组件，内部绑定了之类的断言为了让代码代码更有说服力，减少提交测试错误，进行测试显然是非常有必要的。
cypress 进行 e2e 测试之理论
cypress 是目前 e2e 很火的一个测试组件，内部绑定了 macha、chai、chai-jquery 之类的断言,为了让代码代码
更有说服力，减少提交测试错误，进行 e2e 测试显然是非常有必要的。
官网
GitHub
借鉴官网一句话来说:
Cypress is a next generation front end testing tool built for the modern web. We address the key本文环境
pain points developers and QA engineers face when testing modern applications.
node v9.5 npm v5.5e2e 简介
e2e 测试端对端测试的简称, e2e 即为end to end,
指任意一个人的社交、交易、休闲都可以直接与另外任意一个人产生关系，去中心化、渠道化.
做前端怎么少的多的了 npm 呢
$ npm i -D cypress
然后为了方便起见，咱们在package.json中写入下面脚本:
{
"scripts": {
"e2e:open": "cypress open",
"e2e:run": "cypress run"
}
}
运行npm run e2e:open,启动一个 cypress 的服务器，如下:
如下图这就完成了一个启动一个 cypress。第一次点开时候，cypress 会帮你创建一个初始化配置目录，这是
cypress 推荐的目录的结构，当然也可以自己创建。
点击 example_spec.js 文件，然后可以看到如下界面,cypress 开始测试:
上面就看到 cypress 的运行过程了。下面看看 example_spec.js(文件的位置
:projectName/cypress/integration)文件中写了啥:
describe("Kitchen Sink", function() {
it(".should() - assert that is correct", function() {
// ...
}
})</pre>
<p>这是主要结构的，下面大部分都是在一个<b>it</b>函数内部，是测试里面的回调函数。详细可以查看 TDD 和 BDD 测试<br>框架，cypress 绑定了这些测试框架。</p>
<b>cy.visit</b>
<p>这是 cypress 里面一个很重要的方法，可以访问一个链接,列入 example.js 文件如下:</p>
<pre>beforeEach(function() {
// Visiting our app before each test removes any state build up from
// previous tests. Visiting acts as if we closed a tab and opened a fresh one
cy.visit("https://example.cypress.io/commands/querying")
})</pre>
<p>这里就是在前置钩子函数里面访问了<b>https://...../querying</b>这个链接。如果代码需要浏览器调试，比如用户交<br>互点击，用户输入之类的。第一步就是访问：cy.visit</p>
<b>cy.get</b>
<p>还是从 example_spec.js 问中说起：</p>
<pre>it("cy.get() - query DOM elements", function() {
// https://on.cypress.io/get
// Get DOM elements by id
cy.get("#query-btn").should("contain", "Button")
// Get DOM elements by class
cy.get(".query-btn").should("contain", "Button")
cy.get("#querying .well>button:first").should("contain", "Button")
// ↲
// Use CSS selectors just like jQuery
})</pre>
<p>这里定义了一个测试单元，在这个里面做了啥呢？第一步获取 id 为 query-btn 这个按钮。接下来 should 操作<br>，奉上一张表自行查看: <script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000014630106?w=743&h=810");</script></p>
<p>cy.get 还有一个玩法就是 cy.get("@app")这种，意思说之前你已经<b>cy.get(".app").as("app")</b>,不需要再次获<br>取了，直接使用别名就好了</p>
<p>从官网截图的表格，详<br>细jquery-chai 文档表格</p>
<p>这里看到<b>cy.get()</b>和<b>jquery.$</b>是不是很像，在官网这里说了这样一句话:</p>
<pre>The querying behavior of this command matches exactly how $(…) works in jQuery.</pre>
<p>所以可以将 cy.get()当$一样来用即可，不过这里返回的不过 jquery 对象罢了，这里返回的事通过 cypress 包<br>装过的对象可以在控制台看到这样的东西,见下图:<br><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000014630107?w=718&h=1192");</script></p>
<p>是一个用于 cypress 所有方法的对象。然后可以操作他的 api 了。</p>
<p>第一部分，主要是查询，查询页面元素是否按照我们开发想要的存在，下面看第二部分:</p>
<pre>context("Actions", function() {
beforeEach(function() {
cy.visit("https://example.cypress.io/commands/actions")
})
// Let"s perform some actions on DOM elements
// https://on.cypress.io/interacting-with-elements
it(".type() - type into a DOM element", function() {
// https://on.cypress.io/type
cy
.get(".action-email")
.type("fake@email.com")
.should("have.value", "fake@email.com")
// .type() with special character sequences
.type("{leftarrow}{rightarrow}{uparrow}{downarrow}")
.type("{del}{selectall}{backspace}")
// .type() with key modifiers
.type("{alt}{option}") //these are equivalent
.type("{ctrl}{control}") //these are equivalent
.type("{meta}{command}{cmd}") //these are equivalent
.type("{shift}")
// Delay each keypress by 0.1 sec
.type("slow.typing@email.com", { delay: 100 })
.should("have.value", "slow.typing@email.com")
cy
.get(".action-disabled")
// Ignore error checking prior to type
// like whether the input is visible or disabled
.type("disabled error checking", { force: true })
.should("have.value", "disabled error checking")
})
})</pre>
<p>这一部分主要是进行获取元素交互, 下面来说交互是如何搞得。 与 cy.get 相似还有:</p>
<p>cy.contains 通过文本获取元素</p>
<p>cy.closet 见 jqery</p>
<p>cy.next/cy.nextAll 可以和 cy.contains 联合使用获取该节点的下一个节点</p>
<p>cy.prev/cy.prevAll 同上</p>
<p>cy.children/cy.parents/cy.parent 获取子节点/ 所有的父节点 / 父节点</p>
<p>cy.first/cy.last</p>
<p>cy.url 获取当前页面 url</p>
<p>cy.title 获取当前页面标题</p>
<p>... API 挺多的，同样奉<br>上api 文档
</p>
<b>cypress 交互逻辑</b>
<p>既然要交互肯定需要点击输入滚动，可以还存在拖拽等等。咱们就暂时从输入开始说起啦</p>
<b>cy.type</b>
<p>这不是一个可以直接使用的方法，要配合<b>cy.get</b>使用的,作用是给空间进行输入。例如:</p>
<b>测试输入例如 text, textarea</b>
<pre>cy.get("input").type("hello world")</pre>
<b>测试 tabIndex</b>
<pre> <div class="el" tabIndex="1">
This is TabIndex div.
</div></pre>
<pre>cy.get(".el").type("laldkadaljdkljasf") // 这个里面是随机字符串</pre>
<b>测试 input 为日期的</b>
<pre>cy.get("input[type=date]").type("2008-8-9")</pre>
<b>键盘绑定</b>
<p>下面直接是对 input 进行组合键盘操作</p>
<pre>cy.get("input").type("{shift}{alt}Q")</pre>
<p>按住键盘操作</p>
<pre>cy.get("input").type("{alt}这里是按了一下alt后输入的内容")</pre>
<p>还有长按键盘之类的操作，详细就看官网了这里之类奉上链<br>接https://docs.cypress.io/api/commands/type.html#Key-Combinations</p>
<p>这里就是关于键盘的组合操作。</p>
<b>对于选择例如 radio, checkbox</b>
<p>这些就只需要利用点击事件即可，如下:</p>
<pre>cy
.get("input[type=radio]")
.as("radio")
.click()
cy.get("@radio").should("be.checked")</pre>
<b>定时</b>
<b>cy.wait</b>
<p>下面是等待 1s</p>
<pre>cy.wait(1000)</pre>
<b>cy.clock 和 cy.tick</b>
<p>自己的代码：</p>
<pre>var seconds = 0
setInterval(() => {
$("#seconds-elapsed").text(++seconds + " seconds")
}, 1000)</pre>
<p>测试代码</p>
<pre>cy.clock()
cy.visit("/index.html")
cy.tick(1000)
cy.get("#seconds-elapsed").should("have.text", "1 seconds")
cy.tick(1000)
cy.get("#seconds-elapsed").should("have.text", "2 seconds")</pre>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000014630108");</script> 这里就会出现关于 clock 和 tick<br>的用法，更多用法看文档，我也有部分迷惑的。待后来再解决。老规矩文档地址:<br>地址</p>
<b>关于 cypress 的配置</b>
<p>先复制一段出来:</p>
<pre>{
"baseUrl": "http://localhost:8080",
"pageLoadTimeout": 3000,
"viewportHeight": 667,
"viewportWidth": 375
}</pre>
<p>这是一个非常精简的配置了:</p>
<p>baseUrl 基础链接，之后在是使用 cy.visit 的时候，只需要访问具体路由例如: cy.visit("/Hello")</p>
<p>
<p>viewport 两个属性</p>
<p>viewportHeight 测试窗口的高度</p>
<p>viewportWidth 测试窗口的宽度</p>
</p>
<p>pageLoadTimeout 页面家安在超过 3000ms 即为超时。</p>
<b>总结</b>
<p>上面是 cypress 的基本用法，cypress 是基于 electron 的一个测试框架，提供 web 环境进行点对点的测试，在<br>programer 思维下，进行自动化的交互操作，必要点检测说明，这是一个非常棒的用处。例如之后拥有数据埋点，<br>可以在固定的位置检测是否有埋点。测试想要的地方是否匹配的数据。模拟用户的点击操作，这都是非常棒的。在<br>jquery 操作年代，各种 id 和 class 奇怪命名下，这些都可以容易找到，在 vue 和 react 大行其道的年代，但<br>是却可以通过文本寻找节点。这也是非常棒的体验，更多秘密需要去体验，奉上官方地址<br>：官网 cypress</p>
</div>
<div class="mt-64 tags-seach" >
<div class="tags-info">
<a style="width:120px;" title="超融合服务器" href="https://www.ucloud.cn/site/product/utrion.html">超融合服务器</a>
<a style="width:120px;" title="idc机房托管" href="https://www.ucloud.cn/site/product/uxzone.html">idc机房托管</a>
<a style="width:120px;" title="进行测试" href="https://www.ucloud.cn/yun/tag/jinxingceshi/">进行测试</a>
<a style="width:120px;" title="java进行接口测试" href="https://www.ucloud.cn/yun/tag/javajinxingjiekouceshi/">java进行接口测试</a>
<a style="width:120px;" title="cypress" href="https://www.ucloud.cn/yun/tag/cypress/">cypress</a>
<a style="width:120px;" title="云主机上可以进行压力测试吗" href="https://www.ucloud.cn/yun/tag/yunzhujishangkeyijinxingyaliceshima/">云主机上可以进行压力测试吗</a>
</div>
</div>
<div class="entry-copyright mb-30">
<p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p>
<p>转载请注明本文地址：https://www.ucloud.cn/yun/94633.html</p>
</div>
<ul class="pre-next-page">
<li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/94632.html">上一篇：如何把滑动条变好看一点</a></li>
<li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/94634.html">下一篇：关于js节流函数throttle和防抖动debounce</a></li>
</ul>
</div>
<div class="about_topicone-mid">
<h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3>
<ul class="com_white-left-mid atricle-list-box">
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/107684.html"><b>前端<em>E2E</em><em>测试</em>框架 <em>cypress</em>了解一下</b></a></h2>
<p class="ellipsis2 good">摘要：是一款开箱即用可以跑在浏览器上的测试工具。同样，测试了也可以直接调试。这个时候我们的测试文件就可以访问了，点击之后发现他需要我们编写测试用例，那么接下来就手把手教你编写基本的测试用例。
What is E2E?
所谓的E2E就是end-to-end。 假设我们编写的每个功能程序都是一个黑匣子，最终用户也只会看到这个黑匣子，那么站在用户的角度来看并不需要知道这个黑匣子内部是什么东西也不...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-172.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/01/small_000000172.jpg" alt=""><span class="layui-hide64">mushang</span></a>
<time datetime="">2019-08-26 11:51</time>
<span><i class="fa fa-commenting"></i>评论0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/94439.html"><b>撩<em>测试</em>MM神器<em>cypress</em>使用入门</b></a></h2>
<p class="ellipsis2 good">摘要：上也有几个临时方案，目前我倾向使用自带的来查看。在打开的测试的浏览器中打开切到按下用户按，输入，选择重新刷新并统计代码执行覆盖率。那么，起来为了高撩质测量试代码，起来。
不很久不很久以前
据说某家公司有两位前端，天天撸bug，为啥嘞？只怪测试MM倾人国，轻语哥哥有bug。✧(๑•̀ㅂ•́)و✧ 可是最近两位有点犯愁 Σ(っ °Д °;)っ。测试MM有几次提了紧急bug，都在旁边鼓励他们...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-837.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/08/small_000000837.jpg" alt=""><span class="layui-hide64">MAX_zuo</span></a>
<time datetime="">2019-08-22 16:32</time>
<span><i class="fa fa-commenting"></i>评论0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/95054.html"><b>端到端<em>测试</em>哪家强？不容错过的<em>Cypress</em></b></a></h2>
<p class="ellipsis2 good">摘要：阅读原文目前测试工具有哪些项目不需要不需要端到端测试一般都需要一个容器，来运行前端应用。向快速，一致和可靠的无剥落测试问好。
阅读原文
1. 目前E2E测试工具有哪些？
项目
Web
Star
puppeteer
Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win)
31906
nightmare
Electron
15502
...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-573.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/05/small_000000573.jpg" alt=""><span class="layui-hide64">LancerComet</span></a>
<time datetime="">2019-08-22 17:19</time>
<span><i class="fa fa-commenting"></i>评论0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/99095.html"><b>FE.TEST-前端<em>测试</em>初探</b></a></h2>
<p class="ellipsis2 good">摘要：使用可以快速生成一个项目，其中包含了和以及覆盖率统计的配置参考一个创建测试脚本的快速方法其他参考资料前端自动化测试概览测试之使用对项目进行单元测试
showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317);
前言
测试可以提供快速反馈，根据测试用例覆盖代码，从而提升代码开发效率和质量。根据投入产出价值，通常迭代较快的业务逻辑不做...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-1120.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/11/small_000001120.jpg" alt=""><span class="layui-hide64">Travis</span></a>
<time datetime="">2019-08-23 12:55</time>
<span><i class="fa fa-commenting"></i>评论0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="topicone-box-wangeditor">
<h3 class="top-com-title mb-64"><span>发表评论</span></h3>
<div class="xcp-publish-main flex_box_zd">
<div class="unlogin-pinglun-box">
<a href="javascript:login()" class="grad">登陆后可评论</a>
</div> </div>
</div>
<div class="site-box-content">
<div class="site-content-title">
<h3 class="top-com-title mb-64"><span>0条评论</span></h3>
</div>
<div class="pages"></ul></div>
</div>
</div>
<div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
<div class="">
<div class="com_layuiright-box user-msgbox">
<a href="https://www.ucloud.cn/yun/u-768.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/07/small_000000768.jpg" alt=""></a>
<h3><a href="https://www.ucloud.cn/yun/u-768.html" rel="nofollow">chnmagnus</a></h3>
<h6>男<span>|</span>高级讲师</h6>
<div class="flex_box_zd user-msgbox-atten">
<a href="javascript:attentto_user(768)" id="attenttouser_768" class="grad follow-btn notfollow attention">我要关注</a>
<a href="javascript:login()" title="发私信" >我要私信</a>
</div>
<div class="user-msgbox-list flex_box_zd">
<h3 class="hpf">TA的文章</h3>
<a href="https://www.ucloud.cn/yun/ut-768.html" class="box_hxjz">阅读更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119914.html">把 RNN 循环神经网络植入体内，仅凭一张“薄片”，就能直接检测你有无心律异常</a></h3>
<p>阅读 3444<span>·</span>2021-09-13 10:28</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/118068.html">SecureIDC：$19/月/1GB内存/100GB SSD空间/500GB流量/1Gbps端口/</a></h3>
<p>阅读 1819<span>·</span>2021-08-10 09:43</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/116086.html">第三集: 从零开始实现一套pc端vue的ui组件库(button组件其一)</a></h3>
<p>阅读 873<span>·</span>2019-08-30 15:44</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115408.html">Bootstrap 栅格布局</a></h3>
<p>阅读 3028<span>·</span>2019-08-30 13:14</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113990.html">解决input 中placeholder的那些神坑</a></h3>
<p>阅读 1642<span>·</span>2019-08-29 16:56</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113841.html">一个常年更新的CSS采坑合集</a></h3>
<p>阅读 2802<span>·</span>2019-08-29 16:35</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112270.html">HTML CSS 实现鼠标悬停时图片拉近效果</a></h3>
<p>阅读 2724<span>·</span>2019-08-29 12:58</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/109497.html">canvas-塔防游戏</a></h3>
<p>阅读 764<span>·</span>2019-08-26 13:46</p></li>
</ul>
</div>
<!-- 文章详情右侧广告-->
<div class="com_layuiright-box">
<h6 class="top-com-title"><span>最新活动</span></h6>
<div class="com_adbox">
<div class="layui-carousel" id="right-item">
<div carousel-item>
<div>
<a href="https://www.ucloud.cn/site/product/uhost.html" rel="nofollow">
<img src="https://www.ucloud.cn/yun/data/attach/220620/Z7TLrpAi.png" alt="云服务器">
</a>
</div>
<div>
<a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow">
<img src="https://www.ucloud.cn/yun/data/attach/220620/MWraMsBh.png" alt="混合云">
</a>
</div>
<div>
<a href="https://www.ucloud.cn/site/product/ucloudstack.html" rel="nofollow">
<img src="https://www.ucloud.cn/yun/data/attach/220620/ifzOxvjW.png" alt="私有云">
</a>
</div>
<div>
<a href="https://www.ucloud.cn/site/product/utrion.html" rel="nofollow">
<img src="https://www.ucloud.cn/yun/data/attach/220620/VDqwC1iN.png" alt="超融合服务器">
</a>
</div>
<div>
<a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow">
<img src="https://www.ucloud.cn/yun/data/attach/220630/pJwnviKN.png" alt="服务器托管">
</a>
</div>
<div>
<a href="https://www.ucloud.cn/site/product/uxzone.html" rel="nofollow">
<img src="https://www.ucloud.cn/yun/data/attach/220630/CDb5uXxp.jpeg" alt="idc机房托管">
</a>
</div>
<div>
<a href="https://www.ucloud.cn/site/active/network.html?ytag=seo" rel="nofollow">
<img src="https://www.ucloud.cn/yun/data/attach/230227/XWsSXmvm.png" alt="专线服务">
</a>
</div>
</div>
</div>
</div> <!-- banner结束 -->
<div class="adhtml">
</div>
<script>
$(function(){
$.ajax({
type: "GET",
url:"https://www.ucloud.cn/yun/ad/getad/1.html",
cache: false,
success: function(text){
$(".adhtml").html(text);
}
});
})
</script> </div> </div>
</div>
</div>
</div>
</section>
<!-- wap拉出按钮 -->
<div class="site-tree-mobile layui-hide">
<i class="layui-icon layui-icon-spread-left"></i>
</div>
<!-- wap遮罩层 -->
<div class="site-mobile-shade"></div>
<!--付费阅读 -->
<div id="payread">
<div class="layui-form-item">阅读需要支付1元查看</div>
<div class="layui-form-item"><button class="btn-right">支付并查看</button></div>
</div>
<script>
var prei=0;
$(".site-seo-depict pre").each(function(){
var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">','');
$(this).attr('data-clipboard-text',html).attr("id","pre"+prei);
$(this).html("").append("<code>"+html+"</code>");
prei++;
})
$(".site-seo-depict img").each(function(){
if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){
$(this).remove();
}
})
$("LINK[href*='style-49037e4d27.css']").remove();
$("LINK[href*='markdown_views-d7a94ec6ab.css']").remove();
layui.use(['jquery', 'layer','code'], function(){
$("pre").attr("class","layui-code");
$("pre").attr("lay-title","");
$("pre").attr("lay-skin","");
layui.code();
$(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)");
});
function copycode(target){
var id=$(target).parent().parent().attr("id");
var clipboard = new ClipboardJS("#"+id);
clipboard.on('success', function(e) {
e.clearSelection();
alert("复制成功")
});
clipboard.on('error', function(e) {
alert("复制失败")
});
}
//$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5));
</script>
<link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
<script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
<script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
function setcode(){
var _html='';
document.querySelectorAll('pre code').forEach((block) => {
var _tmptext=$.trim($(block).text());
if(_tmptext!=''){
_html=_html+_tmptext;
console.log(_html);
}
});
}
</script>
<script>
function payread(){
layer.open({
type: 1,
title:"付费阅读",
shadeClose: true,
content: $('#payread')
});
}
// 举报
function jupao_tip(){
layer.open({
type: 1,
title:false,
shadeClose: true,
content: $('#jubao')
});
}
$(".getcommentlist").click(function(){
var _id=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
$("#articlecommentlist"+_id).toggleClass("hide");
var flag=$("#articlecommentlist"+_id).attr("dataflag");
if(flag==1){
flag=0;
}else{
flag=1;
//加载评论
loadarticlecommentlist(_id,_tid);
}
$("#articlecommentlist"+_id).attr("dataflag",flag);
})
$(".add-comment-btn").click(function(){
var _id=$(this).attr("dataid");
$(".formcomment"+_id).toggleClass("hide");
})
$(".btn-sendartcomment").click(function(){
var _aid=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
var _content=$.trim($(".commenttext"+_aid).val());
if(_content==''){
alert("评论内容不能为空");
return false;
}
var touid=$("#btnsendcomment"+_aid).attr("touid");
if(touid==null){
touid=0;
}
addarticlecomment(_tid,_aid,_content,touid);
})
$(".button_agree").click(function(){
var supportobj = $(this);
var tid = $(this).attr("id");
$.ajax({
type: "GET",
url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid,
cache: false,
success: function(hassupport){
if (hassupport != '1'){
$.ajax({
type: "GET",
cache:false,
url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid,
success: function(comments) {
supportobj.find("span").html(comments+"人赞");
}
});
}else{
alert("您已经赞过");
}
}
});
});
function attenquestion(_tid,_rs){
$.ajax({
//提交数据的类型 POST GET
type:"POST",
//提交的网址
url:"https://www.ucloud.cn/yun/favorite/topicadd.html",
//提交的数据
data:{tid:_tid,rs:_rs},
//返回数据的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//在请求之前调用的函数
beforeSend:function(){},
//成功返回之后调用的函数
success:function(data){
var data=eval("("+data+")");
console.log(data)
if(data.code==2000){
layer.msg(data.msg,function(){
if(data.rs==1){
//取消收藏
$(".layui-layer-tips").attr("data-tips","收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>');
}
if(data.rs==0){
//收藏成功
$(".layui-layer-tips").attr("data-tips","已收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart"></i>')
}
})
}else{
layer.msg(data.msg)
}
} ,
//调用执行后调用的函数
complete: function(XMLHttpRequest, textStatus){
postadopt=true;
},
//调用出错执行的函数
error: function(){
//请求出错处理
postadopt=false;
}
});
}
</script>
<footer>
<div class="layui-container">
<div class="flex_box_zd">
<div class="left-footer">
<h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6>
<p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p>
</div>
<div class="right-footer layui-hidemd">
<ul class="flex_box_zd">
<li>
<h6>UCloud与云服务</h6>
<p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p>
<p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p>
<p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p>
<p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p>
</li>
<li>
<h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p>
<p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p>
</li>
<li>
<h6>社区栏目</h6>
<p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p>
<p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li>
<li>
<h6>常见问题</h6>
<p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p>
<p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p>
<p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p>
<p><a href="https://www.ucloud.cn/site/notice/">公告</a></p>
</li>
<li>
<span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span>
<p>扫扫了解更多</p></div>
</div>
<div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DZSMXQ3P9N');
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></div>
</div>
</footer>
</body>
<script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script>
<<script type="text/javascript">
$(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%");
</script>
</html>