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   :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()