前言

喜欢的朋友可在抖音、小红书、微信公众号、哔哩哔哩搜索“淼学派对”。知乎搜索“编程淼”。

前端架构

Toubu.ets

import router from '@ohos.router' @Component export struct Header{   build(){   //   标题部分     Row({space:5}){       Image($r('app.media.fanhui'))         .width(20)         .onClick(() =>{           router.back()         })       Blank()       Image($r('app.media.shuaxin'))         .width(30)     }     .width('98%')     .height(30)   } }

Index.ets

import  axios  from '@ohos/axios' import router from '@ohos.router' @Entry @Component struct Index {   // 上传数据   @State zhanghao: string = ''   @State mima: string = ''   @State zhanghao_find:string =''   @State mima_find:string =''    build() {       Column() {         Text('龙年千帆启鸿蒙')           .margin({top:70})           .fontWeight(FontWeight.Bold)           .fontSize(30)         Image($r('app.media.icon'))           .width(150)           .margin({top:50,bottom:20})         // 账号登录         TextInput({placeholder:'账号'})           .margin(20)           .height(50)           .onChange(value =>{             console.log(value)             this.zhanghao_find = value           })           .backgroundColor('#36D2')         TextInput({placeholder:'密码'})           .margin({left:20,right:20,bottom:25})           .height(50)           .onChange(value =>{             console.log(value)             this.mima_find = value           })           .backgroundColor('#36D2')         Button('登录')           .width(200)           .onClick(()=>{             axios({               method: "get",               url: 'http://localhost:3000/find/'+this.zhanghao_find+ '/' + this.mima_find,             }).then(res => {               // console.info('result:' + JSON.stringify(res.data));               console.info('result:' + JSON.stringify(res.data));                 router.pushUrl({                   url: 'pages/NewApp_one',                 })             }).catch(error => {               console.error(error);             })           })         Row(){           Text('注册')             .margin({right:5})             .onClick( () =>{               {                 router.pushUrl({                   url: 'pages/zhuce',                 })               }             })           Text('|')           Text('忘记密码')             .margin({left:5})             .onClick( () =>{               {                 router.pushUrl({                   url: 'pages/WangjiMima',                 })               }             })         }.margin(20)       }       .width('100%')     .height('100%')   } }

NewApp_one.ets

@Entry @Component struct NewApp_one {   @State message: string = 'app主页'    build() {     Row() {       Column() {         Text(this.message)           .fontSize(50)           .fontWeight(FontWeight.Bold)       }       .width('100%')     }     .height('100%')   } }

WangjiMima.ets

import { Header } from '../components/Toubu' import  axios  from '@ohos/axios' import router from '@ohos.router' @Entry @Component struct Index {   // 上传数据   @State zhanghao: string = ''   @State mima: string = ''    build() {     Column() {       Header()         .margin(20)       TextInput({placeholder:'原账号'})         .margin(20)         .height(50)         .onChange(value =>{           console.log(value)           this.zhanghao = value         })         .backgroundColor('#36D2')       TextInput({placeholder:'新密码'})         .margin({ left:20,right:20,bottom:20 })         .height(50)         .onChange(value =>{           console.log(value)           this.mima = value         })         .backgroundColor('#36D2')       Button('修改密码')         .width(200)         .onClick(()=>{           axios({             method: "post",             url: 'http://localhost:3000/upd',             data:{               zhanghao:this.zhanghao,               newmima:this.mima             },           }).then(res => {             console.info('result:' + JSON.stringify(res.data));             {               router.pushUrl({                 url: 'pages/NewApp_one',               })             }           }).catch(error => {             console.error(error);           })         })     }     .width('100%')     .height('100%')   } }

zhuce.ets

import { Header } from '../components/Toubu' import  axios  from '@ohos/axios' import router from '@ohos.router' @Entry @Component struct Index {   // 上传数据   @State zhanghao: string = ''   @State mima: string = ''   @State zhanghao_find:string =''   @State mima_find:string =''    build() {     Column() {       Header()         .margin(20)       TextInput({placeholder:'注册账号'})         .margin(20)         .height(50)         .onChange(value =>{           console.log(value)           this.zhanghao = value         })         .backgroundColor('#36D2')       TextInput({placeholder:'注册密码'})         .margin({ left:20,right:20,bottom:20 })         .height(50)         .onChange(value =>{           console.log(value)           this.mima = value         })         .backgroundColor('#36D2')       Button('注册并登录')         .width(200)         .onClick(()=>{           axios({             method: "post",             url: 'http://localhost:3000/publish',             data:{               zhanghao:this.zhanghao,               mima:this.mima             },           }).then(res => {             console.info('result:' + JSON.stringify(res.data));               router.pushUrl({                 url: 'pages/NewApp_one',               })           }).catch(error => {             console.error(error);           })         })     }     .width('100%')     .height('100%')   } }

后端代码node.js

const express = require('express'); const app = express(); const { users } = require('./db');  app.use(express.urlencoded({ extended: true })); app.use(express.json())  // 注册账号 app.post("/publish", async (req, res) => {     try {         const { zhanghao, mima } = req.body;         await users.create({             zhanghao, mima         });         res.send("success")     } catch (error) {         res.send(error, "error")     } }) // 注销账号 app.post("/del", async (req, res) => {     console.log(req.body.zhanghao)     try {         const { zhanghao } = req.body;          // 使用 deleteOne 删除指定 name 的数据         const result = await users.deleteOne({ zhanghao });          if (result.deletedCount === 1) {             res.send("success");         } else {             res.send("未找到匹配的记录");         }     } catch (error) {         res.send(error, "error");     } }) // 修改账号密码 app.post("/upd", async (req, res) => {     try {         const { zhanghao, newmima } = req.body;         // 使用 updateOne 更新指定 name 的数据记录的 nianling 字段         const result = await users.updateOne({ zhanghao }, { $set: { mima: newmima } });         res.json({ message: "密码更新成功！", result });     } catch (error) {         res.status(500).json({ error: error.message });     } });  // 账号登录 app.get("/find/:zhanghao/:mima", async (req, res) => {     try {         const zhanghao = req.params.zhanghao;         const mima = req.params.mima;          // 使用 find 查询所有匹配指定 name 的数据记录         const results = await users.find({ zhanghao, mima });          if (results.length > 0) {             // 如果找到匹配的记录，则返回所有匹配的记录             res.json({ data: results, message: "登录成功！" });         } else {             res.status(404).json({ message: "未找到匹配的记录" });         }     } catch (error) {         res.status(500).json({ message: "服务器内部错误" });     } });   app.listen(3000, () => {     console.log('server running') })

效果图