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

<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>