flask vue在同一伺服器的解決方案

2021-09-24 05:55:48 字數 2595 閱讀 5770

1、正常安裝vue/router/cli等

2、修改frontend/src/router/index.js路由，引入新元件：

import vue from 'vue'


import router from 'vue-router'


const routeroptions = [,]


const routes = routeroptions.map(route => .vue`)}})


vue.use(router)


export default new router()
3、修改前端配置config/index.js

index: path.resolve(__dirname, '../dist/index.html'),


assetsroot: path.resolve(__dirname, '../dist'),


//此處就是修改父級目錄
4、構建flask web伺服器，主要是制定靜態檔案和模板檔案位置，vue的起始檔案為index.html，要用render_template轉過去。

from flask import flask, render_template


static_folder = "./dist/static",


template_folder = "./dist")


def index():


return render_template("index.html")
5、解決flask路由還是vue路由的問題

我們使用了html5的history-mode在vue-router需要配置web伺服器的重定向，將所有路徑指向index.html。用flask做起來很容易。將服務端路由修改如下：//也就是服務端不再路由：思考如何是部分路由怎麼辦？

def catch_all(path):

return render_template("index.html")

6、使用axios庫動態獲取後端api

import axios from 'axios'


methods: ,


getrandomfrombackend () )


.catch(error => )


}}
7、使用cors解決跨域訪問問題

在後端安裝cors即可

另外一種解決方案：

如果應用程式在除錯模式下，它只會**我們的前端伺服器。否則（在生產中）只為靜態檔案服務。所以我們這樣做：

return render_template("index.html")8、解決json字串轉化問題

1）需要在模型類中增加to_json函式：

class comment(db.model):


__tablename__ = 't_comment'


id = db.column(db.integer, primary_key=true, autoincrement=true)


content = db.column(db.text, nullable=false)


create_time = db.column(db.datetime, nullable=false, default=datetime.now)


author_id = db.column(db.integer, db.foreignkey('t_user.id'))


question_id = db.column(db.integer, db.foreignkey('t_question.id'))


author = db.relationship('user', backref=db.backref('comments'))


question = db.relationship('question', backref=db.backref('comments', order_by=create_time.desc()))


def to_json(self):


dict = self.__dict__


if "_sa_instance_state" in dict:


del dict["_sa_instance_state"]


return dict
2）將查詢的結果，一次通過to_json方法放到陣列中，在通過jsonify函式返回到前台：

# rest api介面，並將查詢結果轉化為json


def comments():


comments = db.session.query(comment).all()


result = 


for comment in comments:


return jsonify(result), 200
參考原始碼：

同一伺服器部署多個tomcat

同一伺服器部署多個tomcat時，存在埠號衝突的問題，所以需要修改tomcat配置檔案server.xml，以tomcat7為例。首先了解下tomcat的幾個主要埠 其中8080為http埠，8443為https埠 8005為遠端停服務埠 8009為ajp埠，apache能過ajp協議訪問tomca...

同一伺服器部署多個tomcat配置

同一伺服器部署多個tomcat時，存在埠號衝突的問題，所以需要修改tomcat配置檔案server.xml，以tomcat7為例。其中8080為http埠，8443為https埠 8005為遠端停服務埠 8009為ajp埠，apache能過ajp協議訪問tomcat的8009埠。1.http埠，預設...

同一伺服器安裝多個tomcat配置

一台電腦同時執行多個tomcat配置方法 1.使用壓縮版的tomcat不能使用安裝版的。2.第乙個tomcat的配置不變。3.增加環境變數catalina home2，值為新的tomcat的位址。4.修改新的tomcat中的startup.bat，把其中的catalina home改為catalin...