博客系统之登录功能（前后端分离vue + flask）

前期安装

vue cli安装

sudo npm install -g @vue/cli

运行：

vue ui

会自动开启localhost:8000 页面

mysql安装（选做）

1. 下载地址：https://dev.mysql.com/downloads/mysql/5.6.html， 找到适合的dmg版本下载
2. 点击dmg一步步进行安装
3. 配置环境变量（选做）

从 macOS Catalina 版开始，您的 Mac 将使用 zsh 作为默认登录 Shell 和交互式 Shell。您还可以在较低版本的 macOS 中将 zsh 设置为默认 Shell

# 打开terminal，输入：
vi ~/.zshrc

# 添加：
export PATH=${
   PATH}:/usr/local/mysql/bin

# 使环境变量生效：
source ~/.zshrc 

配置完成后，重启terminal，验证环境变量是否生效

mysql -u root -p

创建项目

先创建一个Python项目，然后在vue 服务器上创建vue的项目，将vue项目的路径存放在刚新建的python项目下

大概目录：

• backup：自己创建的文件夹，里面主要存放.py文件
• vue：启动vue服务后，用可视化方式创建的项目
• init：自己创建，做一些初始化操作
• run：自己创建，编写后端路由

初始化app

安装flask模块

pip3 install flask

新建 init.py 文件，代码如下：

from flask import Flask
from flask_cors import CORS


def create_app():
    """
    创建app对象
    :return:
    """
    app = Flask(__name__,
                static_folder="./vue-project/dist/static",
                template_folder="./vue-project/dist")

    # 跨平台访问
    cors = CORS(app, resources={
   r"/api/*": {
   "origins": "*"}})

    return app

新建run.py文件，部分代码如下：

from flask import render_template, jsonify, request
import requests
from random import *
import init
from backup.database import Article, session
import json

app = init.create_app()


@app.route('/', defaults={
   'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    if app.debug:
        return requests.get('http://localhost:8080/{}'.format(path)).text
    return render_template("index.html")


@app.route('/api/login', methods=['GET', 'POST'])
def login():
    username = request.values.get('username')
    password = request.values.get('password')
    if username == 'xxxxx' and password == 'xxxx':
        res = {
   
            'isLogin': '0',
            'msg': 'success'
        }
        return jsonify(res)
    else:
        res = {
   
            'isLogin': '-1',
            'msg': 'fail'
        }
        return jsonify(res)


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

连接database（选做）

先下载相关模块：

pip install flask-sqlalchemy pymysql

新建backup文件夹，在文件夹下面，新建database.py文件

from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker, relationship
from sqlalchemy import create_engine, Integer, Text, DateTime
from sqlalchemy import Column, String
from datetime import datetime
import init

# Base = init.setup_db()