vue个人信息修改_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 

后续

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

下一章：备忘录模块