这里是在简书仿简书的第七篇，早睡早起身体好
项目目录 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)
}
网友评论