es6导入导出语法,vue-router简单使用,登录跳转案例,scoped的使用

es6导入导出语法

默认导出和导入

导出语法

只导出变量:export default name

只导出函数:export default add

导出对象:export default {name,add}

export default {
    name:"彭于晏",
    add: (a,b)=>{
        return a+b
    }
}

导入语法

相对导入,相对于当前文件

import lqz from './lyz/utils'

绝对导入--》开始导入的路径  src路径,但是需要写个 @

import lqz from '@/lyz/utils'

命名导出导入

导出

export const age = 99
export const add = (a, b) => a + b
export const showName = name => {
    console.log(name)
}

export const obj={
    name:'lyz',
    show(){
        alert('show')
    }
}

导入

import {showName,obj} from '@/lyz/common.js'
以后可以使用showName  函数
以后可以使用obj  对象 ,又可以点  obj.xx

如果包下有个 index.js 直接导到index.js上一次即可

vue-router简单使用

# 单页面应用---》只要一个html--》要实现页面跳转的效果---》其实就是组件的跳转
# 组件跳转,需要借助于第三方:vue-router  已经装了

# 1 需要在App.vue 写个标签---以后不要再写任何其他东西了
    <template>
      <div id="app">
        <router-view>
        </router-view>
      </div>
    </template>

# 2 在 router---index.js---注册组件
    # 1 导入
    import LoginView from "@/views/LoginView";
    import IndexView from "@/views/IndexView";
    import AboutView from "@/views/AboutView";
    const routes = [
    # 2 注册路由
    {
        path: '/',
        name: 'home',
        component: IndexView
    },
    {
        path: '/login',
        name: 'login',
        component: LoginView
    },
    {
        path: '/about',
        name: 'about',
        component: AboutView
    },
]
    
# 3 以后再浏览器访问不同路径,就会显示不同组件(页面组件--->views中)

登录跳转案例

 前端

views.IndexView.vue

<script>
import axios from "axios";
export default {name: 'IndexView',data(){return {filmlist:[]}},created() {axios.get('http://127.0.0.1:8000/film/').then(res=>{this.filmlist=res.data.results})}
}
</script><template><div><h1>首页</h1><div v-for="film in filmlist"><img :src="film.poster"  height="200px" alt=""><div><h3>{{film.name}}</h3><p>主演:<span v-for="item in film.actors">{{item.name}} &nbsp;</span></p><p>{{film.nation}}|{{film.runtime}}</p></div></div></div></template><style scoped></style>

views.LoginView.vue

<template><div><h1>登录</h1><p>用户名:<input type="text" v-model="username"></p><p>密码:<input type="text" v-model="password"></p><p><button @click="handleSubmit">登录</button></p></div>
</template><script>
import http from "axios";export default {username: 'LoginView',data() {return {username: '',password: '',}},methods: {handleSubmit() {// 发送ajax请求http.post('http://127.0.0.1:8000/login/', {username: this.username,password: this.password}).then(response => {if (response.data.code == 100) {// 跳转this.$router.push('/')} else {alert(response.data.msg)}})}}
}
</script><style></style>

router.index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import IndexView from "@/views/IndexView.vue";
import LoginView from "@/views/LoginView.vue";Vue.use(VueRouter)const routes = [{path: '/',name: 'index',component: IndexView},{path: '/login',name: 'lgoin',component: LoginView}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

后端

settings.py

from pathlib import Path# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-f7fdk5#b(wrypoemzgkq!@lb&!3vrc)7&hg4dbdz+t57!(56o1'# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = TrueALLOWED_HOSTS = []# Application definitionINSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','app01.apps.App01Config','corsheaders'
]MIDDLEWARE = ['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware','django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware','corsheaders.middleware.CorsMiddleware',
]ROOT_URLCONF = 'djangoProject0112.urls'TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [BASE_DIR / 'templates'],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]WSGI_APPLICATION = 'djangoProject0112.wsgi.application'# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databasesDATABASES = {'default': {'ENGINE': 'django.db.backends.sqlite3','NAME': BASE_DIR / 'db.sqlite3',}
}# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validatorsAUTH_PASSWORD_VALIDATORS = [{'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',},{'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',},{'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',},{'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',},
]# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/LANGUAGE_CODE = 'zh-hans'TIME_ZONE = 'UTC'USE_I18N = TrueUSE_L10N = TrueUSE_TZ = True# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/STATIC_URL = '/static/'# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-fieldDEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'AUTH_USER_MODEL = 'app01.UserInfo'SIMPLE_JWT = {"TOKEN_OBTAIN_SERIALIZER": "app01.serializer.LoginSerializer",
}CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = ('DELETE','GET','OPTIONS','PATCH','POST','PUT','VIEW',
)
CORS_ALLOW_HEADERS = ('XMLHttpRequest','X_FILENAME','accept-encoding','authorization','content-type','dnt','origin','user-agent','x-csrftoken','x-requested-with','Pragma','token'
)REST_FRAMEWORK = {'EXCEPTION_HANDLER': 'app01.exceptions.common_exception_handler',
}

urls.py


from django.contrib import admin
from django.urls import path
from rest_framework_simplejwt.views import token_obtain_pair
from app01 import views
urlpatterns = [path('admin/', admin.site.urls),path('login/',token_obtain_pair),path('film/',views.FilmView.as_view()),
]

exceptions.py

from rest_framework.views import exception_handler
from rest_framework.response import Responsedef common_exception_handler(exc,context):res=exception_handler(exc,context)if res:  #drf异常msg=res.data.get('detail') or res.data or '系统异常,请联系系统管理员'return Response({'code':999,'msg':msg})else:return Response({'code':888,'msg':'系统异常,请联系系统管理员 %s'%str(exc)})

serializer.py

from rest_framework_simplejwt.serializers import TokenObtainPairSerializerclass LoginSerializer(TokenObtainPairSerializer):def validate(self, attrs):res=super().validate(attrs)user=self.userdata={'code':100,'msg':'登录成功','username':user.username,'gender':user.get_gender_display()}data.update(res)return data

views.py

import jsonfrom django.shortcuts import render
from rest_framework.response import Response
from rest_framework.views import APIView
class FilmView(APIView):def get(self,request):with open('./film.json','rt',encoding='utf-8')as f:res=json.load(f)return Response(res)

film.json

{"code":100,"results":[{"filmId":6664,"name":"年会不能停!","poster":"https://pic.maizuo.com/usr/movie/6b59b017d4dc427551d8ad530c009f5c.jpg","actors":[{"name":"董润年","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/ed9a520f233f9fe5dd01e0afea67b890.jpg"},{"name":"大鹏","role":"胡建林","avatarAddress":"https://pic.maizuo.com/usr/movie/75741ac19a8019deccf3a9ba8709dc49.jpg"},{"name":"白客","role":"马杰","avatarAddress":"https://pic.maizuo.com/usr/movie/bd23f041d10ca51f4d6bc2060ecdf196.jpg"},{"name":"庄达菲","role":"潘怡然","avatarAddress":"https://pic.maizuo.com/usr/movie/eb34beaaac4ed83e016bde7eed9c7549.jpg"},{"name":"王迅","role":"庄正直","avatarAddress":"https://pic.maizuo.com/usr/movie/e6d3df29a73643f18e142ffcf029a8bd.jpg"}],"director":"董润年","category":"喜剧|剧情","synopsis":"犒劳辛苦一年的自己,来影院大笑解压跨年!国民级喜剧人年底大聚会,真实还原打工人精神状态!钳工胡建林 (大鹏 饰)在集团裁员之际阴差阳错被调入总部,裹挟在“错调”事件中的人事经理马杰 (白客 饰) 为保饭碗被迫为其隐瞒四处周旋。从“工厂”到“大厂”,从“蓝领”变“金领”,胡建林因与大厂环境格格不入而笑料百出,也像一面“职场照妖镜”照出职场众生相......胡建林为何能在裁员之际一路升职加薪制霸大厂?马杰又能否在“错调”事件中全身而退?这场离谱的“错调”背后又隐藏着什么惊天大瓜……","filmType":{"name":"4D","value":13},"nation":"中国大陆","language":"","videoId":"","premiereAt":1703808000,"timeType":3,"runtime":117,"grade":"7.2","item":{"name":"4D","type":13},"isPresale":true,"isSale":false},{"filmId":6661,"name":"金手指","poster":"https://pic.maizuo.com/usr/movie/7c6fc744ab6efc08696fd1a8db5ede3b.jpg","actors":[{"name":"庄文强","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/c8a01acf59a22446204480d4f182997c.jpg"},{"name":"梁朝伟","role":"程一言","avatarAddress":"https://pic.maizuo.com/usr/movie/dde9116fbb432a327cc2f71e9603da58.jpg"},{"name":"刘德华","role":"刘启源","avatarAddress":"https://pic.maizuo.com/usr/movie/a5fc45490b819cda18057b127816b7a3.jpg"},{"name":"蔡卓妍","role":"张嘉文","avatarAddress":"https://pic.maizuo.com/usr/movie/6ee9dac0b4426320f7f820c82cdb29f4.jpg"},{"name":"任达华","role":"曾剑桥","avatarAddress":"https://pic.maizuo.com/usr/movie/63f8acdb408dd7836eda9a442cdb556e.jpg"}],"director":"庄文强","category":"剧情|犯罪","synopsis":"偷渡穷光蛋惊天逆袭,用100块赚到100亿?比爽文还刺激!梁朝伟刘德华二十年后再合体,极致演绎跨年档最受期待现实主义“暴富”大片!揭秘轰动全球的真实“发财传奇”!看《金手指》,狂享奢华逆袭,一起暴富跨年!上市公司嘉文集团在短短几年间从默默无名到风生水起,再到没落清盘,市值蒸发超过一百亿。幕后老板程一言(梁朝伟 饰)也从万众瞩目的股民偶像变成人人喊打的过街老鼠。高级调查主任刘启源(刘德华 饰)长达十五年锲而不舍地搜证和跨境调查,消耗超过两亿诉讼费,竟发现局中有局案中有案,牵涉数条人命并波及香港整个上流社会,究竟谁在幕后?谁能逃脱?谁会出局?","filmType":{"name":"2D","value":1},"nation":"中国大陆,中国香港","language":"","videoId":"","premiereAt":1703894400,"timeType":3,"runtime":125,"grade":"7.5","item":{"name":"2D","type":1},"isPresale":true,"isSale":false},{"filmId":6677,"name":"潜行","poster":"https://pic.maizuo.com/usr/movie/7e2625801ed632f56d8ede5325ff73dd.jpg","actors":[{"name":"关智耀","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/1a447bd802546aaf91169a32d1145248.jpg"},{"name":"刘德华","role":"演员","avatarAddress":"https://pic.maizuo.com/usr/movie/a5fc45490b819cda18057b127816b7a3.jpg"},{"name":"林家栋","role":"演员","avatarAddress":"https://pic.maizuo.com/usr/movie/8c48d0deacebd51850d1e7f1750225d7.jpg"},{"name":"彭于晏","role":"演员","avatarAddress":"https://pic.maizuo.com/usr/movie/275a877d692f42246469d39d910b2c2e.jpg"},{"name":"刘雅瑟","role":"演员","avatarAddress":"https://pic.maizuo.com/usr/movie/b04fb03af43c87854fe63d045387efe3.jpg"}],"director":"关智耀","category":"剧情|犯罪","synopsis":"年度犯罪动作巨制,刘德华十六年后再演反派!隐蔽的暗网成为新型贩毒的温床,一批重达数吨的毒品秘密抵达香港。形势紧迫,警方将动用一切手段,抓捕代号“老板”的幕后毒枭。更惊人的巨额交易,更难测的诡秘行踪,警方将如何面对史上最强劲的对手…","filmType":{"name":"4D","value":13},"nation":"中国大陆","language":"","videoId":"","premiereAt":1703808000,"timeType":3,"runtime":114,"grade":"7.6","item":{"name":"4D","type":13},"isPresale":true,"isSale":false},{"filmId":6666,"name":"一闪一闪亮星星","poster":"https://pic.maizuo.com/usr/movie/b5ef931e6d7f3419dbc2e196afaf1fc7.jpg","actors":[{"name":"陈小明","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/1344414485c7f694a815c16f305bd234.jpg"},{"name":"章攀","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/36f40652ea04bb77dc1cddfb33ff5b72.jpg"},{"name":"屈楚萧","role":"张万森","avatarAddress":"https://pic.maizuo.com/usr/movie/4b52f56805599eafcdb33e84ff8b1d17.jpg"},{"name":"张佳宁","role":"林北星","avatarAddress":"https://pic.maizuo.com/usr/movie/4c04863d11d0d5eadb31ed9517b8f4b7.jpg"},{"name":"傅菁","role":"高歌","avatarAddress":"https://pic.maizuo.com/usr/movie/987deda7f7f3b9f5a7f5f4c3dfe380dd.jpg"}],"director":"陈小明|章攀","category":"爱情|奇幻","synopsis":"现象级爆款剧集同名电影《一闪一闪亮星星》,原班人马再续纯爱故事,令无数观众翘首以盼的纯爱时空再启,奔赴甜虐暗恋!张万森(屈楚萧 饰)计划在高考后向暗恋已久的女生林北星(张佳宁 饰) 表白,突如其来的演唱会事故却让一切变成了一场无可挽回的悲剧,没想到的是,痛苦无助的张万森竟意外重启了这个夏天,再次回到悲剧发生前的林北星身边,而重启夏天的秘密,仿佛没有想象中那么简单……这一次,拼尽全力的张万森能否成功守护林北星,让所有刻骨铭心的遗憾都得以圆满?星河流转中的某个瞬间,青春里的那场绵绵大雪,能不能落在相爱的两人身上?","filmType":{"name":"4D","value":13},"nation":"中国大陆","language":"","videoId":"","premiereAt":1703894400,"timeType":3,"runtime":107,"grade":"7","item":{"name":"4D","type":13},"isPresale":true,"isSale":false},{"filmId":6681,"name":"海王2:失落的王国","poster":"https://pic.maizuo.com/usr/movie/94d069d3e037bb221d7b4b581ccaff51.jpg","actors":[{"name":"温子仁","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/92ffc5d6b92f8b0056c40f36e870058a.jpg"},{"name":"杰森·莫玛","role":" 海王 / 亚瑟·库瑞 Aquaman / Arthur Curry","avatarAddress":"https://pic.maizuo.com/usr/movie/09387c9db47d1c5281122cf0f0d8e564.jpg"},{"name":"帕特里克·威尔森","role":" 奥姆王 / 海洋领主 Orm / Ocean Master","avatarAddress":"https://pic.maizuo.com/usr/movie/702e000b260107ac3c1f91a587826489.jpg"},{"name":"安柏·赫德","role":" 湄拉 Mera","avatarAddress":"https://pic.maizuo.com/usr/movie/e0dcf92b6ba1fb04dc25bcbd47978d8b.jpg"},{"name":"叶海亚·阿卜杜勒-迈丁","role":" 黑蝠鲼 Black Manta","avatarAddress":"https://pic.maizuo.com/usr/movie/0306404ed5846e8e15706173ce175168.jpg"}],"director":"温子仁","category":"动作|冒险|奇幻","synopsis":"惊涛再起,王者归来!《海王2:失落的王国》讲述了海王的全新传奇。在上一次试图击败海王未果后,黑蝠鲼依然不甘放弃为父报仇,誓要消灭海王。这一次,他找到了传说中的黑暗三叉戟,释放出古老的邪恶力量,比以往更来势汹汹。为了与之抗衡,海王向被囚禁狱中的弟弟奥姆(也是前亚特兰蒂斯国王)求助,组成了出乎意料的联盟。他俩必须抛弃前仇旧怨,携手并肩作战,才能从即将到来的灾难中保卫王国,拯救家人,拯救世界。","filmType":{"name":"3D","value":2},"nation":"美国","language":"","videoId":"","premiereAt":1703030400,"timeType":3,"runtime":125,"grade":"7.1","item":{"name":"3D","type":2},"isPresale":true,"isSale":false},{"filmId":6660,"name":"三大队","poster":"https://pic.maizuo.com/usr/movie/88ea8dff563db98b06efcfc07acf5283.jpg","actors":[{"name":"戴墨","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/7d35c5ad443c64db177b335dc52d8726.jpg"},{"name":"张译","role":" 程兵","avatarAddress":"https://pic.maizuo.com/usr/movie/ff9aafa8c6033a1277d5ecd65822f8ae.jpg"},{"name":"李晨","role":"演员","avatarAddress":"https://pic.maizuo.com/usr/movie/ed4778a23fdcb6bab9c5a6e6e333f92f.jpg"},{"name":"魏晨","role":"演员","avatarAddress":"https://pic.maizuo.com/usr/movie/2f21cf0e9f19dd93c25a53252e149b81.png"},{"name":"曹炳琨","role":"演员","avatarAddress":"https://pic.maizuo.com/usr/movie/4ebf2d26239818c2fe24f530587aaad8.jpg"}],"director":"戴墨","category":"剧情|犯罪","synopsis":"电影《三大队》根据真实事件改编,原载于“网易人间工作室”,原作名为《请转告局长,三大队任务完成了》(作者深蓝)。刑侦大队队长程兵(张译 饰)带领的三大队在办理一起恶性案件的过程中导致嫌犯之一意外死亡,被判入狱。出狱后依然坚持以普通人身份追踪在逃嫌犯的故事。","filmType":{"name":"4D","value":13},"nation":"中国大陆","language":"","videoId":"","premiereAt":1702598400,"timeType":3,"runtime":132,"grade":"7.4","item":{"name":"4D","type":13},"isPresale":true,"isSale":false},{"filmId":6713,"name":"大雨","poster":"https://pic.maizuo.com/usr/movie/d686dcb6d31361bea1a5a539ca617183.jpg","actors":[{"name":"不思凡","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/ad4489f1d473cf26b2965a69cba59dc1.jpg"},{"name":"陈浩","role":"大谷子","avatarAddress":"https://pic.maizuo.com/usr/movie/cb55fd265e16d6bde26f9e55d6cce4d0.jpg"},{"name":"何梓骞","role":"馒头","avatarAddress":"https://pic.maizuo.com/usr/movie/1064ae6850d00b5ac7c4c62c5d3b3f21.jpg"},{"name":"杏林儿","role":"柳子彦","avatarAddress":"https://pic.maizuo.com/usr/movie/a57cdbcc7939f414174769deca08621a.jpg"}],"director":"不思凡","category":"冒险|动画|奇幻","synopsis":"重生大戏即将上演!沉没多年古船离奇现世,男孩馒头意外闯入,却发现船上聚集着诸多亡魂.... 一场大雨过后,“蝼蚁”重生,命运会有改变吗?","filmType":{"name":"2D","value":1},"nation":"中国大陆","language":"","videoId":"","premiereAt":1705017600,"timeType":3,"runtime":101,"item":{"name":"2D","type":1},"isPresale":true,"isSale":false},{"filmId":6690,"name":"非诚勿扰3","poster":"https://pic.maizuo.com/usr/movie/009afc35e675c79ea43f3ba637bff015.jpg","actors":[{"name":"冯小刚","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/8412ec8377d454f980c54149d48f9051.jpg"},{"name":"葛优","role":" 秦奋","avatarAddress":"https://pic.maizuo.com/usr/movie/5ae58b3ddff7b4046c65d69a353a03d2.jpg"},{"name":"舒淇","role":" 梁笑笑 / 智能人梁笑笑","avatarAddress":"https://pic.maizuo.com/usr/movie/c95b4ff9858887d1f9492119cb1c8e68.jpg"},{"name":"范伟","role":" 老范","avatarAddress":"https://pic.maizuo.com/usr/movie/a56e70a02d707abb0d4137fceb580671.jpg"},{"name":"虞书欣","role":" 朱迪","avatarAddress":"https://pic.maizuo.com/usr/movie/c6fc41a32cbf93d1e4b952431bf76596.jpg"}],"director":"冯小刚","category":"喜剧|爱情","synopsis":"秦奋与梁笑笑,老狐狸与比目鱼,爱情故事万千,取其一对展开。两人结婚十年,梁笑笑找到心之所向,开始四海为家。一别之后,两地相悬。以为是三四月,又谁知五六七八九十年。好友老范,见其思念难解,忧其岁月蹉跎,故赠予一仿生智能人,模样若笑笑,伴其左右。岁月时而静好,时而吵闹,时而苦中有笑,智能人也日渐有了曾经佳人的味道。本是良辰美景,故事突发变故,又一笑笑开锁入门,一笑笑莞尔一笑,一笑笑笑里藏刀,一切如梦如幻,如真似假。秦奋射出的箭,如今正中自己的靶心。谁去谁留?且在跨年揭晓。","filmType":{"name":"2D","value":1},"nation":"中国大陆","language":"","videoId":"","premiereAt":1703894400,"timeType":3,"runtime":119,"grade":"7.2","item":{"name":"2D","type":1},"isPresale":true,"isSale":false},{"filmId":6700,"name":"泰勒·斯威夫特:时代巡回演唱会","poster":"https://pic.maizuo.com/usr/movie/b4d2198fef7758eb3565a0db4eaa93dd.jpg","actors":[{"name":"萨姆·伦奇","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/f056a7a5b31ca6898193e832973c2d53.jpg"},{"name":"泰勒·斯威夫特","role":"演员","avatarAddress":"https://pic.maizuo.com/usr/movie/8a92e5918e2a69baffb71f30aa9e22b1.jpg"}],"director":"萨姆·伦奇","category":"音乐|纪录片","synopsis":"革新观影释放无限音乐魅力,影院嗨唱体验盛大跨年狂欢!电影《泰勒·斯威夫特:时代巡回演唱会》由知名导演萨姆·伦奇执导,展现了全球流行音乐天后泰勒·斯威夫特2023年时代巡回演唱会的魅力音乐现场,极致呈现泰勒音乐生涯10张创作专辑内40余首歌曲的音乐能量,同时更以超强品质还原出巡回演出现场盛况,以电影视角缔造出2023最后一场狂欢盛宴。","filmType":{"name":"2D","value":1},"nation":"美国","language":"","videoId":"","premiereAt":1703980800,"timeType":3,"runtime":169,"grade":"7.1","item":{"name":"2D","type":1},"isPresale":true,"isSale":false},{"filmId":6714,"name":"临时劫案","poster":"https://pic.maizuo.com/usr/movie/768920ba2e0ffad2d2e257a86de8037d.jpg","actors":[{"name":"郭富城","role":" 梅蓝天","avatarAddress":"https://pic.maizuo.com/usr/movie/bcb5b34461bff36771f7f7201090f057.jpg"},{"name":"林家栋","role":"阿怂","avatarAddress":"https://pic.maizuo.com/usr/movie/8c48d0deacebd51850d1e7f1750225d7.jpg"},{"name":"麦启光","role":"导演","avatarAddress":"https://pic.maizuo.com/usr/movie/89e46feada9580d690ba2882ecceb0f7.jpg"},{"name":"任贤齐","role":"慕容辉","avatarAddress":"https://pic.maizuo.com/usr/movie/64bf91459a63b384bdc6617a3677e511.jpg"},{"name":"张可颐","role":" 姜姐","avatarAddress":"https://pic.maizuo.com/usr/movie/73af7d02e867c4fc4efdd0845ae820cf.jpg"}],"director":"麦启光","category":"犯罪|喜剧","synopsis":"2024开年莽片,郭富城、林家栋、任贤齐兄弟联手,上演“匪废组合”的荒诞抢劫故事!颓废中年难兄难弟阿怂(林家栋 饰)、慕容辉(任贤齐 饰)计划抢劫却意外被悍匪梅蓝天(郭富城 饰)搅局,阴差阳错间三人临时组队,巨款眼看到手,却被他人捷足先登,与此同时女警探姜姐(张可颐 饰)也将三人锁定,一时间匪徒各怀鬼胎,在“我打劫,你打劫我”的江湖规则下,一袋钱引发连续偶然事件......","filmType":{"name":"2D","value":1},"nation":"中国大陆,中国香港","language":"","videoId":"","premiereAt":1705622400,"timeType":3,"runtime":97,"item":{"name":"2D","type":1},"isPresale":true,"isSale":false}],"msg":"ok"
}

scoped的使用

#1 以后css样式,都写在vue组件的 <style> 标签中
    <style scoped>
        h1 {
          background-color: aqua;
        }
    </style>
    
#2 以后在 style标签上写 scoped 这个样式只在当前组件中生效
<style scoped>
h1 {
  background-color: aqua;
}
</style>

elementui使用

 

# 自己写样式---》copy别人的

# 使用第三方ui库
    -Element UI  2.x  3.x
    -Ant Design of Vue:web端
    -Vant UI  :移动端ui
    
    
# elementui
    1 安装:cnpm i element-ui -S
    2 main.js中引入
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣83-删除排序链表中的重复元素

删除排序链表中的重复元素 题目链接 解题思路 1.遍历整个链表&#xff0c;遇见重复元素&#xff0c;直接删除即可 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNod…

BC19 反向输出一个四位数

描述 将一个四位数&#xff0c;反向输出。 输入描述&#xff1a; 一行&#xff0c;输入一个整数n&#xff08;1000 < n < 9999&#xff09;。 输出描述&#xff1a; 针对每组输入&#xff0c;反向输出对应四位数。 示例1 输入&#xff1a; 1234 复制输出&#xf…

vcs makefile

主要参考&#xff1a; VCS使用Makefile教程_vcs makefile-CSDN博客https://blog.csdn.net/weixin_45243340/article/details/129255218?ops_request_misc%257B%2522request%255Fid%2522%253A%2522170524049516800227431373%2522%252C%2522scm%2522%253A%252220140713.1301023…

计算机组成原理重点简答题

文章目录&#xff08;持续更新&#xff09; 计算机组成原理重点简答题&#x1f4e3;一、谈一谈对指令寄存器IR的认识&#xff1f;&#x1f4e3;二、存储器的特征和功能&#xff1f;&#x1f4e3;三、冯诺依曼计算机体系结构&#xff1f; 计算机组成原理重点简答题 &#x1f4e…

ssm基于Web的数字家庭网站设计与实现论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…

竞赛练一练 第28期:GESP和电子学会相关题目练习

CIE一级2023.03_足球射门练习 1. 准备工作 &#xff08;1&#xff09;选择背景Soccer&#xff0c;Soccer 2&#xff1b; &#xff08;2&#xff09;保留默认小猫角色&#xff0c;添加角色&#xff1a;Soccer Ball&#xff1b; &#xff08;3&#xff09;给Soccer Ball添加声…

Ado.Net 使用【连接池】进行程序优化

目录 1、连接池介绍 1.1 连接池是什么&#xff1f; 1.2 连接池的分类 1.3 如何分配 1.4 移除无效链接 1.5 回收连接 1、连接池介绍 程序连接数据库需要经历&#xff1a;建立物理通道、与服务器初次握手、分析连接字符串、身份验证、 运行检查等过程 因此连接数据库的过…

OSPF : 区域 / 为什么非骨干互访需要经过骨干

概述 OSPF系列第二篇 , 今天来围绕着区域这个概念展开写一篇博客 分区背景 先来讨论一下技术背景 , 也就是为什么要分区 ? 所有设备都在一个区域不行吗 会有什么问题呢 . 首先明确一个知识点 : 正常状态下一个区域内的所有设备的LSDB都是一样的.区域内的路由器必须为所属的…

Android 10.0 系统语言随sim卡语言自适应变化功能实现

1.前言 在10.0的系统产品开发中,在对于sim卡这个功能模块中,在系统默认系统语言不随sim卡的语言变化,产品开发的需要要求系统语言 需要随着识别到sim卡的语言后,设置为系统默认语言,接下来就实现这个功能 2.系统语言随sim卡语言自适应变化功能实现的核心类 frameworks\…

BikeDNA(八)外在分析:OSM 与参考数据的比较2

BikeDNA&#xff08;八&#xff09;外在分析&#xff1a;OSM 与参考数据的比较2 1.数据完整性 见链接 2.网络拓扑结构 见链接 3.网络组件 本节仔细研究两个数据集的网络组件特征。 断开连接的组件不共享任何元素&#xff08;节点/边&#xff09;。 换句话说&#xff0c;…

庆祝一年的成长

本文字数&#xff1a;2288&#xff1b;估计阅读时间&#xff1a;6 分钟 作者&#xff1a;ClickHouse Team 审校&#xff1a;庄晓东&#xff08;魏庄&#xff09; 本文在公众号【ClickHouseInc】首发 随着今年即将结束&#xff0c;我们想要向您表达衷心的感谢&#xff0c;感谢您…

近两周10个令人难以置信的AI工具:

过去两周出现的最令人难以置信的AI工具&#xff1a; Genie&#xff1a;多模式文本到3D生成器Cognysys 2.0&#xff1a;自动创建工作流并根据提示执行任务 https://cognosys.ai MultiOn&#xff1a;AI个人代理&#xff0c;可以预订航班&#xff0c;订购食品等https://multion.a…

Linux more命令教程:掌握文件分页阅读(附案例详解和注意事项)

Linux more命令介绍 more命令&#xff0c;全称也是 more&#xff0c;它是一个用于满足用户分页阅读文件内容的工具。在我们需要阅读或分析文件内容时&#xff0c;more命令提供了一种在终端上逐页、逐行阅读长篇文件内容的方式。这个命令对于数据分析和代码审查非常有用。 Lin…

cad二次开发autolisp(一)

文章目录 一、概述1.1 简介1.2 打开编辑器1.3 调试页面 二、数据类型三、函数3.1 用户函数 四、语句4.1 常规语句4.2 流程控制语句 五、图元操作5.1 定义5.2 图元选择5.3 图元属性列表 一、概述 1.1 简介 简介&#xff1a;cad 二次开发语言&#xff0c;后缀名*.lsp适用于编写…

排序算法7----归并排序(C语言)

1、基本思想 归并排序是建立在归并操作上的一种有效的排序算法&#xff0c;该算法是采用分治法的一个非常典型的应用。 将无序的序列分解到单个元素&#xff0c;然后将有序的子序列合并&#xff0c;得到完全有序的序列&#xff1a;即先使每个子序列有序&#xff0c;再使子序列段…

React16源码: React中的异步调度scheduler模块以及时间片源码实现

React Scheduler 1 ) 概述 react当中的异步调度&#xff0c;称为 React Scheduler发布成单独的一个 npm 包就叫做 scheduler这个包它做了什么&#xff1f; A. 首先它维护时间片B. 然后模拟 requestIdleCallback 这个API 因为现在浏览器的支持不是特别的多所以在浏览当中只是去…

使用scipy处理图片——旋转任意角度

大纲 载入图片左旋转30度&#xff0c;且重新调整图片大小右旋转30度&#xff0c;且重新调整图片大小左旋转135度&#xff0c;保持图片大小不变右旋转135度&#xff0c;保持图片大小不变 在《使用numpy处理图片——90度旋转》中&#xff0c;我们使用numpy提供的方法&#xff0c;…

【PostgreSQL】函数与操作符-逻辑操作符

PostgreSQL常用的操作符 算术操作符&#xff1a;PostgreSQL支持基本的算术操作符&#xff0c;包括加法&#xff08;&#xff09;、减法&#xff08;-&#xff09;、乘法&#xff08;*&#xff09;、除法&#xff08;/&#xff09;和取模&#xff08;%&#xff09;等。可以使用这…

命令行登录Mysql的详细讲解

目录 前言1. 本地登录2. 远程登录3. 拓展 前言 对于命令行登录Mysql一般都是用mysql -u root -p 但对于如何远程登陆&#xff0c;一直其他的参数还是有些盲区&#xff0c;对此总结科普 对于登录过程中出现的问题&#xff0c;可看我之前的文章&#xff1a; 服务器 出现ERROR …

Dreambooth Stable Diffusion始化训练环境(AutoDL)

以AutoDL为例 以下代码源自&#xff1a;赛博华佗——秋叶&#xff1a; Akegarasu 环境选择 Miniconda: Miniconda是一个轻量级的Conda环境管理系统。它包含了conda、Python和一些常用的包&#xff0c;以及能够管理安装其他包的能力。Miniconda是Anaconda的一个简化版&#xff0…