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;width: 200px;margin: auto">

                        <img :src="item.img" alt="" style="width: 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 !== <span class="hljs-string">'/car'</span>) {

                    <span class="hljs-keyword">this</span>.\)router.push('/car')


}


}


},


created() {


this.\(axios({

                <span class="hljs-attr">url</span>: <span class="hljs-keyword">this</span>.\)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;width: 200px;margin: auto">

                        <img :src="item.img" alt="" style="width: 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 !== <span class="hljs-string">'/car'</span>) {

                    <span class="hljs-keyword">this</span>.\)router.push('/car')


}


}


},


created() {


this.\(axios({

                <span class="hljs-attr">url</span>: <span class="hljs-keyword">this</span>.\)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 || <span class="hljs-keyword">this</span>.\)route.params.pk;


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


if (!pk) return false;


console.log(pk);


//主键存在才请求后台


this.\(axios({

                <span class="hljs-attr">url</span>: <span class="hljs-keyword">this</span>.\)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

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

day69test的更多相关文章

随机推荐

  1. list集合排序2

    java根据List内对象的属性排序 原创 2016年12月07日 00:20:01 标签: java / 对象 / sort / compare 2625 方法一:实现Comparator接口,并重 ...

  2. C盘清理记——罪魁Visual Studio

    话不啰嗦,单刀直入:在C:\ProgramData\Microsoft Visual Studio文件夹下,VS会自动记录IntelliTrace File,久而久之,会无限消耗磁盘空间,直接到塞满C ...

  3. python3文件方法

    Python3 File(文件) 方法 需要注意:打开文件的 mode 参数注意区别文件指针位置 rw/rw+ 文件指针是在文件的开头,w任何模式都是会删除之前原有的内容的, a是追加且,打开文件指针 ...

  4. sql语句之分组

    对聚合函数的结果进行筛选用having,不能用where

  5. thinkphp 模型实例化

    在ThinkPHP中,可以无需进行任何模型定义.只有在需要封装单独的业务逻辑的时候,模型类才是必须被定义的,因此ThinkPHP在模型上有很多的灵活和方便性,让你无需因为表太多而烦恼. 根据不同的模型 ...

  6. mysql中geometry类型的简单使用

    mysql中geometry类型的简单使用 编写本文的目的: 让和两天前的我一样的初学者,能够更快的使用geometry类型存储空间点数据    也是为了自己加深印象,更熟练的使用geometry类型 ...

  7. POJ-3255-Roadblocks POJ-Dijkstra+邻接表

    今天写了这一题,一开始跑了两个Dijkstra,但是造成内存超限,所以现在在学习邻接表,打算明天用邻接表和优先队列写,目前还在学习中,所以题目啥也还没上传,先上传了今晚对于邻接表的理解(见上图),明天 ...

  8. Java程序员必备的10个大数据框架！

    作者:java妞妞 blog.csdn.net/javaniuniu/article/details/71250316 当今IT开发人员面对的最大挑战就是复杂性,硬件越来越复杂,OS越来越复杂,编程语 ...

  9. mac系统升级导致无法在iOS设备中运行Safari Web 调试器

    macOS系统升级之后,可能会导致Safari开发选项中没有iOS设备,进而无法运行Safari Web 调试器. 此问题的解决办法: 请转到设置>常规>重置>重置位置和隐私.现在, ...

  10. CNN网络中的不变性理解

    神经网络中的不变性 原文:https://blog.csdn.net/voxel_grid/article/details/79275637     个人认为cnn中conv层对应的是“等变性”(Eq ...