vue创建路由,axios前后台交互,element-ui配置使用,django contentType组件

vue中创建路由

每一个vue组件都有三部分组成
template:放html代码
script:放js相关
style:放css相关

vue中创建路由
1.先创建组件
Course.vue
2.router.js中导入组件,配置组件
import Course from './views/Course.vue'


export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
          {
      path: '/course',
      name: 'course',
      component: Course
    },
  ]
})

3.app.vue中设置路由跳转
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/course">Course</router-link>
    </div>
    <router-view/>
  </div>
</template>

组件中显示数据

<template>
    <div class="course">
    	#插值表达式
        <h1>{{name}}</h1>
        <h1>{{age}}</h1>
    </div>
</template>
<script>
    export default {
        name: 'course',
        #返回数据
        data: function () {
            #通过return的方式
            return {
                name: '刘清正',
                age: '18'
            }
        }
    }
</script>

#for循环显示数据
<template>
    <div class="course">
        <p v-for="item in course_list">{{item}}</p>
    </div>
</template>

<script>

    export default {
        name: 'course',
        data: function () {
            return {
                course_list:['python',"linux","java"]
            }
        }
    }
</script>

通过axios与后台交互

配置axios
1.安装axios
npm install axios
2.在main.js中加入以下两句话
导入axios
import axios from 'axios'
放入全局变量中
Vue.prototype.$http = axios

使用axios
请求.request
回调函数 .then
异常捕捉 .catch
$http.request({
    url:请求的地址
    method:请求方式
}).then(function(response)){
    #数据放在data中了
    window.console.log(response.data)
}.catch(function(errors)){
    window.console.log(errors)
}


vue项目(前台)
<template>
    <div class="course">
    	#需要写在course中
        <button @click="foo">点我</button>
        <p v-for="item in course_list">{{item}}</p>
    </div>
</template>

<script>

    export default {
        name: 'course',
        data: function () {
            return {
                course_list:[]
            }
        },
        methods:{
            foo:function () {
                #直接在then的函数内使用this的话,this表示函数对象,
                var _this = this;
                this.$http.request({
                    //存在跨域问题
                    url:'http://127.0.0.1:8023/',
                    method:'get'
                }).then(function (res) {
                    _this.course_list=res.data
                })

            }
        }
    }
</script>

django项目(后台)
class Course(APIView):
    def get(self,request,*args,**kwargs):
        return Response(['python','linux','java'])

页面挂载完成,执行数据加载

上面的交互,不应该是点击后才显示,应该是点击此页面时就展示

vue项目(前台)
<template>
    <div class="course">
        <p v-for="item in course_list">{{item}}</p>
    </div>
</template>

<script>
    export default {
        name: 'course',
        data: function () {
            return {
                course_list:[]
            }
        },
        methods:{
            foo:function () {
                #直接在then的函数内使用this的话,this表示函数对象,
                var _this = this;
                this.$http.request({
                    //存在跨域问题
                    url:'http://127.0.0.1:8023/',
                    method:'get'
                }).then(function (res) {
                    _this.course_list=res.data
                })
            }
        },
       #组件挂载
        mounted:function(){
            this.foo()
        } 
    }
</script>

vue中使用element-ui

1.安装
npm i element-ui-S
2.在main.js中配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.在http://element-cn.eleme.io/#/zh-CN/component/quickstart官网上copy组件来用

contentType组件

免费课程表course
id  name time
学位课程表degreecourse
id name price
价格策略表
id period price obj_id table_id

1.免费课程表和学位表有不同的字段,故各建一张表
2.价格策略表需存放不同课程的价格策略,故需要table_id和obj_id两个字段来确认一条数据


class Course(models.Model):
    name = models.CharField(max_lenth=32)
	time = models.DateField(auto_now_add=True)
    
class DegreeCourse(models.Model):
    name = models.CharField(max_lenth=32)
	teacter = models.CharField(max_lenth=32)
    
class PricePolicy(models.Model):
    period = models.IntegerField()
    price = mmodels.DecimalField(max_digits=8,decimal_places=2)
    obj_id = odels.IntegerField()
    table_name = models.CharField(max_lenth=32)
    
以上创建类可以实现我们的需求
但是当我们进行以下查询时会很复杂
1.通过课程对象查询它所有的价格策略
2.查询所有价格策略的课程名称
3.给课程创建价格策略

故需要使用到django给我们提供的contentType组件
在我们进行数据库迁移时,django为我们创建了django_content_type表
里面是id对应我们的表名
#导入django的ContentType表
from django.contrib.contenttypes.models import ContentType
from django.contrib.contenttypes.fields import GenericForeignKey, GenericRelation

class Course(models.Model):
    name = models.CharField(max_lenth=32)
	time = models.DateField(auto_now_add=True)
    #此字段方便了查询价格策略
    policy = GenericRelation(to='PricePolicy')
    
class DegreeCourse(models.Model):
    name = models.CharField(max_lenth=32)
	teacter = models.CharField(max_lenth=32)
    policy = GenericRelation(to='PricePolicy')
    
class PricePolicy(models.Model):
    period = models.IntegerField()
    price = mmodels.DecimalField(max_digits=8,decimal_places=2)
    #必须交object_id和content_type因为源码默认传参就是这两个参数
    object_id = odels.IntegerField()
    #不删除记录,将此字段设置为空
    content_type = models.ForeignKey(to=ContentType,null=True,on_delete=models.SET_NULL,db_constraint=False)
	#此字段可以实现快速创建和查询课程
    content_obj = GenericForeignKey('content_type','object_id')

测试类

from django.db import models

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

class Course(models.Model):
    name = models.CharField(max_length=32)
    section = models.IntegerField()
    policy = GenericRelation('PricePolicy')

class DegreeCourse(models.Model):
    name = models.CharField(max_length=32)
    author = models.CharField(max_length=32)
    policy = GenericRelation('PricePolicy')


class Lcourse(models.Model):
    name = models.CharField(max_length=32)
    teacher = models.CharField(max_length=32)
    policy = GenericRelation('PricePolicy')

class PricePolicy(models.Model):
    price = models.DecimalField(max_digits=8,decimal_places=2)
    period = models.IntegerField()
    object_id = models.IntegerField()
    content_type = models.ForeignKey(to= ContentType,null=True,on_delete=models.SET_NULL,db_constraint=False)
	content_obj = GenericForeignKey()

测试代码

# 1.通过课程对象查询它所有的价格策略
course = Lcourse.objects.filter(pk=1).first()
policy_list = course.policy.all()
for policy in policy_list:
    print(policy.price)
# 2.查询所有价格策略的课程名称
price_policy_list=PricePolicy.objects.all()
for price_policy in price_policy_list:
    print(price_policy.content_obj.name)
# 3.给课程创建价格策略

course = Lcourse.objects.filter(pk=1).first()
PricePolicy.objects.create(price=3.3,period=2,content_obj=course)