五、登录页面开发-五八三

前言

前面已经完成了一些基础的配置，接下来开始进入真正的开发阶段。开发过程中会涉及到一些其它插件的集成，这里用到什么就记录一下使用的心得体会。

1. 清除初始化时自动生成的一些组件

assets 文件夹下的 base.css、main.css
components 文件夹下的所有文件
stores 文件夹下的所有文件
views 文件夹下的所有文件
main.ts 文件里 import './assets/main.css' 删除引用
App.vue 内容全部删除，修改为下面内容

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<template>
  <RouterView />
</template>
<style scoped></style>

TIPS: 删除完之后，tsconfig.app.json 可能会爆红, 提示说在检测中没有找到 xxxx.vue 文件，这个其实我们已经删掉了，没找到是正常的，找到 components.d.ts 这里是一些全局组件类型定义的地方，发现这里依然引用了我们删除的组件进行类型定义，把这些删除掉，然后重启一下 vscode 就可以了。

2. 构建登录页面

这里需要交代一下，项目里的文件命名规则，以及文件结构，views下存放所有业务相关的页面，根据不同逻辑，分为不同的文件夹，页面组件的命名方式为首字母大写驼峰式命名，并且必须为 2 个单词以上组成。比如我这里的登录页面，对应的就是 views/login/LoginPage.vue。我见过还有一种方式是通过文件夹区分逻辑，所有的页面都命名为 index.vue，这种方式就是 views/login/index.vue。我觉得这种方式不太好的地方在于，全部叫 index.vue，虽然组件名称短了，但是可读性较差。我更倾向于第一种，单词长点无所谓，清晰最重要。

2.1 创建 `LoginPage.vue` 文件

图片.png

<script setup lang="ts"></script>
<template>
  <div>登录页</div>
</template>
<style scoped lang="scss"></style>

2.2 配置路由

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。官方脚手架已经帮我们引入了，直接使用就可以了，详情参考官方文档：router.vuejs.org

将默认的配置文件router/index.ts修改成下面内容，直接全选 cv 即可。

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '@/views/login/LoginPage.vue'
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    }
  ]
})

export default router

启动项目，访问可以看到进入了我们的登录页面。

图片.png

3. 编写登录页面

因为是后台管理系统，所以对于样式要求不高，这个就不花太多时间琢磨了，如果想跟着做的直接复制我的就行。

这里补充一下: 后续会用到一些图标，这里使用 element-plus 带的 ICON

下载依赖

npm install @element-plus/icons-vue

修改 main.ts

// main.ts


// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'


const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

3.1 创建登录用户对象

// 登录用户对象


export interface LoginData {

  username: string

  password: string

}

3.2 页面样式编写

这里就是一些基础性代码，样式编写加一些表单数据绑定，校验等。为了文章看起来不那么乱，我把完整代码贴在最后面了。

3.3 请求获取信息

在 api 目录下新建 user.ts 用来定义用户相关接口请求, 再新建 index.ts 导出所有请求模块。

// user.ts
import type { Token } from '@/types/data'
import type { LoginData, UserInfo } from '@/types/user'
import request from '@/utils/request'


/**
 * 登录
 */
export const login = (data: LoginData) => {
  return request<Token>({
    method: 'POST',
    url: '/login',
    data: { ...data }
  })
}

定义mock数据

export default [
  // 用户登录
  {
    url: '/api/login',
    method: 'POST',
    response: (req: Req<LoginData>) => {
      const { username, password } = req.body
      if (username === 'admin' && password === 'admin123') {
        return {
          code: 20000,
          success: true,
          message: '请求成功。',
          data: <Token>{
            accessToken:"123safsfw35345241223"
          }
        }
      } else {
        return {
          code: 50000,
          success: true,
          message: '用户名或密码错误。',
          data: {}
        }
      }
    }
  }
]