阅读量:0
前言
喜欢的朋友可在抖音、小红书、微信公众号、哔哩哔哩搜索“淼学派对”。知乎搜索“编程淼”。
前端架构
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') })效果图
