Vue3 Flask 渐进式入门笔记

这篇具有很好参考价值的文章主要介绍了Vue3 Flask 渐进式入门笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

以下均在Windows 10环境下实现。

安装Vue3

安装node.js的过程略过。
1、在cmd命令行中执行以下命令:

>npm install @vue/cli -g

2、查看vue版本

>vue -V
@vue/cli 5.0.8

注意,如果电脑中以前有vue2版本,则需要卸载后重启电脑再重新安装,否则有可能安装失败。

创建Vue3项目(参照官方文档使用vite)

1、执行以下命令以创建项目

>npm init vue@latest

第一步需要填写项目名称;后面的除router建议选yes外,其他建议全部选No。
2、安装插件依赖,并启动项目

>cd [projectName]
>npm install
>npm run dev

修改App.vue(改为setup语法糖的方式),直接在App.vue中实现计数器

<template>
 <h1>{{ msg }}</h1>
 <button @click="add">+</button>
 <button @click="sub">-</button>
</template>

<script setup>
  import {ref} from 'vue'
  const msg=ref(0)
  function add(){
    msg.value++
  }
  function sub(){
    msg.value--
  }
</script>

使用组件的方式实现上述计数器功能

1、 在components文件夹下创建Counter.vue,把上述App.vue中的代码剪切过来。
2、 把App.vue中的代码改为

<template>
  <Counter/>
</template>

<script setup>
  import Counter from './components/Counter.vue'
</script>

上述两个vue组件中,App.vue相当于父组件,Counter.vue相当于子组件,从功能上看与第3步中的计数器功能相同。

绑定属性 v-bind

将上述计数器中显示数字的h1标签加上动态的title属性和class属性。title属性值等于msg变量的值;如果msg值小于0则将class属性值设为red,否则将class属性值设为green(red和green为自定义的css样式)

<template>
  <h1 v-bind:title="tooltip" v-bind:class="msg >= 0 ? 'green' : 'red'">
    {{ msg }}
  </h1>
  <button @click="add">+</button>
  <button @click="sub">-</button>
</template>
   
<script setup>
	import { ref } from "vue";
	const msg = ref(0);
	const tooltip = ref("");
	function add() {
	  msg.value++;
	  tooltip.value = msg.value;
	}
	function sub() {
	  msg.value--;
	  tooltip.value = msg.value;
	}
</script>
   
<style scoped>
	.green {
	  color: green;
	}
	.red {
	  color: orangered;
	}
</style>

使用Element-Plus对计数器进行修饰

1、安装element-plus
先停止项目,在项目目录中执行以下命令

>npm install element-plus --save

2、配置main.js文件
在main.js中添加以下代码:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

3、修改Counter.vue

<template>
    <div>
        <el-text
        v-bind:type="msg >= 0 ? 'success' : 'danger'"
        style="font-size: 2rem"
        >
        {{ msg }}
        </el-text>
    </div>
    
    <el-button @click="add" type="success">1</el-button>
    <el-button @click="sub" type="danger">1</el-button>
</template>
   
<script setup>
    import { ref } from "vue";
    const msg = ref(0);
    function add() {
    msg.value++;
    }
    function sub() {
    msg.value--;
    }
</script>

条件渲染 v-if

<template>
    <div>
        <el-text v-bind:title="msg" v-if="msg>=0" type="success" style="font-size: 2rem">{{ msg }}</el-text>
        <el-text v-bind:title="msg" v-else type="danger"  style="font-size: 2rem">{{ msg }}</el-text>
    </div>
    
    <el-button @click="add" type="success">1</el-button>
    <el-button @click="sub" type="danger">1</el-button>
</template>
   
<script setup>
    import { ref } from "vue";
    const msg = ref(0);
    function add() {
    msg.value++;
    }
    function sub() {
    msg.value--;
    }
</script>

列表渲染 v-for

借助element-plus中的描述组件el-descriptions,展示一组数据

<template>
    <el-row v-for="item in userdata" :key="item.id">
      <el-col :span="24">
        <el-descriptions
          class="margin-top"
          :column="2"
          size="large"
          border
          style="margin: 0.5rem; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2)"
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">编号</div>
            </template>
            {{ item.id }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">姓名</div>
            </template>
            {{ item.un }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">性别</div>
            </template>
            {{ item.gender }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">年龄</div>
            </template>
            {{ item.age }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">住址</div>
            </template>
            {{ item.addr }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
</template>
   
<script setup>
import { ref } from "vue";
const userdata = ref([
  {id: 1, un: "张三", gender: "男", age: "35", addr: "贵州省贵阳市南明区宝山路"},
  {id: 2, un: "李四", gender: "女", age: "32", addr: "贵州省兴义市桔山大道" },
]);
</script>

利用axios获取数据

1、安装axios

>npm install axios --save

2、配置main.js

import axios from 'axios'
axios.defaults.withCredentials = true  //允许跨域
axios.defaults.baseURL = 'http://jsonplaceholder.typicode.com'  //免费api,获取100条数据

3、在组件中使用axios获取数据

<template>
  <el-row v-for="item in userdata" :key="item.id">
    <el-col :span="24">
      <el-descriptions
        class="margin-top"
        :column="1"
        size="large"
        border
        style="margin: 0.5rem; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2)"
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">编号</div>
          </template>
          {{ item.id }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">标题</div>
          </template>
          {{ item.title }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">内容</div>
          </template>
          {{ item.body }}
        </el-descriptions-item>

      </el-descriptions>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from 'axios';
const userdata = ref([ {}]);
onMounted(() => {
    axios.get("/posts").then((rs)=>{
        userdata.value=rs.data
    })
})
</script>

安装Flask服务环境

pip install flask
pip install pymysql
pip install flask-cors

创建Flask应用

任意位置创建app.py文件,代码如下:

from flask import Flask 
import pymysql
from flask_cors import CORS

app = Flask(__name__) 
CORS(app, supports_credentials=True)  #允许跨域
@app.route("/getdatalist") 
def hello_world(): 
    db = pymysql.connect(
        host="localhost", 
        port=3306,
        user='root',    
        password='root',     
        charset='utf8' ,
        database='temp',
        cursorclass=pymysql.cursors.DictCursor  #结果类型为字典型 
    ) #连接数据库

    cursor = db.cursor() #创建游标对象
    sql = 'select title,author,posttime from news order by posttime desc' #sql语句
    cursor.execute(sql)  #执行sql语句
    all = cursor.fetchall() #获取全部数据
    cursor.close()  
    db.close()  #关闭数据库的连接
    return (all)

执行flask run,以启动后端服务,ur默认l为http://127.0.0.1:5000

前端Vue3从后端Flask服务中获取数据

main.js

import axios from 'axios'
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://127.0.0.1:5000'

App.vue

<template>
  <News/>
</template>

<script setup>
  import News from './components/News.vue'
</script>

News.vue文章来源地址https://www.toymoban.com/news/detail-491797.html

<template>
     <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>国内新闻</span>
      </div>
    </template>
    <p v-for="(item,index) in rsdata" :key="index" class="text item">{{ item.title }}</p>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from 'axios';
const rsdata = ref([ {}]);
onMounted(() => {
    axios.get("/getdatalist").then((rs)=>{
        rsdata.value=rs.data
    })
})
</script>

到了这里,关于Vue3 Flask 渐进式入门笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • IO/NIO交互模拟及渐进式实现

    2024年02月03日
    浏览(54)
  • Unity教程||Unity 渐进式光照贴图烘焙详解

    随着各大计算平台的算力稳步增长,特别是GPU技术的不断进化,原先可望而不可及的技术比如实时光线追踪技术开始逐步走入玩家的视野。一些先锋厂商甚至已经超出Demo的范畴,开始正式推出支持实时光追的游戏。 不过目前的实时光追技术还只能在配备了最新Nvidia RTX 20系列

    2024年02月08日
    浏览(52)
  • 渐进式web全栈:blazor web app

    本文要说的这种开发模式,这种模式并不是只有blazor支持,js中有一样的方案next.js nuxt.js;blazor还有很多其它内容,本文近关注渐进式开发模式。 是的,前后端是主流,不过以下情况也许前后端分离并不是最好的选择: 小公司,人员不多,利润不高,创业阶段能省则省 个人

    2024年02月05日
    浏览(51)
  • 渐进式编程之旅:探寻PHP函数的奇妙世界

    目录 前言 一、函数的定义和调用 1.1 初识函数 1.1.1 函数分类 1.1.2 自定义函数 1.1.3 return 1.2 参数设置 1.2.1 无参函数 1.2.2 按值传递参数 1.2.3 引用传参 1.2.4 设置参数默认值 1.2.5 指定参数类型(弱) 1.3 变量的作用域 1.3.1 变量分类 1.3.2 全局变量的使用 1.3.3 global关键

    2024年02月08日
    浏览(65)
  • 【GitOps系列】如何实施自动化渐进式交付?

    前言 在实施金丝雀发布的过程中,我们通过 Argo Rollout 的金丝雀策略将发布过程分成了 3 个阶段,每个阶段金丝雀的流量比例都不同,经过一段时间之后,金丝雀环境变成了新的生产环境。实际上,这也是一种渐进式的交付方式,它通过延长发布时间来保护生产环境,降低了

    2024年02月14日
    浏览(47)
  • SSE实现消息实时推送,前端渐进式学习、实践,真香

    SSE(Server Sent Event),直译为服务器发送事件,顾名思义,也就是客户端可以获取到服务器发送的事件。我们常见的 http 交互方式是客户端发起请求,服务端响应,然后一次请求完毕;但是在 sse 的场景下,客户端发起请求,连接一直保持,服务端有数据就可以返回数据给客户端

    2024年02月21日
    浏览(43)
  • 2023-06-17:说一说redis中渐进式rehash?

    2023-06-17:说一说redis中渐进式rehash? 答案2023-06-17: 在Redis中,如果哈希表的数组一直保持不变,就会增加哈希冲突的可能性,从而降低检索效率。为了解决这个问题,Redis会对数组进行扩容,通常是将数组大小扩大为原来的两倍。然而,这个扩容过程会引起元素在哈希桶中的

    2024年02月09日
    浏览(43)
  • redis到底是怎么样进行渐进式Rehash的

    Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。那么redis的底层是如何来存储数据的呢? 一、redis如何在存储大量的key时候,查询速度还能接近O(1)呢? 查询速度接近O(1)的数据结构通常让我们想到的就是HashMap结构,那下面

    2024年02月09日
    浏览(38)
  • Redis(三)存储原理与数据模型(hash冲突、渐进式rehash)

    Redis(一)原理及基本命令(柔性数组) Redis(二)网络协议和异步方式(乐观锁悲观锁) Redis(三)存储原理与数据模型(hash冲突、渐进式rehash) Redis跳表 Redis是key-value的结构,其中value包含:字典,双向链表,压缩列表,跳表,整数数组,动态字符串。 其中redis中各valu

    2024年02月16日
    浏览(46)
  • 【达摩院OpenVI】视频目标渐进式Transformer跟踪器ProContEXT

    论文链接:[arxiv] 代码应用: 开源代码:[github code] 开源应用:[modelscope] 视频目标跟踪(Video Object Tracking, VOT)任务以一段视频和第一帧中待跟踪目标的位置信息(矩形框)作为输入,在后续视频帧中预测该跟踪目标的精确位置。该任务对跟踪目标的类别没有限制,目的在于

    2023年04月20日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包