首页 > 其他分享 >vue02_days

vue02_days

时间：2024-01-05 18:44:23浏览次数：37  
标签：style Vue vue02 days token vue data class

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：基于角色的访问控制： 
        用户
        角色（组）
        权限
        用户和角色多对多
        角色和权限多对多
        用户和权限多对多

vue介绍

前端发展历史

# 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介绍
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
    最省心的优化

M-V-VM架构

#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快速使用

# 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>

style和class

#  class  style 

# 小案例：属性指令控制class

属性指令控制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>

style和class可以绑定的数据类型

<!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>

 

标签：style,Vue,vue02,days,token,vue,data,class
From： https://www.cnblogs.com/wzh366/p/17947845

相关文章

  • der 入门-精通 09days
    排序排序快速使用（GenericAPIView）1.只有查询所有需要排序2.如何使用1必须是继承GenericAPIView及其子类2在类中配置类属性filter_backends=[OrderingFilter]3类中写属性ordering_fields=['price','id']#必须表的字段4......
  • drf 入门--精通 07days
    视图层总结 视图集ModelViewSet-视图类：GenericAPIView-映射：listcreateretrieveupdatedestroyCreateModelMixin,ListModelMixin,UpdateModelMixin,DestroyModelMixin,RetrieveModelMixin-路由写法变了：ViewSetMixin只要继承它，路由写法变了......
  • 2022 RedisDays 内容揭秘
    上个月，Redis举办了3场线上会议，分别介绍了即将正式发布的Redis7中包括的重要更新的内容，还有Redis完全重写的RedisJSON2.0模块，和新发布的RedisStack模块。除此之外，在此次线上会议中还介绍了现代化的软件架构与Redis是如何紧密结合在一起，例如Redis与MachineLearning或者人工智能......
  • 6How To Use Messages With Flask - Flask Fridays #6 10:43
    消息闪现  消息闪现{%formessageinget_flashed_messages()%}<divclass="alertalert-successalert-dismissiblefadeshow"role="alert">{{message}}<buttontype="button"class="btn-close"data-......
  • django13days
    csrf跨站请求伪造钓鱼网站:模仿一个正规的网站让用户在该网站上做操作但是操作的结果会影响到用户正常的网站账户但是其中有一些猫腻 eg:英语四六级考试需要网上先缴费但是你会发现卡里的钱扣了但是却交到了一个莫名其妙的账户并不是真正的四六级官方账户模拟钓鱼......
  • Django11days
    Cookie和session发展史cookie补充django操作cookiesessiondjango操作session三种方法———————————————————————————————————————————————————————————————————————————————————————......
  • Python8days
    如何开启事务介绍常见的字段类型和参数图书管理系统MVC和MTV模式创建多对多表关系的三种方式AJAx的介绍Ajax的案例—————————————————————————————————————————————————————————————————————————......
  • Python51days
      ython_BootStrap1.导入bootstrapBootStrap已经写好的css样式，我们如果想要使用Boostrap：下载boostrap模板在页面上引入bootsrap文件编写HTML时，按照Boostrap的规定来编写+自定制。bootsrap网址：https://www.bootcss.com/ 效果已经自行提供你只需要引入后写入class......
  • Python50days
    筛选器方法document.getElementById（）-------标签对象-------标签jQuery对象$（document.个体、ElementById（））----------jQuery对象----------可以使用jQuery对象提供的方法如何把jQuery对象转为标签对象  $===jQuery$()[0]$("#id")===jQuery("#id") 菜单例子 hide—......
  • python49days
    定时器案例         需要手动删除 改为placeholder时   变为虚拟背景 提示作用   如何修改标签属性 省市联动   jQuery快速入门它是js的一个封装库、它里面简化了js的一些复杂的写法，jQuery在三五年之前非常的流行，现......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99