您现在的位置是：网站首页> 编程资料编程资料

如何利用Python+Vue实现简单的前后端分离_python_

2023-05-26 461人已围观

简介 如何利用Python+Vue实现简单的前后端分离_python_

准备工作

  • 安装Node环境
  • 安装Python环境

注意：项目整个过程需要从后往前，即先数据库->后端->前端；启动流程也是先启动后端项目，再启动前端项目

前端

开发工具：Visual Studio Code（推荐）、WebStorm

打开cmd，安装Vue脚手架，命令如下：

npm install -g @vue/cli

创建Vue2项目，名为vue-axios

vue create vue-axios

选择Manually select features进行创建，回车

目前只勾选Router，回车

选择2.x，回车

选择如下，回车，等待下载依赖

下载完成后，进入到项目内

cd vue-axios

安装axios库

npm install axios --save

安装Element UI库

npm i element-ui -S

在src下新建utils文件夹，将request.js放于src/utils/下，request.js是axios的二次封装，如下：

import axios from 'axios' const request = axios.create({ baseURL: 'http://127.0.0.1:666', // 注意！！ 这里是全局统一加上了 后端接口前缀 前缀，后端必须进行跨域配置！ timeout: 5000 }) // request 拦截器 // 可以自请求发送前对请求做一些处理 // 比如统一加token，对请求参数统一加密 request.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json;charset=utf-8'; // config.headers['token'] = user.token; // 设置请求头 return config }, error => { return Promise.reject(error) }); // response 拦截器 // 可以在接口响应后统一处理结果 request.interceptors.response.use( response => { let res = response.data; // 如果是返回的文件 if (response.config.responseType === 'blob') { return res } // 兼容服务端返回的字符串数据 if (typeof res === 'string') { res = res ? JSON.parse(res) : res } return res; }, error => { console.log('err' + error) // for debug return Promise.reject(error) } ) export default request

修改main.js，进行注册

import Vue from 'vue' import App from './App.vue' import router from './router' import request from "@/utils/request" import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 关闭生产模式下的提示 Vue.config.productionTip = false // 设置axios为Vue的原型属性 Vue.prototype.$axios = request Vue.use(ElementUI); new Vue({ router, render: function (h) { return h(App) } }).$mount('#app')

删除多余的组件，如在src/views和src/components下的vue组件；在src/views新建Home.vue组件：

修改App.vue，如下：

其中reset.css如下：

* { margin: 0; padding: 0; box-sizing: border-box; }

修改src/router/index.js如下：

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'home', component: () => import('@/views/Home.vue') }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

打开终端或cmd，输入如下命令启动项目

npm run serve

在浏览器输入http://localhost:8080/即可打开首页，默认查询全部数据，如下：

添加页面：

编辑页面：

删除页面：

基本的增删改查均已实现，全部采用接口请求的方式进行实现，在开发者工具的网络工具栏下，可以看到前端发送的请求，如下：

以及后端响应数据的预览结果：

后端

开发环境：PyCharm（推荐）、Visual Studio Code

打开cmd，安装flask库，命令如下：

pip install flask

安装flask_cors库，命令如下：

pip install flask_cors

安装pymysql库，命令如下：

pip install pymysql

创建Python项目，名为python-flask

新建json_response.py，统一json返回格式

# 统一的json返回格式 class JsonResponse(object): def __init__(self, code, msg, data): self.code = code self.msg = msg self.data = data # 指定一个类的方法为类方法，通常用self来传递当前类的实例--对象，cls传递当前类。 @classmethod def success(cls, code=200, msg='success', data=None): return cls(code, msg, data) @classmethod def fail(cls, code=400, msg='fail', data=None): return cls(code, msg, data) def to_dict(self):
                
                

                

                                            
上一篇：利用Python提取PDF文本的简单方法实例_python_

                                                                
下一篇：python pandas处理excel表格数据的常用方法总结_python_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网