（二十一）Django的类视图和动静分离

最新推荐文章于 2023-03-02 18:54:50 发布

孜孜孜孜不倦

最新推荐文章于 2023-03-02 18:54:50 发布

阅读量232

点赞数

分类专栏： Django 文章标签：动静分离 vue vue-resource

原文链接：https://www.jianshu.com/p/3ec42274013d

版权

Django 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

一、Django 类视图

我们通常使用的是函数作为处理请求的视图，直接、明了。但是，django只给GET和POST提供了快速的请求数据接收的方法，对于其他方法没有详细的介绍，于是在后来引进了视图类的概念。

类视图的使用步骤演示：
1、导入视图类的父类，继承View父类，编写视图类

from django.views import View

进入系统的视图类，可以看到request的方法列表
在这里插入图片描述

2、指出类视图的url，类视图的url可能跟函数视图有一些不一样，路径名还是照样起就行，后面跟类视图名+as_view()方法

二、Django的动静分离

1、Django动静分离概念及优缺点

动静分离就是将网站的动态数据和静态资源（html,javascript,css,img等文件）进行分开部署，提高用户访问静态资源的速度。在django的部署当中本身就有一部分资源被动静分离。独立APP的静态文件收集就是为了做动静分离。还有没有完成的是html的静态化。

将js、jq、css、img上传到一个单独目录，然后用服务器指出，CDN服务器。
在网站开发过程当中，大量使用api接口，网站页面的数据是通过请求api接口然后进行渲染，而不是通过请求视图进行渲染，常用的技术 api接口开发、json数据格式、ajax请求、vue渲染。
前后端域名分离，要求有两台服务器。

优点：

Api接口服务化，后端更加服务化，只需要通过api接口提供数据，多个功能模块或者多个平台都可以使用。
前后端并行开发，开发效率提高，互不干扰。
减轻服务器压力

缺点：

不利于seo，搜索引擎优化
开发量变大。后端针对每个数据都要有指定的接口
不好进行业务变更，开发初期，使用接口很快，但是后期api接口增多，管理api和进行业务变更变的很困难。

2、vue框架

搭建api接口。就是视图只返回需要的数据，这个数据通常是json或者xml格式。涉及到api接口。

请求规范
响应规范

以用户数据查询为例：

request = {
	“type”: “select”/”get”/”update”/”delete”/”create”,
	“data”:””
	}
response={
	“status”: 200(成功),
	“data”: ””
	}

1、使用视图类定义接口视图

from django.views import View
from django.http import HttpResponse,JsonResponse

class LoginUserApi(View):
    def get(self,request):
        result = {"status":"400","data":""}
        data = request.GET
        if data:
            types = data.get("type")
            if types == "get":
                id = data.get("id")
                if id:
                    try:
                        user = LoginUser.objects.get(id = int(id))
                        db_data = [
                            {
                                "username":user.username,
                                "password":user.password,
                                "picture":user.picture.url
                             }
                        ]
                        result["status"] = 200
                        result["data"] = db_data
                    except Exception as e:
                        result["data"] = str(e)

                else:
                    result["data"] = "id为空"

            elif types == "select":
                user_info = LoginUser.objects.all()
                db_data = [
                            {
                                "username":user.username,
                                "password":user.password,
                                "picture":user.picture.url
                             }
                            for user in user_info
                        ]
                result["status"] = 200
                result["data"] = db_data

            else:
                result["data"] = "不是合法请求"

        else:
            result["data"] = "请求数据为空"

        return JsonResponse(result)

2、添加接口视图类路由

path('LoginUser/', LoginUserApi.as_view())

3、可以直接访问路由，看看是什么效果
在这里插入图片描述
4、如果加上参数（type,id），看看什么效果
这里的type使我们自己定义的方式（暂时有get和select），id为后端数据库中的数据id主键

5、现在我们重新新建一个html文档，使用ajax请求接口视图，进行数据渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/loginapp/js/jquery.min.js"></script>
</head>
<body>
    <div id="content">
     
    </div>

    <script>
       $(function () {
           url = "/login/LoginUser/?type=select";
           $.ajax(
               {
                   url: url,
                   type: "get",
                   data: "",
                   success: function (data) {
                       db_data = data["data"];
                       for (var i in db_data){
                           console.log("===============");
                           var html_str =
                               "<p>"+"账户："+db_data[i]["username"]+"<br>"+
                                   "密码："+db_data[i]["password"]+"<br>"+
                                  "图片："+ db_data[i]["picture"]+"<br>"+"</p>";
                           console.log(html_str);
                           $("#content").append(html_str);
                           console.log("===============")
                       }
                       {#console.log(db_data)#}

                   },
                   error: function (error) {
                       console.log(error)
                   }
               }
           )
       })
    </script>

</body>
</html>

在这里插入图片描述

当然数据是通过ajax接口从后端渲染过来了，但是无法实现动静分离效果，vue恰好能够解决这个问题：后端使用vue的目的就是把ajax里面的数据绑定到前端，实现动静分离。

<script>
        Vue.use(VueResource);//声明使用VueResource的vue对象
        var vue = new Vue(
            {
                el: "#table",//获取元素标签
                data: 
                {	
                	变量1：“”，
                	变量2：“”
                }，//定义变量的关键字，也可以是存储数据的地方
                created: //初始化执行，通常用于第一页的自动加载数据
                methods:{}，//方法，vue ajax就写这里
       
            }
        )
    </script>

基本vue框架使用格式：
在这里插入图片描述

vue绑定被分为两个部分：
HTML部分：
就是要绑定位置，通常用vue的语法来定义绑定的变量。
Django和vue默认都用{{ }}作为变量的标识，在django是有冲突的，所以要使用 verbatim标签进行转义。

{% verbatim %}
{% endverbatim %}

Js部分：js部分是vue变量声明的部分，vue变量声明的规则很明确，

1、实例化一个vue对象
2、使用el来指定要绑定的标签，选择器遵循jq
3、使用data来指定具体的变量内容
4、Vue可以绑定字符也可以绑定函数，绑定函数的关键字是method
5、Vue 本身不支持ajax异步请求，所以，我们通常要使用vue的扩展插件vue-resource,但是二者语法一样，vue-resource目前交给三方团队维护。又有人开始推崇axios框架进行异步的mvvm数据绑定。

常规的vue绑定有以下几种：
①v-model 双向绑定，是vue绑定的一大特色。
在这里插入图片描述

②v-bind 绑定数据的属性，在工作当中相当频繁的绑定

③v-if 和v-show对绑定的内容判断

v-show和v-if的区别，if着重是否添加元素，show着重是否显示（隐藏），修改HTML的display的样式

④v-for 对绑定的内容进行循环(绑定哪个标签，就循环哪个）
在这里插入图片描述

⑤v-on 绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/loginapp/js/jquery.min.js"></script>
    <script src="/static/loginapp/js/vue.min.js"></script>
    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
    {% verbatim %}
    <div id="app">
        <div>
            <p>v-model双向绑定</p>
            <p>=================================</p>
            <p>{{ message }}</p>
            <p><input type="text" v-model="message"></p>
            <p>=================================</p>
        </div>

        <div>
            <p>v-bind属性绑定</p>
            <p>=================================</p>
            <p v-bind:class="class_color" v-bind:id="id_name">{{ message }}</p>
            <p>=================================</p>
        </div>

        <div>
            <p>v-if判断绑定</p>
            <p>=================================</p>
            <p v-if="valid">{{ message }}</p>
            <p>=================================</p>
        </div>

        <div>
            <p>v-show判断绑定</p>
            <p>=================================</p>
            <p v-show="valid">{{ message }}</p>
            <p>=================================</p>
        </div>

        <div>
            <p>v-for循环绑定</p>
            <p>=================================</p>
            <p v-for="f in projects">{{ f }}</p>
            <p>=================================</p>
        </div>
        
        <div>
            <p>v-on事件绑定</p>
            <p>=================================</p>
            <p v-on:click="get">{{ message }}</p>
            <p>=================================</p>
        </div>
        
    </div>
    {% endverbatim %}
    <script>
        var Vue = new Vue(
            {
                el: "#app",
                data: {
                    message: "hello",
                    class_color: "red green",
                    id_name:"text",
                    valid:0,
                    projects:["python","java","linux","html"]

                },
                methods:{
                    get:function f() {
                        alert("hello")
        }
            }}
        )
    </script>
</body>
</html>

3、vue-resource

Vue-resource 获取所有用户的列表，并且进行前端渲染
1、导入jq和vue和vue-resource
在这里插入图片描述
2、声明使用vue-resource对象

3、使用created进行初始化加载

4、使用methods定义ajax二次请求

5、使用this对结果进行重新赋值

def onlyHtml(request):
    return render(request,"loginapp/onlyhtml.html")

def vueHtml(request):
    return render(request,"loginapp/vuehtml.html")

def vurResourceHtml(request):
    return render(request,"loginapp/vue_resource.html")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/loginapp/js/jquery.min.js"></script>
    <script src="/static/loginapp/js/vue.min.js"></script>
    <script src="/static/loginapp/js/vue-resource.js"></script>

</head>
<body>
    {% verbatim %}
    <table id="table">
        <thead>
            <tr>
                <th>账户</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="stu in student">
                <td>{{ stu.username }}</td>
                <td>{{ stu.password }}</td>
            </tr>
            <tr>
                <td v-on:click="get(6)" colspan="2">加载</td>
            </tr>
        </tbody>
    </table>
    {% endverbatim %}
    <script>
        Vue.use(VueResource);//声明使用VueResource的vue对象
        var vue = new Vue(
            {
                el: "#table",
                data: {
                    student: [
                        {#{"username":"zzz","password":"123"},#}
                        {#{"username":"sss","password":"123"}#}
                    ],
                    num:2
                },//定义变量的关键字
                created: function(){
                    var url = "/login/LoginUser/?type=get&id=4";
                        this.$http.get(url).then(
                            function (data) {
                                {#console.log(data["data"]["data"])#}
                                db_data = data["data"]["data"];
                                {#console.log(this);#}
                                this.student = db_data;
                            },//相当于ajax中success
                            function (error) {
                                console.log(error)
                            }//相当于ajax中的error
                        )// 发起ajax请求 vue对ajax进行了重新封装 当前写法与$.ajax({type:get})
                },
                methods:{
                    get: function (num) {
                        console.log(num)
                        var url = "/login/LoginUser/?type=select";
                        this.$http.get(url).then(
                            function (data) {
                                {#console.log(data["data"]["data"])#}
                                db_data = data["data"]["data"];
                                {#console.log(this);#}
                                this.student = db_data;
                            },//相当于ajax中success
                            function (error) {
                                console.log(error)
                            }//相当于ajax中的error
                        )// 发起ajax请求 vue对ajax进行了重新封装 当前写法与$.ajax({type:get})
                    }
                }
            }
        )
    </script>
</body>
</html>

初始化执行，通常用于加载第一页
在这里插入图片描述
点击加载，加载出select所有数据

使用vue-resource做的最多的事情就是绑定列表页。

孜孜孜孜不倦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（二十一）Django的类视图和动静分离

一、Django 类视图我们通常使用的是函数作为处理请求的视图，直接、明了。但是，django只给GET和POST提供了快速的请求数据接收的方法，对于其他方法没有详细的介绍，于是在后来引进了视图类的概念。类视图的使用步骤演示：1、导入视图类的父类，继承View父类，编写视图类from django.views import View进入系统的视图类，可以看到request的方法列表...
复制链接

扫一扫