Flask+Vue构建图书管理系统及Echarts组件的使用

news2025/4/9 13:27:24

教程视频链接从零开始Flask+Vue前后端分离图书管理系统

后端

项目下载地址
其中venv为该项目的虚拟环境，已安装所有依赖
使用方法：

在pycharm终端中flask create一下（因为写了一个自定义命令的代码），初始化books数据库并在该数据库中初始化一张表
在终端python flask或者点击运行按钮，就可以启动后端

前端

项目下载地址
使用方法

在vscode 或者 webstrom 的终端 npm run dev，将前端启动起来，刷新页面，可以看到从后端拉取的图书数据
Vue Echarts部分仅为测试展示，没有任何逻辑及与后端的通讯，Echarts组件的代码几乎全靠deepseek搞定
前端效果如下：

不同命令构建Vue项目的区别

打开node.js提供的command prompt，然后尝试用不同的命令构建vue项目

vue create my-vue-project

npm create vue@latest
npm create vite@latest

百度deepseek提示词：npm create vue@latest指令和npm create vite@latest指令有什么区别？

构建工具不同

npm create vue@latest：底层使用 ‌Vue CLI‌（官方脚手架），基于 Webpack 构建工具，适合需要完整配置和生态集成的场景‌13。

npm create vite@latest：使用 ‌Vite‌（现代化构建工具），基于原生 ES 模块（ESM），提供更快的冷启动和热更新速度‌16，在termial启动项目是需要：

   npm install
   npm run dev

百度deepseek提示词：npm create vue@latest与npm create multi-pages-vue的区别指令有什么区别？
在这里插入图片描述

Vue项目中选项式API与组合式API区别

选项式API

使用选项式 API，可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组合式 API (Composition API)

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

例如，在vue项目中打开一个新的浏览器标签页并加载一个静态的html文件，以下是两种不同的写法

选项式API

<template>
  <!-- 方法1：直接使用 a 标签 -->
  <a
    href="/static-pages/terms.html"
    target="_blank"
    rel="noopener noreferrer"
  >打开条款页</a>

  <!-- 方法2：通过按钮触发 -->
  <button @click="openNewTab">打开隐私页</button>
</template>

<script>
export default {
  methods: {
    openNewTab() {
      // 获取 public 目录的绝对路径
      const url = window.location.origin + '/static-pages/privacy.html'
      window.open(url, '_blank', 'noopener,noreferrer')
    }
  }
}
</script>

组合式API

<template>
<!-- 方法1：直接使用 a 标签 -->
<a
href="/static-pages/terms.html"
target="_blank"
rel="noopener noreferrer"
>打开条款页</a>

<!-- 方法2：通过按钮触发 -->
<button @click="openNewTab">打开隐私页</button>
</template>

<script setup>
const openNewTab = () => {
// 获取 public 目录的绝对路径
const url = window.location.origin + '/static-pages/privacy.html'
window.open(url, '_blank', 'noopener,noreferrer')
}
</script>