zoukankan      html  css  js  c++  java
  • 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)
    
  • 相关阅读:
    Neko's loop HDU-6444(网络赛1007)
    Parameters
    SETLOCAL
    RD / RMDIR Command
    devenv 命令用法
    Cannot determine the location of the VS Common Tools folder.
    'DEVENV' is not recognized as an internal or external command,
    How to change Visual Studio default environment setting
    error signing assembly unknown error
    What is the Xcopy Command?:
  • 原文地址:https://www.cnblogs.com/robert-zhou/p/10651307.html
Copyright © 2011-2022 走看看