在从0开始的中后台管理系统-2章节里主要涉及了前端架构设计的练习，就是在项目里面我们要进行项目目录结构定义，路由封装，Axios请求封装，环境变量封装，storage封装，公共函数封装（日期金额），以及接口全貌预览。现在我们把剩下的部分在本文中结束。
1.localStorage封装
编辑
首先storage分为session storage会话存储和local storage本地存储，都是调用setItem(key,value)的方式去存储，然后前者会话级别存储，也就是存到了缓存里面，关闭页面就消失，后者是本地存储，存到了磁盘中 只要不手动删除就不会消失。
为什么要封装localStorage呢？因为我们一般在本地比如存token的话，我们的key value都是json字符串的形式，如果把{name:'www'}作为value存的话就会展示为【object,object】实际上是调用了对象里面的toString方法变为了'[object,object]'。封装就是为了解决这个问题。
编辑
我们只需要把value提前转化为json字符串格式就可以了。json就是对象格式的文本，然后我们获取getItem的时候用JSON.parse把json字符串转换为 对象就可以了。如果只是纯字符串直接返回就可以了。
2.环境变量
编辑
首先环境变量是什么，我们可以简单理解就是我们一个项目有开发模式测试模式和生成模式，我们总不能把生成模式的服务器对接到开发模式吧。每个模式都需要有对应的服务器，所以每个模式请求的baseUrl不同，这就是最基本的要用到的，比如开发模式我们前端希望后端没有给我们接口的时候我们可以提前开发，就用mack临时去网页版服务器设置的接口先写逻辑。这就是环境变量，就是单纯的常量，在打包的时候或者运行的时候会自动转化为我们的服务器地址，会根据模式不同转化不同的服务器地址。
首先在项目目录下面添加.env.development/.env.production/.env.staging
这是编译时环境变量 打包构建确定环境
编辑
编辑
编辑
然后在package.json里面运行或者打包的时候指名在那个模式下就ok了。
然后我们可以在config文件夹去运行时环境变量。在代码运行的时候去定义环境变量。项目运行的时候访问变量
首先config创建config.ts文件夹然后配置对象暴露就可以了只不过需要在html首部去手动设置模式。
编辑
这就是第二种方法。
3.金额和日期格式化
我们总会用到这些的，首先金额我们不希望9999999999999这种，我们希望12，222，333.123，以及日期我们很多时候希望是我们想要的格式，所以我们需要封装。我们从MDN官方文档可以拿到方法，可以直接在utils文件里面创建index.ts封装，
编辑
通过自带的方法去设置。这里提醒一下parseFloat设置为浮点数只会保留两位小数。下面的toLocaleString('zh-CN',{})是固定写法。日期也是都是固定的转化方法。比如保留的是时：分：秒还是2025/9/25这种或者2025/9/55 09：02：11这种。
编辑
到这里前端架构设计几乎是体验了一遍了，下面就要去进行项目实战了。从登录开始