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 = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_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/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators

AUTH_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 = True

USE_L10N = True

USE_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-field

DEFAULT_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 Response

def 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 TokenObtainPairSerializer

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

views.py

import json

from 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);