flask vue在同一服务器的解决方案

本文介绍了如何在同一个服务器上整合Flask与Vue.js,涉及Vue路由设置、Flask静态文件配置、解决Flask与Vue路由冲突、使用axios调用后端API以及通过CORS解决跨域问题。详细步骤包括Vue组件引入、前端配置修改、Flask服务器设置,以及JSON数据在前后端间的转换方法。
摘要由CSDN通过智能技术生成

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

2、修改frontend/src/router/index.js路由,引入新组件:

import Vue from 'vue'
import Router from 'vue-router'
const routerOptions = [
{ path: '/', component: 'Home' },
{ path: '/about', component: 'About' }
]

const routes = routerOptions.map(route => {
return {
...route,
component: () => import(`@/components/${route.component}.vue`)
}

})

Vue.use(Router)
export default new Router({
routes,
mode: 'history'
})

3、修改前端配置config/index.js

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
//此处就是修改父级目录

4、构建flask web服务器,主要是制定静态文件和模板文件位置,vue的起始文件为index.html,要用render_template转过去。


                
要将Vue界面中的对话框导出为PDF,需要使用JavaScript的PDF库来生成PDF文档。以下是实现此功能的步骤: 1. 安装pdfmake库:在Vue项目中使用npm install pdfmake命令安装pdfmake库。 2. 创建Vue组件:创建一个Vue组件来包含对话框的所有内容。 3. 使用pdfmake库生成PDF:在Vue组件中使用pdfmake库来生成PDF文件。可以使用pdfmake的定义文档对象类型的方法来定义PDF文档的内容。例如,可以使用pdfmake的makeDocumentDefinition方法来定义文档对象,然后将其作为参数传递给pdfmake的createPdf方法来生成PDF文件。 4. 下载PDF文件:在生成PDF文件后,可以使用JavaScript的FileSaver库将其下载到本地计算机。使用FileSaver库的saveAs方法将PDF文件作为Blob对象保存到本地计算机。 以下是一个示例代码,用于生成和下载包含对话框的Vue组件的PDF文件: ```javascript <template> <div> <dialog ref="dialog">This is a dialog.</dialog> <button @click="exportPDF()">Export PDF</button> </div> </template> <script> import pdfMake from 'pdfmake/build/pdfmake'; import pdfFonts from 'pdfmake/build/vfs_fonts'; import { saveAs } from 'file-saver'; pdfMake.vfs = pdfFonts.pdfMake.vfs; export default { methods: { exportPDF() { const docDefinition = { content: [ { text: 'Dialog contents:', style: 'header' }, { text: this.$refs.dialog.innerHTML } ] }; pdfMake.createPdf(docDefinition).getBlob((blob) => { saveAs(blob, 'dialog.pdf'); }); } } }; </script> ``` 在上面的代码中,我们使用pdfmake库定义了一个文档对象,其中包含对话框的内容。然后,我们使用pdfmake的createPdf方法生成PDF文件,并使用FileSaver库的saveAs方法将其下载到本地计算机。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值