三天快速搭建一个属于自己的管理系统，包括前端、后端、部署上线，超级详细的介绍。

最近在做一个关于盲文打印机的项目，需要给app开发一个后台管理系统。目前基本功能已经实现，前前后后大概三天左右，后续还会继续添加功能、优化系统。

目前使用的技术栈：vue3、js、springboot、MP

此次开发使用了Fantastic-admin 管理系统框架基础版。一款优秀的框架会极大提高开发效率！

基础版免费，专业版也只有几百块、功能十分强大！有能力有需要的可以直接上专业版。

Fantastic - admin 管理系统框架下载、使用可以看我之前发的文章安利一个非常优秀的开源后台管理系统项目，开箱即用，极大提高效率https://blog.csdn.net/qq_61672548/article/details/125704550?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167974621716800192213117%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167974621716800192213117&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-125704550-null-null.article_score_rank_blog&utm_term=fantastic&spm=1018.2226.3001.4450

Fantastic - admin 官网： Fantastic-admin | 一款 Vue 中后台管理系统框架一款开箱即用的 Vue 中后台管理系统框架，采用 Vue3 + Vite2 技术栈。https://hooray.gitee.io/fantastic-admin/?from=element-plus

toBraille后台管理系统功能简洁

1.登录注册，这没有什么好说的。Fantasitc已经给提供好了，包括登录校验、账号缓存、权限检查... 我们只需把注册的数据上传到我们的数据库，登录的时候再去数据库校验。

这里设定了两种身份，admin 和 其他身份展现的内容不一样，admin有所有权限。

用v-show实现 。但其实使用 v - if 在这种环境更合适 ，因为当 v - show 是false时，是加了一个 display ：none 。元素还是在的，只是看不到了。 v - if 的话，当是 false 直接把元素销毁了，true的时候在重新创建 ，如果v - if 需要在true 和 false 变化很频繁的话这就很消耗性能。   

这里提醒一下大家Fantasic - admin 对axios封装了一个 api ，使用方式还是一样的，比如 api.get。 但是它对所有请求数据进行了一个拦截检查,注意src/api/index.js 里面有一个全局拦截。

Fanstic - admin 定义的标准返回格式为：{ status: 1, error: '', data: '' }

如果你后端返回的格式是{ code ：1，data：} ，经过拦截的时候你没有status，则status肯定不会 1 ，它就认为这是一个错误返回，你的 api.get(' X X') .then(res = > { }) 里面的res就没有值。

这里折磨我挺久。

下面图我已经换成我习惯的返回格式。

下面贴上我前端处理登录的方法 ，和后端接收的方法 。

@RestController
@RequestMapping("/login")
@CrossOrigin
public class Login {
    @Autowired
    private BackstageUserServiceInterface userServiceInterface;

    @RequestMapping
    public R<String> login(@RequestBody BackstageUser user) {
        LambdaQueryWrapper<BackstageUser> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(BackstageUser::getAccount, user.getAccount());
        BackstageUser one = userServiceInterface.getOne(wrapper);
        if (one == null) {
            return R.error("该手机号未注册！");
        } else {
            if (user.getPassword().equals(one.getPassword()) ) {
                return R.success("登录成功！");
            } else {
                return R.error("密码错误！");
            }
        }
    }
}

function handleLogin() {
    if (loginForm.value.account == 'admin' || loginForm.value.account == 'test') {
        loading.value = true
        userStore.login(loginForm.value).then(() => {
            loading.value = false
            if (loginForm.value.remember) {
                localStorage.setItem('login_account', loginForm.value.account)
            } else {
                localStorage.removeItem('login_account')
            }
            localStorage.setItem('account', loginForm.value.account)
            router.push(redirect.value)
        }).catch(() => {
            loading.value = false
        })
    } else {

        proxy.$refs.loginFormRef.validate(valid => {
            if (valid) {
                api.post('login', loginForm.value).then(res => {
                    if (res.code == 1) {
                        loading.value = true
                        userStore.login(loginForm.value).then(() => {
                            loading.value = false
                            if (loginForm.value.remember) {
                                localStorage.setItem('login_account', loginForm.value.account)
                            } else {
                                localStorage.removeItem('login_account')
                            }
                            ElMessage({
                                message: res.data,
                                type: 'success'
                            })
                            setTimeout(router.push(redirect.value), 1000)
                        }).catch(() => {
                            loading.value = false
                        })
                    } else {
                        ElMessage({
                            message: res.data,
                            type: 'error'
                        })
                    }
                })

            }
        })
    }

}

 2.首页  没什么特别的，我觉得比较好看的就是加了一个 transform 样式，在鼠标接触到的时候有一个3D感觉。

.head:hover {

    transform: translateY(-2px) scale(1.01);

    box-shadow: 0 14px 24px rgb(0 0 0 / 20%);

    border-radius: 10px;

}

3.列表 使用的 el-table 也没有任何讲的

 

4.数据统计功能，主要使用了echarts，实现还是很简单。对于echarts的使用看我这篇博客 vue3中使用echart的两种引入方式，以及需要注意的事项。https://blog.csdn.net/qq_61672548/article/details/125746240?spm=1001.2014.3001.5501