【Vue3-Flask-BS架构Web应用】实践笔记1-使用一个bat脚本自动化完整部署环境

前言

近年来，Web开发已经成为计算机科学领域中最热门和多产的领域之一。Python和Vue.js是两个备受欢迎的工具，用于构建现代Web应用程序。在本教程中，我们将探索如何使用这两个工具来创建一个完整的Web项目。我们将完成从安装Python和Vue.js到项目部署的整个过程。

安装Python

首先，确保你已经安装了Python。你可以从 Python官方网站 下载并安装最新版本。也可以使用接下来的自动化bat脚本

编译器下载链接

Pycharm
Vscode

我们可以先大概浏览一下手动配置方法，后续的.bat自动初始化部署脚本基于手动配置方法编写

手动配置项目

一、创建项目

1. 创建一个flask项目。文件目录如下：

这一步已经由
.bat自动初始化Flask项目
帮我们自动化创建好了

.
├── app.py
├── static
├── templates
└── venv
1
2
3
4
5

2. 创建 Vue 3.x 版本项目。

安装 Vue 3.x 版本可以通过 Vue CLI 来进行。Vue CLI 是一个官方的命令行工具，用于快速搭建 Vue.js 项目。

安装 Node.js和npm：

Vue 3.x 依赖于 Node.js 和 npm，首先确保你已经安装了它们。你可以从Node.js官网下载并安装最新的 LTS 版本。
你也可以从Node.js中文网安装长期支持版本，这里下载更快
文末我会提供相关软件完整安装包百度网盘链接
在终端输入以下命令行检查node.js是否安装成功

node -v
1

在终端输入以下命令行检查npm是否安装成功

npm -v
1

3.安装cnpm

使用命令行安装cnpm

npm install -g cnpm --registry=https: //registry.npmmirror.com
1

PowerShell用于控制加载配置文件和运行脚本的条件，为了防止恶意脚本的执行，可能遇到无法运行脚本的问题；

解决办法：可以通过修改PowerShell执行策略来解决；

1. 右键开始,选择Windows PowerShell管理员.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine
1

2. 检查是否修改成功

 Get-ExecutionPolicy -List
1

出现如下字样则修改执行策略成功

3. 再次安装

npm install -g cnpm --registry=https://registry.npmmirror.com
1

4. 检查cnpm是否安装成功

cnpm -v
1

cnpm和npm区别

cnpm 和 npm 都是用于管理 Node.js 包（JavaScript 包）的工具，但它们有一些重要的区别：

1. 镜像源不同:

   • npm 使用默认的官方 npm 镜像（https://registry.npmjs.org/），通常对于国际用户来说速度较快。
   • cnpm 使用淘宝镜像（https://registry.npm.taobao.org/），这是一个在中国大陆地区提供的镜像源，用于提高包的下载速度。由于它的服务器在国内，因此通常对中国大陆的开发者来说更快。

2. 命令行参数:

   • npm 支持更多的命令行参数和选项，因为它是官方工具，具有更广泛的功能。
   • cnpm 是 npm 的一个简化版本，它的命令行参数和选项相对较少。

3. 稳定性和兼容性:

   • npm 是官方维护的工具，具有较高的稳定性和广泛的兼容性。
   • cnpm 有时可能会有一些不稳定性，因为它是一个第三方工具，不同于官方 npm。

4. 生态系统:

   • npm 是 Node.js 生态系统的一部分，因此它与其他 Node.js 工具和平台更加集成。
   • cnpm 是一个由淘宝团队维护的项目，它有自己的社区和生态系统。

总之，选择使用 cnpm 还是 npm 取决于你的具体需求和地理位置。如果你位于中国大陆，那么使用 cnpm 可能更快捷。但如果你需要更多功能、更高稳定性和更广泛的兼容性，那么 npm 是更好的选择。不过，无论你选择哪个工具，都可以用于管理 Node.js 包和依赖。

4. 安装 Vue CLI：

打开命令行终端，然后运行以下命令来全局安装 Vue CLI：

npm install -g @vue/cli
1

或者使用cmpm

cnpm install -g @vue/cli
1

然后输入以下语句查看脚手架是否安装成功；

vue -V
1

5. 创建 Vue 3 项目：

直接双击点开run.bat进入我们的python环境
一旦 Vue CLI 安装完成，你可以使用它来创建一个新的 Vue 3 项目。在你的项目文件夹中，运行以下命令：

vue create vue-web
1

这将启动一个交互式的命令行界面，让你选择项目的配置选项。确保选择 Vue 3 的配置，这通常是通过选择 Manually select features 然后选择 Vue 3 版本的配置。

安装依赖：

Vue CLI 会自动为你生成一个新的 Vue 3 项目，并安装所需的依赖项。进入项目文件夹：

cd vue-web
1

然后可以使用以下命令安装项目的依赖项：

npm install
1

或者如果你更喜欢使用 cnmp：

cnpm install
1

或者如果你更喜欢使用 Yarn：

yarn install
1

Yarn安装方法

在 Windows 上安装 Yarn

1. 打开你的终端（例如，命令提示符或 PowerShell）。

2. 使用 npm（Node.js 包管理器）来安装 Yarn。在终端中运行以下命令：

   npm install -g yarn
   1

   这将全局安装 Yarn，使你可以在整个系统中使用它。

3. 等待安装完成。安装完成后，你就可以在终端中使用 Yarn 命令。

4. 验证安装：在终端中运行以下命令来确认 Yarn 是否正确安装：

   yarn --version
   1

   如果你看到 Yarn 的版本号，说明安装成功。

在 macOS 上安装 Yarn

1. 打开终端应用。

2. 使用 Homebrew（如果未安装，请先安装 Homebrew）来安装 Yarn。运行以下命令：

   brew install yarn
   1

   这将使用 Homebrew 安装 Yarn。

3. 等待安装完成。安装完成后，你可以在终端中使用 Yarn 命令。

4. 验证安装：在终端中运行以下命令来确认 Yarn 是否正确安装：

   yarn --version
   1

   如果你看到 Yarn 的版本号，说明安装成功。

在 Linux 上安装 Yarn

在大多数 Linux 发行版上，你可以使用包管理器来安装 Yarn。以下是一些示例：

• 在 Ubuntu 上，使用 apt 包管理器安装 Yarn：

  sudo apt update
  sudo apt install yarn
  1
  2

• 在 Fedora 上，使用 dnf 包管理器安装 Yarn：

  sudo dnf install yarn
  1

• 在其他 Linux 发行版上，你可以按照官方 Yarn 文档中的说明进行安装。

一旦安装完成，你可以验证 Yarn 是否正确安装，方法与上述相同：

yarn --version
1

如果看到版本号，说明 Yarn 已成功安装。

安装 Yarn 后，你就可以使用它来管理 JavaScript 包和依赖了。

6. 运行 Vue 3 项目：

安装完成后，你可以使用以下命令运行 Vue 3 项目：

npm run serve
1

或者使用 Yarn：

yarn run serve
1

或者使用 cnpm：

cnpm run serve
1

这将启动开发服务器，并在浏览器中预览你的 Vue 3 项目。

这些步骤将帮助你在项目文件夹中创建一个 Vue 3.x 版本的项目，以便与 Flask 项目一起使用。

7. 修改 vue-web\vue.config.js 文件

配置 outputDir 和 indexPath:

module.exports = {
  outputDir: '../static',
  indexPath: '../templates/index.html'
}
1
2
3
4

我们开发 flask web 项目，最后通过 render_template 来导入文件，但是在 vue 项目中 通过 yarn run build 生成的文件 在 vue-web 文件中，所以配置一个 outputDir 和 indexPath

• outputDir

  • Type: string
  • Default: ‘dist’
  • 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。

• indexPath

  • Type: string
    -Default: ‘index.html’
  • 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

配置Vue项目的outputDir和indexPath，并将构建文件生成到与Flask项目集成的位置。这是一个很常见的设置，允许您在前端和后端分开开发，并在部署时将它们合并在一起。

• outputDir指定了构建文件的输出目录，这通常是在运行yarn run build时生成的生产环境构建文件的目录。在您的配置中，它被设置为'../static'，这意味着构建文件将被输出到与Flask项目的静态文件目录相关的位置。

• indexPath指定了生成的index.html文件的输出路径，相对于outputDir。在您的配置中，它被设置为'../templates/index.html'，这意味着生成的index.html文件将被输出到与Flask项目的模板目录相关的位置。

这两个配置项的修改允许您轻松将Vue.js生成的前端文件集成到Flask项目中，使其能够通过Flask的render_template函数进行渲染。

Flask的render_template函数介绍

Flask是一个轻量级的Python Web框架，它提供了一个方便的方式来构建Web应用程序。其中一个重要功能是render_template函数，用于渲染HTML模板，这在创建动态Web页面时至关重要。

## render_template的用途

render_template函数的主要作用是将Flask与模板引擎（例如Jinja2）结合使用。它允许您在预定义的模板中插入动态内容，从而生成HTML页面。这在需要从后端Python代码或数据库中显示信息的情况下非常有用。

## render_template的工作原理

1. 设置模板：要使用render_template，首先需要创建HTML模板。这些模板可以包含占位符，当您渲染模板时，这些占位符将被动态数据填充。Flask默认使用Jinja2模板引擎。

2. 渲染模板：当您的Flask应用程序的路由需要显示HTML页面时，可以调用render_template，并将模板的文件名作为参数传递。例如：render_template("index.html")。

3. 动态数据：您还可以将数据作为关键字参数传递给render_template函数。这些数据可以是变量、列表、字典或任何其他Python数据结构。在HTML模板中，您可以使用Jinja2模板标记来动态显示这些数据。

## 一个示例

from flask import Flask, render_template

app = Flask(__name)

@app.route('/')
def hello():
    user = {'username': 'John'}
    return render_template('index.html', user=user)
1
2
3
4
5
6
7
8

在此示例中，当用户访问根URL时，render_template函数用于渲染’index.html’模板。user字典作为动态数据传递，而在’index.html’中，您可以使用{{ user.username }}来动态显示用户名。

## 结论

Flask的render_template函数是构建Web应用程序的基本组成部分。它允许您将HTML模板与Python代码分开，使Web开发过程更清晰和有组织。通过将Flask与Jinja2等模板引擎结合使用，您可以高效地创建动态和交互式的Web页面。

8. build打包项目

同样三种方法,推荐cnpm

yarn run build
1

npm run build
1

cnpm run build
1

使用 tree-node-cli 查看目录结构

全局安装 tree-node-cli

npm install -g tree-node-cli

1
2

## 自动生成树目录

1. 定位到要生成树结构的根目录下：

treee -L 4 -I "node_modules|venv" > tree.md
1

## 参数解释：

• tree -L n 显示项目的层数。n 代表你要生成文件夹树的层级;
• tree -I "node_modules|themes|public" 表示要过滤的文件或目录, 过滤多个文件或目录用 | 分割;
• tree > tree.md 表示将树结构输出到 tree.md 这个文件;

你也可以使用powershell或cmd命令查看当前目录结构
下面是如何使用PowerShell和命令提示符（cmd）查看当前目录结构并排除特定文件夹的介绍：

使用 PowerShell 查看目录结构

PowerShell是Windows的强大脚本语言和命令行工具，它允许你执行各种任务，包括查看和管理目录结构。

Get-ChildItem -Recurse | Where-Object { $_.FullName -notmatch "venv" -and $_.FullName -notmatch "vue-web\\node_modules" } | ForEach-Object { Write-Host ("  " * $_.FullName.Split("\").Length) + $_.Name }
1

• Get-ChildItem -Recurse：获取当前目录及其子目录中的文件和文件夹。
• Where-Object { $_.FullName -notmatch "venv" -and $_.FullName -notmatch "vue-web\\node_modules" }：使用Where-Object cmdlet来筛选掉包含"venv"和"vue-web\node_modules"的文件夹。
• ForEach-Object { Write-Host (" " * $_.FullName.Split("\").Length) + $_.Name }：遍历结果，并以树形结构的方式显示文件和文件夹。

使用命令提示符（cmd）查看目录结构

命令提示符是Windows的传统命令行工具，用于执行各种命令和任务。

dir /B /S | find /V "venv" | find /V "vue-web\node_modules"
1

• dir /B /S：以递归方式获取当前目录及其子目录中的文件和文件夹，/B表示以简洁方式列出文件和文件夹。
• find /V "venv"：使用find命令来排除包含"venv"的文件夹。
• find /V "vue-web\node_modules"：再次使用find命令来排除包含"vue-web\node_modules"的文件夹。

这两种方法允许你查看目录结构，并排除特定文件夹，以使目录结构更清晰。根据你的需要，你可以选择使用PowerShell或命令提示符来执行这些操作。

二、预览项目

YourFlaskProject用pycharm打开
YourFlaskProjectvue-web单独用vscode打开
你也可以使用我的bat脚本

1. 打包完成后，回到 app.py 文件中，引入 index.html。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()
1
2
3
4
5
6
7
8
9
10

运行 Python-flask项目。您将看到服务器正在运行。访问项目时，会遇到 404 错误，因为静态文件无法加载。

三、修改项目加载静态资源

1. 继续修改 vue.config.js 文件，配置 assetsDir：

module.exports = {
  outputDir: '../static',
  indexPath: '../templates/index.html',
  assetsDir: 'static/'
}
1
2
3
4
5

修改后使用build打包项目
同样三种方法,推荐cnpm

yarn run build
1

npm run build
1

cnpm run build
1

这代码段是在vue.config.js中的配置，它定义了一些重要的选项，用于自定义Vue CLI项目的构建输出和静态资源的路径。让我来解释这些选项的作用：

• outputDir: ‘…/static’:

  • 这选项指定了在运行yarn run build时，构建生成的生产环境文件的目录。在这里，构建生成的文件将会存储在项目根目录的static目录下。
  • 这对于将Vue构建生成的文件输出到与Flask或其他后端框架的静态文件目录相匹配的位置非常有用。

• indexPath: ‘…/templates/index.html’:

  • indexPath选项用于指定生成的index.html文件的输出路径，相对于outputDir。在这里，它被配置为输出到项目根目录下的templates目录中。
  • 这是为了确保生成的HTML文件在与后端框架相匹配的位置，以便后端框架可以渲染HTML页面。

• assetsDir: ‘static/’:

  • assetsDir选项定义了放置生成的静态资源（如JavaScript、CSS、图像、字体等）的目录，相对于outputDir。在这里，静态资源会存储在static/static目录下。
  • 这是为了确保静态资源被正确引用并加载。在前端项目中，静态资源的路径将包括assetsDir的设置。

综合来说，这些选项的配置是为了确保Vue CLI项目的构建输出与后端框架（这里是Flask）的静态文件和模板文件的目录结构相匹配，以便前后端的协作能够顺利进行。通过配置这些选项，你可以更好地管理前后端分离项目的静态资源和HTML文件的位置。

2. 修改 app.py 文件，为 Flask 应用添加静态资源目录：

from flask import Flask, render_template

app = Flask(__name__, static_folder='./static/static')

@app.route('/')
def hello_world():
    return render_template('index.html')

if __name__ == '__main__': 
    app.run() 

1
2
3
4
5
6
7
8
9
10
11

3. 重新运行 Python 文件。静态资源路径引入将正常工作。

你也许会碰到304，这里是正常现象

根据日志信息，HTTP请求返回的状态码都是200或304，这意味着Flask服务器成功响应了这些请求。具体状态码的含义如下：

• 200：表示请求成功。这是对根路径（/）的请求，Flask成功响应，返回200状态码。

• 304：表示请求的资源未被修改，因此服务器返回304状态码，告诉浏览器可以使用缓存的资源，而不必重新下载。这通常发生在静态资源（如JavaScript和CSS文件）的请求中，浏览器已经缓存了这些资源，并且它们在服务器端没有发生变化。

从日志中看，HTTP请求都是成功的，没有404错误。这意味着前端的资源文件（如JavaScript、CSS）被成功加载。如果你在浏览器中看到404错误，有可能是浏览器缓存问题，尝试清除浏览器缓存或在浏览器中打开开发者工具来禁用缓存，然后刷新页面以查看是否能够加载正确的资源。

总之，根据日志信息，Flask服务器成功响应了请求，问题可能出在浏览器缓存或其他相关设置上。

四、对项目添加静态资源

1. favicon.ico路径修改

首先，在项目的 vue-web/public/ 文件夹下创建一个名为 static 的文件夹，并将 favicon.ico 文件放入其中。

vue-web/public/
├── index.html
└── static
    └── favicon.ico
1
2
3
4

原始index.html

DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %>title>
  head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    <div id="app">div>
    
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

接着，需要修改 vue-web/public/ 文件夹下的 index.html 文件，以正确引用 favicon.ico 的路径：

<link rel="icon" href="static/favicon.ico">
1

随后，执行以下步骤：

1. 运行 yarn run build 来打包 Vue 项目。
2. 重新运行 app.py 文件。
3. 用浏览器打开 http://127.0.0.1:5000/。

此时，favicon.ico 将能够正常加载。

2. 添加静态JS文件（如jquery.js）

通常情况下，Vue CLI 创建的项目默认不会将 jQuery 添加到全局 window 对象中。如果你希望在 Vue 项目中使用 jQuery，你需要手动导入并将其挂载到 Vue 实例上。

1. 安装 jQuery：

首先，你需要通过 npm 或 yarn 安装 jQuery：

cnpm install jquery
1

或者

yarn add jquery
1

2.下载jquery.js

你可以从官方 jQuery 网站或通过 Content Delivery Network (CDN) 来获取 jQuery。

1. 官方 jQuery 网站：你可以访问 jQuery 的官方网站（https://jquery.com/），然后在页面上找到一个下载 jQuery 的链接。从这里你可以下载最新版本的 jQuery。

2. CDN：很多网站使用 CDN 来加载 jQuery，这可以提高网页加载速度并减轻服务器负担。你可以使用像 Google CDN 或 Microsoft CDN 这样的服务来获取 jQuery。以下是一些获取 jQuery 的 CDN 示例：

   Google CDN:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">script>
   1

   Microsoft CDN:

   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js">script>
   1

只需将这些链接添加到你的 HTML 页面中的