jwt 回顾
# jwt:simple-jwt--->自定义表签发token -前端携带用户名密码到后端 -取出用户名密码---》去我们的表查询--》如果查到，说明是我们用户 -签发token： refresh = RefreshToken.for_user(user) refresh.access_token -视图类： serializer_class = LoginSerializer # 实例化得到序列化类的对象 ser=self.get_serializer(data=request.data) # 数据校验 ser.is_valid(raise_exception=True) # 序列化类字段自己的校验，局部钩子，全局钩子 # 返回给前端--->全局钩子返回的数据，最终就是validated_data retrun Response(ser.validated_data) - 序列化类 -全局钩子：def validate(self, attrs): username = attrs.get('username') password = attrs.get('password') user = UserInfo.objects.filter(username=username, password=password).first() if user: refresh = RefreshToken.for_user(user) return {code,msg,usernam,refresh,access} else: raise APIException({'code':101,'msg':'查无此人'}) # 2 自定义表认证 class LoginAuthentication(BaseAuthentication): def authenticate(self, request): # 1 前端携带的数据token，从request中取出来 # 2 假设带在请求头中： #Authorization---》HTTP_Authorization #token----》HTTP_TOKEN token = request.META.get('HTTP_TOKEN') if token: try: validated_token = AccessToken(token) # 源码中拿出来的 except Exception as e: raise APIException({'code': 888, 'msg': str(e)}) user = UserInfo.objects.filter(pk=validated_token['user_id']).first() return user, token else: raise APIException({'code': 101, 'msg': 'token必须携带'}) # 3 认证类，局部配置或全局配置 -如果签发：RefreshToken.for_user(user) -如何认证：validated_token = AccessToken(token) # 4 权限 -acl：访问控制列表 用户跟权限直接相关联 -rbac：基于角色的访问控制： 用户 角色（组） 权限 用户和角色多对多 角色和权限多对多 用户和权限多对多
# 1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看 # 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个平台
# Vue介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合 # 渐进式框架 可以一点一点地使用它，只用一部分，也可以整个工程都使用它 # 网站 版本：vue2 vue3 官网：https://cn.vuejs.org/ 文档3：https://cn.vuejs.org/ 文档2：https://v2.cn.vuejs.org/ # 2.Vue特点 易用 通过 HTML、CSS、JavaScript构建应用 灵活 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。 高效 20kB min+gzip 运行大小 超快虚拟 DOM 最省心的优化
#1 后端架构： MTV MVC #2 mvvm 前端vue架构 M：model 数据层 V：view 用户视图层 VM：viewmodel 连接数据和视图的中间层
# 组件化开发 可以把公用的 样式html，写成组件 后期可以共用 # 单页面应用---》spa--》signel page application -vue项目---》整个vue项目只有一个 页面 index.html
开发前端-编辑器选择
# 主流 webstorm ：跟pycharm是一家 jetbrains公司的 vscode： 免费，微软 sublimetext：收费 # 后端来讲 pycharm ：跟webstorm是一个东西 可以直接在pycharm上装个插件，可以开发vue # pycharm 对vue没有语法提示--》装个vue插件即可 -装完后要重启
# vue 就是js框架---》渐进式---》 # 新建一个 xx.html--->引入vue(跟之前引入jq一模一样) # 写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"> {{name}} </div> </body> <script> var vm=new Vue({ el: '#app', // 管理了哪个标签 data: { // 数据 name: '彭于晏' } }) // 只要data中name变量变化了，页面就会变化 </script> </html>
# 1 插值语法---》渲染变量
{{}} ---{{ 变量、js语法、三目表达式，函数加括号 }}
<!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> <p>数组取值：{{list1[1]}}</p> <p>对象显示：{{obj1}}</p> <p>对象取值：{{obj1.name}}</p> <p>对象取值：{{obj1['age']}}</p> <p>显示标签：{{link1}}</p> <p>简单js：{{4 + 5 + age}}</p> <p>三目运算符：{{score > 90 ? '优秀' : '不优秀'}}</p> </div> </body> <script> //条件?符合:不符合 // var score=99 // var s=score>90?'优秀':'不优秀' // console.log(s) var vm = new Vue({ el: '#app', data: { name: 'lqz', // 字符串 age: 18, // 数子 list1: [1, 2, 3, 4], // 数组 obj1: {name: '彭于晏', age: 19}, // 对象 link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>', score: 99 } }) </script> </html>
文本指令
# vue 的指令系统 -1 写在标签上 -2 以 v- 开头 都称之为vue的指令，有特殊含义 # 文本指令主要用来操作文本 v-text:把文字渲染到标签内 v-html:把文字渲染到标签内，如果是标签会渲染标签 v-show：控制标签显示与否，隐藏 v-if：控制标签显示与否，真的删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h3>v-text:引号中放的跟之前插值放的一样</h3> <p v-text="name"></p> <div v-text="name"></div> <h3>v-html:引号中放的跟之前插值放的一样,能把标签渲染</h3> <div v-html="s"></div> <h3>v-show ：控制标签显示与否 没有删除标签，只是隐藏 display: none;</h3> <img src="./img/1.jpg" v-show="show" height="300px" width="200px"> <h3>v-if ：控制标签显示与否 直接把标签删除</h3> <img src="./img/2.png" v-if="if_show" height="300px" width="200px"> </div> </body> <script> var vm = new Vue({ el: '#app', data: { name: '彭于晏', s: '<a href="http://www.baidu.com">点我看美女</a>', show: true, if_show: true } }) </script> </html>
# 点击，双击，滑动，输入 事件 # 目前先讲点击事件 v-on:事件名='handleChange' v-on:click ='handleChange' 简写成（用的多） @click='handleChange' 方法必须放在methods中 methods: { handleChange: function () { this.show = !this.show // ! 取反 } }
<!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="handleChange">点我显示隐藏美女</button>--> <button @click="handleChange">点我显示隐藏美女</button> <hr> <img src="./img/1.jpg" alt="" v-show="show" width="200px" height="300px"> <hr> <h2>事件指令之参数问题：正常有几个参数就传几个参数即可</h2> <p @click="handleP(name)">点我带参数</p> <hr> <p @click="handleP">点我(如果方法要参数但没传，会自动把当前事件对象传入)</p> <hr> <p @click="handleP('lqz',19)">点我(有几个参数传几个参数)</p> <hr> <p @click="handleP('lqz')">点我(少传参数)</p> <hr> <p @click="handleP('lqz',19,'asdfa','asdfa')">点我(多传参数)</p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { show: true, name:'lqz' }, methods: { handleChange: function () { this.show = !this.show // ! 取反 }, handleP: function (name, age) { console.log(name) alert('你的名字是：' + name + "你的年龄是:" + age) } } }) </script> </html>
# 控制属性的 v-bind:属性名='值' # 可以简写成 :属性='值'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <img :src="img" alt="" height="300px" width="200px"> <p :id="p_id">我是p</p> <hr> <h1>换**案例</h1> <button @click="handleChange">换一张</button> <br> <img :src="img_change" alt="" height="300px" width="200px"> </div> </body> <script> var vm = new Vue({ el: '#app', data: { img: './img/1.jpg', p_id: 'xx', img_change: './img/1.png', // list1: ['./img/1.png', './img/2.png', './img/3.png', './img/4.png', './img/5.png', './img/6.png'] }, methods: { // handleChange: function () { // // 随机从list1中拿一个值： // // 1 统计数组长度，出一个随机数在0--数组长度直接--》生成0---6之间的整数 // //Math.random() // 生成0-1之间的小数 // // Math.random() * this.list1.length // 1--数组长度直接的一个小数 // // Math.ceil(Math.random() * this.list1.length) // 随机0--数组长度直接的数字 // // 2 数组[随机数] // var c = Math.floor(Math.random() * this.list1.length) // console.log(c) // this.img_change = this.list1[c] // } handleChange: function () { var c = Math.ceil(Math.random() * 6) this.img_change = `./img/${c}.png` } } }) </script> </html>
# class style # 小案例：属性指令控制class
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> .red { background-color: red; } .green { background-color: green; } </style> </head> <body> <div id="app"> <button @click="handleChangeBack">点我切换背景色</button> <div :class="back"> 我是div </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { back: 'green', }, methods: { handleChangeBack: function () { this.back = this.back == 'red' ? 'green' : 'red' } } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> .background { background-color: pink; } .fontsize { font-size: 60px; } .back { color: green; } </style> </head> <body> <div id="app"> <h1>class可以绑定的类型</h1> <button @click="hancleCilck1">点我字符串形式</button> <div :class="str_class"> 我是div </div> <hr> <button @click="hancleCilck2">点我数组形式</button> <div :class="list_class"> 我是div </div> <button @click="hancleCilck3">点我对象形式</button> <div :class="obj_class"> 我是div </div> <hr> <h1>style可以绑定的类型</h1> <button @click="hancleCilck4">字符串形式</button> <div :style="str_style"> 我是div </div> <button @click="hancleCilck5">数组形式</button> <div :style="list_style"> 我是div </div> <button @click="hancleCilck6">对象形式</button> <div :style="obj_style"> 我是div </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { // class 可以绑定的类型 // 1 字符串形式 str_class: 'background', // 2 数组形式(常用的) list_class: ['background'], // 3 对象形式 obj_class: {'background': true, 'fontsize': false}, // style //1 字符串形式 str_style: 'background-color: yellow', // 2 数组形式 list_style: [{'background-color': 'yellow'}], // 3 对象形式(更合适) // obj_style: {'background-color': 'pink', 'color': 'red'} // js的key可以去掉 '',但是中间有 - 要转成驼峰 obj_style: {backgroundColor: 'pink', color: 'red'} }, methods: { hancleCilck1: function () { this.str_class = this.str_class + ' fontsize' }, hancleCilck2: function () { this.list_class.push('fontsize') // this.list_class.pop() }, hancleCilck3: function () { this.obj_class.fontsize = true }, hancleCilck4: function () { this.str_style = this.str_style + ';font-size: 60px' }, hancleCilck5: function () { this.list_style.push({'font-size': '40px'}) }, hancleCilck6: function () { // 对象新增加的属性，vm监控不到，就无法实现 响应式 // 对象中原来有的属性，修改是能监控到 // this.obj_style['font-size'] = '90px' //this.obj_style['background-color']='green' // 原来对象中没有的值，就能监控到了---》如果改了对象没有影响到页面--》vm没有监控到--》就使用Vue.set // Vue.set(this.obj_style, 'font-size', '90px') this.obj_style['color'] = 'green' } } }) </script> </html>
v-if v-else-if v-else 就是判断，符合哪个条件，就显示哪个标签
<!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 v-if="score>=90&&score<=100">优秀</p> <p v-else-if="score>=70&&score<90">良好</p> <p v-else-if="score>=60&&score<70">及格</p> <p v-else>不及格</p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { score: 91 }, }) </script> </html>
---------------------
<!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>用户信息</h1> <p>用户名：{{userinfo.username}}</p> <p>年龄：{{userinfo.age}}</p> <p>用户类型： <span v-if="userinfo.userType==1">超级管理员</span> <span v-else-if="userinfo.userType==2">普通管理员</span> <span v-else>普通用户</span> </p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { userinfo: {username: 'lqz', age: 19, userType: 1} }, }) </script> </html>