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

时间：2024-10-29 07:28:05

一、前端项目搭建

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 的关键特性和功能：

  1. 基于 Promise：Axios 的所有请求都返回一个 Promise 对象，这使得它非常适合与 async/await 语法一起使用，从而实现更简洁和易读的异步代码。

  2. 请求和响应拦截器：你可以添加请求拦截器和响应拦截器，以便在请求发送之前或响应被处理之前执行一些操作，如添加认证 token、处理错误等。

  3. 自动转换 JSON 数据：Axios 会自动将响应内容转换为 JSON 对象（如果响应头中的 Content-Type 表明是 JSON）。

  4. 支持取消请求：你可以使用 CancelToken 来取消请求。

  5. 并发请求：Axios 提供了 axios.all 方法，用于处理并发请求，并在所有请求完成后执行某个操作。

  6. 浏览器和 Node.js 支持：Axios 可以在浏览器和 Node.js 环境中使用，无需修改代码。

  7. 自定义配置：你可以为请求设置默认配置，如 baseURL、超时时间、请求头等。

  8. 防止跨站请求伪造（XSRF）：Axios 支持自动发送 XSRF token。

Promise 是 JavaScript 中用于异步编程的一个重要概念。它代表了一个可能现在还不可用，但将来某个时刻会变得可用的值。Promise 对象可以处于以下三种状态之一：

  1. Pending（等待）：初始状态，既不是成功，也不是失败状态。
  2. Fulfilled（已成功）：意味着操作成功完成。
  3. Rejected（已失败）：意味着操作失败。

Promise 提供了 .then() 和 .catch() 方法来处理异步操作成功或失败的情况，以及 .finally() 方法来执行无论成功或失败都需要执行的代码。

使用 .then() 方法可以添加处理成功情况的回调函数，使用 .catch() 方法可以添加处理失败情况的回调函数：

VantUI是一个基于Vue.js的移动端组件库，旨在为开发者提供一套轻量、可靠、高性能的移动端UI组件。

相关文章