当前位置：首页 > news >正文

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

news 2025/4/7 21:48:32

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

后端

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

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

前端

项目下载地址
使用方法

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

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

打开node.js提供的command prompt，然后尝试用不同的命令构建vue项目
百度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 installnpm 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 标签 --><ahref="/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>