当前位置：首页 > news >正文

js 文件不让通过地址访问_Flask Vue.js全栈开发｜第2章：通过axios访问Flask RESTful API

news 来源：原创 2024/9/23 11:22:51

Synopsis:使用 Vue.js 官方工具 Vue-cli 初始化前端项目，打包器是 webpack。安装 axios，使用它去调用后端Flask提供的API，但会失败，因为端口不同是跨域访问，后端要安装 Flask-Cors 包。最后，将 Bootstrap 4 引入到前端项目中，方便后续快速开发

代码已上传到 https:// github.com/wangy8961/fl ask-vuejs-madblog/tree/v0.2 ，欢迎 star

创建 dev 开发分支：

$ git checkout -b dev

1. 配置 Vue.js

请确保有 Vue.js 基础，阅读官方文档：

教程： https://cn.vuejs.org/v2/guide/
API： https://cn.vuejs.org/v2/api/
Cookbook： https://cn.vuejs.org/v2/cookbook/
Vue Router： https://router.vuejs.org/zh/

1.1 安装 Node.js

请前往官方网站下载并安装 LTS 版本

安装好后，由于 npm 命令使用的国外镜像，在国内下载依赖包时很慢，这里换成淘宝 NPM 镜像

打开 cmd：

之后，用 cnpm 来代替 npm 命令

1.2 Vue-cli

C:Userswangy>cnpm install -g vue-cli C:Userswangy>vue -V 2.9.6

1.3 初始化前端项目

C:Userswangy>D: D:>cd python-codeflask-vuejs-madblog D:python-codeflask-vuejs-madblog>vue init webpack front-end ? Project name front-end ? Project description A Vue.js project ? Author WY-Acer <wangy8961@163.com> ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) no vue-cli · Generated "front-end". # Project initialization finished! # ======================== To get started: cd front-end npm install (or if using yarn: yarn) npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack

使用 cnpm 命令安装依赖：

D:python-codeflask-vuejs-madblogfront-end>cnpm install

启动：

D:python-codeflask-vuejs-madblogfront-end>npm run dev

打开浏览器 http://localhost:8080：

2. 组件 Ping.vue

删除 front-end/src/components/HelloWorld.vue，并创建新组件 front-end/src/components/Ping.vue：

<template> <div> <p>{{ msg }}</p> </div> </template> <script> export default { name: 'Ping', data() { return { msg: 'Hello, This is Ping.vue component' } } } </script>

更新路由 front-end/src/router/index.js：

import Vue from 'vue' import Router from 'vue-router' import Ping from '@/components/Ping' Vue.use(Router) export default new Router({ routes:

剩余文章可跳转链接：

Flask Vue.js全栈开发｜第2章：Vue.js通过axios访问Flask RESTful APIwww.madmalls.com