https://book.vue.tw/CH3/3-1-vue-cli-introduction.html
前端（HTML + Vue.js）：
安裝 Node.js：首先，需要安裝 Node.js，因為 Vue.js 需要 Node.js 來運行。請訪問 https://nodejs.org/en/download/ 下載並安裝適合您操作系統的 Node.js 版本。
安裝 Vue CLI：在安裝 Node.js 之後，需要安裝 Vue CLI。打開終端（Terminal / Command Prompt），輸入以下命令：
bash
npm install -g @vue/cli
創建 Vue.js 項目：使用以下命令創建一個新的 Vue.js 項目：
lua
vue create your_project_name
這將會創建一個新的 Vue.js 項目。將 your_project_name 替換為您喜歡的項目名稱。
進入項目目錄：使用以下命令進入您剛剛建立的項目目錄：
bash
cd your_project_name
運行 Vue.js 應用：在項目目錄中，使用以下命令運行 Vue.js 應用：
arduino
npm run serve
Vue CLI 除了透過指令啟動專案外，也可利用 vue ui 指令直接開啟圖形化介面來建立與管理專案。
後端（Python）：
安裝 Python：如果您的電腦還未安裝 Python，請訪問 https://www.python.org/downloads/ 下載並安裝適合您操作系統的 Python 版本。
安裝虛擬環境：在開發 Python 項目時，建議使用虛擬環境。在終端中，輸入以下命令安裝 virtualenv：
pip install virtualenv
創建虛擬環境：選擇一個目錄作為您的 Python 後端項目的位置，然後在該目錄中輸入以下命令創建虛擬環境：
virtualenv venv
啟動虛擬環境：輸入以下命令以啟動虛擬環境：
Windows：
venv\Scripts\activate
運行 Flask 應用：在終端中，確保您已激活虛擬環境並處於後端項目目錄中。運行以下命令以啟動 Flask 應用：
python app.py
應該為 flask run
承上開發環境，我現在有一個專案需求如下步驟，請說明我要如何完成這個專案，並提共先關程式碼:
1.需要在前端有一個上傳PDF檔案的介面，並輸入這個檔案的名稱、檔案歸屬的專案
2.後端python收到以後可以把PDF檔案建立一個獨立的目錄，把檔案放到這個目錄中
3.接著把上傳的檔案切開成一頁一個檔案，放在同一個目錄
4.把這些一頁一個檔案做OCR影像辨識的處理
5.安裝sql lite資料庫到這個專案
6.把影像辨識後的內容儲存到SQL LITE資料庫
兩個小時，vue+python從無到有，完成了 1~3
最後後端程式碼如下
import os
import shutil
import PyPDF2
from flask import Flask, request
from PyPDF2 import PdfReader, PdfWriter
from pytesseract import image_to_string
from pdf2image import convert_from_path
from sqlalchemy import create_engine, Column, Integer, String, Text
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 啟用 CORS
UPLOAD_FOLDER = 'uploads'
def split_pdf(file_path, output_folder):
pdf_file = open(file_path, 'rb')
pdf_reader = PdfReader(pdf_file)
for page_num, page in enumerate(pdf_reader.pages):
pdf_writer = PdfWriter()
pdf_writer.add_page(page)
output_file = os.path.join(output_folder, f'page_{page_num + 1}.pdf')
with open(output_file, 'wb') as f:
pdf_writer.write(f)
pdf_file.close()
@app.route('/upload', methods=['POST'])
def upload_file():
if 'file' not in request.files:
return "No file found", 400
file = request.files['file']
if file.filename == '':
return "No file selected", 400
# 檢查 UPLOAD_FOLDER 是否存在，不存在則創建一個
if not os.path.exists(UPLOAD_FOLDER):
os.makedirs(UPLOAD_FOLDER)
# 保存文件
file_path = os.path.join(UPLOAD_FOLDER, file.filename)
file.save(file_path)
# 切割 PDF 檔案
split_folder = os.path.join(UPLOAD_FOLDER, file.filename.split('.')[0])
if not os.path.exists(split_folder):
os.makedirs(split_folder)
split_pdf(file_path, split_folder)
# 在此處添加對上傳文件的其他處理，例如 OCR 等
return "File uploaded and split successfully", 200
if __name__ == '__main__':
app.run(debug=True)
留言列表
