07 | 前端项目初始化

这里是在简书仿简书的第七篇，早睡早起身体好

项目目录 jianshu_client

前端初始化要做的：

• 为目录配置别名
• 初始化全局样式
• 划分目录结构
• 封装网络请求函数

为目录配置别名

预设了src/为@，当我们频繁需要使用其他文件夹时可以在vue.config.js 中为文件夹设置别名。

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
      }
    },
  }, 
}

当然了，vue.config.js 中还有其他可配置项，具体可参考官方文档。

---

初始化全局样式

这个没什么东西，自己写个css文件或者网上找个引入就行。

---

划分目录结构

好的目录结构可以使开发更加有效率。这个项目的目录结构是这样。

顶层目录为 jianshu_client， 后端项目的顶层目录是 jianshu_server。

回到前端项目来，编写代码主要在src目录中，下面是src目录下的文件结构。

- assets 静态文件
- components 抽离的组件
  - common 与业务无关的组件，可以直接使用到另一个项目，比如navbar
  - cotent 与业务相关的组件，不同类型的应用可能无法使用，比如本项目的postList，其他类型的项目中可能没有什么post
- network 网络请求相关的代码
  - request.js 封装的网络请求
  - user.js 和用户相关的网络请求函数
  - 。。。
- router 路由相关文件
- store vuex相关代码
- utils 工具函数 如函数的防抖和节流
- views 路由文件
  - Home 首页

---

封装网络请求函数

下面来看网络请求的封装，作为 2020 年的 web 应用，肯定是要搞动态数据的。一层不变的应用不会缓解用户的信息焦虑。那么，如何获取数据就成了必不可少的操作了。

甭管你是使用原生的 ajax 还是 fetch 还是 axios，对它们进行一定的封装也是必不可少的。

这里以 axios 为例，我们导出一个名为 request 的函数，后续进行请求时使用我们封装的 request 函数，而不是 axios， 这样做就将操作和 axios 做了分离，当 axios 过时了，我们只需要更改该请求函数的逻辑，而对于业务代码中的网络请求就不用去更改了。

同时这里我们做了一些拦截请求，为每个请求添加Authorization，这个在登录时会再看它。

// network/request.js

export function request(config) {
  // 1. 创建axios实例
  const instance = axios.create({
    baseURL: apiUrl,
    timeout: 10000, // 设置超时时间10s
  })
  // 2. 请求拦截器，添加jwt token

  instance.interceptors.request.use(config => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}` || ''
    // 每个请求都重新设置有点耗费资源，一般token发生改变会是换账号登录，或token过期，可能会有更好的方案。
    return config
  }, err => {

  })
  // 3. 响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, error => {
    console.log(error.response)
    }
    return Promise.reject(error.response.data);
  })

  // 4. 发送真正的网络请求
  return instance(config)
}