python+django 简单登录 static Echarts

最新推荐文章于 2023-08-08 10:45:39 发布

邓鑫

最新推荐文章于 2023-08-08 10:45:39 发布

阅读量300

点赞数

分类专栏： Django Echarts Python 文章标签： django python js web

本文链接：https://blog.csdn.net/cqkcm/article/details/103664342

版权

Python 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

Django

3 篇文章 0 订阅

订阅专栏

Echarts

3 篇文章 0 订阅

订阅专栏

利用django框架实现简单登录后，显示echarts

一、django框架

一、django框架

通过project/urls app/views templates/ html 实现

1.导入Echarts.js

在app文件下，新建立static文件，将在官网下载echarts.js存放到对应的文件夹下即可
在项目文件的 settings.py 中新增代码，目的是为了在html文件中可以直接引用 static文件目录下的 echarts.js文件

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static'),
]

2.在templates下新建立 login2.html、与testecharts.html文件

login2.html写入代码，登录页面，务必注意action="" 因其为起始页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <div>填写完点击登录</div>
    <form action="" method="post">
        {# csrf_token验证 #}
        {% csrf_token %}
        <input name="id" type="text" placeholder="请输入用户名">
        <input name="pwd" type="password" placeholder="请输入密码">
        <button type="submit">点击登录 </button>
        {% if error %}
            <h1>{{ error }}</h1>
        {% endif %}
    </form>
</body>
</html>

testecharts.html写入代码，此页面为静态页面测试echarts用,特别注意应用 script src 中的描述src="/static/echarts.js" 与src=“static/echarts.js” 真的很有区别，自己测试体会

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>testecharts</title>
    <!-- 引入 echarts.js -->
    <script src="/static/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '测试用例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

3.在APP下views.py中新增处理login2，testecharts的业务代码

目的是为了可以调用 html 业务


def login2(request):
    print(request)
    # 判断是get 请求 还是post 请求
    if request.method == 'GET':
        return render(request, 'login2.html')
    elif request.method == 'POST':
        #
        #
        ID = request.POST.get('id', default='')
        pwd = request.POST.get('pwd', default='')
        if ID == 'admin' and pwd == 'admin':
             return render(request, 'testecharts.html') #HttpResponse('登录成功')
        else:
            return render(request, 'login2.html', {'error': '密码错误'})


def testecharts(request):
    return render(request, 'testecharts.html')

4.在APP下urls.py中新增处理login2，testecharts的业务代码

特别注意 login2的 path 的起始页码为’’

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'', views.login2),
    path(r'testechart/',views.testecharts),
    #链接testecharts.html文件
]

5.最终显示

在这里插入图片描述
大功告成！！！

邓鑫

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
python+django 简单登录 static Echarts

利用django框架实现简单登录后，显示echarts一、django框架1.导入Echarts.js2.在templates下新建立 login2.html、与testecharts.html文件3.在APP下views.py中新增处理login2，testecharts的业务代码4.在APP下urls.py中新增处理login2，testecharts的业务代码5.最终显示一、django...
复制链接

扫一扫