day69test
目录
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<path>.*)'</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的更多相关文章
随机推荐
- 人脸识别-常用的数据库Face Databases From Other Research Groups
Static/Videos Static Single/Multiple faces Single? Gray/Color Color Resolution Vaious Face pose Fron ...
- elasticsearch内存耗尽的问题
elasticsearch伤心几个月以来每星期都要抽风一次,突然间查询非常慢, 看下liunx的内存几乎被elasticsearch吃了个精光,就身下不到10M的内存. 开始按照网上给出的解决方案 ...
- Java 基础 - final vs static
总结 共同点,都可以修饰类,方法,属性.而不同点: static 含义:表示静态或全局,被修饰的属性和方法属于类,可以用类名.静态属性 / 方法名 访问 static 方法:只能被static方法覆盖 ...
- csps模拟87888990部分题解
题面:https://www.cnblogs.com/Juve/articles/11752338.html https://www.cnblogs.com/Juve/articles/1175241 ...
- vue框架介绍
vue框架介绍 一.vue 概念 vue 是一种开发用户界面的渐进式开发框架.渐进式指的是:你可以将vue作为一部分嵌入到web应用中,带来丰富的交互体验 二.vue特点及常见开发中的高级功能 1.解 ...
- 使用OxyPlot在WPF中创建图表
目录(?)[+] Using Nuget 包括OxyPlot在你的应用程序的最简单方法是使用NuGet包管理器在Visual Studio 运行 Visual Studio并开始创建一个新的WPF项目 ...
- 样本方差的抽样分布 χ2(n) 卡方分布_样本方差 卡方分布
样本方差的抽样分布 χ2(n) 卡方分布_样本方差 卡方分布 样本方差的抽样分布 χ2(n) 卡方分布 t分布.卡方分布.f分布均要求总体服从正态分布. 若n个相互独立的随机变量ξ1,ξ2,-,ξn ...
- day22_5-xml模块
# 参考资料:# python模块(转自Yuan先生) - 狂奔__蜗牛 - 博客园# https://www.cnblogs.com/guojintao/articles/9070485.html ...
- 夏令营501-511NOIP训练16——数字转换
传送门:QAQQAQ 题意:如果一个数x的约数和(不包括它本身,下同)比它本身小,那么x可以变成它的约数和:如果对于某个y>x且y的约数和为x,那么x也可以变成y.例如,4可以变为3,1可以变为 ...
- vue项目的实用配置
文件压缩如何去掉console 在使用vue开发项目的过程中,免不了在调试的时候会写许多console,在控制台进行调试:在开发的时候这种输出是必须的,但是build后线上运行时这个东西是不能出现的: ...