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

最近在做一个关于盲文打印机的项目，需要给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

相关知识

从前端到后端——完整的Web开发指南
Springboot+vue的客户关系管理系统（有报告），Javaee项目，springboot vue前后端分离项目
SpringBoot汽车租赁管理系统1gn16 程序+源码+数据库+调试部署+开发环境 文末可获取，
工厂订单管理系统怎么做
Springboot鲜花售卖管理系统593y6（程序+源码+数据库+调试部署+开发环境）
springboot毕设花卉销售网站源码+论文+部署
基于SpringBoot+Vue的花店管理系统的设计与实现(源码+lw+部署+讲解)
鲜花销售管理系统（源码+开题）
网上花店购物系统的实现与设计.ppt
Java实现鲜花预定系统：Oracle数据库与Spring Boot框架整合实战

网址: 三天快速搭建一个属于自己的管理系统，包括前端、后端、部署上线，超级详细的介绍。 https://www.huajiangbk.com/newsview949308.html