前言
喜歡的朋友可在抖音、小紅書(shū)、微信公眾號(hào)、嗶哩嗶哩搜索“淼學(xué)派對(duì)”。知乎搜索“編程淼”。
前端架構(gòu)
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-842956.html
Toubu.ets
import router from '@ohos.router'
@Component
export struct Header{
build(){
// 標(biāo)題部分
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 {
// 上傳數(shù)據(jù)
@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})
// 賬號(hào)登錄
TextInput({placeholder:'賬號(hào)'})
.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('注冊(cè)')
.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主頁(yè)'
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 {
// 上傳數(shù)據(jù)
@State zhanghao: string = ''
@State mima: string = ''
build() {
Column() {
Header()
.margin(20)
TextInput({placeholder:'原賬號(hào)'})
.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 {
// 上傳數(shù)據(jù)
@State zhanghao: string = ''
@State mima: string = ''
@State zhanghao_find:string =''
@State mima_find:string =''
build() {
Column() {
Header()
.margin(20)
TextInput({placeholder:'注冊(cè)賬號(hào)'})
.margin(20)
.height(50)
.onChange(value =>{
console.log(value)
this.zhanghao = value
})
.backgroundColor('#36D2')
TextInput({placeholder:'注冊(cè)密碼'})
.margin({ left:20,right:20,bottom:20 })
.height(50)
.onChange(value =>{
console.log(value)
this.mima = value
})
.backgroundColor('#36D2')
Button('注冊(cè)并登錄')
.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())
// 注冊(cè)賬號(hào)
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")
}
})
// 注銷賬號(hào)
app.post("/del", async (req, res) => {
console.log(req.body.zhanghao)
try {
const { zhanghao } = req.body;
// 使用 deleteOne 刪除指定 name 的數(shù)據(jù)
const result = await users.deleteOne({ zhanghao });
if (result.deletedCount === 1) {
res.send("success");
} else {
res.send("未找到匹配的記錄");
}
} catch (error) {
res.send(error, "error");
}
})
// 修改賬號(hào)密碼
app.post("/upd", async (req, res) => {
try {
const { zhanghao, newmima } = req.body;
// 使用 updateOne 更新指定 name 的數(shù)據(jù)記錄的 nianling 字段
const result = await users.updateOne({ zhanghao }, { $set: { mima: newmima } });
res.json({ message: "密碼更新成功！", result });
} catch (error) {
res.status(500).json({ error: error.message });
}
});
// 賬號(hào)登錄
app.get("/find/:zhanghao/:mima", async (req, res) => {
try {
const zhanghao = req.params.zhanghao;
const mima = req.params.mima;
// 使用 find 查詢所有匹配指定 name 的數(shù)據(jù)記錄
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: "服務(wù)器內(nèi)部錯(cuò)誤" });
}
});
app.listen(3000, () => {
console.log('server running')
})效果圖
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-842956.html
到了這里，關(guān)于arkTS開(kāi)發(fā)鴻蒙OS應(yīng)用（登錄頁(yè)面實(shí)現(xiàn)，連接數(shù)據(jù)庫(kù)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
