drf回顾，前端发展历史，vue介绍，第一个helloword，插值语法
今日内容概要
- 1 drf回顾
- 2 前端发展历史
- 3 vue介绍
- 4 第一个helloword
- 5 插值语法
今日内容详细
1 drf回顾
# 1 drf入门规范
前后端分离模式
前后端混合
pastman
restful规范
drf：django的app
# 2 序列化类(重点)
Serializer
字段类
字段参数
局部钩子
全局钩子
定制返回格式
1 序列化类中写：SerializerMethtoField
2 在模型类中写
many=True
ModelSerializer：create，update
class Meta：
model
fields
extra_kwargs
重写字段
反序列化校验源码---> forms
# 3 请求和响应
请求类源码：新的request
请求能解析的编码格式
响应对象源码：data headers status
响应格式
# 4 视图组件(重要)
两个视图基类
五个视图扩展类
九个视图子类
视图集
# 5 路由写法
-ViewSetMixin
-映射写法
-自动生成写法
-action装饰器
# 6 认证频率权限（重点）
# 7 过滤，排序分页
-过滤：内置，第三方，自定义
-排序：内置
-分页：三个分页类
# 8 全局异常
# 9 接口文档
# 10 jwt（重点）
-base64
-jwt原理
-django中快速使用
-自定义签发认证
# 11 rbac权限控制
# 12 simpleui使用
2 前端发展历史
# 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
-ECMAScript 6 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准
-ES13--->标准
-js=ecma+bom+dom
-sass，typescript。。。
# 2 Ajax(异步JavaScript和XML)的出现---> 后台发送异步请求 Render和Ajax混合
$.ajax
XMLHttpRequest 原生ajax
# 3 单用Ajax(加载数据 DOM渲染页面)：前后端分离的雏形
# 4 Angular框架的出现(1个js框架)：出现了"前端工程化"的概念(前端也是一个项目，工程)
# 5 React Vue框架：当下最火的两个前端框架(Vue：国人喜欢用 React：外国人喜欢用)
# 6 移动开发(Android+IOS) + Web(Web+微信小程序+支付宝小程序) + 桌面开发(Windows桌面)：前端---> 大前端
# 7 一套代码在各个平台运行(大前端)：谷歌Flutter(Dart语言：和Java很像)可以运行在IOS Android PC端
# 8 在Vue框架的基础上 uni-app：一套编码 编到多个个平台
# 预言
# 9 在不久的将来 前端框架可能会一统天下
3 vue介绍
# Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐变式框架
# Vue js的框架
# M-V-VM 构架思想 MVC MTV MVVC MVP移动端架构
M：Model 数据层 js的数据
V：View 视图层 html css
VM：ViewModel vue做出来的介于M和V之间的一层 以后不需要手动进行dom操作
-作用：以后页面变 js变量变 页面就变
# 组件化开发 单页面开发
组件化开发 以后都是写出一个个组件 组件组合成页面
单页面开发(单页面应用)：spa：single-page application，一个html页面
# 版本
1.X：使用的比较少
2.X：普遍使用(较多)
3.X：出了很久 公司新项目会选择
语法有差距 但是vue3完全兼容vue2
可以在vue3上写vue2 但是官方不建议
# 先基于vue2讲
4 第一个helloworld
# 1 选用什么编辑器---> 开发前端
eclipse my eclipse
jetbrains系列：捷克公司，IDEA---> 用java开发 做java开发--->
java--->idea
python--->pycharm
go--->goland
php--->phpstorm
前端--->webstorm
AndroidStadio---> 谷歌买了jetbrains授权 +adt 做了编辑器---> 免费
vscode：微软 免费开源 轻量级 python go 前端...
vim：开发
sublime text
pycharm + Vue插件
# 引入vue的两种方式
# 1 cdn
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
# 2 下载vue原代码到文件中
'''
<div class="app">
<p>{{name}}</p>
</div>
<script>
// 配置项 key value 传
var vm = new Vue({
el:'.app', // vue管理了这个div 以后在div中就可以写vue的语法了
data: {
name:'hello world',
age: 19
}
})
</script>
'''
5 插值语法
可以插入data中定义的变量 简单的逻辑运算 三目运算符
数组(python中叫列表)拿取数据用索引
对象(字典)拿取数据用点 key
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>名字：{{name}}</p>
<p>年龄：{{age}}</p>
<p>数组：{{list1}}</p>---->{{list1[1]}}
<p>对象：{{obj1}}</p>---》{{obj1.name}}--->{{obj1['age']}}
<p>标签：{{link1}}</p>
<p>{{10+99}}</p>
<p>三目运算符：{{score>90?"优秀":"垃圾"}}</p>
</div>
</body>
<script>
// vm对象，管理了html中得div，在div中写vue的模板语法，指令
var vm = new Vue({
el: '#app',
data: {
name: 'lqz', // 字符串
age: 18, // 数值
list1: [1,2,3,4], // 数组
obj1: {name: 'Darker', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>', # 渲染不成标签 因为渲染成功就变成了xss攻击
score:99
},
})
</script>
</html>
"""
