element ui 与vue跨域通信操作 和框架语法，contentype

vue 

每一个vue组件都有三部分
-template ：放html代码
-script ：放js相关的东西
-style ：放css相关
-vue中创建路由
-创建一个组件
-配置路由：
-在router.js中加入
{
path: '/zhuye',
name: 'zhuye',
component: Zhuye
},
-路由跳转
<router-link to="/Zhuye">About</router-link>
-在组件中显示数据
-在template：
{{变量}}
-在script：
data: function () {
return {
course_list: ['python课程', 'linux', 'go语言']
}

只写一个标签

<div>
    主页
    <ul>
    <li v-for="course in list_couse">{{course}}</li>
    </ul>
    <button @click="init">提交</button>
    <div class="block"  width="800px">
        <span class="demonstration">默认 Hover 指示器触发</span>
        <el-carousel >
            <el-carousel-item v-for="item in img_list" :key="item">
                <img  style="height: 297px;791px;" :src="item">
            </el-carousel-item>
        </el-carousel>
    </div>,
</div>

<script>
    /* eslint-disable */
    export default {
        name: "Zhuye",
        #data return 列表
        data:function () {
            return {list_couse:['python','linux','java','c++'],
                 img_list:['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://127.0.0.1:8000/media/4.jpg',
                     'http://127.0.0.1:8000/media/5.jpg',
                     'http://127.0.0.1:8000/media/6.jpg'],
            }
        },
       挂载点加载后先执行的函数
        // mounted:function(){
        //     this.init()
        // },
        methods:{
            'init':function () {
                this.$http.request({
                    url:'http://127.0.0.1:8000/redis/',
                    method:'get',
                }).then(function (response) {
                    window.alert(response)
                })
            },'img':function () {

                 this.$http.request({
                    url:'http://127.0.0.1:8000/media/1.png',
                    method:'get',
                }).then(function (response) {
                    img_list[0]=response;
                    console.log(response)
                })
            }

        }
    }
</script>

<style scoped>
    /* eslint-disable */#语法检测
    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

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

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

</style>

-vue中的axios
-安装：
npm install axios 在package.json中就能看到依赖
-在main.js中配置
//导入axios
import axios from 'axios'
//把axios对象付给$http
Vue.prototype.$http=axios
-在组件的js代码中写：
this.$http.request({
//向下面的地址发送get请求
url:'http://127.0.0.1:8004/courses/',
method:'get'
}).then(function (response) {
//response.data才是真正的数据
console.log(response.data)

-vue中使用element-ui
-饿了么开源的样式
-安装npm i element-ui -S
-在main.js中配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
-去官方文档看样式赋值，粘贴

-开放media路径
-创建meidia文件夹（在根路径下）
-在setting中配置：
MEDIA_ROOT=os.path.join(BASE_DIR,'media')
-在urls.py中
from django.views.static import serve
from luffy_city import settings
urlpatterns = [
url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
]

from django.contrib.contenttypes.models import ContentType
from django.contrib.contenttypes.fields import GenericForeignKey, GenericRelation

-新建免费课程表的时候
   # 不会在数据库中生成字段，只用于数据库操作
   policy = GenericRelation(to='PricePolicy')
-新建学位课程表的时候
   # 不会在数据库中生成字段，只用于数据库操作
   policy = GenericRelation(to='PricePolicy')
-价格策略表
   # 引入一个字段，不会在数据库中创建，只用来做数据库操作
   content_obj = GenericForeignKey()
   
使用一（给课程添加价格策略）：
   -给免费课django添加价格策略
      course = models.Course.objects.get(pk=1)
      ret=models.PricePolicy.objects.create(period=30, price=199.9,content_obj=course)
   -给学位课程（python全栈开发）添加价格策略
      degree_course = models.DegreeCourse.objects.get(pk=1)
      ret=models.PricePolicy.objects.create(period=30, price=199.9,content_obj=degree_course)
使用二：查询价格策略对应的课程：
   price_policy=models.PricePolicy.objects.get(pk=1)
   print(price_policy.content_obj)
使用三：通过课程获取价格策略
   course = models.Course.objects.get(pk=1)
   policy_list=couse.policy.all()