emement - ui的使用,vue图片的绑定,页面挂载,课程详情页面的展示

补充:集群和分布式

简单的说,集群就是多个服务器去完成一个任务,分布式就是一个项目分成多个服务器去完成

一,emement - ui的使用

1,下载 npm install element-ui

注意:如果下载成功,在package.json文件中dependencies就会多一条emement-ui的版本信息"element-ui": “^2.4.11”,

2,使用

要在main.js中配置

import ElementUI from 'element-ui';
			import 'element-ui/lib/theme-chalk/index.css';
			Vue.use(ElementUI);

然后直接复制前端样式的代码即可(注意,要把样式和script都复制)

VUE补充:写前端页面三件套

1,template:前端显示的代码

2,style:css样式修饰页面结构的代码

3,script:js页面数据渲染和数据提交代码

举例轮播图渲染页面

<template>
    <div class="home">
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="img in imgs" :key="item">
                <img :src="img" alt="图片加载失败" style="width: 950px;height: 200p
">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>

    export default {
        data:function () {
            // 直接返回到页面定义的变量
            return {
                imgs:[]
            }
        },
        methods:{
            init:function () {
                let _this = this
                //要在main.js里面先声明这两个在页面中经常用到的变量
                //Vue.prototype.$http=axios
                // Vue.prototype.$url='http://127.0.0.1:8000/' 
                this.$http.request({
                    url:this.$url+'get_imgs/',
                    methods:'get',
                }).then(function (response) {
                    _this.imgs = response.data
                })
            }
        },
        mounted:function () {
        	// 页面加载完成自动触发该方法下面的代码执行
            this.init()
        }
    }
</script>

<style>
    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 500px;
    margin: 0;
    height: 500px;
    }
</style>

后台数据的处理

直接开一个路由,关联这个类,返回值为图片的地址组成的列表

class Img(APIView):
    def get(self, request, *args, **kwargs):
        return Response(['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'])

补充:

pip3 freeze >list.txt ：导出当前环境安装的所有包 
pip3 install -r list.txt 安装文件中所有模块 

二,VUE绑定图片

<el-carousel-item v-for="img in imgs">
		  <img :src="img">    <!--img为图片的路径,与标签绑定src前面加:-->
		</el-carousel-item>

三,页面挂载

页面挂载意思是页面加载完成,就渲染到页面,可以执行方法,或者是页面数据的渲染

补充:

vue中script里面需要添加的属性:
1,全部放在export default{}里面

2,data:页面需要的数据,需要在这个属性里面先定义一个空

data: function () {
            return {
                course_id: this.$route.params.id,
                course_detail: {},
            }
        },

3,methods:可以在标签中定义事件(点击,悬浮…),然后绑定方法,做页面数据更改的处理,也可以放在页面挂载属性中,页面加载完毕直接执行

methods: {
            init: function () {
                let _this = this
                this.$http.request({
                    url: _this.$url + 'course/' + _this.course_id,
                    method: 'get'
                }).then(function (response) {
                    _this.course_detail = response.data.data
                }).catch(function (response) {
                    console.log(response)
                })

            },

3,页面挂载:

mounted: function () {
            this.init()
        },

4,页面监控

watch: {
			//监控路由变化
            '$route': function (to, from) {
                console.log('--->to', to)
                console.log('--->from', from)
				// 路由只要改变,就会把其他的循环一遍重新赋值,然后渲染页面
                this.course_id = to.params.id
                this.init()
            }
        }

四,课程详情页面

1,路由携带参数跳转

-路由携带参数跳转: 
<router-link :to="{'name':'courseDetail','params':{'id':course.id}}">详情</router-link>
-取值:
	course_id: this.$route.params.id,

2,路由配置

路由不加id的话,没办法进行课程之间的切换,只能从课程页面进行跳转,只要路由变换过来就没办法改变

{
      path: '/courseDetail/:id',
      name: 'courseDetail',
      component: CourseDetail
    },