网站设计模板旅游景点11页,asp网站怎么做404页面,青海互动网站建设,wordpress安装权限设置方法首先构建vue项目#xff0c;构建项目点这里
安装
npm install axios
axios简介
Axios 是一个基于 promise 的 HTTP 库#xff0c;用于发起请求和接收响应#xff0c;实现异步操作
基本使用
axios对象
请求响应拦截
在utils文件夹里新建ajax.js
创建一个axios对象并…首先构建vue项目构建项目点这里
安装
npm install axios
axios简介
Axios 是一个基于 promise 的 HTTP 库用于发起请求和接收响应实现异步操作
基本使用
axios对象
请求响应拦截
在utils文件夹里新建ajax.js
创建一个axios对象并对外暴露
配置请求响应拦截器
import axios from axios;// 创建axios对象并暴露该对象可以被外部访问
// 创建对象时进行头信息设置及加载上一次携带的cookie
export const ajax axios.create({headers: {source: h5,Content-Type: application/x-www-form-urlencoded, //用于指示资源的MIME类型这个字段表明服务器要返回的内容是什么类型的数据},WithCredentials: true // 携带cookie
})
// 请求响应拦截器有两个参数参数1拦截成功函数参数2拦截失败函数
// 处理完毕要放行返回数据
ajax.interceptors.request.use((req) {console.log(拦截请求);return req; // 不返回的话这个包就丢了
}, (err) {return Promise.reject(err);
});ajax.interceptors.response.use((reqs){console.log(拦截响应)return reqs;
}, (err) {return Promise.reject(err);
})
请求响应拦截器可以对请求和响应拦截并对拦截的数据操作。
如下
这里配置了如果响应状态码为401的时候如何操作
// 响应拦截
ajax.interceptors.response.use((reqs){console.log(拦截响应)return reqs;
}, (err) {if (err.response.status 401) {console.log(未登录。。。。)}return Promise.reject(err);
})
发起请求 在onMounted函数中调用axios.get方法参数是目标url。返回一个response在then中进行处理。 axios.get是通过get方法发起请求返回一个响应。
script setup
import axios from axios;
import {onMounted} from vue;
// 此函数在页面元素加载前执行也称为钩子函数或生命周期函数
onMounted(() {axios.get(http://www.baidu.com).then((response) {console.log(响应返回的数据 , response);})
})
/script 直接访问非本机目标会导致跨域问题需要进一步配置
使用VantUI
ventui是一个vue组件库和elementui不同ventui主要面对移动端应用
npm install vant
使用vant元素
使用vant元素
eg轮播图
script setup
import {ref} from vue;const bannerList ref([{id :1 ,img_url: /static/home/banner/banner1.jpg,},{id :2 ,img_url: /static/home/banner/banner2.jpg,},{id :3 ,img_url: /static/home/banner/banner3.jpg,}
])
/scripttemplatediv classhome-banner-boxvan-swipe classswipe :autoplay3000 indicator-colorwhitevan-swipe-item v-foritem in bannerList :keyitem.idimg :srcitem.img_url alt/van-swipe-item/van-swipe/div
/templatestyle langless scoped
.home-banner-box{img{width: 100%;height: auto;}
}
/style
cell单元格组件
van-cell title单元格 is-link /
van-cell title热门推荐 is-link value全部榜单 /
van-cell title单元格 is-link arrow-directiondown value内容 /正常是无法带有 创建django项目
创建django项目点这里
数据库设计和生成
配置数据库连接
打开setting.py首先引入数据库依赖然后找到DATABASES并配置。
import pymysql
pymysql.install_as_MySQLdb()DATABASES {# default: {# ENGINE: django.db.backends.sqlite3,# NAME: BASE_DIR / db.sqlite3,# }default: {ENGINE: django.db.backends.mysql, # 数据库驱动NAME: trip_django, # 数据库名USER: root, # 登录数据库的用户名PASSWORD: 1231, # 密码HOST: 127.0.0.1, # 数据库IP地址POST: 3306 # 数据库端口号}
} 数据库设计
打开模块的models
设计规则
字段类型
Django提供了多种字段类型用于表示不同的数据类型。以下是一些常用的字段类型
AutoField自增列通常不需要显式定义因为Django会自动为每个model添加一个名为id的自增主键字段。CharField字符串字段必须指定max_length参数。BooleanField布尔类型字段不能为空但可以添加BlankTrue允许在表单中为空。DateField日期类型字段可以设置auto_now每次保存时自动更新为当前日期和auto_now_add仅在第一次创建时自动设置为当前日期等选项。DateTimeField日期时间类型字段参数与DateField相同。DecimalField十进制小数类型字段需要指定max_digits总位数和decimal_places小数位数等参数。EmailField带有检查Email合法性的CharField。FloatField浮点类型字段。IntegerField整型字段。BigIntegerField长整型字段。TextField大文本字段用于存储较长的字符串。URLField带有URL合法性校验的CharField。ImageField图片字段需要Python Imaging库Pillow支持可以指定height_field和width_field来保存图片的高度和宽度。FileField文件字段用于存储上传的文件需要指定upload_to参数来指定文件上传的目录。
字段选项
除了字段类型外还可以为字段指定一些选项来定制其行为
null如果为True则允许该字段在数据库中存储NULL值。默认为False。blank如果为True则在Django admin中添加数据时可以允许该字段为空。这与null不同null是与数据库相关的而blank是与表单验证相关的。primary_key如果为True则该字段将作为模型的主键。通常不需要显式设置因为Django会自动为每个模型添加一个名为id的自增主键字段。choices一个二维的元组列表用于指定该字段的可选值。在Django admin中这将使用select框代替文本框并限定choices的值是元组中的值。max_length对于字符串类型的字段指定最大长度。default为该字段指定一个默认值。verbose_name在Django admin中显示的字段名称。如果不设置则使用属性名作为显示名称。db_column指定该字段在数据库中的列名。unique如果为True则该字段的值在数据库中必须是唯一的。db_index如果为True则为该字段创建数据库索引。
随后指定表名和排序规则
class Meta:db_table system_sliderordering [-reorder] # 默认排序规则
eg
from django.db import models# Create your models here.
# 数据库中表的映射类通过该文件构建和操作数据库
class Slider(models.Model):# 轮播图name models.CharField(名称, max_length32)desc models.CharField(描述, max_length100, nullTrue, blankTrue)types models.SmallIntegerField(展现的位置, default10)img models.ImageField(图片地址, max_length255, upload_to%Y%m/slider)reorder models.SmallIntegerField(排序字段, default0, help_text数字越大越靠前)start_time models.DateTimeField(生效开始时间, nullTrue, blankTrue)end_time models.DateTimeField(生效结束的时间, nullTrue, blankTrue)target_url models.CharField(跳转的地址, max_length255, nullTrue, blankTrue)is_valid models.BooleanField(是否有效, defaultTrue)createdat models.DateTimeField(创建时间, auto_now_addTrue)updated_at models.DateTimeField(修改时间, auto_nowTrue)class Meta:db_table system_sliderordering [-reorder] # 默认排序规则 检查运行
python manage.py check
创建模型
python manage.py makemigrations生成数据结构
生成数据结构前要先建库库名和setting中配置的相同
python manage.py migrate响应数据
规范相应数据结构
首先定义好格式
一个对象包裹着一个对象和一个列表 data {meta: {},object: []} 从数据库查询数据 # 对数据源数据库里的数据进行过滤相当于在sql中加where条件quertset Slider.objects.filter(is_validTrue)
将数据添加到响应的数据里 for item in quertset:data[object].append({id: item.id,img_url : item.img.url,target : item.target_url,name : item.name,})
返回响应
return http.JsonResponse(data) 整体
from django.http import HttpResponse
from django.shortcuts import render
from django import httpfrom system.models import Slider# Create your views here.
def slider_list(request):# 规范相应数据结构data {meta: {},object: []}# 对数据源数据库里的数据进行过滤相当于在sql中加where条件quertset Slider.objects.filter(is_validTrue)for item in quertset:data[object].append({id: item.id,img_url : item.img.url,target : item.target_url,name : item.name,})# 返回一个JSON格式的对象return http.JsonResponse(data)类视图响应数据
重写查询方法
首先重写查询方法方法名为get_queryset。
代码中Q是查询条件可以拼接多个条件。用符号拼接。
paginate_by 5表示每页有多少条数据
class SightListView(ListView):paginate_by 5 # 每页五条数据def get_queryset(self):query Q(is_valid True) # Q是查询条件该对象可以拼接多个条件# 热门is_hot self.request.GET.get(is_hot,None)if is_hot:query query Q(is_hotTrue)# 精选is_top self.request.GET.get(is_top,None)if is_top:query query Q(is_topTrue)print(query)# 景点名称搜索querySet Sight.objects.filter(query)return querySet
重写render_to_response方法
重写render_to_response方法这个方法用于响应前端的请求。 context类是上下文对象记录类的属性列表 其中包含了ListView子类SightList的所有属性及数据
for item in page_obj.object_list:的含义是遍历所有当前页的数据 def render_to_response(self, context, **response_kwargs):# 利用上下文对象获取页面信息page_obj context[page_obj]# 合成响应数据data {meta: {total_count: page_obj.paginator.count,page_count: page_obj.paginator.num_pages,current_page: page_obj.number,},objects: [],}for item in page_obj.object_list:data[objects].append({id: item.id,name: item.name,main_img: item.main_img.url,min_price: item.min_price,score: item.score,province: item.province,city: item.city,comment_count: 0})return http.JsonResponse(data) 在 Django 的分页功能中page_obj 通常是一个表示当前页的分页对象而 page_obj.object_list 是一个包含当前页所有对象的列表。
具体来说 page_obj这是一个分页对象它包含了关于当前页以及整个数据集分页信息的各种属性。它通常是通过 Django 的 Paginator 类和相应的页面号码来创建的。 page_obj.object_list这是一个列表或类似列表的可迭代对象包含了根据分页逻辑从整个数据集中筛选出来的、属于当前页的对象。这些对象通常是模型实例它们代表了数据库中的记录。
例如如果你有一个包含 100 个对象的列表并且你设置了每页显示 10 个对象那么
对于第一页page_obj.object_list 将包含列表中的前 10 个对象。对于第二页它将包含列表中的第 11 到第 20 个对象以此类推。
获取指定分页 context[page_obj].get_page(page_number)
当前视图完整代码
from django.db.models import Q
from django.shortcuts import render
from django import http
from django.views.generic import ListViewfrom sight.models import Sightclass SightListView(ListView):paginate_by 5 # 每页五条数据def get_queryset(self):query Q(is_valid True) # Q是查询条件该对象可以拼接多个条件# 热门is_hot self.request.GET.get(is_hot,None)if is_hot:query query Q(is_hotTrue)# 精选is_top self.request.GET.get(is_top,None)if is_top:query query Q(is_topTrue)print(query)# 景点名称搜索querySet Sight.objects.filter(query)return querySetdef render_to_response(self, context, **response_kwargs):# 利用上下文对象获取页面信息page_obj context[page_obj]# 合成响应数据data {meta: {total_count: page_obj.paginator.count,page_count: page_obj.paginator.num_pages,current_page: page_obj.number,},objects: [],}for item in page_obj.object_list:data[objects].append({id: item.id,name: item.name,main_img: item.main_img.url,min_price: item.min_price,score: item.score,province: item.province,city: item.city,comment_count: 0})return http.JsonResponse(data)
