Django框架（九）--动静分离，api接口，Vue框架

最新推荐文章于 2024-09-22 21:21:16 发布
最新推荐文章于 2024-09-22 21:21:16 发布
阅读量1.1k 收藏 5
点赞数 2
分类专栏： Django框架 文章标签： Django Vue vue_resource api接口 动静分离
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34244910/article/details/101108526
版权

继承父模板修改页面

制作goods_list商品列表

电商项目

持续更新

一、动静分离

视图
# 提供数据的api接口
# 返回的是一个json对象
def goods_list_api(request,status,page=1):
    if status == '0':    # 下架商品
        goods = Goods.objects.filter(goods_status=0).order_by('goods_number')
    else:    # 在售商品
        goods = Goods.objects.filter(goods_status=1).order_by('goods_number')
    paginator = Paginator(goods,10)
    page_obj = paginator.page(int(page))

    res=[]
    for one in page_obj:
        res.append({
            'goods_number':one.goods_number,
            'goods_name':one.goods_name,
            'goods_price':one.goods_price,
            'goods_count':one.goods_count,
            'goods_location':one.goods_location,
            'goods_safe_date':one.goods_safe_date,
            'goods_status':one.goods_status,
            'goods_pro_time':one.goods_pro_time,
        })
    result = {
        'data':res,
        'page_range':paginator.page_range
    }
    return JsonResponse(result)

报错：
在这里插入图片描述

解决：修改视图
在这里插入图片描述

路由

在这里插入图片描述

结果

在这里插入图片描述
在这里插入图片描述

动态数据渲染

从提供数据的api接口中，提取数据，渲染到页面上

需要在html页面中增加一个请求（请求api接口地址）：ajax

视图

增加一个api_goods_list视图，负责提供页面

def api_goods_list(request):
    return render(request,'api_goods_list.html')
路由

在这里插入图片描述

模板

api_goods_list.html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>api接口提供数据</title>
  <script src="/static/vendor/jquery/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
  <script>
    $.ajax(
        {
            url:'/goods_list_api/1/1/',
            type:'get',
            data:'',
            success:function (data) {
                console.log(data['data']);
                var p='';
                for(var one in data['data']){
                    p += '<p>'+data['data'][one]['goods_name']+'</p>';
                    $('#content').html(p);
                    {#p = '<p>'+data['data'][one]['goods_name']+'</p>'#}
                    {#$('#content').append(p)#}
                }
            },
            error:function (error) {
                console.log(error);
            }
        }
    )
  </script>
</body>
</html>
结果

在这里插入图片描述

上述方法能够实现动静分离，包括页面和提供数据的api接口

动静分离的好处：

  1. 能够让项目变得更加灵活
  2. 数据被使用的范围被扩大

二、Vue

上面实现了动静分离，但比较笨拙，可用Vue实现

Vue是一个框架，MVVM设计模式，主要作用是绑定数据

视图
def vuedemo(request):
    return render(request,'vuedemo.html')
路由

在这里插入图片描述

模板
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
  <script src="/static/js/vue.min.js"></script>
</head>
<body>
<div id="panel">
  <p>
    内容绑定 {{ name }}
  </p>
  <hr>
</div>
<script>
  var vue = new Vue(
      {
          el:'#panel',
          data:{
              name:'zhangsan',
          }
      }
  )
</script>
</body>
</html>

数据并没有绑定成功
在这里插入图片描述

这是因为django模板将{{ }}认为是django的模板语法

需要用{% verbatim %}{% endverbatim %}标签包起来，使得django模板语法失效
在这里插入图片描述

（一）Vue基本使用

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
  <script src="/static/js/vue.min.js"></script>
</head>
<body>
{% verbatim %}
<div id="panel">
  <p>
    内容绑定 {{ name }}
  </p>
  <hr>
  <p v-bind:style="style">
    属性绑定 style/id/class...皆可
  </p>
  <hr>
  <p v-if="flag">
    判断绑定
  </p>
  <hr>
  <p v-for="p in lists">
    循环绑定 {{ p }}
  </p>
  <hr>
  <button v-on:click="click">
    事件绑定
  </button>
  <hr>
</div>
{% endverbatim %}
<script>
  var vue = new Vue(
      {
          el:'#panel',
          data:{
              name:'zhangsan',
              style:'color:red',
              flag:1,
              lists:['python','java','php'],
          },
          methods:{
              'click':function () {
                  alert('hello world');
              }
          }
      }
  )
</script>
</body>
</html>
结果

在这里插入图片描述

总结

  1. 导包

    <script src="/static/js/vue.min.js"></script>

  2. 创建一个实例对象

    var vue = new Vue({
	
})

  3. 数据的绑定

    {{ name }}

  4. 属性的绑定

    v-bind:style v-bind:id v-bind:class …

  5. 事件的绑定

    v-on:click = “click”

    后面这个click是一个方法名，需要与methods对象当中方法的key值对应

  6. 控制语句的绑定

    判断v-if=’’

    循环v-for=‘p in 变量’

（二）Vue+api接口实现动静分离

绑定数据–静态数据

创建vue_goods_list.html模板
{% extends 'base.html' %}

{% block title %}
  {% if status == '1' %}
    在售商品列表
  {% else %}
    下架商品列表
  {% endif %}
{% endblock %}

{% block label %}
  {% if status == '1' %}
    在售商品列表
  {% else %}
    下架商品列表
  {% endif %}
{% endblock %}

{% block style %}
  <script src="/static/js/vue.min.js"></script>
  <script src="/static/js/vue-resource.js"></script>
{% endblock %}

{% block content %}
  {% verbatim %}
  <div id="content">
    <table class="table">
      <thead>
        <tr>
          <th>商品编号</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>商品产地</th>
          <th>商品保质期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="one in goods_list">
          <td>{{ one.goods_number }}</td>
          <td>{{ one.goods_name }}</td>
          <td>{{ one.goods_price }}</td>
          <td>{{ one.goods_count }}</td>
          <td>{{ one.goods_location }}</td>
          <td>{{ one.goods_safe_date }}</td>
          <td>
            <button class="btn btn-primary">修改</button>
            <button class="btn btn-warning">下架</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
      </tfoot>
    </table>
    <ul class="pagination" style="float: right;">
      <li class="paginate_button page-item previous" v-for="page in page_range">
        <a class="page-link" v-bind:href="page">{{ page }}</a>
      </li>
    </ul>
  </div>
  {% endverbatim %}
{% endblock %}

{% block script %}
  <script>
    var vue = new Vue(
        {
            //vue只能进行静态数据的绑定，这里构建一些静态数据
            el:'#content',
            data:{
                goods_list:[
                    {
                        "goods_number": "00001",
                        "goods_name": "山西大白菜",
                        "goods_price": "100",
                        "goods_count": "200",
                        "goods_location": "陕西",
                        "goods_safe_date": "1"
                    },
                    {
                        "goods_number": "00002",
                        "goods_name": "北京大萝卜",
                        "goods_price": "100",
                        "goods_count": "100",
                        "goods_location": "东北",
                        "goods_safe_date": "1"
                    },
                    {
                        "goods_number": "00003",
                        "goods_name": "东北粉条",
                        "goods_price": "90",
                        "goods_count": "100",
                        "goods_location": "河北",
                        "goods_safe_date": "1"
                    },
                    {
                        "goods_number": "00004",
                        "goods_name": "河南烩面",
                        "goods_price": "100",
                        "goods_count": "200",
                        "goods_location": "河南",
                        "goods_safe_date": "1"
                    },
                    {
                        "goods_number": "00005",
                        "goods_name": "兰州拉面",
                        "goods_price": "100",
                        "goods_count": "300",
                        "goods_location": "北京",
                        "goods_safe_date": "1"
                    },
                    {
                        "goods_number": "00006",
                        "goods_name": "山东大葱",
                        "goods_price": "100",
                        "goods_count": "400",
                        "goods_location": "山东",
                        "goods_safe_date": "1"
                    },
                ],
                page_range:[1,2,3,4,5],
            }
        }
    )
  </script>
{% endblock %}
视图

直接将模板页面修改为vue_goods_list.html页面
在这里插入图片描述

绑定数据–动态数据

Vue作用是数据的绑定，但是没有办法进行动态数据的绑定，就出现了vue-resource

模板

修改vue_goods_list.html页面

{% extends 'base.html' %}

{% block title %}
  {% if status == '1' %}
    在售商品列表
  {% else %}
    下架商品列表
  {% endif %}
{% endblock %}

{% block label %}
  {% if status == '1' %}
    在售商品列表
  {% else %}
    下架商品列表
  {% endif %}
{% endblock %}

{% block style %}
  <script src="/static/js/vue.min.js"
          xmlns:v-bind="http://www.w3.org/1999/xhtml"
          xmlns:v-bind="http://www.w3.org/1999/xhtml"
          xmlns:v-bind="http://www.w3.org/1999/xhtml"
          xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
  <script src="/static/js/vue-resource.js"></script>
{% endblock %}

{% block content %}
  {% verbatim %}
  <div id="content">
    <table class="table">
      <thead>
        <tr>
          <th>商品编号</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>商品产地</th>
          <th>商品保质期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="one in goods_list">
          <td>{{ one.goods_number }}</td>
          <td>{{ one.goods_name }}</td>
          <td>{{ one.goods_price }}</td>
          <td>{{ one.goods_count }}</td>
          <td>{{ one.goods_location }}</td>
          <td>{{ one.goods_safe_date }}</td>
          <td>
            <button class="btn btn-primary">修改</button>
            <button class="btn btn-warning">下架</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
      </tfoot>
    </table>
    <ul class="pagination" style="float: right;">
      <li class="paginate_button page-item previous" v-for="page in page_range">
        <a class="page-link" v-bind:href="page">{{ page }}</a>
      </li>
    </ul>
  </div>
  {% endverbatim %}
{% endblock %}

{% block script %}
  <script>
    Vue.use(VueResource);    //声明使用vue_resource
    var vue = new Vue(
        {
            //发送一个get请求，从api接口中获取数据，渲染到指定页面
            el:'#content',
            data:{
                goods_list:'',
                page_range:'',
            },
            created:function () {
                url='/goods_list_api/1/1';
                this.$http.get(url).then(
                    //相当于ajax中的success
                    function (data){
                        //console.log(data['data']['data'])
                        console.log(data['data']['page_range']);
                        this.goods_list=data['data']['data'];
                        this.page_range=data['data']['page_range'];
                    },
                    //相当于ajax中的error
                    function (error) {
                        console.log(error)
                    }
                )
            }
        }
    )
  </script>
{% endblock %}
一个非常正经的人
关注
专栏目录
45--Django-项目实战-全栈开发-基于django+drf+vue+elementUI企业级项目开发流程-纯手工安装部署和docker一键部署
摘 月
06-11 958
xshell---->收费，免费finalshell---->国人用java开发的web端---->云服务器web端也可以连接这里我使用的是MobaXterm，输入用户名密码linux 操作系统都会有python2系统服务用python2 写的，必须要有项目跑在python3，额外安装（阿里云装了python3.6）我们再装一个:python3.8执行python3.8执行pip3.8。
Python九十天学习框架，从1到90，从0基础到IQ100
世上本无鬼
08-13 749
每个人的基础以及学习进度都不一样，不管最后是90天学会，还是三个月，或是更久，自学按照这个来也能相对系统的学习知识，而不是零散细碎的知识最后无法整合，所以不管怎么样，学习得有个自己的框架，下面一起来看下，希望对于你们有帮助。 Day01 - 初识Python Python简介 - Python的历史 Python的优缺点 Python的应用领域搭建编程环境 - Windows环境 Linux环境 MacOS环境从终端运行Python程序 - Hello, world print函数 运行程序使用IDLE
Django+Vue开发环境框架
05-08
Django+Vue开发环境框架 使用python3.6和django3.0还有@vue/cli 4.3.1 其他版本可能出错，可以作为一个脚手架，进行后续开发
Python+Django+Vue搭建系统第三期(写基础接口)
车陂IT仔
05-09 483
上期我们进行了建模，这期开始，我们尝试写接口，在写接口之前，我们先引入一个写接口的库和一个接口文档插件 1、安装接口编写库rest_framework pip install djangorestframework 2、安装接口文档插件drf-yasg pip install drf-yasg 2、在setting.py下引入rest_framework和drf-yasg ...
vue+django+axios前后端分离项目实战经验
最新发布
qq_74629570的博客
09-22 1271
vue+django+axios连接测试，并解决常出现的报错问题
Django（九）：Vue动静分离、vue+resource
Gym987的博客
10-29 457
vue vue是一个框架，MVVM设计模式，主要作用使用来绑定数据 因为django模板将{{}} 认为是django的模板语法 vue基本操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</ti...
动静分离和前后端分离相关
art_code的博客
11-07 663
动静分离和前后端分离相关 动静分离，动态资源 jps servlet spring mvc 与静态资源 js html img css 不会部署到同一个服务器 前后端分离 网站架构模式 微服务开发基于SOA，面向于服务器开发，后台和前段采用接口方式。将一个项目拆分成一个控制web （前端） 和接口（后端） 。最终使用rpc远程调用技术。 视图层和业务逻辑层拆分，采用rpc远程调用技...
将springboot、vue项目部署在nginx上并且动静分离
Cao_XinYang的博客
08-22 445
Nginx 动静分离简单来说就是把动态跟静态请求分开，不能理解成只是单纯的把动态页面和 静态页面物理分离。严格意义上说应该是动态请求跟静态请求分开，可以理解成使用 Nginx 处理静态页面，Tomcat 处理动态页面。动静分离从目前实现角度来讲大是纯粹把静态文件独立成单独的域名，放在独立的服务器上，也是目前主流推崇的方案。
nginx+django网站搭建，实现图片视频分享及留言
tanlingy的博客
04-12 797
本文将叙述基于代理软件nginx和web开发框架django搭建个人网站，实现用户登陆该网站后的图片、视频分享及留言互动功能。 Nginx是一款能实现请求分发，负载均衡和动静分离等功能的代理软件，用户请求目的网站时将先经过nginx再跳转至web应用。 Django框架则是用python语言开发，已封装好的便于使用的web开发工具，基于该框架的web开发将围绕MVT这一理念进行，M(Model，模...
从小白到Python大神只需要100天
MC_XY的博客
08-05 809
人工智能的火爆带火了编程语言Python，语法简单，语言易懂，一股Python学习热潮席卷职场，资深程序员jackfrued在Github上为毫无基础的新手做了一个100天成为Python大师的学习规划，很不错，参考一下。 首先给初学者几个建议： Make English as your working language（把英语作为工作语言） Practice makes perfect（熟能生巧） All experience comes from mistakes（多犯错才能多积累经验） Don`
国内某Python大神自创完整版，系统性学习Python
BCXQ2020的博客
05-19 1937
1.很多小伙伴纠结于这个一百天的时间，我觉得完全没有必要，也违背了我最初放这个大纲上来的初衷，我是觉得这个学习大纲还不错，自学按照这个来也能相对系统的学习知识，而不是零散细碎的知识最后无法整合，每个人的基础以及学习进度都不一样，没有必要纠结于一百天这个时间，甭管你是用三个月还是用一年来学习这些东西，最后学到了不就是收获吗？何必纠结于这一百天，觉得这一百天学习不完我就放弃了呢？（另，项目后面没有更新完，大家可以按照这个框架去学习，没有更新完的大家可以自行找资料。） 给初学者的几个建议： Make Eng
互联网动静分离架构
01-04
“页面静态化”是一种将原本需要动态生成的站点提前生成静态站点的优化技术。 总数据量不大，生成静态页面数量不多的业务，非常适合于“页面静态化”优化。
Windows使用Nginx部署Vue项目，动静分离配置
weixin_44315761的博客
04-28 5715
1.打包Vue项目 npm run build 打包完成后会得到一个【dist】静态资源 2.下载nginx压缩包 nginx下载 我这里下载的是windows稳定版 解压点击nginx.exe启动，访问localhost出现下面提示，说明启动成功 3.部署vue到nginx 把打包vue生成的dist文件夹复制到nginx的html目录下 进入conf目录，打开nginx.conf文件，置nginx跳转路径，将路径修改成我们项目的访问路径 测试访问成功 ...
vue项目接入api接口
aiduojia5871的博客
05-31 2150
我们在做项目时，一切基础在于数据上面，所以接入api接口是关键。 访问接口是我们会遇到跨域，而，vue-cli给我们提供了反向代理，所以我们只需要配置一下就可以了。 在config文件中找到index.js，修改dev对象里面的proxyTable如图 然后我们在同个文件夹里面打开dev.env.js这个是生产环境配置文件，我们进行修改 再打开同文件夹...
vue框架简单封装api
m0_46188775的博客
04-13 1086
在vue根目录先执行下载axios npm install axios --save 在src 目录下创建 utils/request.js //request.js import axios from "axios"; const instance = axios.create({ //接口域名 baseURL: "http://****:8080", timeout: 5000, //表示请求超过时间 headers: {}, }); //请求拦截 instance.
动静分离开发中遇到的一些问题
weixin_30344995的博客
08-10 120
一个后台管理系统 主要用到： 1.Spring ，SpringMVC， Mybatis 2.通用mapper，分页插件pagehelper，Tomcat插件 3.Restful风格 4.bootstrap，jQuery，AJAX 5.Apache服务器 6.IDEA，webstorm，maven，git，postman 由于不可抗因素，这个项目只能先到这了，中间遇到了很多问题，记录到了...
Web开发 ------ 基于Django+Vue网上购物商城（三）：用户认证、用户操作、用户交易 API接口设计
weixin_44568633的博客
04-11 2537
文章目录Web开发 ------ 基于Django+Vue网上购物商城（三）一、用户认证API接口1.REST 认证组件（1）具体代码（2） postman发送数据 测试（3）使用curl命令实现POST提交数据的测试2.REST JWT 认证组件（1） 安装模块包（2） 配置文件和路由配置（3） postman发送数据 测试JWT 自定义手机登录组件 Web开发 ------ 基于Django+...
nginx vue 动静分离配置
Vinci_ljl的博客
07-15 740
安装nginx（略） vue打包dist文件上传服务器（略） 运行springboot jar（略） nginx配置 80-def.conf server { listen 80 reuseport; server_name 127.0.0.1 localhost 192.168.1.5; access_log /var/log/nginx/80-access.log main; root /etc/nginx/...
动静分离架构
xuxiaopang0417的博客
04-19 3242
一、静态页面 静态页面，是指互联网架构中，几乎不变的页面(或者变化频率很低)，例如： 首页等html页面 js/css等样式文件 jpg/apk等资源文件 静态页面，有与之匹配的技术架构来加速，例如： CDN nginx squid/varnish 二、动态页面 动态页面，是指互联网架构中，不同用户不同场景访问，都不一样的页面，例如： 百度搜索结果页 淘宝商品列...
Django-Vue-Admin企业级后端管理系统开发指南
该系统是一个企业级后端管理系统，其开发框架采用Django和Vue.js，通过Django-Vue-Admin框架进行前后端分离的开发模式。本系统涵盖了企业日常管理中的多个核心模块，下面将详细介绍各个模块的功能和知识点。 标题中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值