elemetu的使用，首页显示轮播图

一、elemetu的使用，首页显示轮播图：

前端：首先创建vue，（前面已有vue安装方法，这里便不在叙述）,只写相关的文件。(http://localhost:8080/
)

相关的url: http://element-cn.eleme.io/#/zh-CN/component/carousel

首先安装--->emement-ui

npm install element-ui

main.js(总的入口js)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.prototype.$url = 'http://127.0.0.1:8000/'  // 后台请求地址
Vue.use(ElementUI);
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

Home.vue

<template>
    <div class="home">
        <el-carousel :interval="5000" arrow="always" height="400px">
            <el-carousel-item v-for=" img in imgs">
                <img :src="img">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>

    export default {
        data:function () {
            return {
                imgs:[]
            }
        },
        methods:{
            init:function () {
                let _this=this
                this.$http.request({
                    url:this.$url+'get_imgs/',
                    method:'get',
                }).then(function (response) {
                    _this.imgs=response.data
                })
            }
        },
        mounted:function () {
            this.init()
        }
    }
</script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

Course.vue

<template>
    <div class="about">
        <h1>课程</h1>
        {{course}}
        <p v-for="c in course">
            {{c}}
        </p>
        <button @click="init">点我</button>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                course: ['python', 'linux'],
                name: 'this is test name'
            }
        },
        methods: {
            init: function () {
                let _this=this
                this.$http.request({
                    url: 'http://127.0.0.1:8000/course/',
                    method: 'get'
                }).then(function (response) {
                    _this.course(response.data)
                }).catch(function (response) {
                    console.log(response)
                })
            },
            test:function () {
                this.course=['about','dict',]
            }
        }
    }
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/course">课程</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Course from './views/Course'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
      {
      path: '/course',
      name: 'course',
      component: Course
    }
  ]
})

---

后端django：(http://127.0.0.1:8000/)

settings.py，并且在项目下创建media 目录,并放入图片3张

# 自定义中间件（作用：跨域访问）,最后一段添加
# 中间件的应用名，文件名，类名。
MIDDLEWARE = ['app01.myMiddle.MyCorsMiddle']
增加图片走马灯的目录存放位置。
MEDIA_ROOT=os.path.join(BASE_DIR,'media')

app01/myMiddle.py

from django.utils.deprecation import MiddlewareMixin

class MyCorsMiddle(MiddlewareMixin):
    def process_response(self,request,response):
        # 简单请求:
        # 允许http://127.0.0.1:8001域向我发请求
        # ret['Access-Control-Allow-Origin']='http://127.0.0.1:8001'
        # 允许所有人向我发请求
        response['Access-Control-Allow-Origin'] = '*'
        if request.method == 'OPTIONS':
            # 所有的头信息都允许
            response['Access-Control-Allow-Headers'] = '*'
        return response

url.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.views.static import serve
from django.conf import settings
# 添加：
url(r'^course/', views.course.as_view()),
url(r'^get_imgs/', views.img.as_view()),
url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),

views.py

from django.shortcuts import render

# Create your views here.
from rest_framework.views import APIView
from rest_framework.response import Response
class course(APIView):
    def get(self,request,*args,**kwargs):
        return Response(['python','linux'])

class img(APIView):
    def get(self,request,*args,**kwargs):
        return Response(['http://127.0.0.1:8000/media/1.jpg','http://127.0.0.1:8000/media/2.jpg','http://127.0.0.1:8000/media/3.jpg'])

---

测试访问：

http://localhost:8080/

成功。