zoukankan      html  css  js  c++  java
  • vue跳转,v-model 双向绑定,-vuex的使用cookie:,视频第三方播放

    -vue中路由携带参数跳转
    -跳转的时候:
    <router-link :to="{'name':'coursedetail','params':{'id':course.id}}">课程详情</router-link>
    -在下一个组件中取值:
    course_id: this.$route.params.id,


           
    今日内容:
    -课程列表接口
    -写一个序列化类Courseserializers
    -在视图类中:
    def get_list(self, request, *args, **kwargs):
    response = LuffyResponse()
    try:
    category=int(request.GET.get('category',None))
    course_list = models.Course.objects.all()

    if category:
    course_list=course_list.filter(course_category_id=category)

    course_ser = Courseserializers(instance=course_list, many=True)

    response.data = course_ser.data

    except Exception as e:
    response.status = 105
    response.msg = str(e)
    # response.msg = '您的操作有误'

    return Response(response.get_dic)
    -vue中显示:
    -element-ui中复制组件使用即可

    -课程详情接口
    -根据前端需要的字段,写序列化的类

    -vue中路由携带参数跳转
    -跳转的时候:
    <router-link :to="{'name':'coursedetail','params':{'id':course.id}}">课程详情</router-link>
    -在下一个组件中取值:
    course_id: this.$route.params.id,

    -在vue中简单展示
    -登录接口和vue登录
    -登录接口编写
    -后台登录接口
    -vue登录功能
    -v-model="name" 数据双向绑定
    -把token放到cookie中
    -使用vue-cookies
    -安装 npm install vue-cookies
    -使用:
    导入:import Cookies from 'vue-cookies'
    写cookie: Cookies.set('name',response.name,5)
    取cookie:Cookies.get('name')
    -vuex的使用:
    在store.js中使用
    state: {
    //写变量
    name:Cookies.get('name'),
    token:Cookies.get('token'),

    },
    mutations: {
    //写方法
    login:function (state,response) {
    state.name=response.name
    state.token=response.token
    //写入到cookie
    Cookies.set('name',response.name,5)
    Cookies.set('token',response.token,5)

    },
    logout:function (state) {
    state.name=''
    state.token=''
    //写入到cookie
    Cookies.set('name','')
    Cookies.set('token','')
    }

    },
    使用:
    调用方法:
    this.$store.commit('方法名','参数')
    修改值:
    this.$store.state.name='lqz'
    this.$store.state.token='adfasdfasdfsda'



    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
    width="600" height="490" id="cc_3DE87A53FBFC54A99C33DC5901307461">
    <param name="movie"
    value="https://p.bokecc.com/flash/single/EBA7887BABBD9CEA_3DE87A53FBFC54A99C33DC5901307461_false_74B082894C74355F_1/player.swf"/>
    <param name="allowFullScreen" value="true"/>
    <param name="allowScriptAccess" value="always"/>
    <param value="transparent" name="wmode"/>
    <embed src="https://p.bokecc.com/flash/single/EBA7887BABBD9CEA_3DE87A53FBFC54A99C33DC5901307461_false_74B082894C74355F_1/player.swf"
    width="600" height="490" name="cc_3DE87A53FBFC54A99C33DC5901307461" allowFullScreen="true"
    wmode="transparent" allowScriptAccess="always"
    pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"/>
    </object>














  • 相关阅读:
    机器学习(十七)— SVD奇异值分解
    机器学习(十五)— Apriori算法、FP Growth算法
    机器学习(十四)— kMeans算法
    深度学习—反卷积的理解
    【ECMAScript5】ECMAScript5中有关数组的常用方法
    【window】window10永久关闭更新
    【js】使用javascript 实现静态网页分页效果
    【vue】钩子函数生命周期
    【vue】vue中ref用法
    【vue-waring】element UI 由版本1.4.12 升级到element-ui@2.0.10
  • 原文地址:https://www.cnblogs.com/wrqysrt/p/10674132.html
Copyright © 2011-2022 走看看