flask+Python+Vue实现前后端分离的web项目并部署至云服务器

这篇具有很好参考价值的文章主要介绍了flask+Python+Vue实现前后端分离的web项目并部署至云服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 后台+算法模型

1.1 训练机器学习模型
	准备数据,选择合适的机器学习模型,本文以一个基于XGBoost模型进行数据分类的项目来分析。
import numpy as np
import pandas as pd
from xgboost import XGBClassifier
from sklearn.model_selection import train_test_split
from sklearn.metrics import accuracy_score
from sklearn.preprocessing import LabelEncoder
import pickle


# 读取并划分数据集
def read_data(path):
    dataset = pd.read_csv(path, index_col=0)
    # 划分出数据和标签
    data = dataset.iloc[:, :-1]
    label = dataset.iloc[:, -1]
    # 分层抽样,用随机数种子保证每次抽样一致
    train_x, test_x, train_y, test_y = train_test_split(data, label, test_size=0.3, random_state=6, stratify=label)
    return train_x, train_y, test_x, test_y


def train(train_x, train_y):
    # 建模
    model = XGBClassifier()
    model.fit(train_x, train_y)
    # 保存模型
    pickle.dump(model, open('XGBoost_model.pkl', 'wb'))
    return model


def test(test_x, test_y, model):
    num = 0
    for i, j in zip(test_x, test_y):
        y_pred = model.predict(i)
        # print(f'实际值:{j},预测值:{y_pred[0]}')
        if j == y_pred[0]:
            num += 1
    print(f'测试集准确率为{num/len(test_y)}')


if __name__ == '__main__':
    train_x, train_y, test_x, test_y = read_data('dataset.csv')
    model = train(train_x, train_y)
    test(test_x, test_y, model)
1.2 基于Flask框架搭建后台接口
在Python项目的根目录下新建app.py文件,并用安装flask依赖 pip install flask,可指定运行端口并运行app.py文件,(可借助接口测试工具进行接口测试)

注意:前后端跨域问题,可引入CORS解决,具体如代码:

from flask import Flask, render_template, url_for, request
import pickle
import flask
from flask_cors import CORS
from flask import jsonify
from flask_cors import cross_origin

# instantiate the app
app = Flask(__name__)
# 解决跨域问题,vue请求数据时用,重要!!!
cors = CORS(app)

# 导入算法模型
model = pickle.load(open('XGBoost_model.pkl', 'rb'))

# 接口路径
# @app.route('/')
def getData():
    # 接收前端传来的json数据
    data = request.get_json(silent=True)
    # print(data['age'])
    test_data = data['age']  # 此处按自己的数据标签进行更改
    y_pred = model.predict(test_data)
    # 处理完毕,向前端返回数据
    response = flask.jsonify({'label': str(label)})
    # 若跨域存在问题,可加上这个请求头
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

if __name__ == '__main__':
	# port为指定端口,也可不指定
    app.run(host='0.0.0.0', port=5000, debug=True)

2 前端搭建

本项目采用Vue+ElementUI,页面问题不进行赘述。此处注意前后端跨域问题即可。可引入axios进行解决。在项目中添加vue.config.js文件,并在main.js文件中添加内容

flask项目打包并部署,软件工具使用小帮手,深度学习,python,flask,前端,vue,机器学习

module.exports = {
    publicPath: "./", // 部署应⽤包时的基本 URL
    outputDir: "dist", // npm run build ⽣成的⽂件夹,默认是dist
    assetsDir: "static", // 在kaixin⽂件夹下⾯⽣成static⽬录存放js,img,css等静态资源
    indexPath: "index.html", // ⽣成的单⽂件的,⽂件名,
    devServer: {
        host:'0.0.0.0',
        disableHostCheck: true,
        proxy: {
            '/api': {
                target: '0.0.0.0:5000',//后端接口地址,按自己的改
                changeOrigin: true,//是否允许跨越
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

flask项目打包并部署,软件工具使用小帮手,深度学习,python,flask,前端,vue,机器学习

import axios from 'axios'
// 指向后台服务
axios.defaults.baseURL = '0.0.0:5000'
Vue.prototype.$ajax = axios

3 云服务器部署

本项目是将前端和后台代码部署至同一个服务器。服务器系统为centos7。使用宝塔面板进行服务器管理(有点好用)。

详细设置教程可参考linux CentOS 宝塔面板安装设置教程
安装Nginx和python项目管理器,后续可在面板上操作,完成项目打包上传并部署。文章来源地址https://www.toymoban.com/news/detail-724008.html

到了这里,关于flask+Python+Vue实现前后端分离的web项目并部署至云服务器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 若依RuoYi-Vue项目部署(前后端分离版本)

    RuoYi 是一个后台管理系统,基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高软件安全质量。 若依是作者给女儿取的名字(寓意:你若不离不弃,我必生死相依) 在线体验 若

    2023年04月08日
    浏览(54)
  • 【后台部署】Windows服务器部署RuoYi-Vue前后端分离项目

    一、Ruoyi-Vue前后端分离项目结构 二、Redis部署 1、下载Windows版本Redis 2、解压缩到安装目录 3、在安装目录栏输入cmd,按回车键 4、将Redis绑定为 Windows 服务,设置为后台启动 或者 5、常用命令 启动服务 停止服务 卸载命令 6、停止和启动也可以通过页面来操作 右键 此电脑 --管

    2024年02月13日
    浏览(49)
  • Spring Boot+Vue前后端分离项目如何部署到服务器

    🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 🤖 洛可可白 :个人主页 🔥 个人专栏 :✅前端技术 ✅后端技术 🏠 个人

    2024年04月11日
    浏览(61)
  • 通过宝塔面板部署一个SpringBoot+Vue前后端分离项目的指南(三更)

    阿里云服务器-FinalShell-宝塔面板。 近期需要将自己的一个SpringBoot+Vue前后端分离项目,并且是分模块开发的项目部署到服务器上,记录一下踩坑的地方,结合C站大佬的解决方案,循循善诱一步步部署到服务器上,简单,快速! 购买服务器,阿里云,腾讯云,华为云等,24周岁

    2024年02月03日
    浏览(63)
  • 【项目案例】前后端分离项目 【Web图书管理系统 】SpringBoot + Vue + Element UI + Mysql

    👉 博主介绍 : 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 Java知识图谱点击链接: 体系化学习Java(Java面试专题) 💕💕 感兴趣的同学可以收藏关注下 , 不然下次找不到哟

    2024年02月07日
    浏览(51)
  • python使用flask实现前后端分离&通过前端修改数据库数据【全栈开发基础】

    完整代码放到了最后,时间紧张的话直接拉到最后或点击目录【🥩 完整代码】看完整代码 这里先提一下,我们运行后端代码之前需要先建立一个名字为 python 的数据库,而后在该数据库下创建表 userinfo ,因为看到有的朋友后端代码拿过去后会运行不起来或者就是直接报错了

    2023年04月09日
    浏览(43)
  • 【Docker】docker部署springboot+vue+mysql+nginx前后端分离项目【部署实战篇】

    安装docker: https://blog.csdn.net/qq_39900031/article/details/121666892 springboot-vue前后端分离项目:https://gitee.com/ma-haojie/springboot-vue-demo.git https://jackwei.blog.csdn.net/article/details/110227719 或者 --restart=always 参数能够使我们 在重启docker时,自动启动相关容器 。 Docker容器的重启策略如下: no,默认

    2024年02月13日
    浏览(49)
  • Windows服务器,通过Nginx部署VUE+Django前后端分离项目

    基本说明 安装 Nginx 部署 VUE 前端 部署 Django 后端 Django admin 静态文件(CSS,JS等)丢失的问题 总结 本文介绍了在 windows 服务器下,通过 Nginx 部署 VUE + Django 前后端分离项目。本项目前端运行在 80 端口,服务器端运行在 8000 端口。因此本项目使用 Django 的 runserver 命令进行部署

    2024年02月05日
    浏览(63)
  • [ RuoYi ] 若依前后端分离 RuoYi-Vue 项目 war 包 Tomcat 项目部署

    Apache Tomcat® - Apache Tomcat 9 Software Downloads https://tomcat.apache.org/download-90.cgi Tomcat的主要特点和功能包括: ①Servlet和JSP容器:Tomcat作为一个Web服务器,可以解释执行Java Servlet和JSP代码,处理HTTP请求和响应,生成动态的Web页面。 ②独立性和易用性:Tomcat是一个独立的服务器,可以

    2024年02月07日
    浏览(58)
  • 解决前后端分离Vue项目部署到服务器后出现的302重定向问题

    最近发现自己开发的vue前后端分离项目因为使用了spring security 安全框架,即使在登录认证成功之后再调用一些正常的接口总是会莫名奇妙地出现302重定向的问题,导致接口数据出不来。奇怪的是这个问题在本地开发环境并没有,而是部署到了服务器之后才会有。 接口无法加

    2024年02月13日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包