Element UI+Flask前后端传参

来自CloudWiki
跳转至： 导航， 搜索

背景

学习如何接收vue的请求并将数据返回给vue显示出来

例如：一个项目需要查数据库，大家知道前端操作不安全，所以我们需要把请求发送给python后端，python后端在处理数据并把数据发送给前端

环境准备（后端）

安装Flask

pip install flask

因为存在跨域问题，需要使用flask_cors来修饰

pip install flask-cors

Flask代码

test.py: 

from flask import Flask, jsonify, abort, request
from flask_cors import *


app = Flask(__name__)
books = [
    {
        'id': 1,
        'title': u'论语',
        'auther': u'孔子',
        'price': 18
    },
    {
        'id': 2,
        'title': u'道德经',
        'auther': u'老子',
        'price': 15
    }
]

#find all books，GET操作
@app.route('/bookstore/api/v1/books', methods=['GET'])
@cross_origin()
def get_tasks():
    return jsonify({'books': books})

#get one specific book，GET操作
@app.route('/bookstore/api/v1/books/<int:id>', methods=['GET'])
def get_task(id):
    for book in books:
        if book['id']==id:
            return jsonify({'book': book})
    abort(404)

#insert a new book，POST操作
@app.route('/bookstore/api/v1/books/', methods=['POST'])
def create_task():
    if not request.form or not 'title' in request.form:
        abort(400)
    book = {
        'id': books[-1]['id'] + 1,
        'title': request.form['title'],
        'auther': request.form['auther'],
        'price': request.form['price'],
    }
    books.append(book)
    return jsonify({'book': book}), 201

#update a book，PUT操作
@app.route('/bookstore/api/v1/books/<int:id>', methods=['PUT'])
def update_book(id):
    for book in books:
        if book['id']==id:
            book["title"] = request.form['title']
            book["auther"] = request.form['auther']
            book["price"] = request.form['price']
        return jsonify({'books': books})
    abort(400)

#delete a book，DELETE操作
@app.route('/bookstore/api/v1/books/<int:id>', methods=['DELETE'])
def delete_task(id):
    for book in books:
        if book['id']==id:
            books.remove(book)
            return jsonify({'result': True})
    abort(404)

    return jsonify({'result': True})


if __name__ == '__main__':
    app.run(host='0.0.0.0',debug=True)

python test.py 运行这段代码 （或云服务器环境下后台运行：nohup python3 -u test.py > test.log 2>&1 &）

在浏览器输入http://127.0.0.1:5000/bookstore/api/v1/books

如果正常，会显示如下页面： 

{
  "books": [
    {
      "auther": "\u5b54\u5b50", 
      "id": 1, 
      "price": 18, 
      "title": "\u8bba\u8bed"
    }, 
    {
      "auther": "\u8001\u5b50", 
      "id": 2, 
      "price": 15, 
      "title": "\u9053\u5fb7\u7ecf"
    }
  ]
}

Element UI

CDN版

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>VUE第一个案例-helloWorld</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
         <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>


	</head>

	<body>
		<div id="app">
			<el-container style="height: 500px; border: 1px solid #eee">
				<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
					<el-menu :default-openeds="['1', '3']">
						<el-submenu index="1">
							<template slot="title"><i class="el-icon-message"></i>导航一</template>
							<el-menu-item-group>
								<template slot="title">分组一</template>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-menu-item index="1-3">选项3</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="1-4">
								<template slot="title">选项4</template>
								<el-menu-item index="1-4-1">选项4-1</el-menu-item>
							</el-submenu>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title"><i class="el-icon-menu"></i>导航二</template>
							<el-menu-item-group>
								<template slot="title">分组一</template>
								<el-menu-item index="2-1">选项1</el-menu-item>
								<el-menu-item index="2-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-menu-item index="2-3">选项3</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="2-4">
								<template slot="title">选项4</template>
								<el-menu-item index="2-4-1">选项4-1</el-menu-item>
							</el-submenu>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title"><i class="el-icon-setting"></i>导航三</template>
							<el-menu-item-group>
								<template slot="title">分组一</template>
								<el-menu-item index="3-1">选项1</el-menu-item>
								<el-menu-item index="3-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-menu-item index="3-3">选项3</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="3-4">
								<template slot="title">选项4</template>
								<el-menu-item index="3-4-1">选项4-1</el-menu-item>
							</el-submenu>
						</el-submenu>
					</el-menu>
				</el-aside>

				<el-container>
					<el-header style="text-align: right; font-size: 12px">
						<el-dropdown>
							<i class="el-icon-setting" style="margin-right: 15px"></i>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>查看</el-dropdown-item>
								<el-dropdown-item>新增</el-dropdown-item>
								<el-dropdown-item>删除</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<span>王小虎</span>
					</el-header>

					<el-main>
						<el-table :data="tableData">
							<el-table-column prop="auther" label="作者" width="140">
							</el-table-column>
							<el-table-column prop="id" label="ID" width="120">
							</el-table-column>
							<el-table-column prop="price" label="价格">
							</el-table-column>
							<el-table-column prop="title" label="题目">
							</el-table-column>
						</el-table>
					</el-main>
					{{tableData}}
				</el-container>
			</el-container>
		</div>
		</div>
		<style type="text/css">
			.el-header {
				background-color: #B3C0D1;
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}
		</style>
		<script>

			  
			  
			var Main = {
				data() {
					return {
						tableData: null
					}
				},
				mounted () {
					axios
						.get('http://119.3.251.91:5000/bookstore/api/v1/books')
						.then(response => (this.tableData = response.data['books']))
						.catch(function (error) { // 请求失败处理
								console.log(error);
						});				
						
				}			
				
			};
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app')
		</script>
	</body>
</html>

Vue2022071501.png


模块化开发：自动加载

参考了：https://blog.csdn.net/ITarmi/article/details/108921027

首先需要命令行切换到项目文件夹使用npm安装axios 

npm install axios

然后编写页面程序：

Test.vue: 

<template>
  <div id="app">
    {{ info }}
  </div>
</template>

<script>
	const axios = require('axios');
  export default {
	  data () {
	      return {
	        info: null
	      }
	    },
	    mounted () {
	  	axios
	  	  .get('http://119.3.212.161:5001/product')
	  	  .then(response => (this.info = response.data))
	  	  .catch(function (error) { // 请求失败处理
	  	    console.log(error);
	  	  });
	  
	    },
    methods: {
     
    }
  }
</script>

模块化开发：按钮触发

<template>
  <div id="app">
	  <el-button type="primary" @click="onSubmit">搜索</el-button>
    <div></div>{{ info }}</div>
  </div>
</template>

<script>
	const axios = require('axios');
  export default {
	  data () {
	      return {
	        info: null
	      }
	    },

    methods: {
        onSubmit(){
			axios
			  .get('http://119.3.212.161:5001/product')
			  .then(response => (this.info = response.data))
			  .catch(function (error) { // 请求失败处理
			    console.log(error);
			  });
		}
    }
  }
</script>

模块化开发：按钮触发、加载数据到表格

<template>
  <div id="app">
	  <el-button type="primary" @click="onSubmit">搜索</el-button>
   <!-- <div></div>{{ info }}</div> -->
	<div>
		   <el-table
		      :data="tableData"
		      style="width: 100%">
			  <el-table-column
			    prop="id"
			    label="id"
			    width="30">
			  </el-table-column>
			  <el-table-column
			    prop="name"
			    label="产品名称" width="120">
			  </el-table-column>
			  <el-table-column
			    prop="one_type"
			    label="一级类别"
			    width="80">
			  </el-table-column>
			  <el-table-column
			    prop="two_type"
			    label="二级类别"
			  				width="80">
			  </el-table-column>
			  <el-table-column
			    prop="price"
			    label="价格"
			    width="80">
			  </el-table-column>
		      <el-table-column
		        prop="company"
		        label="公司名称"
		        width="80">
		      </el-table-column>
		      <el-table-column
		        prop="contact"
		        label="联系方式"
		        width="230">
		      </el-table-column>
		      <el-table-column
		        prop="from_url"
		        label="来源地址" width="50">
		      </el-table-column>
			  
			  <el-table-column
			    prop="link"
			    label="产品链接"
			    width="200">
			  </el-table-column>
			  
			  
			  
		    </el-table>
	</div>
  </div>
</template>

<script>
	const axios = require('axios');
  export default {
	  data () {
	      return {
	        tableData: null
	      }
	    },

    methods: {
        onSubmit(){
			axios
			  .get('http://119.3.212.161:5001/product')
			  .then(response => (this.tableData = response.data['product']))
			  .catch(function (error) { // 请求失败处理
			    console.log(error);
			  });
		}
    }
  }
</script>

参考文档

参考文档：https://blog.csdn.net/weixin_47597012/article/details/108092533

取自“http://www.openbrains.net/mediawiki/index.php?title=Element_UI%2BFlask前后端传参&oldid=31552”