day69test

目录

前端
  vue main.js
  vue CarTag.vue 小组件
  vue Nav.vue小组件
  vue Home.vue 页面
  vue Car.vue 页面
  vue CarDetail.vue页面
  vue app.vue 页面
后端
  django urls.py
  django views.py
  django models.py

3、完成基础前后台分类的数据展示类网站
    封装导航栏Nav小组件，完成各页面的跳转，在需要导航栏的页面中渲染Nav小组件
    在主页Home组件中，写一个轮播图(bs和element都要提供)，完成后台数据的轮播展示
    将汽车主页数据渲染以及详情页数据渲染的数据，都放在后台（用mysql数据库存储），完成后台数据的渲染，前台父子组件以及组件间的传参

前端

vue main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false;
//全局css

require('@/assets/css/global.css');
//全局js

import settings from '@/assets/js/settings'

Vue.prototype.$settings=settings
//配置axios

import axios from 'axios'

Vue.prototype.$axios=axios;
//配置element-ui

import  ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);
//配置bootstrap,前提是配置jQuery

import 'bootstrap'

import 'bootstrap/dist/css/bootstrap.css'

//或者

// import Bootstrap from'bootstrap'

// import 'bootstrap/dist/css/bootstrap.css'

// Vue.use(Bootstrap)
new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')

vue CarTag.vue 小组件

<template>
    <div class="car-tag">
        <router-link :to="`/car/detail/${car.id}`">
            <img :src="car.img" alt="">
        <h4>
            <span>{{ car.title }}</span>
        </h4>
        </router-link>
    </div>
</template>
<script>

export default {

name: "CarTag",

props:['car']

}

</script>
<style scoped>

.car-tag {

border-radius: 10px;

overflow: hidden;

width: 200px;

height: 320px;

float: left;

margin-right: 25px;

margin-bottom: 25px;

background-color: beige;

cursor: pointer;

}
<span class="hljs-selector-class">.car-tag</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-class">.router-link-active</span> {
    <span class="hljs-attribute">display</span>: block;
}

<span class="hljs-selector-class">.car-tag</span><span class="hljs-selector-pseudo">:nth-child(5n)</span> {  <span class="hljs-comment">/* 每五个car-tag右边距为0*/</span>
    <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">0</span>;
}

<span class="hljs-selector-class">.car-tag</span> <span class="hljs-selector-tag">img</span> {
    <span class="hljs-attribute">height</span>: <span class="hljs-number">280px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
}

<span class="hljs-selector-class">.car-tag</span> <span class="hljs-selector-tag">h4</span> {
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span> auto;
    <span class="hljs-attribute">text-align</span>: center;
}

</style>

vue Nav.vue小组件

<template>
    <div class="nav">
        <ul>
            <li>
                <router-link to="/">主 页</router-link>
            </li>
            <li>
                <router-link to="/car">汽 车</router-link>
            </li>
        </ul>
    </div>
</template>
<script>

export default {

name: "Nav"

}

</script>
<style scoped>

.nav {

height: 60px;

background-color: aqua;

}
<span class="hljs-selector-class">.nav</span> <span class="hljs-selector-tag">ul</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">1100px</span>;
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;
}

<span class="hljs-selector-class">.nav</span> <span class="hljs-selector-tag">li</span> {
    <span class="hljs-attribute">float</span>: left;
    <span class="hljs-attribute">padding</span>: <span class="hljs-number">15px</span> <span class="hljs-number">20px</span> <span class="hljs-number">0</span>;
}

<span class="hljs-selector-class">.nav</span> <span class="hljs-selector-tag">a</span> {
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">3px</span> solid  transparent;
    <span class="hljs-attribute">padding</span>: <span class="hljs-number">1px</span>;
}

<span class="hljs-selector-class">.nav</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-class">.router-link-exact-active</span> {
    <span class="hljs-attribute">color</span>: darkblue;
    <span class="hljs-attribute">border-bottom-color</span>: orange;
}

</style>

vue Home.vue 页面

<template>
    <div class="home">
        <Nav></Nav>
        <h1>
            <span @click="goCarPage">欢迎来到汽车系统</span>
        </h1>
        <div class="block">
            <span class="demonstration">默认 Hover 指示器触发</span>
            <el-carousel height="320px" >
                <el-carousel-item v-for="item in cars" :key="item">
                    <div style="height: 320px; 200px;margin: auto">
                        <img :src="item.img" alt="" style=" 100%">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script>

import Nav from '../components/Nav'

export default {

name: "Home",

components: {

Nav

},

data() {

return {

cars:[]

}

},

methods: {

goCarPage() {

if (this.$router.path !== '/car') {

this.$router.push('/car')

}

}

},

created() {

this.$axios({

url: this.$settings.base_url + '/get_cars/',

method: 'post',

}).then(response => {

this.cars = response.data;

}).catch(error => {//网络状态码为4xx  5xx

console.log('异常', error.response)

})

}

}
</script>
<style scoped>

h1 {

text-align: center;

margin-top: 60px;

}
<span class="hljs-selector-tag">h1</span> <span class="hljs-selector-tag">sapn</span> {
    <span class="hljs-attribute">cursor</span>: pointer;
    <span class="hljs-attribute">font</span>: bold <span class="hljs-number">60px</span>/<span class="hljs-number">70px</span> <span class="hljs-string">'STSong'</span>;
}

<span class="hljs-selector-class">.el-carousel__item</span> <span class="hljs-selector-tag">h3</span> {
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#475669</span>;
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.75</span>;
    <span class="hljs-attribute">line-height</span>: <span class="hljs-number">150px</span>;
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
}

<span class="hljs-selector-class">.block</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">800px</span>;
    <span class="hljs-attribute">margin</span>: auto;
}



<span class="hljs-selector-class">.el-carousel__item</span><span class="hljs-selector-pseudo">:nth-child(2n)</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#99a9bf</span>;
}

<span class="hljs-selector-class">.el-carousel__item</span><span class="hljs-selector-pseudo">:nth-child(2n+1)</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#d3dce6</span>;
}

</style>

vue Car.vue 页面

<template>
    <div class="home">
        <Nav></Nav>
        <h1>
            <span @click="goCarPage">欢迎来到汽车系统</span>
        </h1>
        <div class="block">
            <span class="demonstration">默认 Hover 指示器触发</span>
            <el-carousel height="320px" >
                <el-carousel-item v-for="item in cars" :key="item">
                    <div style="height: 320px; 200px;margin: auto">
                        <img :src="item.img" alt="" style=" 100%">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script>

import Nav from '../components/Nav'

export default {

name: "Home",

components: {

Nav

},

data() {

return {

cars:[]

}

},

methods: {

goCarPage() {

if (this.$router.path !== '/car') {

this.$router.push('/car')

}

}

},

created() {

this.$axios({

url: this.$settings.base_url + '/get_cars/',

method: 'post',

}).then(response => {

this.cars = response.data;

}).catch(error => {//网络状态码为4xx  5xx

console.log('异常', error.response)

})

}

}
</script>
<style scoped>

h1 {

text-align: center;

margin-top: 60px;

}
<span class="hljs-selector-tag">h1</span> <span class="hljs-selector-tag">sapn</span> {
    <span class="hljs-attribute">cursor</span>: pointer;
    <span class="hljs-attribute">font</span>: bold <span class="hljs-number">60px</span>/<span class="hljs-number">70px</span> <span class="hljs-string">'STSong'</span>;
}

<span class="hljs-selector-class">.el-carousel__item</span> <span class="hljs-selector-tag">h3</span> {
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#475669</span>;
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.75</span>;
    <span class="hljs-attribute">line-height</span>: <span class="hljs-number">150px</span>;
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
}

<span class="hljs-selector-class">.block</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">800px</span>;
    <span class="hljs-attribute">margin</span>: auto;
}



<span class="hljs-selector-class">.el-carousel__item</span><span class="hljs-selector-pseudo">:nth-child(2n)</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#99a9bf</span>;
}

<span class="hljs-selector-class">.el-carousel__item</span><span class="hljs-selector-pseudo">:nth-child(2n+1)</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#d3dce6</span>;
}

</style>

vue CarDetail.vue页面

<template>
    <div class="car-detail">
        <h1>详情</h1>
        <div v-if="car.msg">
            <h1>{{ car.msg }}</h1>
        </div>
        <div v-else-if="car.id">
            <img :src="car.img" alt="">
            <h2>{{ car.title }}</h2>
            <h3>{{ car.price }}</h3>
            <h3>{{ car.info }}</h3>
        </div>
    </div>
</template>
<script>

export default {

name: "CarDetail",

data() {

return {

car: {}

}

},

created() {

//拿到路由传递来的car主键

let pk = this.$route.query.pk || this.$route.params.pk;

//主键不存在，就直接结束方法

if (!pk) return false;

console.log(pk);

//主键存在才请求后台

this.$axios({

url: this.$settings.base_url + /get_car/<span class="hljs-subst">${pk}</span>/,

}).then(response => {

this.car = response.data

}).catch(error => {

console.log(error.response)

})

}

}

</script>
<style scoped>
</style>

vue app.vue 页面

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

后端

django urls.py

from django.views.static import serve
from django.conf import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^get_cars/$', views.get_cars),
    url(r'^get_car/(?P<pk>d+)/$', views.get_car),
url(<span class="hljs-string">r'^media/(?P&lt;path&gt;.*)'</span>,serve,{<span class="hljs-string">'document_root'</span>:settings.MEDIA_ROOT})

]

django views.py

from django.shortcuts import render,redirect,HttpResponse
from django.http import JsonResponse
from . import models
from django.conf import settings
# Create your views here.
def get_cars(request,*args,**kwargs):
    # print(request.method)
    # return JsonResponse({'msg':'get ok'})
    car_query=models.Car.objects.values('id','title','img')
    car_list=list(car_query)
    for car in car_list:
        car['img']='%s%s%s'%('http://localhost:8000',settings.MEDIA_URL,str(car.get('img')))
    return JsonResponse(car_list,safe=False)
def get_car(request,*args,**kwargs):

pk=kwargs.get('pk')

car_obj=models.Car.objects.filter(pk=pk).values('id','title','img','price','info').first()

print(car_obj)

if car_obj:

car_obj['img']='%s%s%s'%('http://localhost:8000',settings.MEDIA_URL,str(car_obj.get('img')))

return JsonResponse(car_obj,json_dumps_params={'ensure_ascii':False})

return JsonResponse({'msg':'数据不存在'})

django models.py

from django.db import models
# Create your models here.
class Car(models.Model):

title=models.CharField(max_length=64)

price=models.DecimalField(max_digits=11,decimal_places=2)

img=models.ImageField(upload_to='car',default='defult.jpg')

info=models.TextField()
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Meta</span>:</span>
    db_table=<span class="hljs-string">'old_boy_car'</span> <span class="hljs-comment">#修改数据库表名</span>
    verbose_name=<span class="hljs-string">'汽车'</span>
    verbose_name_plural=verbose_name

<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">__str__</span><span class="hljs-params">(self)</span>:</span>
    <span class="hljs-keyword">return</span> self.title

作者：静默虚空
欢迎任何形式的转载，但请务必注明出处。
限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。