使用Fantastic-admin快速搭建后台管理系统
Fatastic-admin追求的是“开箱即用”,给你一个通用的模板,你在它的基础上开发。使用 Fatastic-admin 开发的感受:优点:1.简单快速投入使用,极大的提高了开发效率。2.界面非常美观,对于一个学后端,没有团队的个人是非常非常实用的。3.代码结构很清晰,官网也有讲解,也带有很多注释。4.基于vue3,ElementPlus直接使用,封装了axio
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 克隆
# 拉取框架源码
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 运行
专业版需要购买,学生用免费的基础版够了,展示一下基础版本模板(我稍微改动了一下)
模板还是很美观的。
更多推荐
所有评论(0)