Vue实战开发移动端旅游网站

项目搭建

搭建步骤

项目结构

公共的样式：src/assets/style/common.less
公共的js（工具函数，接口地址，配置文件）

1. src/utils/apis.js（接口地址配置）
2. src/utils/constants.js（常量配置）
3. src/utils/filters.js（工具函数）

创建好项目后，将准备好的静态文件夹(static)放入public/目录下。

在src/assets/下创建style文件夹，并在style文件夹下创建common.less文件。

在src/下创建utils文件夹，并在utils文件夹下分别创建apis.js，constants.js，filters.js文件。

注！需要在main.js中注册全局过滤器到vue实例上：
import * as filters from ‘./utils/filters’
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))

最终项目结构图：

首页拆解

首页组件拆分

• 标题
• 轮播图（Banner图）
• 热门推荐
• 精选景点
• 底部导航（固定底部）
  

步骤

1.分析首页结构
2.新建页面（views中）
3.新建对应组件（components）

注意思考：组件是否只用于当前页面（在src/components下新建文件夹用来存放对应页面所需的组件），或者组件用于多个页面（在src/components下新建文件夹用来存放公共的组件）

网络请求库axios

axios与ajax

ajax是通过浏览器后台与服务器通信的技术

axios是基于Promise的HTTP库（网络异步请求库），用来发送和处理http请求。

Promise

Promise是一种异步编程解决方案。

通过axios异步请求可以得到Promise对象，将它返回的结果进行处理。

安装axios

如何使用axios

1.GET请求

请求完毕后会返回一个响应，通过then函数获取响应(对结果进行处理)。如果返回异常则跳到catch函数。

2.POST请求

url后面的参数是一个js对象，是需要post过去的数据。区别get请求的参数params。

请求和响应的拦截

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

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

使用场景：

• 设置自定义请求头
• 默认携带上次的cookie（主要解决用户登录的问题）
• 添加loading动画（请求发起前显示，完成后隐藏）
• 统一的错误处理

使用axios请求拦截的实现方法

创建axios实例

const ajax = axios.create(options)

options：js对象，例如：

• headers：设置请求头
• timeout：超时的毫秒数
• data：POST/PUT/PATCH请求的数据
• params：url中的参数
• responseType：默认响应json数据

在src/utils/下新建文件ajax.js用来配置请求响应的拦截

在请求发出之前进行拦截

跨域问题

什么是跨域

跨域就是浏览器出于安全的考虑，要求你的网站不能执行或者不能访问其他网站的资源。

如何认定其他网站:同源策略

http://www.baidu.com:80
http(s)：协议
www.baidu.com：域名/主机
80：端口(默认)

跨域的影响

• 浏览器本地存储无法使用（Cookie，LocalStorage，IndexDB）
• DOM对象，JS对象无法获取
• AJAX无法使用

解决跨域问题

1. 利用HTML标签的特性（script，a，iframe，img等）获取其他域的资源。只能解决GET请求
2. 在前端使用代理解决
3. 在服务器端解决，CORS-跨域资源共享，通过添加响应头信息来解决

在Vue.js中解决跨域问题

1.添加配置文件vue.config.js（项目根路径下）
2.添加配置

target：目标地址
changeOrigin：变更请求头中设置的host（以xxx的名义进行访问）
pathRewrite：url的重写规则

例如要访问http://localhost:8080/api/test => 代理http://localhost:8000/test

在Django中解决跨域问题

步骤：

1. 安装第三方扩展 pip install django-cors-headers。
2. 配置 settings.py INSTALLED_APPS=[‘corsheaders’]。
3. 配置中间件 ，放在SessionMiddleware和CommonMiddleware之间。
   
4. 添加白名单

5. 可选配置
   （请求头是指自定义的请求头）
   

前端组件开发

VantUI初探

VantUI：开源免费，轻量可靠的移动端Vue组件库。

安装：npm i vant -S

导入所有的组件：

import Vue from ‘vue’;

import Vant from ‘vant’;

import ‘vant/lib/index.css’;

Vue.use(Vant);

轮播图组件开发

热门推荐组件开发

精选景点组件开发

页面底部组件开发

后台接口开发

1. 设计接口返回标准（定义接口的返回结构，接口的错误信息约定）
2. 编写接口代码
3. 模拟HTTP请求，测试验证接口

接口返回结构

{
   
   "meta": {
   },
   "objects": []
} 

接口的错误信息返回结构

{
   
    "error_code": '400000',
    "error_meg": "该字段不能为空。",
    "error_list": [
        "password": [
            "该字段不能为空。"
        ]
    ]
}

ORM模型设计

• 系统模块：轮播图，用户反馈
• 景点模块：景点，景点详情，景点评论
• 用户模块：用户，用户详细信息，登录历史
• 订单模块：订单，订单明细，支付相关

轮播图ORM模型

PDMAN建模

class Slider(models.Model):
    """ 轮播图 """
    name =