vue-element-plus-admin框架详解

service.ts统一拦截报错

携带token去请求后端接口

我这里把token存储到本地了,用的时候取出来用就可

登录界面按回车键登录

登录界面验证码的页面展示、点击刷新。

页面一进来就让验证码显示出来

绑定方法oncaptch点击刷新验证码

注意:我这里是把验证码和key存到了pinia里面,请读者注意辨别

列表中图片的显示

图片上传,且只能上传一张图片,覆盖上一个图片

fileToBlob是我自己定义的一个方法,下面是实现代码

mingyang:这是一个变量,你写成啥都行,我这里有些小小的不规范

列表中新增和修改

我这里主要是展示新增和修改咋样不一样,这样做表单验证容易一点,内容我就不展示了

自定义表单验证

post和put请求中出现options请求

这块你只要保证你自己的请求方式正确,get请求能执行,那就是后端的问题了,后端加上一段代码就可以了

好像是这段代码:后端应该知道

Access-Control-Allow-Methods: GET,POST,OPTIONS,PUT,DELETE

后端生成路由,前端渲染

后端生成数组,前端把他变成二维数组

我这里我没用他原来的,我自己修改了一下,他生成路由树,要是先有二级菜单的话,会有问题,这是测试环境发现的。

注意注意!

当你二级路由在一级路由下只有一个时,就不会出现一级路由,所以大家不用调了!!!!!

后续我遇到我在更新整篇文章!!!

  • 20
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-element-plus-admin是一个集成了Vue3全家桶和element-plus的后台管理系统。它使用了最新的Vue技术栈,包括Vue3、Vite、Vue-router 4、Pinia、element-plus和tailwindcss。这个项目的目的是为了方便开发者理解其他代码,并在开发自己的前端项目时进行参考。\[1\] 如果你想使用vue-element-plus-admin,你可以通过克隆项目的方式获取代码,使用命令`git clone https://github.com/mh185/vue3-elementPlus-admin.git`。然后进入项目目录,安装依赖项`npm install`。你可以使用`npm run dev`命令来运行项目,使用`npm run build`命令来构建项目。\[2\] 另外,还有一个类似的项目叫做element-plus-admin,它的地址是https://gitee.com/kailong110120130/vue-element-plus-admin。你可以将这个项目克隆下来,并将其整合到你的开发平台中。你可以将前端项目放在后端项目的根目录下,作为整个工程项目的一个模块。这样做的好处是在架构上实现了前后端的分离,但对于一个功能来说,前后端可以一起开发,从Git的提交和开发模式上都更加完整。\[3\] 总之,vue-element-plus-admin是一个使用Vue3和element-plus构建的后台管理系统,它提供了丰富的功能和组件,可以作为开发自己前端项目的参考。你可以通过克隆项目的方式获取代码,并根据需要进行安装和运行。 #### 引用[.reference_title] - *1* [element-plus-admin源码剖析](https://blog.csdn.net/weixin_30230009/article/details/124138774)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue3-elementPlus-admin](https://blog.csdn.net/weixin_50422141/article/details/124709356)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue-element-plus-admin整合后端实战——实现系统登录、缓存用户数据、实现动态路由](https://blog.csdn.net/seawaving/article/details/129766205)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值