# flask_vue_demo

**Repository Path**: nmaptech/flask_vue_demo

## Basic Information

- **Project Name**: flask_vue_demo
- **Description**: demo 图书管理 flask vue 前后端分离
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 3
- **Created**: 2023-12-01
- **Last Updated**: 2025-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 说明

使用 flask、vue、elements-plus、axios 基于 restful api 的前后端分离的图书信息管理案例

[bilibili视频 flask + vue 前后端分离](https://www.bilibili.com/video/BV1Jr4y1771i/)

[视频作者提供的文档](https://notes.zhengxinonly.com/bilibili/case/vue_book.html#%E5%89%8D%E7%AB%AF%E9%83%A8%E5%88%86)

## 后端环境

python环境安装 略

pip python包管理工具

常用ide(编辑器): pycharm 、 vscode

[csdn文章 python虚拟环境工具介绍](https://blog.csdn.net/weixin_40922744/article/details/103721870)

实例 sys:windows10
```cmd
python -m venv venv         # 创建虚拟环境
venv\Scripts\activate.bat   # cmd激活虚拟环境
venv\Scripts\activate       # pycharm中powershell激活环境

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple flask  # 安装所需库
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple flask_cors  # 安装所需库
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple flask_sqlalchemy  # 安装所需库
...

pip freeze > requirements.txt   # 列出项目依赖库

deactivate      # 退出虚拟环境
```

## 后端操作

在虚拟环境中
```cmd
flask create    # 生成数据库
flask routes    # 查看接口
flask run       # 运行后端
```

## 前端环境

### 前端技术栈背景知识

```text
html            # 网页内容
css             # 网页样式 -> less sass scss 参考 https://blog.csdn.net/achen0511/article/details/130537274
javascript      # 网页行为 -> typescript(JavaScript的静态类型的超集)

nvm/nodejs/npm/npx的联系和区别 参考 https://www.bilibili.com/video/BV13Q4y1K7dD/
node/node.js    # js运行时/js运行环境，将js从浏览器解放，大前端出现
nvm             # node version management，node版本管理工具，node版本迭代快导致
npm             # node package management，node三方插件管理工具/包管理工具
npx             # npm5.6之后自带的命令，区别：npm直接下载依赖到本地开发环境，npx先在本地找，没有再网络下载到内存，之后删除，无侵入。

vite            # 前端构建工具
vue             # 用于构建用户界面的JavaScript框架
Element Plus    # UI组件库
axios           # 基于promise的HTTP库，简单的讲就是可以发送get、post请求
```

node: [node官网 node发行版本&与npm对应表](https://nodejs.org/en/about/previous-releases)

nvm-windows: [nvm-widows releases](https://github.com/coreybutler/nvm-windows/releases)

vite: https://vitejs.cn/

vue3: https://v3.cn.vuejs.org/

Element Plus: https://element-plus.gitee.io/zh-CN/

axios: https://axios-http.com/docs/intro

## 前端操作

powershell(admin) 执行node安装
```text
nvm list                # 查看node可用版本 本地
nvm list available      # 查看node可用版本 可安装
nvm install latest      # 安装node最新版本
nvm install lts         # 安装node长期支持(LTS)版本
nvm install 14.20.0     # 安装node指定版本
```

一旦安装了一个版本的Node，就会安装相应版本的 NPM。
如果要使用的NPM版本不可用，运行 npm install @npm version-number -g 进行安装。

```text
nvm use latest          # 使用最新版本
nvm use lts             # 使用长期支持版本
nvm use version-number  # 使用你已安装的任何其他版本
```

开发工具 ide 基本为vscode


### 项目创建
```
npm init vite@latest
npm install     # 安装依赖
npm run dev     # 运行程序
```
### 初始化

```text
npm install element-plus
npm install axios
```