资讯专栏INFORMATION COLUMN

[叁]Flask web开发:模板

mochixuan / 1547人阅读

摘要:使用真实值替代变量,再返回最终得到的响应字符串,这一过程成为渲染。渲染模板渲染模板提供的函数把模板引擎集成到了程序中。随后的参数都是键值对,表示模板中变量对应的真实值。程序现在使用的模板继承自不是直接继承自的基模板。

本系列笔记是我阅读Miguel Grinberg的《Flask Web Development》的笔记,标题与书本同步。希望通过记录技术笔记的方式促进自己对知识的理解。

本篇对应书本第三章:模板。

模板是一个包含响应文本的文件,其中包含用占位变量表示的动态部分,其具体值只在请求的上下文中才能知道。使用真实值替代变量,再返回最终得到的响应字符串,这一过程成为渲染。

Jinja2模板引擎

Flask渲染模板使用的是Jinja2模板引擎。

渲染模板
hello.py 渲染模板
from flask import Flask,render_template

#...

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/user/")
def user(name):
    return render_template("user.html",name=name)
    
# Flask提供的render_template函数把Jinja2模板引擎集成到了程序中。
# render_template函数的第一个参数是模板的文件名。
# 随后的参数都是键值对,表示模板中变量对应的真实值。
变量

模板中使用的{{ name }}结构表示一个变量,它是一种特殊的占位符,告诉模块引擎这个位置的值从渲染模板时使用的数据中获取。

Jinja2能识别所有类型的变量,示例:

A value from a dictionary:{{ mydict["key"]}}.

A value from a list:{{ mylist[3]}}.

A value from a list,with a variable index:{{ mylist[myintvar] }}.

A value from an object"s method: {{ myobj.somemethod() }}.

变量过滤器

过滤器名添加在变量之后,中间使用竖线分隔。

hello, {{ name|capitalize }}

常用过滤器:

过滤器名 说明
safe 渲染值时不转义
capitalize 把值得首字母转换成大写,其他字母转换成小写
lower 把值转换成小写形式
upper 把值转换成大写形式
title 把值中每个单词的首字母都换成大写
trim 把值的首位空格去掉
striptags 渲染之前把值中所有的HTML标签都删掉
控制结构 条件控制结构
{% if user %}
    Hello,{{ user }}!
{% else %}
    Hello, Stranger!
{% endif %}
渲染一组元素
    {% for comment in comments %}
  • {{ comment }}
  • {% endfor %}
{{% macro render_comment(comment)%}}
    
  • {{ comment }}
  • {{ endmacro }}
      {% for comment in comments %} {{ render_comment(comment) }} {% endfor %}
    为了重复使用宏,保存在多带带文件中,再在需要的模板中导入。 {% import "macro.html" as macros %}
      {% for comment in comments%} {{ macros.render_comment(comment)}} {% endfor%}
    复用代码片段
    {% include "common.html" %}
    
    模板继承
    - 建一个名为base.html的基模板
    
    
        {% block head %}
        {% block title %}{% endblock %} - My Application
        {% endblock %}
    
    
        {% block body %}
        {% endblock %}
    
    
    
    - 衍生模板中修改block标签定义的元素
    {% extends "base.html" %} #定义基模板
    {% block title%}Index{% endblock %} #修改title块内容
    {% block head %} #修改head块内容
        {{ super() }} #原来head中有内容,用super()获取原来的内容
        
    {% endblock %}
    {% block body %} #修改body块内容
    

    Hello, World!

    {% endblock %}
    使用Flask-Bootstrap集成Twitter Bootstrap

    Bootstrap是Twitter开发的一个开源框架,它提供用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代Web浏览器。Bootstrap是客户端框架,不会直接涉及服务器。可以在模板中引用Bootstrap的CSS和JavaScript文件。

    安装Flask-Bootstrap扩展
    (venv)$ pip install flask-bootstrap
    
    hello.py: 初始化Flask-Bootstrap
    from falsk_bootstrap import Bootstrap
    # ...
    bootstrap = Bootstrap(app)
    
    使用Flask-Bootstrap的模板
    {% extends "bootstrap/base.html" %}
    
    {% block title%}Flasky{% endblock %}
    
    {% block navbar %}
    
    {% endblock %}
    
    {% block content %}
    
    {% endblock %} # 模板利用Bootstrap中的样式进行了修改
    Flask-Bootstrap基模板中定义的块
    块名 说明
    doc 整个HTML文档
    html_attribs 标签的属性
    html 标签中的内容
    head 标签中的内容
    title 标签中的内容</td> </tr> <tr> <td>metas</td> <td>一组<meta>标签</td> </tr> <tr> <td>styles</td> <td>层叠样式表定义</td> </tr> <tr> <td>body_attribs</td> <td><body>标签的属性</td> </tr> <tr> <td>body</td> <td><body>标签中的内容</td> </tr> <tr> <td>navbar</td> <td>用户定义的导航条</td> </tr> <tr> <td>content</td> <td>用户定义的页面内容</td> </tr> <tr> <td>scripts</td> <td>文档底部的JavaScript声明</td> </tr> </tbody> </table> <b>自定义错误页面</b> <pre> <p>利用Jinja2的模板继承机制可以让templates/base.html继承自bootstrap/base.html。</p> <pre>{% extends "bootstrap/base.html" %} {% block title %}Flasky{% endblock %} {% block navbar %} <div class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Flasky</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> </ul> </div> </div> </div> {% endblock %} {% block content %} <div class="container"> {% block page_content %}{% endblock %} </div> {% endblock %} </pre> <p>程序现在使用的模板继承自templates/base.html不是直接继承自Flask-Bootstrap的基模板。</p> </pre> <pre>404错误页面:继承自templates/base.html {% extends "base.html" %} {% block title %}Flasky - Page Not Found{% endblock %} {% block page_content %} <div class="page-header"> <h1>Not Found</h1> </div> {% endblock %} user页面:继承自templates/base.html {% extends "base.html" %} {% block title %}Flasky{% endblock %} {% block page_content %} <div class="page-header"> <h1>Hello, {{ name }}!</h1> </div> {% endblock %} </pre> <b>链接</b> <pre><p>Flask提供了url_for()辅助函数,它可以使用程序URL映射中保存的信息生成URL。</p></pre> <p><p>url_for函数最简单的用法:以视图函数名作为参数,返回对应的URL。url_for("index")得到的结果是"/"</p></p> <p><p>使用url_for生成动态地址时,将动态部分作为关键字参数传入。<br>url_for("user",name="john",_external=True)</p></p> <p><p>函数能将任何额外参数添加到查询字符串中。</p></p> <b>静态文件</b> <b>使用Flask-Moment本地化日期和时间</b> <pre><p>Flask-Moment是Flask的一个程序扩展,能够在浏览器中渲染日期和时间。</p></pre> <p>安装Flask-Moment</p> <pre>(venv)$ pip install flask-moment </pre> <b>hello.py:初始化Flask-Moment</b> <pre>from flask_moment import Moment moment = Moment(app) </pre> <b>templates/base.html: 引入 moment.js库</b> <pre>{% block scripts %} {{ super() }} {{ moment.include_moment() }} {% endblock %} </pre> <b>hello.py: 加入一个datetime变量</b> <pre>from date.time import datetime @app.route("/") def index(): return render_template("index.html",current_time=datetime.utcnow()) </pre> <b>templates/index.html: 使用Flask-Moment渲染时间戳</b> <pre><p>The local date and time is {{ moment(current_time).format("LLL") }}.</p> <p>That was {{ moment(current_time).fromNow(refresh=True) }}.</p> </pre> <hr> <p>本文由 <strong>EverFighting</strong> 创作,采用 **[知识共享署名 3.0 中国大陆许可协议]</p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/product/uhost.html">云服务器</a> <a style="width:120px;" title="私有云" href="https://www.ucloud.cn/site/product/ucloudstack.html">私有云</a> <a style="width:120px;" title="Flask_Web" href="https://www.ucloud.cn/yun/tag/Flask_Web/">Flask_Web</a> <a style="width:120px;" title="web模板" href="https://www.ucloud.cn/yun/tag/webmoban/">web模板</a> <a style="width:120px;" title="web前端模板" href="https://www.ucloud.cn/yun/tag/webqianduanmoban/">web前端模板</a> <a style="width:120px;" title="小程序开发模板" href="https://www.ucloud.cn/yun/tag/xiaochengxukaifamoban/">小程序开发模板</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。</p> <p>转载请注明本文地址:https://www.ucloud.cn/yun/38104.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/38103.html">上一篇:pyenv 安装配置与国内镜像加速 结合 virtualenv</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/38105.html">下一篇:SICP Python描述 1.1 引言</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/44228.html"><b>从零开始搭建论坛(三):<em>Flask</em>框架简单介绍</b></a></h2> <p class="ellipsis2 good">摘要:我们的论坛项目就使用了该框架。此外,麦子学院也有一个入门视频教程,一共小时的视频教程,涵盖开发的方方面面,包括环境的搭建,语法介绍,项目结构的组织,全球化,单元测试等内容。博客地址更多阅读的机制三个框架的对比 前面两篇文章中我们已经了解 Web(HTTP)服务器,Web应用程序,Web框架,WSGI这些 Python Web 开发中的概念。我们知道,Web框架通过将不同Web应用程序中...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1211.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/12/small_000001211.jpg" alt=""><span class="layui-hide64">Alan</span></a> <time datetime="">2019-07-31 10: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/44942.html"><b><em>Flask</em>框架基础(二)</b></a></h2> <p class="ellipsis2 good">摘要:处理和函数之间关系的程序称为路由。模板引擎是由实现的是内置的模板语言参照设计思想设计的,跟差不多渲染模板默认情况下,在程序文件夹中的子文件夹中寻找模板。如果需要可在文件夹中使用子文件夹存放文件。 1 程序的基本结构 1.1初始化 所有Flask 程序都必须创建一个程序实例。Web 服务器使用一种名为Web 服务器网关接口(Web Server Gateway Interface,WSG...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-599.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/05/small_000000599.jpg" alt=""><span class="layui-hide64">lpjustdoit</span></a> <time datetime="">2019-07-31 11:17</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/122015.html"><b>最终篇:简洁易懂,初学者挑战学习Python编程30天 (五)</b></a></h2> <p class="ellipsis2 good">摘要:和是最受欢迎的。虚拟环境将允许将项目依赖项与本地机器依赖项隔离开来。文件将是项目中的主文件。运行后,检查本地主机。在中创建一个名为的文件夹,并创建一个名为的文件夹。部署创建帐户为前端和全栈应用程序提供免费部署服务。 ...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1154.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/11/small_000001154.jpg" alt=""><span class="layui-hide64">1fe1se</span></a> <time datetime="">2021-10-09 09:44</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/38373.html"><b><em>flask</em> 源码解析:简介</b></a></h2> <p class="ellipsis2 good">摘要:简介官网上对它的定位是一个微开发框架。另外一个必须理解的概念是,简单来说就是一套和框架应用之间的协议。功能比较丰富,支持解析自动防止攻击继承变量过滤器流程逻辑支持代码逻辑集成等等。那么,从下一篇文章,我们就正式开始源码之旅了 文章属于作者原创,原文发布在个人博客。 flask 简介 Flask 官网上对它的定位是一个微 python web 开发框架。 Flask is a micro...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-141.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/01/small_000000141.jpg" alt=""><span class="layui-hide64">megatron</span></a> <time datetime="">2019-07-25 11:23</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/41363.html"><b><em>flask</em>文档学习笔记1-快速入门</b></a></h2> <p class="ellipsis2 good">摘要:示例如下静态路由使用动态变量的路由未指定变量类型使用动态变量的路由指定变量类型指定的路由变量,可以作为被装饰的函数参数传入进来。 开始决定认真的在网上写一些东西,主要原因还是在于希望能提升学习效果。虽说python写了有几年,但是web后端框架的确没怎么接触过,买了本狗书寥寥草草的过了一遍,发现很多东西还是理解不深,真的是好记性不如烂笔头,知识也要从基础开始,退回来好好看看官方文档,再...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1342.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/13/small_000001342.jpg" alt=""><span class="layui-hide64">lingdududu</span></a> <time datetime="">2019-07-30 15:37</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-158.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/01/small_000000158.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-158.html" rel="nofollow">mochixuan</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(158)" id="attenttouser_158" 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-158.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/130984.html">tensorflow</a></h3> <p>阅读 1353<span>·</span>2023-04-26 02:50</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/130850.html">gpu版本的tensorflow</a></h3> <p>阅读 3293<span>·</span>2023-04-26 00:28</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/130632.html">tensorflow怎么安装</a></h3> <p>阅读 1781<span>·</span>2023-04-25 15:18</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/124888.html">#黑五#TmhHost:1核/1G/10Mbps/日本CN2/季付200元,充值送10%,洛杉矶99</a></h3> <p>阅读 2948<span>·</span>2021-11-24 10:31</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115231.html">CSS像素(css pixel)及像素单位 例如px pt em</a></h3> <p>阅读 796<span>·</span>2019-08-30 13:00</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113247.html">DOM3中的自定义事件</a></h3> <p>阅读 907<span>·</span>2019-08-29 15:19</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112405.html">前端学习资源</a></h3> <p>阅读 1662<span>·</span>2019-08-29 13:09</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112365.html">vue组件之间的通信</a></h3> <p>阅读 2887<span>·</span>2019-08-29 13:06</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>