flask与uniapp交互

Posted 2021-03-31 Python程序设计教程

本文主要介绍以vue为前端，与flask进行交互的问题，先简要介绍一下vue和uniapp，然后展示了vue与flask跨域访问中调用的问题。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到ios、android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。即使不跨端，uni-app也是很好的小程序开发框架、较好的App跨平台框架、方便的H5开发框架。因而将它作为前端，与flask进行交互，还是有它的优势。

01

—

什么是vue？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

这跟渲染一个字符串模板非常类似， Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。只要打开你的浏览器的 javascript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 html 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

<p v-if="seen">现在你看到我了</p>

表示这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
  </template>
</ul>

02

—

创建uniapp项目

打开项目后，目录结构如下图左列。

右列为index的代码。

03

—

了解nve

在项目中新建一个nve文件，结构如下：

#这里是界面模版

<template>

<div>

</div>

</template>

#这里是数据，以及响应等

<script>

export default {

}

</script>

#这里控制显示样式

<style>

</style>

03

—

编写hello world

<template> <div> {{title}} </div></template><script> export default { data() { return { title: 'Hello World！' }, } }</script>

显示列表：

<template> <view class="content"> <image class="logo" src="/static/logo.png"></image> <view class="text-area" v-for="(item, i) in items" :key="item.id"> <text class="title">{{item.name}}</text> <text class="title">{{item.title}}</text> <text class="title">{{item.author_name}}</text> <text class="title">{{item.cover}}</text> <text class="title">{{item.comments_count}}</text> <text class="title">{{item.published_at}}</text> </view> </view></template>
<script> export default { data() { return { items: [ {id:1,name:'Hello',title:'mytitle',author_name:'thz',cover:'1',published_at:'2020',comments_count:0}, {id:1,name:'Hello2',title:'mytitle2',author_name:'thz2',cover:'2',published_at:'2021',comments_count:1}, ], } }, onLoad() { console.log("console") }, methods: {
 } }</script>

04

—

uni跟flask接口出现跨域问题解决

H5页面使用uni.request时，出现跨域问题：

在menifest.json中，增加如下节点：

/*h5相关*/ "h5" : { "devServer" : { "port" : 5000, "disableHostCheck" : true, "proxy" : { "/api" : { "target" : "http://127.0.0.1/", "changeOrigin" : true, "secure" : false } } } },/* 5+App特有相关 */ 

05

—

flask定义api

@app.route('/api/article/')def hello_world(): t = {"id":121374,"from_id":"36kr","title":"22020u6570u5b57u4e2du56fdu521bu65b0u5927u8d5b-u6570u5b57u653fu5e9cu8d5bu905321u5f3au51fau7089uff0cu56dbu5927u8d5bu9898u7d27u8d34u653fu5e9cu6570u5b57u5316u53d1u5c55u9700u6c42","summary":"u63d0u5347u6570u5b57u6cbbu7406u3001u5efau8bbeu201cu6e29u6696u6e14u653fu201du2014u2014u56dbu5927u8d5bu9898u52a9u529bu653fu5e9cu89e3u51b3u6cbbu7406u96beu9898","column_id":"0","column_name":"","author_name":"36u6c2au6df1u5ea6u670du52a1","author_email":"","author_avatar":"https://img.36krcdn.com//20200410/v2_0c2b287a60494780b9021904758ae14b_img_000","post_id":"5310906","cover":"https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png","content":"<p><span >3u670818u65e5u81f34u67081u65e5uff0cu6570u5b57u4e2du56fdu521bu65b0u5927u8d5bu6570u5b57u653fu5e9cu8d5bu9053u4e3eu884cu4e86u590du8d5bu9636u6bb5u7684u7ebfu4e0au8bc4u5ba1uff0cu7531u6570u5b57u4e2du56fdu5efau8bbeu5cf0u4f1au7ec4u59d4u4f1au8054u5408u798fu5efau7701u6d77u6d0bu4e0eu6e14u4e1au5c40u3001u6570u5b57u4e2du56fdu7814u7a76u9662uff08u798fu5efauff09u3001u963fu91ccu5df4u5df4u8fbeu6469u9662u3001u77e5u540du9ad8u6821u300136kru3001u521bu6295u57fau91d1u7b49u7ec4u6210u7684u4e13u5bb6u8bc4u5ba1u56e2uff0cu5bf950u4f59u652fu6765u81eau5efau7b51u667au80fdu666eu67e5u3001u4ebau673au4ea4u4e92u673au5668u4ebau3001u667au6167u793eu533au5efau8bbeu3001u667au6167u6d77u6d0bu5efau8bbeu8d5bu9898u7684u53c2u8d5bu56e2u961fuff0cu56f4u7ed5u4ea7u54c1u6280u672fu3001u843du5730u80fdu529bu3001u56e2u961fu7adeu4e89u529bu548cu53d1u5c55u6f5cu529bu591au4e2au7ef4u5ea6u8fdbu884cu4e86u8003u6838u3002</span></p><p>u8be5u8d5bu9053u4e8e1u67081u65e5u542fu52a8u62a5u540du901au9053uff0cu5728u4e24u4e2au6708u91ccu5438u5f15u4e86u5168u740316u4e2au56fdu5bb6u548cu5730u533au76844494u652fu961fu4f0du62a5u540du53c2u8d5bu3002u7ecfu5386u521du8d5bu3001u590du8d5bu9009u62d4u540euff0cu6700u7ec821u652fu961fu4f0du83b7u5f97u4e86u8bc4u59d4u7684u63a8u8350uff0cu664bu7ea7u51b3u8d5bu5708u3002</p><p><img style="max-width:100%" src="https://img.36krcdn.com/20200411/v2_b76cec37c1d04965859ca23c52384cba_img_png" data-img-size-val="864,510"/></p><p class="img-desc" ><span >uff08u6839u636eu75abu60c5u9632u63a7u9700u8981uff0cu590du8d5bu91c7u7528u201cu4e91u8defu6f14u201du7684u65b9u5f0fu8fdbu884cuff09</span></p><p>u636eu6089uff0c2020u6570u5b57u4e2du56fdu521bu65b0u5927u8d5bu662fu6570u5b57u4e2du56fdu5efau8bbeu5cf0u4f1au7684u9ad8u7aefu4e13u4e1au6838u5fc3u8d5bu4e8bu548cu91cdu8981u7ec4u6210u90e8u5206uff0cu7531u6570u5b57u4e2du56fdu5efau8bbeu5cf0u4f1au7ec4u59d4u4f1au4e3bu529eu3002u672cu5c4au5927u8d5bu4ee5u201cu57f9u80b2u6570u5b57u7ecfu6d4eu65b0u52a8u80fduff0cu52a9u63a8u6570u5b57u4e2du56fdu65b0u53d1u5c55u201du4e3au4e3bu9898uff0cu91c7u53d6u591au8d5bu9053u5e76u884cu7684u7adeu8d5bu5f62u5f0fuff0cu8bbeu7f6eu4e86u6570u5b57u653fu5e9cu3001u667au6167u533bu7597u3001u9cb2u9e4fu8ba1u7b97u3001u864eu7b26u7f51u7edcu5b89u5168u3001u533au5757u94feu3001u4e2du5c0fu5b66u751fu7b49u516du5927u8d5bu9053uff0cu5206u522bu56f4u7ed5u653fu52a1u5927u6570u636eu5e94u7528u3001u4fe1u606fu6280u672fu521bu65b0u5e94u7528u3001u533bu7597u884cu4e1au667au6167u5316u3001u7f51u7edcu5b89u5168u3001u533au5757u94feu6280u672fu3001u4e2du5c0fu5b66u751fu5174u8da3u57f9u517bu7b49u5185u5bb9u8bbeu7f6eu8d5bu9898u3002<span >&nbsp;</span></p><p>u5176u4e2duff0cu6570u5b57u653fu5e9cu8d5bu9053u4ee5u53d1u5c55u65b0u57fau5efau3001u63a8u52a8u798fu5efau7701u653fu52a1u6570u5b57u5316u5347u7ea7u4e3au5951u673auff0cu56f4u7ed5u653fu52a1u5927u6570u636eu5c55u5f00uff0cu805au7126u667au6167u6d77u6d0bu3001u653fu52a1u670du52a1u3001u667au6167u793eu533au3001u57ceu5e02u7ba1u7406u56dbu5927u9886u57dfuff0cu8bbeu7f6e1u9053u667au80fdu7b97u6cd5u8d5bu9898uff08u667au6167u6d77u6d0bu5efau8bbeuff09u548c3u9053u521bu65b0u5e94u7528u8d5bu9898uff08u5efau7b51u667au80fdu666eu67e5u3001u4ebau673au4ea4u4e92u673au5668u4ebau3001u667au6167u793eu533au5efau8bbeuff09uff0cu4ee5u5e94u7528u4e3au5bfcu5411uff0cu805au96c6u5168u7403u9876u7ea7u521bu65b0u4ebau624duff0cu53d1u6398u5148u8fdbu7684u6570u5b57u6280u672fu4e0eu653fu52a1u878du5408u7684u521bu65b0u5e94u7528u6210u679cuff0cu540cu65f6u5229u7528u5927u6570u636eu63d0u5347u653fu5e9cu6cbbu7406u80fdu529bu548cu6cbbu7406u6c34u5e73uff0cu52a0u901fu5f62u6210u798fu5ddeu4e43u81f3u798fu5efau7684u6570u5b57u7ecfu6d4eu65b0u4e1au6001u3001u8fdbu4e00u6b65u63d0u5347u6c11u4f17u7684u83b7u5f97u611fu3002<span >&nbsp;</span></p><p>u636eu4e86u89e3uff0cu5f53u524du5728u79d1u6280u9632u75abu7684u80ccu666fu4e0buff0cu65b0u57fau5efau53cau6570u5b57u5316u6cbbu7406u5df2u662fu5927u52bfu6240u8d8buff0cu5e76u5728u5168u793eu4f1au5febu901fu5f62u6210u5171u8bc6uff0cu800cu4e8eu53bbu5e74u63a8u51fau7684u201cu6570u5b57u653fu5e9cu8d5bu9053u201du5219u56e0u4e0eu65b0u5f62u52bfu9ad8u5ea6u201cu5207u9898u201du800cu83b7u5f97u5404u65b9u7684u9ad8u5ea6u5173u6ce8u3002u8fd1u51e0u5e74u81f4u529bu4e8eu6570u5b57u5316u201cu65b0u57fau5efau201du5b9eu8df5u7684u963fu91ccu4e91u4e0du65adu52a0u5f3au5bf9u201cu65b0u57fau5efau201du7684u7814u7a76u4e0eu5e03u5c40uff0cu4e0eu4f5cu4e3au201cu6570u5b57u4e2du56fdu5efau8bbeu7684u601du60f3u6e90u5934u548cu5b9eu8df5u8d77u70b9u201du7684u798fu5ddeu5e02u5408u4f5cuff0cu4e3au6570u5b57u5316u4ea7u4e1au7684u53d1u5c55u201cu5e26u4e86u4e00u6ce2u8282u594fu201duff0cu8ba9u5927u8d5bu771fu6b63u4f5cu4e3au5e73u53f0uff0cu5f15u5bfcu548cu63a8u52a8u4e86u76f8u5173u9886u57dfu7684u521bu65b0u548cu5347u7ea7u3002<span >&nbsp;</span></p><p>u6bd4u5982uff0cu4e09u9053u521bu65b0u5e94u7528u9898u00adu2014u2014u5efau7b51u667au80fdu666eu67e5u3001u4ebau673au4ea4u4e92u673au5668u4ebau3001u667au6167u793eu533au5efau8bbeuff0cu90fdu662fu4f9du636eu798fu5efau7701u653fu5e9cu5728u6570u5b57u5316u6cbbu7406u4ee5u53cau6539u5584u6c11u751fu8fc7u7a0bu4e2du9762u4e34u7684u73b0u5b9eu95eeu9898u800cu8bbeu7f6eu7684uff0cu4e14u5728u5b9eu9645u6cbbu7406u4e2du5df2u6709u5e94u7528u573au666fuff1bu667au80fdu7b97u6cd5u8d5bu9898u5219u7ed3u5408u667au6167u6d77u6d0bu3001u667au6167u6e14u653fu5efau8bbeu9762u4e34u7684u95eeu9898uff0cu901au8fc7u667au80fdu7b97u6cd5u5bf9u6e14u4e1au8239u8236u8fdbu884cu52a8u6001u76d1u6d4buff0cu63d0u5347u6d77u6d0bu8d44u6e90u4fddu62a4u4e0eu5f00u53d1u6c34u5e73u3002</p><h2 >u63d0u5347u6570u5b57u6cbbu7406u3001u5efau8bbeu201cu6e29u6696u6e14u653fu201du2014u2014u56dbu5927u8d5bu9898u52a9u529bu653fu5e9cu89e3u51b3u6cbbu7406u96beu9898<span >&nbsp;</span></h2><p>u798fu5efau7701u5efau7b51u7269u7fa4u4f53u79cdu7c7bu591au6837uff0cu6c38u5b9au5ba2u5bb6u571fu697cu5efau7b51u7fa4u3001u798fu5ddeu4e09u574au4e03u5df7u7684u660eu6e05u5efau7b51u7fa4u3001u201cu6d77u4e0au82b1u56edu201du53a6u95e8u9f13u6d6au5c7fu7684u4e07u56fdu5efau7b51u7fa4u3001u957fu4e50u6ee8u6d77u65b0u57ceu3001u5e73u6f6du7efcu5408u8bd5u9a8cu533au7b49u90fdu662fu5178u578bu5efau7b51u7fa4u3002u4f20u7edfu7684u5efau7b51u666eu67e5u65b9u5f0fu867du7136u80fdu901au8fc7u9ad8u5206u8fa8u7387u9065u611fu536bu661fu56feu50cfuff0cu8bc6u522bu5efau7b51u7269u7684u5f62u72b6u548cu5e03u5c40u7279u5f81uff0cu4f46u5728u5efau7b51u7269u5c4bu9876u6750u8d28u3001u5efau7b51u7269u9ad8u5ea6u3001u5efau7b51u98ceu683cu7684u591au6837u6027u3001u5efau7b51u7269u7684u81eau52a8u63d0u53d6u7b49u65b9u9762u7cbeu5ea6u8f83u4f4euff1bu800cu4ebau5de5u52feu753bu7cbeu5ea6u867du9ad8uff0cu6548u7387u5374u592au4f4euff0cu96beu4ee5u666eu53cau3002u53e6u4e00u65b9u9762uff0cu201cu8fddu5efau201du4f5cu4e3au5f53u524du57ceu5e02u6cbbu7406u5f53u4e2du4e00u5927u96beu9898uff0cu4ee5u201cu53d1u73b0u96beu3001u9632u63a7u96beu3001u8ba4u5b9au96beuff0cu62c6u9664u66f4u96beu201du7b49u7279u70b9u4e3au5404u65b9u6240u5173u6ce8u3002</p><p>u5f53u524du6280u672fu53d1u5c55u4f7fu5f97u8fd9u4e9bu95eeu9898u5f97u5230u66f4u52a0u9ad8u6548u89e3u51b3u3002u672cu6b21u201cu5efau7b51u667au80fdu666eu67e5u201du8d5bu9898u7684u53c2u8d5bu56e2u961fu4e2duff0cu4e0du5c11u56e2u961fu7684u89e3u51b3u65b9u6848u901au8fc7u9065u611fu5927u6570u636eu3001u6df1u5ea6u5b66u4e60u7b97u6cd5u548cAIu8ba1u7b97uff0cu8d4bu80fdu9065u611fu6d4bu7ed8u3001u65e0u4ebau673au6d4bu7ed8u3001u56feu50cfu8bc6u522bu7684u5404u4e2au73afu8282uff0cu5e2eu52a9u63d0u9ad8u4e86u5efau7b51u7269u63d0u53d6u7684u6548u7387u548cu7cbeu51c6u5ea6uff0cu5e76u5df2u5e94u7528u4e8eu57ceu5e02u7ba1u7406u5b9eu8df5u4e2du3002<span >&nbsp;</span></p><p>u4ee5u89c6u6167u667au56feu4e3au4f8buff0cu9488u5bf9u7adeu8d5bu6570u636eu4e2du7684u5efau7b51u7269u98ceu683cu591au6837u3001u5c3au5ea6u591au6837u53cau5149u8c31u7279u5f81u6df7u6dc6u7684u95eeu9898uff0cu63d0u51fau4e86u5c06u4e8cu7ef4u5f71u50cfu548cu4e09u7ef4u6a21u578bu878du5408u7684u65b9u6cd5u6765u589eu5f3au5efau7b51u7269u63d0u53d6u7684u7cbeu5ea6u3002u8be5u9879u76eeu8fd8u5c06u6280u672fu5e94u7528u4e8eu57ceu5e02u8fddu6cd5u5efau7b51u9065u611fu667au80fdu76d1u6d4bu4f5cu4e1au5e73u53f0uff0cu9996u521bu4e86u201cu5929u7a7au5730u201du534fu540cu7684u6e10u8fdbu6e10u7cbeu5f0fu67e5u8fddu6280u672fu4f53u7cfbuff0cu63d0u9ad8u4e86u68c0u6d4bu4e0eu8c03u67e5u53d6u8bc1u6548u7387uff0cu5e76u4e14u51c6u786eu7387u9ad8u8fbe95%uff0cu6709u6548u89e3u51b3u8fddu7ae0u5efau7b51u201cu53d1u73b0u96beu3001u9632u63a7u96beu3001u8ba4u5b9au96beuff0cu62c6u9664u66f4u96beu201du7684u95eeu9898u3002<span >&nbsp;</span></p><p>u5148u8fdbu6280u672fu80ccu540euff0cu662fu5f3au5927u6280u672fu56e2u961fu7684u652fu6491u2014u2014u89c6u6167u667au56feu8463u4e8bu957fu6731u5e86u6559u6388u662fu4e09u7ef4u6a21u578bu9886u57dfu7684u77e5u540du4e13u5bb6uff0cu56e2u961fu64c5u957fu8bedu4e49u5206u5272u6a21u578bu3001u9065u611fu5f71u50cfu5efau7b51u7269u63d0u53d6u3001u5bc6u96c6u5339u914du53cau4e09u7ef4u6a21u578bu4e0eu4e8cu7ef4u5f71u50cfu5339u914du6280u672fuff0cu5df2u7ecfu662fu5efau7b51u7269u8fddu5efau67e5u8bc1u9886u57dfu7684u5934u90e8u73a9u5bb6uff0cu76eeu524du8be5u6280u672fu5df2u7ecfu5728u91cdu5e86u5168u57df38u4e2au533au53bfu3001u6d59u6c5fu3001u6e56u5357u7b49u5730u89c4u6a21u5316u5e94u7528u3002</p><p>u201cu4ebau673au4ea4u4e92u673au5668u4ebau201du8d5bu9898u4ee5u798fu5ddeu5e0212345u4fbfu6c11uff08u60e0u4f01uff09u670du52a1u5e73u53f0u4e3au5207u5165u70b9uff0cu4f5cu4e3au798fu5ddeu5e02u653fu5e9cu670du52a1u6c11u4f17u548cu4f01u4e1au7684u91cdu8981u5e73u53f0uff0c12345u7531u70edu7ebfu7535u8bddu548cu7f51u7edcu7cfbu7edfu6784u6210uff0cu4e3bu8981u53d7u7406u6c11u4f17u548cu4f01u4e1au63d0u51fau7684u54a8u8be2u3001u6295u8bc9u3001u5efau8baeu548cu6c42u52a9u3002</p><p>u5982u4f55u5927u5927u63d0u534712345u4fbfu6c11uff08u60e0u4f01uff09u670du52a1u5e73u53f0u7684u670du52a1u80fdu529buff0cu66f4u597du5e2eu52a9u6c11u4f17u548cu4f01u4e1auff1fu201cu5b9eu5728u667au80fdu201du56e2u961fu7ed9u51fau201cAI+RPAu8d4bu80fdu5e02u653fu70edu7ebfu5ba2u670du201du7684u89e3u51b3u65b9u6848uff0cu4ee595%u4ee5u4e0au7684u573au666fu8986u76d6u7387u548cu7b97u6cd5u51c6u786eu7387uff0cu53efu5c06u5ba2u670du63a5u5355u6548u7387u63d0u9ad840%uff0cu53efu5728u5e02u57df12345u70edu7ebf1000-2000u4ebau7684u5ba2u670du89c4u6a21u4e0au8282u7701500u540du5ba2u670duff0cu7701u57df12345u70edu7ebf10000u4ebau7684u89c4u6a21u4e0au53efu8282u77014000u540du5ba2u670du3002</p><p>u5176u4e2duff0cu4e00u4e9bu5177u5907u672cu571fu8bedu8a00u4f18u52bfu7684u9879u76eeu4e5fu5728u5927u8d5bu4e2du83b7u5f97u4e86u9752u7750u3002u4ebau5de5u667au80fdu8bedu97f3u5ba2u670du89e3u51b3u65b9u6848u201cu610fu80fdu901au201duff0cu4f9du9760u903e10u4e07u6761u95fdu5357u8bedu8badu7ec3u91cfuff0cu9ad8u8fbe85%u7684u51c6u786eu7387uff0cu670du52a1u4e8e12345u70edu7ebfu7684u7ecfu9a8cuff0cu73b0u5728u4e0eu798fu5ddeu7535u4fe1u5efau7acbu4e86u5408u4f5cu3002</p><p>u667au6167u793eu533au5efau8bbeu8d5bu9898u4e0buff0cu53c2u8d5bu9879u76eeu4ee5u5927u6570u636eu3001u7269u8054u7f51u30015Gu3001u4e91u8ba1u7b97u3001u4ebau5de5u667au80fdu3001AR/VRu7b49u524du6cbfu6280u672fu5efau8bbeu667au6167u793eu533au3002u201cu798fu5ddeu5e02u9f13u697cu533au519bu95e8u793eu533au201du662fu798fu5efau7701u57fau4e8eu7269u8054u7f51u548cu5927u6570u636eu6280u672fu6253u9020u7684u9996u4e2au667au6167u793eu533auff0cu901au8fc7u667au6167u517bu8001u3001u667au6167u5b89u9632u3001u5404u7c7bu9690u60a3u81eau52a8u9884u8b66u3001u5783u573eu667au6167u76d1u63a7u7b49uff0cu63d0u5347u5e02u6c11u751fu6d3bu4f53u9a8c.<span >&nbsp;</span></p><p>u6bd4u5982u53c2u8d5bu9879u76eeu201cu62d3u6df1u79d1u6280u201du521bu65b0u6027u5730u91c7u7528u7535u6d41u6307u7eb9u6280u672fuff0cu5f00u53d1u6d88u9632u667au80fdu9884u8b66u7cfbu7edfuff0cu4e0du4ec5u80fdu8fdbu884cu57fau7840u7535u6c14u706bu707eu5168u9762u68c0u6d4bu3001u9690u5f62u7ebfu8defu6545u969cu68c0u6d4bu3001u7528u7535u884cu4e3au7cbeu51c6u68c0u6d4bu4ee5u53cau5404u7c7bu7535u5668u8bbeu5907u7684u8fd0u884cu72b6u6001uff0cu9762u5bf9u9690u60a3u8fd8u80fdu591fu53cau65f6u53d1u51fau9884u8b66u6216u76f4u63a5u65adu7535u3002u8fd9u4e00u7cfbu7edfu5c06u5bf9u672au6765u7684u6d88u9632u5b89u5168u63d0u4f9bu5f88u597du7684u9884u8b66u673au5236uff0cu6781u5927u63d0u5347u5c45u6c11u3001u5546u6237u7684u5c45u4f4fu3001u7ecfu8425u5b89u5168u7a0bu5ea6uff0cu4e3au798fu5ddeu653fu5e9cu7684u5b89u5168u6cbbu7406u63d0u4f9bu4fddu969cu3002</p><p><img style="max-width:100%" src="https://img.36krcdn.com/20200411/v2_ee486d23d9df41329c69ee8a169ed670_img_png" data-img-size-val="864,485"/></p><p class="img-desc" ><span >uff08u798fu5efau7701u6d77u6e14u5c40u76f8u5173u9886u5bfcu53c2u4e0eu667au6167u6d77u6d0bu8d5bu9898u590du8d5bu201cu4e91u8defu6f14u201duff09</span></p><p><span >u6d77u6d0bu662fu9ad8u8d28u91cfu53d1u5c55u6218u7565u8981u5730u3002u7ecfu7565u6d77u6d0buff0cu4fe1u606fu4f18u5148u3002u5728u6d77u6d0bu5f3au56fdu6218u7565u7684u5f15u9886u4e0buff0cu63a8u8fdbu6d77u4e0au5b89u5168u6cbbu7406u4f53u7cfbu548cu6cbbu7406u80fdu529bu73b0u4ee3u5316u5df2u7ecfu6210u4e3au91cdu8981u4f7fu547du3002u5728u8fd0u7528u6570u5b57u6280u672fu89e3u51b3u6d77u6d0bu8239u8236u5b89u5168u7ba1u7406u95eeu9898u7684u201cu667au6167u6d77u6d0bu5efau8bbeu201du667au80fdu7b97u6cd5u8d5bu9898u5e94u8fd0u800cu751fu3002u5728u56fdu5916u5bf9u4e8eu8239u8236u4f4du7f6eu6570u636eu7684u5e94u7528u5df2u7ecfu8f83u4e3au6210u719fuff0cu667au6167u6d77u6d0bu5efau8bbeu8d5bu9898u80a9u8d1fu586bu8865u56fdu5185u7a7au767du7684u4f7fu547du3002</span></p><p>u5728u667au6167u6d77u6d0bu5efau8bbeu8d5bu9898u4e0buff0cu53c2u8d5bu56e2u961fu57fau4e8eu9065u611fu6570u636eu3001u65f6u7a7au5730u56feu4ee5u53cau5317u6597u3001AISu7b49u6d77u6d0bu6570u636euff0cu901au8fc7u7edfu8ba1u5206u6790u3001u6df1u5ea6u5b66u4e60u3001AIu6a21u578bu7b97u6cd5u7b49u6280u672fuff0cu5c06u67afu71e5u7684u6570u636eu8f6cu5316u6210u5bf9u8239u8236u5b9au4f4du4e0eu822au884cu8f68u8ff9u53efu89c6u5316u5448u73b0uff0cu5e76u57fau4e8eu7b97u6cd5u6a21u578bu5bf9u6e14u8239u8fdbu6e2fu3001u822au884cu3001u4f5cu4e1auff0cu6bd4u5982u62d6u7f51u3001u56f4u7f51u3001u523au7f51u7b49u4f5cu4e1au884cu4e3au8fdbu884cu533au5206uff0cu4ee5u53cau5bf9u8239u8236u4f5cu4e1au8fc7u7a0bu4e2du201cu4e00u8239u591au7801u3001u591au8239u4e00u7801u201du7b49u5f02u5e38u884cu4e3auff0cu4ee5u53cau6d77u6d0bu8d44u6e90u4fddu62a4u7b49u65b9u9762u8fdbu884cu5e94u7528u5f00u53d1uff0cu6bd4u5982u9632u78b0u649eu9884u8b66u3001u6e14u4e1au8d44u6e90u5206u6790u3001u6e14u8239u4f5cu4e1au89c4u5f8bu5206u6790u7b49u3002<span >&nbsp;</span></p><p>u201cu8fd9u4e2au8d5bu9898u91c7u7528u5bf9u5317u6597u8239u8236u76d1u6d4bu4fe1u606fu548cAISu4fe1u606fu7684u6e14u8239u8fdbu884cu5206u7c7bu8bc6u522bu548cu4fe1u606fu6316u6398uff0cu5f62u5f0fu5f88u597duff0cu5bf9u5438u5f15u793eu4f1au5404u7c7bu4ebau624du53c2u4e0eu667au6167u6d77u6d0bu5efau8bbeu3001u53d1u6398u4f18u79c0u7684u4e13u4e1au4ebau624du5177u6709u91cdu8981u7684u610fu4e49uff0cu5efau8baeu957fu671fu3001u89c4u8303u5316u7684u5f00u5c55u3002u201du667au6167u6d77u6d0bu8d5bu9898u590du8d5bu8bc4u59d4u4e13u5bb6u3001u56fdu5bb6u536bu661fu6d77u6d0bu5e94u7528u4e2du5fc3u7814u7a76u5458u5b89u6587u97ecu4ecbu7ecdu8bf4uff0cu590du8d5bu56e2u961fu5728u6d4bu8bd5u6570u636eu96c6u8fdbu884cu6df1u5165u5206u6790u57fau7840u4e0auff0cu63d0u51fau4e86u4e00u4e9bu65b0u7684u7814u7a76u548cu5e94u7528u65b9u5411uff0cu90e8u5206u56e2u961fu5bf9u6570u636eu7684u53efu89c6u5316u8fdbu884cu4e86u521bu65b0u6027u7814u7a76uff0cu7a81u7834u4e86u539fu6709u7684u601du8defuff0cu503cu5f97u9f13u52b1u3002</p><h2 >u79d1u6280u9632u75abu3001u5efau7b51u5b89u5168u76d1u6d4buff0cu89e6u53d1u53c2u8d5bu56e2u961fu63a8u51fau5e94u6025u65b9u6848&nbsp;</h2><p>u6625u8282u4ee5u6765uff0cu53d7u75abu60c5u5f71u54cduff0cu5404u5730u7eb7u7eb7u91c7u53d6u793eu533au9694u79bbu7b49u591au79cdu9632u63a7u63aau65bduff0cu4e5fu7ed9u653fu5e9cu6cbbu7406u5e26u6765u4e86u65b0u7684u6311u6218u3002u9762u5bf9u75abu60c5u9632u63a7u3001u590du5de5u590du4ea7u7b49u95eeu9898uff0cu56dbu5927u8d5bu9898u7684u53c2u8d5bu56e2u961fu90fdu5728u8d5bu4e8bu5185u5916u7ed3u5408u81eau8eabu80fdu529bu4f18u52bfu62ffu51fau591au79cdu5e94u5bf9u65b9u6848uff0cu7ed3u5408u8d4bu80fdu9884u9632u3001u6cbbu7597u3001u670du52a1u7684u5404u4e2au73afu8282uff0cu5e2eu52a9u653fu5e9cu66f4u597du5730u6cbbu7406u75abu60c5u3002<span >&nbsp;</span></p><p>u667au6167u793eu533au8d5bu9898u7684u6781u89c6u89d2u5728u591au4e2au590du5de5u7684u7269u4e1au90e8u7f72u4e86u201cu7ea2u5916u70edu6210u50cfu4f53u6e29u5febu901fu7b5bu67e5u4eeau201duff0cu6781u5927u63d0u5347u4e86u75abu60c5u7b5bu67e5u548cu68c0u6d4bu6548u7387uff0cu51cfu8f7bu7269u4e1au5de5u4f5cu4ebau5458u6d4bu91cfu4f53u6e29u7684u8d1fu62c5u3002u96f6u4e00u79d1u6280u5219u5c06u667au6167u5065u5eb7u793eu533au901au884cu8bc1u4e0eu653fu5e9cu8981u6c42u5bf9u63a5u8d77u6765uff0cu5f62u6210u7279u6b8au5e94u6025u72b6u51b5u4e0bu7684u901au884cu8bc1u529fu80fdu5065u5eb7u7801uff0cu63a8u51fau793eu533au914du5957u65b0u96f6u552eu201cu79cdu5b50u96c6u5e02u201du3001u667au80fdu7269u6d41u673au5668u4ebahachi delightu3001u667au6167u533bu7597u914du5957u201cu5bb6u6709u5065u5eb7u201du7b49u667au80fdu914du5957u4ea7u54c1uff0cu7834u89e3u4e86u5b89u5168u91c7u8d2du3001u65e0u63a5u89e6u914du9001u3001u793eu533au533bu7597u7b49u8bf8u591au4f20u7edfu793eu533au75dbu70b9uff0cu5f62u6210u5168u573au666fu667au6167u793eu533au89e3u51b3u65b9u6848uff0cu5728u7279u6b8au671fu95f4u4e3au4e1au4e3bu751fu6d3bu63d0u4f9bu4fbfu5229u3002</p><p>u4ebau673au4ea4u4e92u673au5668u4ebau8d5bu9898u4e0buff0cu6765u4e5fu79d1u6280u63a8u51fau8206u60c5u673au5668u4ebauff0cu5e2eu52a9u5f53u5730u653fu5e9cu666eu53cau75abu60c5u9632u63a7u77e5u8bc6u3001u907fu514du8c23u8a00u4f20u64aduff0cu5176u63a8u51fau7684u667au80fdu5916u547cu673au5668u4ebau5df2u7ecfu5728u798fu5ddeu843du5730uff0cu53efu901au8fc7u81eau52a8u6279u91cfu62e8u6253u7535u8bdduff0cu8fdbu884cu75abu60c5u901au77e5u7b49u70b9u5bf9u70b9u5916u547cu4efbu52a1uff0cu5e2eu52a9u57fau5c42u793eu533au673au6784u5b9eu65f6u638cu63e1u5c45u6c11u7684u5065u5eb7u52a8u6001u3002</p><p>u75abu60c5u4e4bu5916uff0cu9488u5bf9u5a92u4f53u62a5u9053u8fd1u5e74u591au6b21u51fau73b0u7684u5efau7b51u574du584cu4e8bu6545uff0cu4e2au522bu53c2u8d5bu56e2u961fu5bf9u6b64u63a8u51fau4e86u76f8u5e94u7684u89e3u51b3u65b9u6848uff0cu4eceu7269u8054u7f51u3001u5927u6570u636eu3001u9065u611fu7b49u6280u672fu5207u5165u5e2eu52a9u653fu5e9cu66f4u597du5730u76d1u6d4bu57ceu5e02u5efau7b51u60c5u51b5uff0cu66f4u597du7684u4fddu969cu4ebau6c11u751fu547du548cu8d22u4ea7u5b89u5168u3002</p><p>u6bd4u5982u672cu5f71u79d1u6280u7684u201cu6587u7269u4fddu62a4u5efau7b51u667au6167u76d1u7ba1u7cfbu7edfu201duff0cu53efu4ee5u901au8fc7u5148u8fdbu7684u7269u8054u7f51u6280u672fu3001u89c6u9891u96c6u6210u6280u672fu3001u65e0u7ebfu4f20u8f93u6280u672fu7b49uff0cu5c06u5efau7b51u7269u7684u5b9eu65f6u7269u8054u76d1u6d4buff08u5e94u529bu3001u503eu659cu3001u6c89u964du3001u9707u52a8u7b49uff09u52a8u6001u6570u636eu6c47u805au5230u5e73u53f0u6570u636eu5e93uff0cu901au8fc7u65e5u5e38u5bf9u5b9eu65f6u6570u636eu5206u6790u7edfu8ba1u3001u81eau52a8u5224u8bfbu8b66u6212u503cuff0cu5febu901fu9884u8b66u3001u53cau65f6u63a8u9001u901au77e5u7b49u529fu80fdu5b9eu73b0u5bf9u5efau7b51u7269u8fdbu884cu5b9eu51b5u76d1u6d4bu8ddfu8e2auff0cu540cu65f6u5efau7acbu89c4u8303u7684u65e5u5e38u5de1u68c0u517bu62a4u548cu4feeu7f2eu7ba1u7406u6d41u7a0buff0cu5b9eu73b0u5728u7ebfu6570u5b57u5316u76d1u63a7u3002u8be5u7cfbu7edfu539fu672cu4e3bu8981u7528u4e8eu6587u7269u4fddu62a4u9886u57dfuff0cu4f46u9488u5bf9u5efau7b51u5b89u5168u76d1u6d4bu95eeu9898uff0cu672cu5f71u79d1u6280u7ed9u51fau4e86u76f8u5e94u7684u89e3u51b3u65b9u6848uff0cu53efu6709u6548u9884u8b66u5efau7b51u7269u7684u8001u5316uff0cu9632u6b62u5b89u5168u4e8bu6545u7684u53d1u751fu3002<span >&nbsp;</span></p><p>u79d1u6280u52a9u529bu6539u5584u751fu6d3buff0cu65e2u5305u542bu751fu6d3bu8d28u91cfu7684u63d0u9ad8uff0cu66f4u5305u542bu751fu547du5b89u5168u7684u4fddu969cuff0cu6b64u6b21u6570u5b57u653fu5e9cu8d5bu9053u56f4u7ed5u79d1u6280u9632u75abu548cu5efau7b51u5b89u5168u76d1u6d4bu63a8u51fau6cbbu7406u65b9u6848uff0cu65e2u4f53u73b0u4e86u53c2u8d5bu56e2u961fu5bf9u8d5bu9898u80ccu540eu793eu4f1au9700u6c42u7684u654fu9510u628au63e1uff0cu5c55u793au5176u672cu8eabu7684u5f3au70c8u793eu4f1au8d23u4efbu611fuff0cu4e5fu53cdu6620u51fau798fu5efau7701u653fu5e9cu5bf9u5168u65b9u4f4du6539u5584u6c11u751fu7684u91cdu89c6u3002</p><p>u201cu6211u4eecu4e0du5e0cu671bu5927u5bb6u2018u4e3au4e86u6bd4u8d5bu800cu6bd4u8d5bu2019u6216u53eau505cu7559u5728u6280u672fu5c42u9762uff0cu6211u4eecu7ec4u59d4u4f1au5e26u7740u4f7fu547du611fu6765u7ec4u7ec7u8fd9u4e2au8d5bu4e8buff0cu4e5fu5e0cu671bu9879u76eeu56e2u961fu4eceu793eu4f1au771fu5b9eu9700u6c42u51fau53d1uff0cu8ba9u81eau5df1u2018u88abu9700u8981u2019uff0cu8ba9u56e2u961fu7684u53d1u5c55u62e5u6709u66f4u597du7684u5e02u573au57fau7840u3002u201d u6570u5b57u653fu5e9cu8d5bu9053u627fu529eu65b9u4ee3u8868u3001u963fu91ccu4e91u5929u6c60u5927u8d5bu603bu8d1fu8d23u4ebau738bu542cu8868u793auff0cu5728u8bc4u9009u9879u76eeu65f6uff0cu4f1au6bd4u8f83u5173u6ce8u9879u76eeu7684u4e09u5927u8981u7d20uff1au65b0u3001u7d27u3001u6f5cuff0cu65b0u5373u65b0u65b9u6848u3001u65b0u6280u672fu3001u65b0u4ea7u54c1uff0cu6709u786cu6838u7684u521bu65b0u529bu548cu6280u672fu80fdu529buff1bu7d27u5373u56f4u7ed5u6570u5b57u653fu5e9cu5efau8bbeuff0cu901au8fc7u6280u672fu521bu65b0u9a71u52a8u653fu5e9cu6cbbu7406u4f53u7cfbu548cu6cbbu7406u80fdu529bu73b0u4ee3u5316uff0cu63d0u5347u6c11u4f17u83b7u5f97u611fuff1bu6f5cu5373u8be5u56e2u961fu57fau7840u6df1u539au5e76u80fdu5f88u597du628au63e1u8d8bu52bfu3001u5177u6709u9ad8u6210u957fu7684u6f5cu529bu3002</p><p>u636eu6089uff0cu76eeu524du6570u5b57u653fu5e9cu8d5bu9053u590du8d5bu7ed3u675fu540euff0cu5c06u670921u652fu4f18u79c0u56e2u961fu8fdbu5165u51b3u8d5bu3002u51b3u8d5bu5c06u4e8e4u670824-25u65e5u5728u676du5ddeu8fdbu884cuff0cu5728u51b3u8d5bu80dcu51fau7684u56e2u961fu5c06u53d7u9080u53c2u52a0u5728u798fu5ddeu4e3eu884cu76842020u6570u5b57u4e2du56fdu5efau8bbeu5cf0u4f1au7684u201cu6570u5b57u653fu5e9cu8d5bu9053u201du603bu51b3u8d5bu3002</p><p>u636eu4ecbu7ecduff0cu672cu5c4au5927u8d5bu5956u91d1u989du5ea6u8f83u5f80u5e74u5927u5e45u63d0u5347uff0cu589eu52a0u4e86u5956u9879u7684u201cu542bu91d1u91cfu201duff0cu4e94u4e2au8d5bu9053u603bu5956u91d1u8fbe600u4e07u5143uff08u5176u4e2duff0cu6570u5b57u653fu5e9cu8d5bu9053u5956u91d1u6c60u8fbe200u4e07u5143uff09u3002u798fu5efau7701u6570u5b57u798fu5efau5efau8bbeu9886u5bfcu5c0fu7ec4u529eu516cu5ba4u8fd8u63d0u4f9bu4e86500u4e07u5143u7684u798fu5efau7701u6570u5b57u7ecfu6d4eu53d1u5c55u4e13u9879u8d44u91d1uff0cu7528u4e8eu6276u6301u53efu5e94u7528u578bu6210u679cu7684u843du5730u8f6cu5316uff0cu798fu5ddeu5e02u4e5fu5c06u7ed9u4e88u76f8u5e94u914du5957u5956u52b1uff0cu5728u5f15u8fdbu57f9u517bu4ebau624du3001u4ea7u4e1au5e73u53f0u652fu6301u7b49u65b9u9762u4e5fu6709u591au9879u5956u52b1u653fu7b56u3002</p>","views_count":0,"comments_count":0,"published_at":"2020-04-11 16:59:15","store_at":"0000-00-00 00:00:00","type":"news","created_at":"2020-04-11 17:03:18","updated_at":"2020-04-11 17:03:18"} rst = make_response(json.dumps(t)) rst.headers['Access-Control-Allow-Origin'] = '*' rst.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE' rst.headers['Content-Type'] = 'application/json'    rst.headers['access-control-allow-headers']='DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'    return rst, 200

06

—

前端调用

定义显示模版：

<template> <view class="content"> <image class="logo" src="/static/logo.png"></image> <view class="text-area"> <text class="title">{{title}}</text> </view> <view class="text-area"> <rich-text :nodes="htmlNodes" style="font-size: 14px;"></rich-text> </view> </view></template>

定义数据和导入数据：

data() { return { title: 'Hello', htmlNodes:'' } }, onLoad() { uni.request({ url: '/api/article/', method: 'GET', data: {}, success: res => { this.title=res.data.title;          this.htmlNodes = res.data.content; }, fail: () => {}, complete: () => {} });