018 登录页-账号的登录逻辑和登录状态保存

在service文件夹中新建login和main文件夹

 可以看到request和config这两个文件夹是我们自己封装的一些东西

而这里的login和main文件夹是一个模块

 

 看我们页面示图views这个文件夹，里面包括一个login和main文件夹，结合上面我们 新建立的ervice文件夹中的login和main文件夹 ，不难看出login和main这两个文件夹是对应关系

 

 所以，我们在store中也可以这样建立一个login和main文件夹

 可以看出这三个login文件夹，是刚好对应的

 

甚至将在注册动态路由的话

动态路由里面

也是新建一个login和main文件夹

 这种架构一清二楚，对应的页面views就有对应的store，对应的store有对应的service，对应的service有对应的router

当你的页面非常多，你这样组织你的页面就不会乱

 

现在我们进入service里面的login里面，在这个里面给他封装一些网络请求

新建文件login.ts(或者index.ts)

 这个页面这样写

 

 import hyRequest from '..' 是 JavaScript（尤其是在使用 ES6 模块语法或者 TypeScript 项目里）用于导入模块的语句。

1. import

这是 ES6 引入的关键字，用于从其他模块中导入功能。借助 import 语句，能够在一个文件里使用另一个文件中导出的变量、函数、类等。

2. hyRequest

这是要导入的模块的名称或者变量名。通常，被导入模块会使用 export 关键字将某些内容导出，然后在导入时可以用特定的名称来引用这些导出的内容。

3. from '..'

from 是 import 语句里的一部分，用于指定要导入的模块的来源。'..' 代表上级目录，意味着要从当前文件所在目录的上一级目录中查找要导入的模块。

 

这段 TypeScript 代码定义并导出了一个名为 accountLoginRequest 的函数，其主要功能是发起一个 HTTP POST 请求用于账户登录操作。下面为你详细解析代码各部分的含义。

1. export

export 是 ES6 引入的关键字，其作用是将函数 accountLoginRequest 导出，如此一来，该函数就可以在其他模块中被引入和使用，有助于实现模块化开发，提高代码的可维护性和复用性。

2. function accountLoginRequest(account: any)

• function：用于声明一个函数。
• accountLoginRequest：函数的名称，从命名可推测该函数与账户登录请求相关。
• (account: any)：函数的参数列表，接收一个名为 account 的参数。any 是 TypeScript 中的类型注解，意味着该参数可以是任意类型。不过在实际开发中，为增强代码的健壮性和可维护性，建议使用更具体的类型来替代 any。

3. return hyRequest.post({ ... })

• return：表明函数将返回一个值，这里返回的是 hyRequest.post 方法的调用结果。
• hyRequest：这是一个自定义的 HTTP 请求工具实例，通常是对常见的 HTTP 请求库（如 axios）进行封装后得到的，用于发起 HTTP 请求。
• post：hyRequest 对象的一个方法，用于发起 HTTP POST 请求。POST 请求一般用于向服务器提交数据，在处理用户登录、注册、提交表单等场景中较为常用。
• { url: '/login', data: account }：这是传递给 post 方法的配置对象，包含了请求的相关信息：
  • url: '/login'：指定请求的目标路径，通常结合 hyRequest 实例的基础 URL 来确定完整的请求地址。
  • data: account：将 account 作为请求体数据发送给服务器，一般包含用户登录所需的信息，如用户名和密码等。

 

这里这样写

 

1. import

这是 ES6 引入的关键字，用于从其他模块中导入功能。通过 import 语句，开发者可以在一个文件中使用另一个文件中导出的变量、函数、类等。

2. { accountLoginRequest }

这是解构导入的语法。它表明你要从指定模块中导入名为 accountLoginRequest 的导出项。如果 @/service/login/login 模块导出了多个内容，你可以在大括号中列出多个导出项名称，用逗号分隔，例如 import { accountLoginRequest, anotherFunction } from '@/service/login/login';。

3. from

这是 import 语句中的一部分，用于指定要导入的模块的来源。

4. '@/service/login/login'

这是模块的路径。@ 通常是在项目配置中定义的别名，它一般指向项目的根目录。在很多前端项目（如 Vue、React 等）中，为了避免使用相对路径时出现复杂的层级问题，会使用别名来简化模块导入。所以 @/service/login/login 实际上可能指向项目根目录下的 service/login/login 文件或文件夹（具体取决于项目配置）。

 

这里这样写

 

1. accountLoginRequest({ name, password })

• accountLoginRequest：这是一个函数，通常用于处理账户登录请求的逻辑，可能会发送一个 HTTP 请求到服务器进行身份验证。
• { name, password }：这是一个对象字面量，使用了 ES6 的对象属性简写语法。如果在当前作用域中已经定义了 name 和 password 变量，那么这个对象就会包含这两个变量的值作为属性。

2. .then(res => { ... })

• .then：这是 JavaScript 中 Promise 对象的一个方法。accountLoginRequest 函数通常会返回一个 Promise 对象，Promise 是一种用于处理异步操作的对象，它可以表示一个操作尚未完成，但最终会有一个结果（成功或失败）。
• res => { ... }：这是一个箭头函数，作为 then 方法的回调函数。res 是 Promise 对象成功解决（resolved）时传递过来的结果。当 accountLoginRequest 函数的异步操作成功完成后，会调用这个回调函数，并将结果作为参数传递给它。

3. console.log(res);

在回调函数内部，使用 console.log 方法将 res 打印到控制台，这样你就可以查看登录请求返回的结果。

 

 

这个页面只要这些内容

 我们来简单的写一个后端

 

 

这里把网址放过来

 看看效果

 

 

登入成功会拿到一些数据我们放到pinia里面

pinia里面对应的store文件夹里面

所以我们在store里面新建文件login.ts

 

这个页面这样写

 

这段代码是使用 Pinia（一个用于 Vue 的状态管理库）来定义一个名为 login 的状态存储（store），下面为你详细解释每部分的含义：

1. 导入模块：
   • import { defineStore } from 'pinia'：这行代码从 pinia 库中导入 defineStore 函数。defineStore 是 Pinia 提供的一个关键函数，用于创建状态存储。
2. 定义状态存储：
   • const useLoginStore = defineStore('login', {... })：使用 defineStore 函数创建一个名为 login 的状态存储，并将其赋值给 useLoginStore 常量。defineStore 函数接受两个参数：
     • 第一个参数 'login' 是存储的唯一标识符（字符串类型）。在整个应用中，这个标识符用于识别和管理该存储。它在 Pinia 的内部机制中用于查找和操作对应的状态存储。
     • 第二个参数是一个对象，包含了存储的配置信息。在这个对象中，最主要的属性是 state。
3. 定义状态：
   • state: () => ({... })：state 是 Pinia 存储配置对象中的一个属性，它是一个函数，返回一个包含初始状态的对象。在这个例子中：
     • id: ''：定义了一个名为 id 的状态，初始值为空字符串。
     • name: ''：定义了一个名为 name 的状态，初始值为空字符串。
     • token: ''：定义了一个名为 token 的状态，初始值为空字符串。这些状态通常用于存储与登录相关的信息，比如用户的 ID、用户名和身份验证令牌。
4. 导出状态存储：
   • export default useLoginStore：将创建好的 useLoginStore 函数导出，以便在其他组件或文件中导入和使用。在 Vue 应用中，其他组件可以通过导入这个函数来访问和修改 login 存储中的状态。

 

拿到数据有两种方式

第一种就是，在这里拿到数据，然后把结果塞进上面的图里面

 

第二种是，在这里发送网络请求，因为我们的pinia里面的store里面本来就是在actions里面支持异步操作的，所以没有必要在组件里面发送网络请求，在把组件从网络请求里面拿出来在赛道store里面，干脆在这里直接封装一个actions

• actions: {... }：actions 是 Pinia 存储配置对象中的另一个属性，它是一个对象，包含了一系列方法，用于修改状态或执行其他与业务逻辑相关
的操作。
• loginAccountAction(account: any) {}：定义了一个名为 loginAccountAction 的方法，该方法接受一个参数 account（类型注解为 any，表示可以是任意类型，实际开发中建议使用更具体的类型）。目前这个方法的函数体为空，在实际应用中，这个方法可能会包含与登录相关的逻辑，比如调用 API 进行身份验证，然后根据结果更新 state 中的 id、name 和 token 等状态。

所以我们不需要在这里发送网络请求，而只需要在这里发起一个我们对应的Action就可以了

所以我们在这里拿到我们的loginStore来一个useLoginStore（）

 

么有提示我们自己来写一个

 

顺便把

import { accountLoginRequest } from '@/service/login/login'放到这里面来

 然后在这里调用这个方法，把name, password传进去

 传进去之后在这里拿到东西，所以发送网络请求我们在这里发送就可以了，甚至可以在这里搞一个async（异步请求）

 

这段代码是在 Pinia 状态管理库定义的 store 中的 actions 部分，定义了一个名为 loginAccountAction 的异步方法，主要功能是调用 accountLoginRequest 函数进行账户登录操作，并处理返回的结果。

1. actions 部分：
   在 Pinia 中，actions 是存储（store）配置对象的一个属性，它是一个对象，里面包含了一系列方法。这些方法用于处理业务逻辑，可以修改 state 中的状态值，也可以进行异步操作（如发起网络请求等）。
2. async loginAccountAction(account: any) 方法定义：
   • async 关键字：表示这是一个异步方法，意味着该方法内部可以使用 await 关键字来等待异步操作的完成。
   • loginAccountAction：方法的名称，从命名来看，它应该是用于处理账户登录相关的操作。
   • account: any：方法的参数，类型注解为 any 表示可以接受任意类型的数据。在实际应用中，这个参数通常会是包含用户名、密码等登录信息的对象。
3. 方法内部逻辑：
   • const loginResult = await accountLoginRequest(account)：
     • await 关键字用于暂停当前异步函数的执行，直到 accountLoginRequest(account) 这个异步操作完成（例如，一个网络请求返回响应）。
     • accountLoginRequest 是一个函数调用，传入了 account 参数。这个函数很可能是一个用于发起账户登录请求的函数，比如向服务器发送包含登录信息的请求，并返回一个 Promise 对象（因为使用了 await，所以可以推断它返回的是 Promise）。执行完成后，将返回的结果赋值给 loginResult 变量。
   • console.log(loginResult)：将 loginResult（即登录请求的返回结果）打印到控制台，以便开发者查看登录请求是否成功以及返回了哪些数据。

我们来看看效果

 可以看到有结果

 

现在我们来把结果保存到我们对应的结果保存到对应store上面这里这个地方了

所以这里我们就可以这样做了

 

就会保存在我们的pinia当中就是相当于保存在我们的内存当中，二内存当中我们这里一刷新他就不存在了，数据就没有了。但是真是的使用中就可以刷新使用，下次说。今天这是基本的