Vue前端使用Axios交互Flask后端（实验项目第三期）_小白手把手完成作业管理系统前端vue后端flask

Vue前端使用Axios交互Flask后端（实验项目第三期）

1、Vue的启动（新手常见错误）

在打开别人的Vue项目时：

清理npm缓存

npm有缓存时，常常出现安装依赖不成功的现象，使用命令清理缓存：

npm clean cache -f
1

重新安装依赖

npm install
1

运行项目

npm run dev
1

但是！
此处有一起新手常犯错误：
以我的项目为例子：

此处项目根目录应该为stundent_employment（即vscode打开的目录）而不是FRONT目录，可我打开了FRONT目录，并在此开启终端运行npm run dev导致报错（npm ERR! errno -4058）：

E:\Web学习\idea\vue>npm run dev
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path E:\Web学习\idea\vue\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'E:\Web学习\idea\vue\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Lenovo\AppData\Roaming\npm-cache\_logs\2023-8-18T08_47_57_691Z-debug.log

1
2
3
4
5
6
7
8
9
10
11
12

通过查阅发现npm ERR! errno -4058这个错误是因为在根目录（student_employment）的上一级运行导致的。
用vscode重新打开student_employment再运行即可解决问题。

2、如何在vue里使用axios（引入路径问题）

打开src目录下的main.js文件，在里面创建axios实例对象（此处的baseURL即你的后端服务器地址），并导出（一定要导出！）

然后再去对应的功能里引入axios的实例对象（因为默认导出的是instance，所以引入名可改为axios）：

此处可能出现import的路径问题
解决方法如下：在vite.config.js文件中添加resolve配置，指定别名以及路径，例如：

3、跨越请求问题（使用Flask-CORS解决）

我在前端使用登录功能时：
后端显示200（成功）

127.0.0.1 - - [29/Aug/2023 18:36:59] "OPTIONS /register HTTP/1.1" 200 -
1

但是却没有成功添加注册用户到数据库里

可以看到请求方法为OPTIONS，而不是POST请求。这通常是由于跨域请求引起的。

当使用axios发送跨域请求时，浏览器会先发送一个OPTIONS请求，用于询问服务器是否支持跨域请求。如果服务器返回了允许跨域请求的响应头信息，浏览器才会发送真正的POST请求。

如果后端没有正确处理OPTIONS请求，就会导致POST请求失败。因此，你需要在后端代码中添加对OPTIONS请求的处理逻辑。可以使用Flask-CORS这个库来简化这个过程。Flask-CORS可以自动为跨域请求添加响应头信息，从而让浏览器正常发送POST请求。

首先安装CORS库：

pip install flask-cors
1

然后在创建Flask实例对象的配置文件中：

from flask_cors import CORS

# 创建Flask应用
app = Flask(__name__)
# 将CORS应用于Flask应用
CORS(app)
1
2
3
4
5
6

即可解决跨域问题

4、登录凭证问题（用session保存用户登录状态）

Flask中的session是存在浏览器中 默认key是session(加密的cookie)，使用session时要设置一个密钥app. secret_ key
操作session就像操作python 中的字典一样，我们可以使用session[‘user’]获取值，也可以使用session. get(‘user’)获取值。
操作它的时候有两种方法：
1、result = session[‘username’] ：如果内容不存在，将会报异常
2、result = session.get(‘username’) ：如果内容不存在，将返回None（推荐用法）
（关于session的设置、读取、删除、清除等请查阅文档，此处不再过多叙述）

密钥secret_ key设置

import os
from datetime import timedelta

# 创建Flask对象
app = Flask(__name__)

app.config['SECRET_KEY'] = os.urandom(24)   #使用os里的urandom生成随机24位字符串作为密钥(用于加密session数据)
app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=7)  # 配置7天有效
1
2
3
4
5
6
7
8

session的使用

后端：

from flask import Blueprint, jsonify, request, session
from src.model.user import User

bp_login = Blueprint('login_bp',__name__)

@bp_login.route('/login',methods=['GET','POST'])
def login1():
    # 获取前端发送的数据
    if request.is_json:         			#前端发送json格式时
        data = request.get_json()
        username = data.get('username')
        password = data.get('password')
    else:                       			#前端发送表单格式时
        username = request.form.get('username')
        password = request.form.get('password')
    #查询数据库该用户密码（先查询用户是否存在）
    existing_user = User.query.filter_by(username=username).first()
    if not existing_user:
        #如果不存在用户
        response = {
            'status': 'error',
            'message': '该用户不存在'
        }
        return jsonify(response), 400

    #如果用户存在，继续进行校验密码的逻辑
    if (password == existing_user.password):
        # 登录成功时使用session保存用户状态
        session.permanent = True                # 设置session的有效期
        session['user_id'] = existing_user.uid  # 设置session['user_id']为用户的uid
        response = {
            'status': 'success',
            'message': '登录成功'
        }
        return jsonify(response)
    else:
        response ={
            'status':'error',
            'message':'密码错误'
        }
        return jsonify(response),400
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

在登录成功时，我们设置session[‘user_id’]为用户的uid，以保存用户的登录状态。
并且设置session.permanent为True，以设置session的有效期。
在后续的请求中，我们可以通过session来获取用户的id，以判断用户是否已经登录。

前端：

  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 使用axios实例发送POST请求
          axios.post('/login', `username=${this.loginForm.username}&password=${this.loginForm.password}`, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
          .then(response => {
            // 登录成功，保存session信息
            console.log(response.data)
            sessionStorage.setItem('user_id', response.data.user_id)
            sessionStorage.setItem('is_logged_in', true)
            this.$router.push('/')
          })
          .catch(error => {
            // 登录失败，提示错误信息
            console.log(error)
            this.$message.error('登录失败，请检查用户名和密码')
          })
        } else {
          console.log('Login form validation failed')
          return false
        }
      })
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

前端使用form表单形式向后端发送POST请求传递数据，在请求成功后，根据后端发送回来的response，使用sessionStorage保存用户session信息。

在后续的请求中，从sessionStorage中获取session信息，并在请求头中添加session信息，以验证用户的登录状态。