Django两种开发方式的分享

首先明确：前端页面看到的数据均由后端传出，而目前存在两种开发方式：纯后端开发（前后端不分离）开发，前后端分离式开发

纯后端（前后端不分离）

数据交互如图

前后端分不离的系统，没有前端，浏览器所看到的页面由后端提供的，相当于没有前端

前后端分离

主要利用DRF包（Django REST framework），数据交互如图

该应用模式下，后端仅返回前端所需的数据（一般式JSON），不再渲染HTML页面，不再控制前端的效果。至于在前后端分离的应用模式中，前端与后端的耦合度相对较低，通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。

优劣分析

纯后端：

优点	缺点
开发过程简单：不需要MOCK服务端返回数据的响应	耦合度较高：前端页面都是由后端渲染页面或重定向，也就是后端需要控制前端的展示，开发者需要兼顾前后端开发
DEBUG方便：可直接利用编辑器（例如pycharm）DEBUG，数据流动非常清晰，充分利用编辑器的调试便利	对于交互实时性的需求不友好：例如Django写一个评论功能，需要用Django的`JS`操纵库直接操纵DOM（相当于利用直接利用JS写页面）
部署容易：仅需要构建后端包	`template>>HTML`文件比较乱：HTML与CSS、JS混在一起，当系统大的时候不易维护

前后端分离：

优点	缺点
松耦合	开发复杂：要兼顾前后端的开发
能快速解决一些复杂的需求	DEBUG困难：需要打印日志
文件条理清晰分工明确	部署较于前者复杂：需要前后端分别部署

不分离开发——前端代码

<!DOCTYPE html>
<html>
<body>
<p>请输入两个数字</p>
<form action="/oneapp/add/" method="get">
    a: <input type="text" id="a" name="a"> <br>
    b: <input type="text" id="b" name="b"> <br>
    <p>result: <span id='result'></span></p>
    <button type="button" id='sum'>提交</button>
</form>
 
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
 
        $.get("/oneapp/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret)
        })
      });
    });
</script>
</body>
</html>

分离式开发——前端代码（VUE）

  
<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图区-->
        <el-card>
            <!--搜索与添加区域-->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" :clearable="true" @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>
</template>

<script>
    export default {
        data() {
            /*验证邮箱*/
            var checkEmail = (rule, value, cb) => {
                const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
                if (regEmail.test(value)) {
                    return cb()
                }
                cb(new Error('请输入合法的邮箱'))
            }
            
</script>

<style lang="less" scoped>
</style>

前端框架介绍

WHY

封装：将一些底层原理封装到框架中，不需要直接操纵dom，由框架操纵

生态：存在成熟的社区，以及前端UI框架（可选择框架比较多），加快开发速率

易维护：组件式Component编程，组件之间的解耦

声明式编程：传统前端（JQuery...）是命令式编程，涉及到编码目的有两种：对状态的判断，对DOM的操作；而声明式编程通过描述状态与视图之间的映射关系，然后通过这样的一个映射关系来操作DOM，可以说用这样的映射关系来生成一个DOM节点插入到页面去，从逻辑上只需要考虑状态即可，不需要考虑DOM怎么操作，可以大大降低前端编码的难度

WHAT

目前大厂常见的框架：VUE，Angular，React

VUE

优点：

比react更轻量
渲染效率更高
文档健全，文档形式更友好（国人开发的前端框架）
适用于简单的页面开发

缺点：

相对于angular，历史不久的Vue，部分功能还不够完善
支持的库和拓展的丰富性还有待提升
浏览器兼容性问题：同时对于老浏览器的支持也不太好

Angular

优点：Angular是一个比较完善的前端框架，数据双向绑定、模块化、路由、过滤器、依赖注入等功能相当完整，同时模板功能强大，自带丰富的指令，易于操作。思想、语法跟JAVA类似，有JAVA基础比较好上手。

缺点：

初始渲染慢
版本兼容性差
整体比较重
官方文档不全

React

优点：相比于Angular更轻量，更新DOM次数少（优化做的较好），速度较快，采用声明式设计，可以轻松描述应用，更加灵活，也能和已知的框架

或库很好的配合。

缺点：

缺少大项目的实际应用
一些功能存在BUG
ReactJS与服务器通信时需要复杂的异步编程

常用的UI模板

UI模板实际上是一些大公司制作的前端常用组件，可以直接使用，大大缩短前端开发周期，一般是与前端框架配套使用，当然Django也存在可以直接使用的UI模板（只是很少）

下边介绍的只涉及PC端的UI，实际上还存在许多移动端的UI

Django前后端不分离的UI

ACE UI框架

Github：https://github.com/bopoda/ace

demo：http://active-themes.com/ace/demo/html/calendar.html

前端框架UI

posted @ 2020-10-21 17:01 mhp 阅读(609) 评论(0) 收藏举报

刷新页面返回顶部

mhp

Django两种开发方式的分享

Django两种开发方式的分享

纯后端（前后端不分离）

前后端分离

优劣分析

前端框架介绍

WHY

WHAT

VUE

Angular

React

常用的UI模板

Django前后端不分离的UI

ACE UI框架

前端框架UI

Ant Design UI 框架

Element UI 框架

Vant UI 框架

iView UI 框架

Muse UI 框架

公告