随笔分类 -  TypeScript开发实战

1 2 下一页
034 登入页，帐号的登录逻辑和登录状态保存
摘要：表格的分配 项目目录分配 阅读全文
posted @ 2025-05-19 09:07 张筱菓 阅读(3) 评论(0) 推荐(0)
029 main 页面-main页面整体布局
摘要：所有组件的名字用小写 我们需要用到的组件时这个 我们这次用这个布局 把这个代码注释掉 都注释掉 把代码复制到这里来 <template> <div class="common-layout"> <el-container> <el-aside width="200px">Aside</el-asid 阅读全文
posted @ 2025-04-03 17:57 张筱菓 阅读(14) 评论(0) 推荐(0)
json to typescript
摘要：搜索 ：json to typescript 点击第一个，进去把json放进去右边就会出现对应的ts语法 阅读全文
posted @ 2025-04-03 16:14 张筱菓 阅读(39) 评论(0) 推荐(0)
028 登录功能-获取登录用户的详细信息
摘要：一、1、登录接口 *token/id(用户id)/name 2、是什么角色？ *获取角色 *根据id获取用户的详情信息（看公司的接口文档） 3、是什么权限？ *根据角色获取权限 二、RBAC 用户表：张三、李四...(与角色一对一) 角色表：管理员、超级管理员、员工... 权限表：用户管理菜单、商品 阅读全文
posted @ 2025-03-27 08:19 张筱菓 阅读(13) 评论(0) 推荐(0)
027 权限控制的系统设计（RBAC设计方案）
摘要：一、权限管理：根据登录用户的不同，呈现不同的后台管理系统内容（具备不同的操作权限） RBAC数据库 ：role based access control（基于角色的访问控制） 二、用户可以登录到后台管理系统中： eg： 总裁办：1总裁 3副总裁 研发部：1CTO 3项目主管 10程序员 运营部：1主 阅读全文
posted @ 2025-03-26 21:15 张筱菓 阅读(35) 评论(0) 推荐(0)
026 登录页-手机登录搭建-volar警告消除
摘要：这里什么也不写，把res删除 2、这样写 3、看看效果 阅读全文
posted @ 2025-03-26 20:55 张筱菓 阅读(8) 评论(0) 推荐(0)
025 登录页-记住密码的功能实现
摘要：这个页面这样写 这个页面这样写 这里定义两个常量 这里用常量代替 记住密码的勾选这样写 阅读全文
posted @ 2025-03-26 18:49 张筱菓 阅读(18) 评论(0) 推荐(0)
024 登录页-main退出登录功能的实现
摘要：这个页面这样写 一、　用于创建一个按钮并绑定一个点击事件处理函数。以下是对这段代码的详细解释： <button> 标签：这是 HTML 中的按钮元素，用于在页面上显示一个可点击的按钮。 @click 指令：在 Vue.js 中，@click 是一个事件绑定指令，它用于监听按钮的点击事件。@ 是 v- 阅读全文
posted @ 2025-03-26 16:22 张筱菓 阅读(110) 评论(0) 推荐(0)
023 登录页-登陆成功后的路由导航守卫
摘要：1、登入之后跳转页面，这样写 把这里名字改成如图所示的名字 这样就实现了点击登录时候跳转页面的功能了。 这里还需要做一个判断，判断用户是否登录？登录：main。未登录：login。 新建文件 把这里的这句话放到新建的文件里（把这个常量定义到这里来） 这样写 然后这个页面引入 这个页面这样写 自动引入 阅读全文
posted @ 2025-03-26 14:30 张筱菓 阅读(16) 评论(0) 推荐(0)
022 内容回顾
摘要：一. Element-Plus 集成1.1. 全局引入1.2. 按需引入 vite 插件配置 1.3. 图标的引入1.4. ElMessage 引入 二。搭建登录页面2.1. 背景的搭建 100vw/vh2.2. 登录界面 Panel2.2.1. 整体界面的搭建 标题 tabs 记住密码 / 忘记链 阅读全文
posted @ 2025-03-25 22:24 张筱菓 阅读(14) 评论(0) 推荐(0)
021 本地缓存和缓存工具的封装
摘要：1、永久的保留token信息 用两个东西 localStorage sessionStorage 第二句 localStorage localStorage 是浏览器提供的一种用于在客户端本地存储数据的对象。它允许网页以键值对的形式保存数据，并且这些数据会一直保留在用户的浏览器中，除非被主动删除，即 阅读全文
posted @ 2025-03-25 20:24 张筱菓 阅读(50) 评论(0) 推荐(0)
020 接口文档和postman工具
摘要：1、搜索postman 2、网址：https://www.postman.com/ 3、点击这里 4、点这里 5、等待下载 6、打开所在文件夹 7、双击文件 8、会打开，提示这个 使用 Postman 简化 API 交互 输入你的工作邮箱你的工作邮箱便于你与团队成员协作。 创建免费账户 已有账户？登 阅读全文
posted @ 2025-03-25 20:22 张筱菓 阅读(131) 评论(0) 推荐(0)
019 登入页-IAccout对象类型的定义位置和方式
摘要：1、对类型做一些限制，这里我们对对象类型做一些限制 还有一个就是我们调用这里的时候 按着Ctrl点击这里，会弹出，这里这样写 相当于我们可以直接在这里给这个弄一个泛型 这样写 这段代码使用 TypeScript 定义了一个名为 IAccount 的接口（Interface），下面为你详细解释： 整体 阅读全文
posted @ 2025-03-21 15:47 张筱菓 阅读(15) 评论(0) 推荐(0)
018 登录页-账号的登录逻辑和登录状态保存
摘要：在service文件夹中新建login和main文件夹 可以看到request和config这两个文件夹是我们自己封装的一些东西 而这里的login和main文件夹是一个模块 看我们页面示图views这个文件夹，里面包括一个login和main文件夹，结合上面我们 新建立的ervice文件夹中的lo 阅读全文
posted @ 2025-03-20 19:05 张筱菓 阅读(38) 评论(0) 推荐(0)
017登录页-表单的验证和EIMessage样式
摘要：校验规则，这个是在表单内，我们的按钮在表单外面没法用 所以我们自己拿一下 ElForm 代表 ElementPlus 组件库中的表单组件类型。ElementPlus 是基于 Vue 3 开发的一套 UI 组件库，ElForm 组件用于创建表单，提供了表单验证、布局等功能，方便开发者快速搭建表单界面。 阅读全文
posted @ 2025-03-20 19:04 张筱菓 阅读(39) 评论(0) 推荐(0)
016登录页-父组件点击login调用子组件的方法
摘要：在这里加上status-icon，表示根据不同的状态，在右边显示一个小图标 看看效果 这里修改一下 这里这样写 1、这段代码定义了一个名为 loginAction 的 JavaScript 函数，下面为你详细解释其含义： function loginAction() { console.log('p 阅读全文
posted @ 2025-03-20 11:21 张筱菓 阅读(26) 评论(0) 推荐(0)
015账号登录的验证规则配置
摘要：调节框的大小 这样写 看看效果 接下来我们看看 我们来做双向绑定，找到我们需要的 写进来 然后先给表单做一个绑定 item里面通过v-model来绑定account里面的某一个属性 看看效果 接下来我们看看这里 参考这里 这样写 看看效果 我们接着写完 看看效果 阅读全文
posted @ 2025-03-19 20:24 张筱菓 阅读(14) 评论(0) 推荐(0)
014登入页-账号登入Pane的基本搭建
摘要：我们需要的是这个位置的东西 新建文件 这两个页面这样写 单独做一个注册，导入一下，不然的话他会单独做一个自动引入的，像这种东西不要自动引入了，自己来导入吧 这两个位置这样写 看看效果 复制需要的 粘贴到 删掉没用的数据，保存 看看效果 修改一下 这段代码使用了 ElementPlus 组件库创建了一 阅读全文
posted @ 2025-03-19 11:31 张筱菓 阅读(23) 评论(0) 推荐(0)
014 登入页-Element-Plus的图标引入和使用
摘要：1、安装图标 2、使用 这里我们用全局注册的方法 放到这里 现在我们换一种方式 在src文件夹里面 新建文件夹global，都是一些全局的东西（这个就叫全局注册） 新建文件register-icons.ts （注册图标） 这页这样写 这段代码是使用 JavaScript（或可能是 TypeScrip 阅读全文
posted @ 2025-03-18 19:55 张筱菓 阅读(629) 评论(0) 推荐(0)
013 登录页-Panel中间tabs切换
摘要：现在我们来搭建中间这个 可以看到效果 左右都有选项目录，看这里 阅读全文
posted @ 2025-03-18 11:30 张筱菓 阅读(6) 评论(0) 推荐(0)

1 2 下一页