【Vue3.0移动端项目--旅游网】-- 城市页面搭建

发布于：2023-01-11 ⋅ 阅读:(679) ⋅ 点赞:(0)

多一些不为什么的坚持🤳

贤蛋 🥚大眼萌，一名很普通但不想普通的程序媛🙊

📝本文章收录于专栏：Vue3.0移动端项目-旅游网

第一篇：【Vue3.0移动端项目–旅游网】–项目初始化搭建

第二篇：【Vue3.0移动端项目–旅游网】–配置tabBar &首页搭建

城市页面搭建

🧲 新建 city 分支

通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。

创建新分支并且跳转到改分支上

git checkout -b city

查看分支

git branch

🧬 封装网络请求 axios（补充）

如果不封装 axios 也可以直接依赖 axios 发送请求，但是为了方便开发，我们队对 axios 做一层封装，一次封装以后都可以直接拷贝使用。

安装axios

npm install axios

创建 config.js (网络请求基本配置文件)

export const BASE_URL = "http://123.207.32.32:1888/api"
export const TIMEOUT = 10000

创建request/index.js(对axios进行封装)

import axios from "axios"

import { BASE_URL, TIMEOUT } from "./config.js"

class CXRequest {
  constructor(baseURL, timeout = 10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })
  }

  request(config) {
    return new Promise((resolve, reject) => {
      this.instance
        .request(config)
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  }

  get(config) {
    return this.request({ ...config, method: "get" })
  }

  post(config) {
    return this.request({ ...config, method: "post" })
  }
}

export default new CXRequest(BASE_URL, TIMEOUT)