前言

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

前端架构

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')

})

效果图

文章链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: