【二】用Vue3+Typescript+nodejs实现个人信息模块_vue个人信息页面

前言

上一篇文章完成了登录模块的开发设计，接下来就开始个人信息模块的开发设计。登录模块将每个使用者的登录记录分隔开来，登录的账号可以保存使用者的个人信息，个人信息存放在个人信息模块进行管理。个人信息收集使用者的一些基础信息用于展示或者其他用途，下面主要收集个人头像、昵称、性别信息用于展示。

环境搭建和项目初始化可以参照上一篇文章【一】用Vue3+Typescript+nodejs完成一个功能完整的登录系统

项目结构

前端结构

workbench/
├── src/
│   ├── api/
│   ├── ├── index.ts
│   ├── ├── login.ts
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── ├── index.ts
│   ├── stores/
│   ├── ├── info.ts
│   ├── views/  
│   ├── ├── Forgot/
│   ├── ├── ├── ForgotView.vue
│   ├── ├── Home/
│   ├── ├── ├── HomeView.vue
│   ├── ├── Login/
│   ├── ├── ├── LoginView.vue
│   ├── ├── Person/
│   ├── ├── ├── PersonView.vue
│   ├── ├── Register/
│   ├── ├── ├── RegisterView.vue
│   ├── App.vue  
│   ├── main.ts 
├── package.json
├── .gitignore
├── vite.config.ts
├── README.md

后端结构

benchserve/
├── src/
│   ├── common/
│   ├── data/
│   ├── models/
│   ├── ├── email.js
│   ├── ├── index.js
│   ├── ├── Personal.js
│   ├── router/
│   ├── ├── Personal.js
│   ├── index.js
├── package.json
├── .gitignore
├── README.md

前端功能开发

页面开发

• 创建个人信息页面：views/Person/PersonView.vue

• 编写主页面工作台：views/Home/HomeView.vue

当前页面仅画好布局，后续会一直在工作台页面新增功能模块

路由配置

• 添加路由：router/index.ts

{
    path: '/personage',
    name: 'Person',
    component: () => import('@/views/Person/PersonView.vue')
}

• 添加一个store用于缓存登录信息，便于在其他地方使用：stores/info.ts

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
​
export const useInfoStore = defineStore('info', () => {
  const info = ref({})
  const getInfo = computed(() => info.value)
  function setInfo(value: object) {
    info.value = value
  }
​
  return { info, getInfo, setInfo }
})

后端功能开发

数据库配置

• 在创建数据表的语句中添加新增字段：models/Personals.js

this.db = new sqlite.Database('data/data.db', () => {
    console.log('数据库打开成功')
    this.db.run('CREATE TABLE IF NOT EXISTS personal (id INTEGER PRIMARY KEY AUTOINCREMENT, email VARCHAR, password VARCHAR, imgUrl VARCHAR, name VARCHAR,sex VARCHAR)');
})

• 通过splite数据库工具手动添加新增字段，这里推荐使用sqlite studio

资源上传配置

• 在根目录下创建一个public目录并将其指定为资源文件存储目录

mkdir public

• 配置资源跨域访问

app.use(express.static(path.join(__dirname, 'public')))

项目运行

前端部分

npm run dev

后端部分

npm run start

后续

以上便是个人信息模块的简易开发流程，涉及的信息并不会很多，在后续如果有其他必要的个人信息，会再加入其中，丰富个人信息模块的完整性。

下一章：备忘录模块