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. Let's Encrypt 安装配置教程,免费的 SSL 证书

    官网:https://letsencrypt.org/ 安装Let's Encrypt 安装非常简单直接克隆就可以了 git clone https://github.com/letsencrypt/ ...

  2. 校园商铺-4店铺注册功能模块-1Dao层之更新店铺

    dao层增加更新店铺的方法 package com.csj2018.o2o.dao; import com.csj2018.o2o.entity.Shop; public interface Shop ...

  3. jenkins实现不同角色查看不同视图

    1.安装插件Role-based Authorization Strategy 2.开启插件 系统管理>>>全局安全配置 3.创建角色和用户 4.登陆查看,只能看到travel开头的 ...

  4. vue cli2.x配置多环境打包

    一.安装 npm install --save-dev cross-env 二.配置步骤 1.修改config下的文件 //test.env.js 'use strict' module.export ...

  5. 2816: [ZJOI2012]网络

    传送们 把一个点拆成c个即可 浪费时间的水题... //Achen #include<algorithm> #include<iostream> #include<cst ...

  6. MyBatis基础-CRUD

    一.mybatis  环境搭建步骤 第一步:创建 maven 工程第二步:导入坐标第三步:编写必要代码(实体类和持久层接口)第四步:编写 SqlMapConfig.xml第五步:编写映射配置文件第六步 ...

  7. 《DSP using MATLAB》Problem 8.34

    今天下了小雨,空气中泛起潮湿的味道,阴冷的感觉袭来,心情受到小小影响. 代码: hp2lpfre子函数 function [wpLP, wsLP, alpha] = hp2lpfre(wphp, ws ...

  8. 基于jdk8的格式化时间方法

    背景 jdk8之前,java使用Date表示时间,在做时间的格式化时,通常使用SimpleDateFormat,但是SimpleDateFormat是非线程安全的,在写代码时通常要将之定义为局部变量或 ...

  9. chown命令使用

    1.原文件为root权限,改为用户所属权限包括文件夹以下的目录这里必须有R chown -R usrname:username /file 2.修改 tmp 目录为可写权限 chmod -R 777 ...

  10. crontab中反引号和$()无效的解决

    问题描述 1.增加了一条crontab,删除本月中2天以前的日志 10 02  * * * /bin/find /data/logs/php/$(date  +%Y%m)/ -mtime +2 | x ...