使用Fantastic-admin快速搭建后台管理系统

Fatastic-admin追求的是“开箱即用”，给你一个通用的模板，你在它的基础上开发。

使用 Fatastic-admin 开发的感受：

        优点：

                1.简单快速投入使用，极大的提高了开发效率。

                2.界面非常美观，对于一个学后端，没有团队的个人是非常非常实用的。

                3.代码结构很清晰，官网也有讲解，也带有很多注释。

                4.基于vue3，ElementPlus直接使用，封装了axios

        缺点：

                1.也不能说是缺点，想用别人的代码做好自己的项目，最重要是要理清别人代码，哪个 文件是干嘛的，不一定要看懂代码为什么这么写，但一定要知道是干嘛的！因为没有去理清代码结构，让我浪费了几个小时。

就是下面这段，在用axios封装的api中定义了一个全局返回结果的拦截，我个人习惯的返回结果是{code：1，data：” Object “}，Fantastic-admin 返回了一个{status，error，data}，而我的返回值没有status，所以永远执行  else { toLogin() }  这段代码，永远得不到返回值！我搞了几个小时，axios返回的respones永远是undefined。

注意：使用模板的时候一定要看看是否有全局拦截，返回对象是不是和自己的一样！

api.interceptors.response.use(
    response => {
        /**
         * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
         * 假设返回数据格式为：{ status: 1, error: '', data: '' }
         * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
         * 请求出错时 error 会返回错误信息
         */
        if (response.data.status=== 1) {
            if (response.data.error === '') {
                // 请求成功并且没有报错
                return Promise.resolve(response.data)
            } else {
                // 这里做错误提示
                // ElMessage.error(options)
                return Promise.resolve(response.data)
            }
        } else {
            toLogin()
        }
    },

                

那怎么开始使用Fantastic-admin呢？

就让我来详细介绍介绍

1.到官网下载或者到gitee下载Fantastic-admin 模板源码

Fantastic-admin官网https://hooray.gitee.io/fantastic-admin/guide/ready.html

基础版#

分支说明

• master 框架源码分支，不含示例代码，可直接用于实际开发
• example 演示源码分支，同演示站，含有大量示例代码

• 手动下载
  • 去 Gitee 下载
  • 去 Github 下载
• git 克隆

# 从 Gitee 克隆

# 拉取框架源码
git clone https://gitee.com/hooray/fantastic-admin.git
# 拉取演示源码
git clone -b example https://gitee.com/hooray/fantastic-admin.git

# 从 Github 克隆

# 拉取框架源码
git clone https://github.com/hooray/fantastic-admin.git
# 拉取演示源码
git clone -b example https://github.com/hooray/fantastic-admin.git

专业版#

去购买

下载好之后最好按官网要求安装好拓展。 

2.安装之后把下载的文件用VScode打开，在终端执行 pnpm install 

# 安装依赖 # 注意，必须使用 pnpm 安装依赖，请勿使用 npm 或 yarn 安装依赖 pnpm install

使用 pnpm run dev 运行

专业版需要购买，学生用免费的基础版够了，展示一下基础版本模板（我稍微改动了一下）

 

模板还是很美观的。