vue-router简单使用

• 单页面应用，就无法实现页面的跳转
• 借助于 vue-router-->实现组件切换
• 效果就是页面跳转

【一】使用

【1】App.vue--->固定成

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

【2】写页面组件：HomeView 和 AboutView

• HomeView

<template>
  <div class="home">
    <h1>首页</h1>

  </div>
</template>

<script>
//导出
export default {
  name: 'HomeView',
  components: {

  }
}
</script>

• AboutView

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>

export default {
  name: 'AboutView',
  components: {

  }
}
</script>

【3】注册路由：router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
]

【4】以后访问

• / 显示HomeView
• /about 显示AboutView

【二】登录跳转

【1】需求

• 首页---》按钮--》点击--》跳转到--》LoginView.vue---》写个登陆功能--》登陆成功--》跳转到FilmsView.vue--->如果登陆失败，提示错误

【2】解决跨域问题

-1 安装
    	pip3 install django-cors-headers
    -2 app中注册
        INSTALLED_APPS = [
            。。。
            'corsheaders',
        ]
    -3 中间件中注册
        MIDDLEWARE = [

            'corsheaders.middleware.CorsMiddleware',
        ]
    -4 配置文件中配置
    # 允许跨域源
    CORS_ORIGIN_ALLOW_ALL = True
    # 允许的请求头
    CORS_ALLOW_HEADERS = (
        "accept",
        "accept-encoding",
        "authorization",
        "content-type",
        "dnt",
        "origin",
        "user-agent",
        "x-csrftoken",
        "x-requested-with",

        # 额外允许的请求头
        'token',
    )

【3】后端

from django.shortcuts import render

# Create your views here.
from rest_framework.viewsets import ViewSet
from rest_framework.response import Response
import json


class UserView(ViewSet):
    def create(self, request, *args, **kwargs):
        username = request.data.get('username')
        password = request.data.get('password')
        if username == 'lqz' and password == '123':
            return Response({'code': 100, 'msg': '登陆成功', 'token': 'asss.dddee.sss'})
        else:
            return Response({'code': 101, 'msg': '用户名或密码错误'})


class FilmsView(ViewSet):
    def list(self, request, *args, **kwargs):
        with open('./fiml.json', 'r', encoding='utf-8') as f:
            res_dict = json.load(f)

        return Response(res_dict)

from django.contrib import admin
from django.urls import path
from .views import UserView,FilmsView
from rest_framework.routers import SimpleRouter

router=SimpleRouter()
router.register('user',UserView,'user')
router.register('films',FilmsView,'films')
urlpatterns = [
]
urlpatterns+=router.urls

【4】前端

• LoginView.vue

<template>
  <div class="about">
    <h1>登陆</h1>
    <p>用户名： <input type="text" v-model="username"></p>
    <p>密码： <input type="password" v-model="password"></p>
    <p>
      <button @click="handleLogin">登陆</button>
    </p>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'LoginView',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      axios.post(
          'http://127.0.0.1:8000/api/v1/user/',
          {
            username: this.username,
            password: this.password
          },
          {
            headers: {
              "Content-Type": 'application/json'
            }
          }).then(res => {
            console.log(res.data)
            if(res.data.code==100){
              // 跳转 首页
              this.$router.push('/')
            }else {
              alert(res.data.msg)
            }
      })
    }
  }

}
</script>

• HomeView.vue

<template>
  <div class="home">
    <h1>首页</h1>
    <div v-for="item in filmList">
      <p>{{ item.name }}</p>
      <p><img :src="item.poster" alt="" height="300px" width="250px"></p>
      <hr>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'HomeView',
  data() {
    return {
      filmList: []
    }
  },
  created() {
    axios.get('http://127.0.0.1:8000/api/v1/films/').then(res => {
      this.filmList = res.data.result
    }).catch(err => {
      alert('请联系系统管理')
    })
  }
}
</script>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from "@/views/AboutView.vue";
import LoginView from "@/views/LoginView.vue";
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router