当前位置：首页 > news >正文

Django+Vue全栈开发旅游网项目首页

news 2024/10/25 0:40:48

一、前端项目搭建

1、使用脚手架工具搭建项目

2、准备静态资源（图片资源）

将准备好的静态资源拖至public目录下

3、调整生产项目结构

公共的样式

公共js

首页拆解步骤

①分析页面结构

标题、轮播图、本周推荐、精选景点、底部导航

②新建页面组件

③新建对应组件

二、网络请求库axios

步骤：1、了解什么是axios

2、了解什么是Promise

3、掌握如何安装axios

4、掌握如何进行使用axios

1、疑问：为何不能在Vue.js中使用AJAX

        AJAX是通过浏览器后台与服务器通信的技术
        jQuery中的AJAX只是基于jQuery的实现
        在Vue.js中使用jQuery不能充分利用Vue.js的特性

2、什么是axios

①基于Promise的HTTP库
②支持Node.js和浏览器
浏览器:XMLHttpRequest
Node.js: http

3、了解什么是Promise

关于Promise:一种异步编程解决方案,Promise其实一直都在，只是在ES6时，才被并入标准库，Promise的两个核心函数，then函数和catch函数

4、如何安装axios

使用npm安装:
安装到dependencies(生产环境依赖)
①npm install axios -save
②npm install axios -S
安装到devDependencies(开发环境依赖)
①npm install axios --save-dev
②npm install axios -D

axios请求响应拦截

①了解请求响应拦截的使用场景

②掌握如何对请求响应做统一的处理

请求响应拦截的使用场景

①设置自定义请求头
②默认携带上次的cookie
③添加loading动画思路(请求发起前显示、完成后隐藏)
④统一的错误处理

请求响应拦截的实现方式

常用的参数：

①headers：设置请求头

②timeout：超时的毫秒数

③data POST/PUT/PATCH请求的数据

④params:URL中的参数

⑤responseType:默认为json

统一处理错误：

400：参数错误提示

500/504：服务器正忙，网络异常/请求超时

401：未登录，跳转到登录页面

总结：对axios进行全局配置可提升代码的可维护性

三、前端组件开发

1、VantUI初探

①了解VantUI的使用场景

②掌握Vue项目中相关库/扩展的安装

③掌握VantUI的安装和使用

2、什么是VantUI

轻量、可靠的移动端Vue组件库

3、安装VantUI

npm install vant -S

4、引入VantUI组件

使用其他的UI库也都是相同的思路

5、轮播图组件的开发

①查找Vant中可以使用的组件

②实现组件模板部分

③模型层准备数据

④模拟数据，实现轮播效果

四、总结

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它可以用来发送异步 HTTP 请求（如 GET、POST、PUT、DELETE 等）到 RESTful API 或其他 HTTP 服务。Axios 提供了简单易用的 API，使得发送请求和处理响应变得非常直观。

以下是一些 Axios 的关键特性和功能：

基于 Promise：Axios 的所有请求都返回一个 Promise 对象，这使得它非常适合与 async/await 语法一起使用，从而实现更简洁和易读的异步代码。
请求和响应拦截器：你可以添加请求拦截器和响应拦截器，以便在请求发送之前或响应被处理之前执行一些操作，如添加认证 token、处理错误等。
自动转换 JSON 数据：Axios 会自动将响应内容转换为 JSON 对象（如果响应头中的 Content-Type 表明是 JSON）。
支持取消请求：你可以使用 CancelToken 来取消请求。
并发请求：Axios 提供了 axios.all 方法，用于处理并发请求，并在所有请求完成后执行某个操作。
浏览器和 Node.js 支持：Axios 可以在浏览器和 Node.js 环境中使用，无需修改代码。
自定义配置：你可以为请求设置默认配置，如 baseURL、超时时间、请求头等。
防止跨站请求伪造（XSRF）：Axios 支持自动发送 XSRF token。