`drf内容`

# 1 drf入门
	-前后端开发模式：混合（模板中套模板语法），分离（后端只写接口）
  -API接口---》前后端交互的一种模式---》接口
  -postman：接口测试工具
  -restful规范：10条
  -drf：django的一个app，方便我们快速写接口
# 2 drf的序列化组件
	-可以序列化：把模型类---》字典--》通过Response返回
  -可以反序列化：把前端传入的json格式，报错到数据库中
  -数据校验：字段自己的，局部，全局
	-Serializer：在类中写要序列化的字段，重写create，update
  -ModelSerializer：继承了Serializer，写了create，update，一般不需要重写
  	-class Meta
    	models
      fields
      exclude
      depth
      extra_kwargs
    -重写字段
    -局部和全局钩子跟原来一样
   -局部，全局钩子源码:#is_valid---->self.run_validation-(执行Serializer的run_validation)-->self.to_internal_value(data)---（执行Serializer的run_validation：485行）
    -序列化类源码分析：many=True，生成的对象是ListSerializer类的对象，
    	__new__控制了对象的生成：ListSerializer[ser对象，ser对象]
    -面试常考题：__init__和__new__区别
  -字段类，字段参数：read_only，write_only
	-视图类和序列化类沟通的桥梁：context
  -serializer = AccountSerializer(account, context={'request': request})
  -序列化类中：self.context.get('request')
  -视图类中：serializer.context.get('xxx')
# 3 请求与相应
	-Request类的对象--》APIView以后的request对象都是新的
  	-request.data
    -request.query_params
    -重写了__getattr__:对象.属性  不存在的时候触发
   -可以解析的请求编码
  	-urlencoded，formdate，json
    	-django默认只能解析urlencoded，formdate
      -drf解析三种，三个类控制
   -局部使用，全局使用（一般不配置）
  
 -Response类的对象
		-data：给前端的
  	-header：相应头
    -status：相应状态码
    
 -响应格式，局部和全局配置
# 4 视图类
	-两个视图基类
  	APIView:类属性authentication_classes，permission_classes
    GenericAPIView：方法和类属性
  -5个视图扩展类
  -9个视图子类
  -视图集：
  	ViewSetMixin,
    ViewSet,
    GenericViewSet,
    ModelViewSet,
    ReadOnlyModelViewSet

# 5 路由
	-三种写法
  	-基本写法
    -视图类继承ViewSetMixin写法 as_view中传字典
    -自动生成路由
    	-SimpleRouter，DefaultRouter
  -action装饰器，视图类中方法上的
  
# 6 认证，权限，频率
		-登陆认证
  	-登陆成后用没用权限访问
    	-普通的权限控制
      -rbac权限控制
    -访问频率
    
    -局部使用全局使用，局部禁用
    
# 7 过滤，排序，分页--》GenericAPIView
	-过滤
    -自带的
    -第三方
    -自定义的
  -排序
  	-内置的
  -分页：三种分页方式
  -全局异常：写一个函数，配置一下，处理过后统一返回格式
# 8 接口文档编写
	-自动生成
  -手写
  -录入第三方
# 9 jwt认证
	-原理是什么
  -base64编码和专门
  -django中如何使用jwt
  -快速签发和认证
  	-基于auth的user表签发，可以指定返回格式
    -认证类，权限类
    
  -基于自己的user表签发和认证
  	-自己写登录方法
    -自己写认证类
# 10 混合的后台管理---》快速的写出一个符合rbac权限的管理系统
	-admin---》美化---》simpleui
  
# 11 rbac权限



# 考试题---》参照笔记---》如果能写出来，一点问题都没有




# 面试常考题：__init__和__new__区别
	-__init__:对对象进行初始化
   对象= 类(name=lqz)--》触发__init__的执行完成初始化，self.name=name-->在执行__init__之前，对象已经产生了，对象什么时候产生的？
  -__new__：创建出空对象，在__init__之前完成的
  	-重写它，使得构造的对象不是眼看到的对象
    
# 面试常考题：魔法方法---》一类中：__名字__方法---》不需要主动触发，在某种情况下会调用
	-非常非常多：https://www.cnblogs.com/liuqingzheng/articles/9949568.html
  		__str__:print(对象)，
    	__inti__:类(),
      __setattr__
      __getattr__
      __setitem__
      __call__:对象()触发

`今日内容`

前端介绍
vue介绍特性介绍
快速使用vue
模板语法之插值
指令系统之文本指令
指令系统之事件指令

`1 前端介绍`

# 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
# javascript=ecmascript+dom+bom  2015年es6--》格式化字符串 ``

# 2 Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
# 3 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
# 4.Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
# 5 React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
# 6 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
#  移动端混合开发：原生+页面---》支付宝--》口碑
# 7 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
# 8 在Vue框架的基础性上 uni-app：一套编码 编到10个平台
https://uniapp.dcloud.io/case.html
# 9 在不久的将来 ，前端框架可能会一统天下

# html css（less，sass） js jq，bootstrap es6 webpack vue react 小程序开发 node git mongodb

`2 vue介绍特性介绍`

# vue介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
可以一点一点地使用它，只用一部分，也可以整个工程都使用它
js的框架，跟jq是一类东西
bootstrap：ui框架不是js框架（css样式）
vue中使用ui可以引入bootstrap，elementui(饿了么团队出的)，Vant(移动端ui：有赞)，ant-design-vue（ant-design本身是react的ui库）
# 版本：
	-主流：2.x
  -最新：3.x
# 官方有教程：https://cn.vuejs.org/v2/guide/
# M-V-VM思想 ----》mvc，mtv，mvp：安卓分层架构
Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中，js中变量
View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
以后不需要显示的使用dom操作，jquery的作用就不大了

# 组件化开发，单页面开发
	-vue项目---》index.html页面---》看到的变化，都是组件的切换
  -页面组件--》放了小组件
  -在index.html中替换 组件，就实现页面的变化

`3 快速使用vue`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app" class="div_cls">
<h1>我的名字是：{{name}}</h1>
    <input type="text" v-model="text">
    <hr>
    {{text}}
</div>

</body>
<script>
    // div(不一定是div) 被vue托管了，在div内部，就可以使用vue的语法：模板，指令系统
    var vm =new Vue({
        // el:"#app",
        el:".div_cls",
        data:{
            name:"lqz",
            text:""
        }
    })
</script>
</html>

# 在浏览器中打开调试---》console---》vm._data['name']="xxx"--->页面跟着变了

`4 模板语法之插值`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>用两个大括号包裹的叫插值,可以写js代码</h1>
<h3>{{name}}</h3>
    <h3>{{age}}</h3>
    <h3>{{list1}}</h3>
    <h3>{{list1[0]}}</h3>
    <h3>{{obj1.name}}</h3>
    <h3>{{link1}}</h3>
    <h3>{{1==1}}</h3>
    <h3>三目运算符：{{10>20?'是':'否'}}</h3>
</div>

</body>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            name:"lqz",
            age: 18, // 数值
            list1: [1,2,3,4],   // 数组
            obj1: {name: 'lqz', age: 19}, // 对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>

# 插值可以放变量和少量js代码

`5 指令系统之文本指令`

v-xx属性都是vue的指令系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令--v-html-->会把变量的值渲染到标签中,如果字符串是标签，显示标签的样子</h1>
    <p v-html="name"></p>
    <p v-html="link1"></p>
    <h1>文本指令--v-text-->会把变量的值渲染到标签中,如果字符串是标签，不会是标签，字符串原样显示</h1>
    <p v-text="name"></p>
    <p v-text="link1"></p>

    <h1>文本指令--v-show-->控制标签是否显示:true和false，其实在页面中，但是不现实display:none</h1>
    <div v-show="show">
        我是div
    </div>
    <h1>文本指令--v-if-->控制标签是否显示:true和false，真正的标签不存在了，dom操作，性能低</h1>
    <div v-if="show1">
        我是div222
    </div>

</div>

</body>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            name:'lqz',
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            show:true,
            show1:true,
        }
    })
</script>
</html>

`6 指令系统之事件指令`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    <button v-on:click="handleClick">点我显示隐藏下面的div</button>-->
    <button @click="handleClick">点我显示隐藏下面的div</button>
    <div v-if="is_show">
        我是div
    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            is_show: true,

        },
        methods: {
            handleClick() {
                // 把show的值取反,this代指vue对象，vm对象
                this.is_show = !this.is_show
            }
        }
    })
</script>
</html>

v-on:click='xx'
v-on: 可以简写成 @  以后使用这个多

posted on 2022-04-11 23:15 Henrywuovo 阅读(37) 评论(0) 收藏举报

刷新页面返回顶部