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)
