1. PingCode智库首页
  2. 百科

python 怎么与js结合

Edit2 • • 百科

python 怎么与js结合

Python 和 JavaScript 的结合通常通过以下几种方式实现：Web 框架、API 接口、WebSocket、前端嵌入。 其中，Web 框架 是最常见且实用的方式，下面将详细描述这一方法。

Web 框架：Python 和 JavaScript 经常通过 Web 框架进行结合，最常见的框架是 Flask 和 Django。Python 负责后端逻辑处理和数据操作，而 JavaScript 负责前端交互和动态效果。这种分工让开发者可以利用各自语言的优势，构建出功能强大且用户体验良好的 Web 应用。

一、Web 框架

1、Flask 框架

Flask 是一个轻量级的 Python Web 框架，适合小型项目和快速开发。通过 Flask，可以轻松创建 API 接口，JavaScript 则可以通过 AJAX 调用这些接口，实现前后端的无缝结合。

Flask 的基本使用

首先，我们需要安装 Flask：

pip install Flask

然后，创建一个简单的 Flask 应用：

from flask import Flask, jsonify, request


app = Flask(__name__)


@app.route('/api/data', methods=['GET'])


def get_data():


    data = {'key': 'value'}


    return jsonify(data)


@app.route('/api/data', methods=['POST'])


def post_data():


    data = request.json


    return jsonify(data)


if __name__ == '__main__':


    app.run(debug=True)

2、Django 框架

Django 是一个功能齐全的 Python Web 框架，适合大型项目。它自带 ORM、认证系统、模板引擎等，能大大提高开发效率。

Django 的基本使用

首先，安装 Django：

pip install django

然后，创建一个 Django 项目：

django-admin startproject myproject


cd myproject


python manage.py startapp myapp

在 myapp/views.py 中定义视图：

from django.http import JsonResponse


from django.views.decorators.csrf import csrf_exempt


import json


@csrf_exempt


def my_view(request):


    if request.method == 'GET':


        data = {'key': 'value'}


        return JsonResponse(data)


    elif request.method == 'POST':


        data = json.loads(request.body)


        return JsonResponse(data)

在 myproject/urls.py 中配置路由：

from django.contrib import admin


from django.urls import path


from myapp import views


urlpatterns = [


    path('admin/', admin.site.urls),


    path('api/data', views.my_view),


]

二、API 接口

1、REST API

REST（Representational State Transfer）是一种常见的 Web 服务接口设计风格。通过 REST API，前后端可以进行数据交互。

创建 REST API

在 Flask 中创建 REST API：

from flask import Flask, jsonify, request


app = Flask(__name__)


@app.route('/api/items', methods=['GET'])


def get_items():


    items = [{'id': 1, 'name': 'item1'}, {'id': 2, 'name': 'item2'}]


    return jsonify(items)


@app.route('/api/items', methods=['POST'])


def create_item():


    item = request.json


    return jsonify(item), 201


if __name__ == '__main__':


    app.run(debug=True)

在 Django 中创建 REST API：

可以使用 Django REST framework 来简化 REST API 的创建：

pip install djangorestframework

在 myapp/serializers.py 中定义序列化器：

from rest_framework import serializers


class ItemSerializer(serializers.Serializer):


    id = serializers.IntegerField()


    name = serializers.CharField(max_length=100)

在 myapp/views.py 中定义视图：

from rest_framework.decorators import api_view


from rest_framework.response import Response


from .serializers import ItemSerializer


@api_view(['GET', 'POST'])


def item_list(request):


    if request.method == 'GET':


        items = [{'id': 1, 'name': 'item1'}, {'id': 2, 'name': 'item2'}]


        return Response(items)


    elif request.method == 'POST':


        serializer = ItemSerializer(data=request.data)


        if serializer.is_valid():


            return Response(serializer.data, status=201)


        return Response(serializer.errors, status=400)

在 myproject/urls.py 中配置路由：

from django.contrib import admin


from django.urls import path


from myapp import views


urlpatterns = [


    path('admin/', admin.site.urls),


    path('api/items', views.item_list),


]

2、GraphQL API

GraphQL 是一种用于 API 查询语言，允许客户端准确地请求所需的数据，并能合并多个资源请求。

创建 GraphQL API

在 Flask 中使用 Graphene 库创建 GraphQL API：

pip install graphene flask-graphql

在 app.py 中定义 GraphQL 视图：

from flask import Flask


from flask_graphql import GraphQLView


import graphene


class Item(graphene.ObjectType):


    id = graphene.Int()


    name = graphene.String()


class Query(graphene.ObjectType):


    items = graphene.List(Item)


    def resolve_items(self, info):


        return [{'id': 1, 'name': 'item1'}, {'id': 2, 'name': 'item2'}]


schema = graphene.Schema(query=Query)


app = Flask(__name__)


app.add_url_rule('/graphql', view_func=GraphQLView.as_view('graphql', schema=schema, graphiql=True))


if __name__ == '__main__':


    app.run(debug=True)

在 Django 中使用 Graphene-Django 库创建 GraphQL API：

pip install graphene-django

在 myapp/schema.py 中定义 GraphQL 架构：

import graphene


class Item(graphene.ObjectType):


    id = graphene.Int()


    name = graphene.String()


class Query(graphene.ObjectType):


    items = graphene.List(Item)


    def resolve_items(self, info):


        return [{'id': 1, 'name': 'item1'}, {'id': 2, 'name': 'item2'}]


schema = graphene.Schema(query=Query)

在 myproject/settings.py 中配置 GraphQL：

INSTALLED_APPS = [


    ...


    'graphene_django',


]


GRAPHENE = {


    'SCHEMA': 'myapp.schema.schema'


}

在 myproject/urls.py 中配置路由：

from django.contrib import admin


from django.urls import path


from graphene_django.views import GraphQLView


urlpatterns = [


    path('admin/', admin.site.urls),


    path('graphql', GraphQLView.as_view(graphiql=True)),


]

三、WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议，可以实现实时数据传输。通过 WebSocket，前后端可以实现实时交互。

Flask-SocketIO

Flask-SocketIO 是一个实现 WebSocket 的 Flask 扩展。

安装 Flask-SocketIO

pip install flask-socketio

创建 WebSocket 服务器

在 app.py 中定义 WebSocket 服务器：

from flask import Flask, render_template


from flask_socketio import SocketIO, emit


app = Flask(__name__)


app.config['SECRET_KEY'] = 'secret!'


socketio = SocketIO(app)


@app.route('/')


def index():


    return render_template('index.html')


@socketio.on('message')


def handle_message(message):


    print('received message: ' + message)


    emit('response', {'data': 'Message received!'})


if __name__ == '__main__':


    socketio.run(app, debug=True)

在 templates/index.html 中定义前端页面：

<!DOCTYPE html>


<html>


<head>


    <title>WebSocket Example</title>


    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>


    <script>


        document.addEventListener("DOMContentLoaded", () => {


            var socket = io.connect('http://' + document.domain + ':' + location.port);


            socket.on('connect', () => {


                socket.send('User has connected!');


            });


            socket.on('response', (msg) => {


                console.log(msg.data);


            });


        });


    </script>


</head>


<body>


    <h1>WebSocket Example</h1>


</body>


</html>

Django Channels

Django Channels 是一个用于在 Django 中实现 WebSocket 的库。

安装 Django Channels

pip install channels

配置 Django Channels

在 myproject/settings.py 中配置 Channels：

INSTALLED_APPS = [


    ...


    'channels',


]


ASGI_APPLICATION = 'myproject.asgi.application'

在 myproject/asgi.py 中定义 ASGI 应用：

import os


from django.core.asgi import get_asgi_application


from channels.routing import ProtocolTypeRouter, URLRouter


from channels.auth import AuthMiddlewareStack


from myapp import routing


os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')


application = ProtocolTypeRouter({


    'http': get_asgi_application(),


    'websocket': AuthMiddlewareStack(


        URLRouter(


            routing.websocket_urlpatterns


        )


    ),


})

在 myapp/routing.py 中定义路由：

from django.urls import re_path


from . import consumers


websocket_urlpatterns = [


    re_path(r'ws/socket-server/', consumers.MyConsumer.as_asgi()),


]

在 myapp/consumers.py 中定义消费者：

import json


from channels.generic.websocket import WebsocketConsumer


class MyConsumer(WebsocketConsumer):


    def connect(self):


        self.accept()


    def disconnect(self, close_code):


        pass


    def receive(self, text_data):


        text_data_json = json.loads(text_data)


        message = text_data_json['message']


        self.send(text_data=json.dumps({


            'message': message


        }))

在 templates/index.html 中定义前端页面：

<!DOCTYPE html>


<html>


<head>


    <title>WebSocket Example</title>


    <script>


        document.addEventListener("DOMContentLoaded", () => {


            var socket = new WebSocket('ws://' + window.location.host + '/ws/socket-server/');


            socket.onmessage = (e) => {


                var data = JSON.parse(e.data);


                console.log(data.message);


            };


            socket.onopen = () => {


                socket.send(JSON.stringify({'message': 'User has connected!'}));


            };


        });


    </script>


</head>


<body>


    <h1>WebSocket Example</h1>


</body>


</html>

四、前端嵌入

1、Jinja2 模板引擎

Jinja2 是一个 Python 的模板引擎，常用于 Flask 中。通过 Jinja2，可以在 HTML 中直接嵌入 Python 变量和逻辑。

使用 Jinja2 模板

在 app.py 中定义视图：

from flask import Flask, render_template


app = Flask(__name__)


@app.route('/')


def index():


    data = {'key': 'value'}


    return render_template('index.html', data=data)


if __name__ == '__main__':


    app.run(debug=True)

在 templates/index.html 中使用 Jinja2 模板：

<!DOCTYPE html>


<html>


<head>


    <title>Jinja2 Example</title>


</head>


<body>


    <h1>Jinja2 Example</h1>


    <p>{{ data.key }}</p>


</body>


</html>

2、前后端分离

在现代 Web 开发中，前后端分离是一个常见的开发模式。前端使用框架如 React、Vue.js 或 Angular，后端使用 Python 框架如 Flask 或 Django，通过 API 接口进行数据交互。

前端示例（React）

在前端项目中，使用 axios 库进行 API 调用：

npm install axios

在 src/App.js 中定义组件：

import React, { useEffect, useState } from 'react';


import axios from 'axios';


function App() {


    const [data, setData] = useState(null);


    useEffect(() => {


        axios.get('/api/data')


            .then(response => {


                setData(response.data);


            });


    }, []);


    return (


        <div>


            <h1>React Example</h1>


            {data && <p>{data.key}</p>}


        </div>


    );


}


export default App;

通过上述方式，可以将 Python 和 JavaScript 无缝结合，充分发挥两者的优势，构建功能强大且用户体验良好的 Web 应用。

相关问答FAQs：

1. 如何在Python中与JavaScript结合使用？

Python和JavaScript是两种不同的编程语言，它们具有不同的用途和功能。要在Python中与JavaScript结合使用，您可以考虑使用以下方法：

  • 使用Python的web框架（如Django或Flask）来构建后端，并使用JavaScript来处理前端交互和用户界面。
  • 使用Python的subprocess模块来调用JavaScript的命令行工具或脚本。
  • 使用Python的pyexecjs库来在Python中直接执行JavaScript代码。
  • 使用Python的transcrypt库将Python代码转换为JavaScript代码，以便在浏览器中执行。

2. 如何将Python和JavaScript进行数据交互？

要在Python和JavaScript之间进行数据交互，您可以考虑以下方法：

  • 使用Ajax技术，通过JavaScript向Python后端发送HTTP请求，并从Python后端接收响应数据。
  • 使用WebSocket协议，建立Python和JavaScript之间的双向实时通信。
  • 使用共享数据库，将数据存储在数据库中，并使Python和JavaScript都可以访问和修改这些数据。
  • 使用JSON（JavaScript Object Notation）格式，在Python和JavaScript之间传递数据。

3. 如何在Python中调用JavaScript函数？

要在Python中调用JavaScript函数，您可以考虑使用以下方法：

  • 使用Python的web框架（如Django或Flask），在HTML模板中嵌入JavaScript代码，并使用Python来渲染模板并执行JavaScript函数。
  • 使用Python的pyexecjs库，可以直接在Python中执行JavaScript代码和函数。
  • 使用Python的subprocess模块，可以调用命令行中的JavaScript解释器，并通过命令行参数传递JavaScript代码和函数。
  • 使用Python的JavaScript引擎（如V8或SpiderMonkey），将JavaScript代码嵌入到Python代码中，并在Python中调用JavaScript函数。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3897827

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部