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)
vue创建路由,axios前后台交互,element-ui配置使用,django contentType组件的更多相关文章
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输
在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...
- Vue+element UI实现“回到顶部”按钮组件
介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...
- vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。
老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...
- vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- vue简单路由(二)
在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html ...
- element ui table(表格)点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
随机推荐
- 使用Zeppelin时出现sh interpreter not found错误的解决办法(图文详解)
不多说,直接上干货! 问题详解 http://192.168.80.145:8099/#/notebook/2CSV2VT5S 相关博客是 Zeppelin的入门使用系列之使用Zeppelin运行sh ...
- Error: Trying to open unclosed connection.
错误:试图打开未关闭的连接.在我自己写model文件的时候,重复打开了连接数据库的操作,所以报这种错误. 错误实例: 两个model文件: userModel.js var mongoose = re ...
- MariaDB 实现主从复制
實驗目的: MariaDB為MySQL的一個分支,其完全開源.無版權之虞且操作上與 MySQL 一脈相承,實際應用中非常廣泛,軟件本身很小,安裝容易,使用簡單. 但其也有缺點,指令行方式操作,無原生G ...
- Springboot优点总结
谈到 Spring Boot,就让我们先来了解它的优点 . 依据官方的文档, Spring Boot 的优点如下: --创建独立的 Spring 应用程序 : --嵌入的 Tomcat . Jetty ...
- 剑指offer课外两道习题解法
1.定义一个函数,删除字符串中所有重复出现的字符,例如输入“google”,删除重复的字符之后的结果为“gole”. 解题思路:像这种求字符串的重复字符,并且去掉重复字符,我们一般可以用哈希 ...
- CentOS7.3+MySQL5.7+Apache2.4+PHP7.1+phpMyAdmin4.7+JDK1.8+SVN1.6+Jenkins2.1环境搭建
CentOS7.3+MySQL5.7+Apache2.4+PHP7.1+phpMyAdmin4.7+JDK1.8+SVN1.6+Jenkins2.1环境搭建 1.安装CentOS7.3虚拟机安装说明: ...
- 企业数字化转型与SAP云平台
我们生活在一个数字化时代.信息领域里发展迅猛的数字技术和成本不断降低的硬件设备,正以前所未有的方式改变着我们工作和生活的方式. Digital Mesh 美国一家著名的从事信息技术研究和提供咨询服务的 ...
- 使用ABAP代码返回S/4HANA Material上维护的Attachment明细
在事务码 MM02里为ID为16的material维护附件: 如何使用ABAP代码获得如下附件的名称和文件内容? REPORT zgos_api. DATA ls_appl_object TY ...
- 卓越管理的秘密(Behind Closed Doors)
或许提到本书甚至本书的作者Johanna Rothman我们会感到些许陌生,那么提起她的另一本获得素有软件界奥斯卡之称的Jolt生产效率大奖的名著<项目管理修炼之道>,会不会惊讶的发现,原 ...
- C# 生成条形码图片
在网上看到一些人写关于条形码的代码都很长,有的甚至拿来卖,所以查了下资料,希望能对大家有帮助. 我的实现原理是: 其实Windows本身就有一个字体是用来显示条形码的. 只要将数字改为这种字体就变成了 ...