目录
习题详解
- Home.vue页面组件显示基本信息：欢迎来到汽车系统
Car.vue页面组件，完成Cars的列表数据渲染
Nav.vue小组件，完成Home与Car页面的导航跳转 - CarDetail页面组件，完成某一个汽车详细信息的渲染
（Car页面点击具体的car进入详情页，把点击的car的主键传入到详情页）
'''
# css样式
.car-tag:nth-child(1) { /*伪类选择器: 按次序选择*/
margin-right: 0;
}
.car-detail {
100vw; /*vw: 屏幕宽度, vh: 屏幕高度*/
...
}
.Nav a {
border-bottom: 3px solid transparent; /*transparent: 边框颜色透明*/
}
'''
后端django项目准备
TODO全局注释: # TODO 今天写到这, 下班, 明天继续
国际化配置
'''
# d_prjsettings.py
LANGUAGE_CODE = 'zh-hans' # 语言模式设为中文
TIME_ZONE = 'Asia/Shanghai' # 时区设定
...
USE_TZ = False # 同步数据库时区
'''
axios插件及使用
vue的ajax插件: axios
- 安装插件: 一定要在项目目录下,
cnpm install axios - 在v-projsrcmain.js中配置
- 在对应组件的created钩子中使用this.$axios, 完成对后端的ajax请求
- 前端的print是调用打印机, console.log是在终端打印
'''
# v-projsrcmain.js
import axios from 'axios'
Vue.prototype.$axios = axios; // js原型配置的属性所有的vue实例都能通过this.访问
# v-projsrcviewsCar.vue
<script>
...
export default {
...
data() {
return {
cars: [],
}
},
created() {
this.$axios({
url: 'http://127.0.0.1:8000/cars/',
method: 'get',
}).then(response => { // 箭头函数不产生独立的this
console.log(response) // {data: {msg: "get ok"}, …}
}).catch(error => { // 网络状态码为4xx或5xx时
console.log(error)
});
},
}
</script>
'''
django处理跨域问题
CORS跨域问题(同源策略)
- 同源: http协议相同, ip服务器地址相同, app应用端口相同
- 跨域: http协议, ip地址, 应用端口有任意一个不同
- django默认是同源策略, 存在跨域问题
django后端解决方法
- 安装插件: pip install django-cors-headers
- 在settings.py中配置相关数据
'''
# d_prjsettings.py
# 注册app
INSTALLED_APPS = [
...
'corsheaders'
]
# 添加中间件
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True
'''
axios向后端提交数据
- 前端的GET请求只能发送拼接参数, 不能发送数据包参数
- 后端通过request.body获取前端发送的数据包参数
'''
# v-projsrcviewsCar.vue
...
<script>
...
export default {
data() {
return {
cars: [],
}
},
created() {
this.$axios({
// 前端发送拼接参数给后端的方式一:
// url: 'http://127.0.0.1:8000/cars/?a=1&b=2',
// 前端发送拼接参数给后端的方式二:
url: 'http://127.0.0.1:8000/cars/',
params: { // url拼接参数
a: 1,
b: 2,
},
// 前端发送数据包参数给后端
data: { // 数据包参数
x: 666,
y: 777,
},
method: 'post',
}).then(response => { // 箭头函数不产生独立的this
console.log(response) // {data: {msg: "get ok"}, …}
}).catch(error => { // 网络状态码为4xx或5xx时, 后端返回给前端的响应
console.log(error.response.data) // 获取报错信息: 为一个HTML页面
});
},
}
</script>
# d_prjappviews.py
from django.http import JsonResponse
def get_cars(request, *args, **kwargs):
print(request.GET) # 后端获取前端的拼接参数: <QueryDict: {'a': ['1'], 'b': ['2']}>
print(request.POST) # <QueryDict: {}>
print(request.body) # b'{"x":666,"y":777}'
return JsonResponse({'msg': 'get ok'})
'''
后端返回数据给前端
'''
# d_prjurls.py
from django.conf import settings
urlpatterns = [
...
url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),
]
# d_prjsettings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # media文件夹的绝对路径
# appmodels.py
class Car(models.Model):
...
class Meta: # 自定义数据库表名
db_table = "old_boy_car"
# 自定义后台管理窗口显示的表名
verbose_name = "汽车"
verbose_name_plural = verbose_name
...
# appviews.py
from django.http import JsonResponse
from . import models
from django.conf import settings
def get_cars(request, *args, **kwargs):
car_queryset = models.Car.objects.values('id', 'title', 'img')
car_list = list(car_queryset) # 将查询的queryset转成列表
# 拼接图片资源路径
for car in car_list:
# MEDIA_URL是MEDIA_ROOT的前端路由映射, car.get('img')为对象
car['img'] = '%s%s%s' % ('http://localhost:8000', settings.MEDIA_URL, str(car.get('img')))
return JsonResponse(car_list, safe=False) # safe=False设定JsonResponse能返回列表类型数据
'''
全局js配置
- 在v-projsrcassetsjs中新建settings.js文件
- 在main.js中从settings.js导入对象
- 通过js原型: Vue.prototype配置全局的Vue属性, 类似于python中的组合
'''
# v-projsrcassetsjssettings.js
export default { // vue中的js对象都用export default导出
base_url: 'http://127.0.0.1:8000',
}
# v-projsrcmain.js
import settings from '@/assets/js/settings' // 导入js对象
Vue.prototype.$settings = settings; // // 配置全局js属性, 之后任何组件实例都可以访问
# v-projsrcviewsCarDetail.vue
<script>
export default {
data() {
return {
car: {},
};
},
created() {
// 前端获取url拼接参数this.$route.query.pk, 前端获取url数据包参数this.$route.params.pk
this.pk = this.$route.query.pk || this.$route.params.pk;
if (!this.pk) {
return false;
}
this.$axios({
url: this.$settings.base_url + `/car/${this.pk}`,
}).then(response => {
this.car = response.data; // ajax请求拿到后端返回数据
}).catch(error => {
});
},
}
</script>
'''
element插件配置与使用
在终端输入命令安装: npm i element-ui -S
在main.js中配置element-ui
'''
# v-projsrcmain.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 全局使用ElementUI
'''
vue配置jq与bs
终端命令安装:
cnpm install jquerycnpm install bootstrap@3
配置:
- 在项目根目录下新建vue.config.js文件
- 在main.js中配置相关文件
'''
# v-projvue.config.js
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
# v-projsrcmain.js
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
'''