淼学派对
淼学派对

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】

龙年前述

源码获取>文章下方二维码，回复关键字“鸿蒙OS商场源码”

前言

arkTS是华为自己研发的一套前端语言，是在js和ts技术的基础上又进行了升级而成！

本篇文章会带领大家通过arkTS+node.js+mongoDB来完成一个鸿蒙OS版本的商城案例！

技术栈

1.arkTS

2.node.js

3.arkTS UI

4.express

5.mongoDB

技术栈讲解

arkTS

ArkTS是HarmonyOS应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。

面向万物互联时代，华为提出一次开发多端部署、可分可合自由流转、统一生态原生智能三大应用与服务开发理念，针对多设备、多入口、服务可分可合等特性，提供多种能力协助开发者降低开发门槛，同时HarmonyOS与OpenHarmony统一生态。HarmonyOS基于JS/TS语言体系，构建了全新的声明式开发语言ArkTS。除了兼容JS/TS语言生态，ArkTS扩展了声明式UI语法和轻量化并发机制。

ArkTS是HarmonyOS主力应用开发语言。为便于熟悉Web前端的开发者快速上手，HarmonyOS在UI开发框架中，还提供了“兼容JS的类Web开发范式”。它通过模板、样式、逻辑三段式来构建相应的应用UI界面，并结合相应的运行时实现了优化的运行体验。

基本语法

装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。

UI描述：以声明式的方式来描述UI的结构，例如build方法中的代码块。

自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。

系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。

属性方法：组件可以通过链式调用配置多项属性，如fontSize、width、height、backgroundColor等。

事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick。 [4]

声明式UI

创建组件

配置属性

配置事件

配置子组件 [5]

状态管理

状态变量：被状态装饰器装饰的变量，改变会引起UI的渲染更新。

常规变量：没有状态的变量，通常应用于辅助计算。它的改变永远不会引起UI的刷新。

数据源/同步源：状态变量的原始来源，可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。

命名参数机制：父组件通过指定参数传递给子组件的状态变量，为父子传递同步参数的主要手段。示例：CompA: ({ aProp: this.aProp })。

从父组件初始化：父组件使用命名参数机制，将指定参数传递给子组件。本地初始化的默认值在有父组件传值的情况下，会被覆盖。

初始化子节点：组件中状态变量可以传递给子组件，初始化子组件对应的状态变量。示例同上。

本地初始化：变量声明的时候赋值，作为初始化的默认值。示例：@State count: number = 0。 [6]

渲染控制

ArkUI通过自定义组件的build函数和@builder装饰器中的声明式UI描述语句构建相应的UI。在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句以及针对大数据量场景的数据懒加载语句

node.js

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1]让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。

2009年2月，Ryan Dahl在博客上宣布准备基于V8创建一个轻量级的Web服务器并提供一套库。

2009年5月，Ryan Dahl在GitHub上发布了最初版本的部分Node包，随后几个月里，有人开始使用Node开发应用。

2009年11月和2010年4月，两届JSConf大会都安排了Node.js的讲座。

2010年年底，Node获得云计算服务商Joyent资助，创始人Ryan Dahl加入Joyent全职负责Node的发展。

2011年7月，Node在微软的支持下发布Windows版本。

2016年，leftpad事件，Yarn诞生

2021年，发布最新版本Node.js 17 [3]

V8引擎本身使用了一些最新的编译技术。这使得用Javascript这类脚本语言编写出来的代码运行速度获得了极大提升，又节省了开发成本。对性能的苛求是Node的一个关键因素。 Javascript是一个事件驱动语言，Node利用了这个优点，编写出可扩展性高的服务器。Node采用了一个称为“事件循环（event loop）”的架构，使得编写可扩展性高的服务器变得既容易又安全。提高服务器性能的技巧有多种多样。Node选择了一种既能提高性能，又能减低开发复杂度的架构。这是一个非常重要的特性。并发编程通常很复杂且布满地雷。Node绕过了这些，但仍提供很好的性能。

Node采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。向文件系统发送一个请求时，无需等待硬盘（寻址并检索文件），硬盘准备好的时候非阻塞接口会通知Node。该模型以可扩展的方式简化了对慢资源的访问， 直观，易懂。尤其是对于熟悉onmouseover、onclick等DOM事件的用户，更有一种似曾相识的感觉。

虽然让Javascript运行于服务器端不是Node的独特之处，但却是其一强大功能。不得不承认，浏览器环境限制了我们选择编程语言的自由。任何服务器与日益复杂的浏览器客户端应用程序间共享代码的愿望只能通过Javascript来实现。虽然还存在其他一些支持Javascript在服务器端 运行的平台，但因为上述特性，Node发展迅猛，成为事实上的平台。

在Node启动的很短时间内，社区就已经贡献了大量的扩展库（模块）。其中很多是连接数据库或是其他软件的驱动，但还有很多是凭他们的实力制作出来的非常有用的软件。

最后，不得不提到的是Node社区。虽然Node项目还非常年轻，但很少看到对一个项目如此狂热的社区。不管是新手，还是专家，大家都围绕着项目，使用并贡献自己的能力，致力于打造一个探索、支持、分享、听取建议的乐土。

具备书写JavaScript的IDE，普通的记事本也可以进行开发。在几年的时间里，Node.JS逐渐发展成一个成熟的开发平台，吸引了许多开发者。有许多大型高流量网站都采用Node.JS进行开发，此外，开发人员还可以使用它来开发一些快速移动Web框架。

除了Web应用外，NodeJS也被应用在许多方面，本文盘点了NodeJS在其它方面所开发的十大令人神奇的项目，这些项目涉及到应用程序监控、媒体流、远程控制、桌面和移动应用等等。

效果图

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第1张图片

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第2张图片

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第3张图片

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第4张图片

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第5张图片

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第6张图片

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第7张图片

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第8张图片

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第9张图片

鸿蒙端项目架构

arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第10张图片

shouye.ets

import  axios  from '@ohos/axios'
import router from '@ohos.router'
@Component
export struct app_shouye{
  @State zhanghao: object = router.getParams()
  // 设置搜索框的提示内容
  private changeValue:string = ''
  @State selectedItemId : number = 0
  @State one:string = ''
  // 设置商品的渲染列表Object
  @State items: Array = [];
   aboutToAppear() {
     axios({
      method: "get",
      url: 'http://localhost:3000/shangpins/find_all',
    }).then(res => {
      console.info('result:' + JSON.stringify(res.data.data));
      this.items = res.data.data
    }).catch(error => {
      console.error(error);
    })
     console.log(JSON.stringify(this.items))
  }


  build(){
    Column(){
      // 搜索栏
      Search({ value: this.changeValue, placeholder: '请输入搜索的商品',})
        .searchButton('搜索')
        .width(300)
        .height(40)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          router.pushUrl({
            url: 'pages/sousuo',
            params: {
              sousuoValue: this.changeValue,
            }
          })
        })
        .onChange((value: string) => {
          this.changeValue = value
          console.log(this.changeValue)
        })
        .margin(20)

        // 显示商品列表
        List({ space: 20, initialIndex: 0 }){
          ForEach(this.items, (item) => {
            ListItem() {
              Row(){
                Image(item.img)
                  .alt($r('app.media.icon'))// 使用alt，在网络图片加载成功前使用占位图
                  .width(150)
                  .height(180)
                Column({space:10}){
                  Text(item.name)
                    .fontWeight(800)
                    .margin(20)
                  Text(item.detail)
                  Text('￥：'+item.price)
                    .fontColor('red')
                    .fontWeight(FontWeight.Bold)
                    .fontSize(20)
                }
                .width(180)
              }.alignItems(VerticalAlign.Top)
            }
            .onClick(() => {
              this.selectedItemId = item._id;
              // 获取点击物品的id
              this.one = item._id
              console.log(JSON.stringify(this.one))
              router.pushUrl({
                url: 'pages/detail',
                params: {
                  id: this.one,
                  zhanghao:this.zhanghao?.['zhanghao']
                }
              })
            })
          })
        }
        .height('90%')
        .listDirection(Axis.Vertical) // 排列方向
        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
        .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
    }
    .width('98%')
    .height('100%')
  }

} 
  
fenlei.ets
 
  
import  axios  from '@ohos/axios'
import router from '@ohos.router'
@Component
export struct app_shouye{
  @State zhanghao: object = router.getParams()
  // 设置搜索框的提示内容
  private changeValue:string = ''
  @State selectedItemId : number = 0
  @State one:string = ''
  // 设置商品的渲染列表Object
  @State items: Array = [];
   aboutToAppear() {
     axios({
      method: "get",
      url: 'http://localhost:3000/shangpins/find_all',
    }).then(res => {
      console.info('result:' + JSON.stringify(res.data.data));
      this.items = res.data.data
    }).catch(error => {
      console.error(error);
    })
     console.log(JSON.stringify(this.items))
  }


  build(){
    Column(){
      // 搜索栏
      Search({ value: this.changeValue, placeholder: '请输入搜索的商品',})
        .searchButton('搜索')
        .width(300)
        .height(40)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          router.pushUrl({
            url: 'pages/sousuo',
            params: {
              sousuoValue: this.changeValue,
            }
          })
        })
        .onChange((value: string) => {
          this.changeValue = value
          console.log(this.changeValue)
        })
        .margin(20)

        // 显示商品列表
        List({ space: 20, initialIndex: 0 }){
          ForEach(this.items, (item) => {
            ListItem() {
              Row(){
                Image(item.img)
                  .alt($r('app.media.icon'))// 使用alt，在网络图片加载成功前使用占位图
                  .width(150)
                  .height(180)
                Column({space:10}){
                  Text(item.name)
                    .fontWeight(800)
                    .margin(20)
                  Text(item.detail)
                  Text('￥：'+item.price)
                    .fontColor('red')
                    .fontWeight(FontWeight.Bold)
                    .fontSize(20)
                }
                .width(180)
              }.alignItems(VerticalAlign.Top)
            }
            .onClick(() => {
              this.selectedItemId = item._id;
              // 获取点击物品的id
              this.one = item._id
              console.log(JSON.stringify(this.one))
              router.pushUrl({
                url: 'pages/detail',
                params: {
                  id: this.one,
                  zhanghao:this.zhanghao?.['zhanghao']
                }
              })
            })
          })
        }
        .height('90%')
        .listDirection(Axis.Vertical) // 排列方向
        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
        .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
    }
    .width('98%')
    .height('100%')
  }

} 
  
gouwuche.ets
 
  
import router from '@ohos.router'
import  axios  from '@ohos/axios'
import { Header } from '../components/Toubu'
@Component
export struct gouwuche{
  @State zhanghao: object = router.getParams()
  // 设置商品的渲染列表Object
  @State items: Array = [];

  aboutToAppear() {
    axios({
      method: "post",
      url: 'http://localhost:3000/gouwuche/find',
      data:{
        username:this.zhanghao?.['zhanghao']
      }
    }).then(res => {
      console.info('result1111:' + JSON.stringify(res.data.data));
      this.items = res.data.data
    }).catch(error => {
      console.error(error);
    })
    console.log(JSON.stringify(this.items))
  }

  build(){
    //   标题部分
    Column(){
      // 自定义组件之间传参
      // Header({message:true})
      Image($r('app.media.shuaxin'))
        .width(30)
        .margin(20)
        .onClick(() =>{
          axios({
            method: "post",
            url: 'http://localhost:3000/gouwuche/find',
            data:{
              username:this.zhanghao?.['zhanghao']
            }
          }).then(res => {
            console.info('result1111:' + JSON.stringify(res.data.data));
            this.items = res.data.data
          }).catch(error => {
            console.error(error);
          })
        })
      // Text(this.zhanghao?.['zhanghao'])
      List({ space: 20, initialIndex: 0 }){
        ForEach(this.items, (item) => {
          ListItem() {
            Row(){
              Image(item.img)
                .alt($r('app.media.icon'))// 使用alt，在网络图片加载成功前使用占位图
                .width(150)
                .height(180)
              Column({space:10}){
                Text(item.name)
                  .fontWeight(800)
                  .margin(20)
                Text(item.detail)
                Text('￥：'+item.price)
                  .fontColor('red')
                  .fontWeight(FontWeight.Bold)
                  .fontSize(20)
              }
              .width(180)
            }.alignItems(VerticalAlign.Top)
          }
        })
      }
      .height('85%')
      .listDirection(Axis.Vertical) // 排列方向
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果

      Row({space:30}){
        Button('清除购物车', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .width(150)
          .onClick(() => {
            console.log('ButtonType.Normal')
          })

        Button('立即付款', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .width(150)
          .onClick(() => {
            console.log('ButtonType.Normal')
          })
      }
    }
    .width('100%')
    .height('100%')
  }
} 
  
Toubu.ets
 
  
import router from '@ohos.router'
@Component
export struct Header{
  @State message: Boolean = false
  build(){
  //   标题部分
    Row({space:5}){
      Image($r('app.media.fanhui'))
        .width(20)
        .onClick(() =>{
          router.back()
        })
      Blank()
      Image($r('app.media.shuaxin'))
        .width(30)
        .onClick(() =>{
          router.back()
        })
    }
    .width('98%')
    .height(30)
  }
}
 
  
wode.ets
 
  
import router from '@ohos.router'
@Component
export struct app_wode{
  @State zhanghao: object = router.getParams()

  build(){
    //   标题部分
    Column(){
      Row(){
        Row({space:10}){
          Image($r('app.media.icon'))
            .width(50)
            .height(50)
          Text('昵称：'+ this.zhanghao?.['zhanghao'])
            .margin({left:20})
            .fontColor('#fff')
        }
        .margin({top:30,left:50})
      }
      .width('100%')
      .height(180)
      .backgroundImage('./components/img/app_wo_bj.jpg')
      .backgroundImageSize(ImageSize.Cover)


        Row({space:50}){
          Image($r('app.media.icon'))
            .width(50)
            .height(50)
          Text('购物记录')
            .fontSize(18)
        }
        .width('100%')
        .backgroundColor("#fff")
        .margin({top:20,bottom:20})
        .padding({left:20,right:20,top:10,bottom:10})
        .onClick(()=>{
          router.pushUrl({
            url: 'pages/GouwuJilu',
          })
          console.log('123')
        })

        Row({space:50}){
          Image($r('app.media.icon'))
            .width(50)
            .height(50)
          Text('修改信息')
            .fontSize(18)
        }
        .width('100%')
        .backgroundColor("#fff")
        .margin({bottom:20})
        .padding({left:20,right:20,top:10,bottom:10})
        .onClick(()=>{
          router.pushUrl({
            url: 'pages/XiugaiXinxi',
          })
          console.log('123')
        })

        Row({space:50}){
          Image($r('app.media.icon'))
            .width(50)
            .height(50)
          Text('退出登录')
            .fontSize(18)
        }
        .width('100%')
        .backgroundColor("#fff")
        .margin({bottom:20})
        .padding({left:20,right:20,top:10,bottom:10})
        .onClick(()=>{
          router.replace({
            url: 'pages/Index',
          })
          console.log('123')
        })
    }
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .height('100%')
    .backgroundColor('#f3f3f3')
  }
}
 
  
detail.ets
 
  
import { Header } from '../components/Toubu'
import router from '@ohos.router'
import  axios  from '@ohos/axios'
@Entry
@Component
struct Detail {
  @State shangpin_detail: object = router.getParams()
  @State items:Array = []

  build() {
    Row() {
      Column() {
        Header()
        Text(this.shangpin_detail?.['zhanghao'])
        Text(this.items[0]?.['name'])

        Flex({ wrap: FlexWrap.NoWrap }) { // 子组件单行布局
          Text('').width('20%')
          List({ space: 20, initialIndex: 0 }) {
            ForEach(this.items, (item) => {
              ListItem() {
                Column() {
                  Image(item.img)
                    .alt($r('app.media.icon')) // 使用alt，在网络图片加载成功前使用占位图
                    .width(300)
                    .height(300)
                  Text(item.name)
                    .fontWeight(800)
                    .margin(20)
                  Text('￥：' + item.price)
                    .fontColor('red')
                    .fontWeight(FontWeight.Bold)
                    .fontSize(20)
                  Text(item.detail)
                }
              }
            })
          }
          .height('85%')
          .listDirection(Axis.Vertical) // 排列方向
          .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
          .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
          Text('').width('20%')
        }
      //   加入购物车，立即购买
        Row({space:30}){
          Button('加入购物车', { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(8)
            .backgroundColor(0x317aff)
            .width(150)
            .onClick(() => {
              axios({
                method: "post",
                url: 'http://localhost:3000/gouwuche/publish/',
                data: {
                  username: this.shangpin_detail?.['zhanghao'],
                  name:this.items[0]?.['name'],
                  detail:this.items[0]?.['detail'],
                  img:this.items[0]?.['img'],
                  select_classify:this.items[0]?.['select_classify'],
                  price:this.items[0]?.['price']
                }
              }).then(res => {
                console.log(JSON.stringify(res.data.data));
                this.items = res.data.data
              }).catch(error => {
                console.error(error);
              });
              console.log('ButtonType.Normal')
            })

          Button('立即购买', { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(8)
            .backgroundColor(0x317aff)
            .width(150)
            .onClick(() => {
              console.log('ButtonType.Normal')
            })
        }
      }
      .width('100%')
    }.height('100%')
  }

  onPageShow(){
    axios({
      method: "post",
      url: 'http://localhost:3000/shangpins/find_detail/',
      data: {
        _id: this.shangpin_detail?.['id']
      }
    }).then(res => {
      console.log(JSON.stringify(res.data.data));
      this.items = res.data.data
    }).catch(error => {
      console.error(error);
    });
  }
} 
  
GouwuJilu.ets
 
  
import { Header } from '../components/Toubu'
@Entry
@Component
struct GouwuJilu {
  @State message: string = '购物记录'

  build() {
    Column() {
      Header()
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}
 
  
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/users/find/'+this.zhanghao_find+ '/' + this.mima_find,
            }).then(res => {
              // console.info('result:' + JSON.stringify(res.data));
              console.info('result:' + JSON.stringify(res.data));
                // 获取data数组中的第一个元素
                const firstData = res.data.data[0];
                // 获取zhanghao字段的值
                const zhanghaoValue = firstData.zhanghao;
                console.log('zhanghaoValue:', zhanghaoValue);
              // 获取data数组中的第一个元素
              // 获取zhanghao字段的值
                router.pushUrl({
                  url: 'pages/NewApp_one',
                  params: {
                    zhanghao: zhanghaoValue,
                  }
                })
            }).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
 
  
import { app_shouye } from '../components/shouye/shouye'
import { app_wode } from '../components/wode'
import { app_fenlei } from '../components/fenlei'
import { gouwuche } from '../components/gouwuche'
import router from '@ohos.router'

@Entry
@Component
struct NewApp_one {
  // 获取上一个页面传过来的该登录的用户名
  @State zhanghao: object = router.getParams()

  build() {
      Column() {
        Tabs({ barPosition: BarPosition.End }) {
          TabContent() {
              app_shouye({ zhanghao: this.zhanghao?.['zhanghao'] })
          }
          .tabBar((new BottomTabBarStyle($r('sys.media.ohos_app_icon'),'首页')))
          TabContent() {
            app_fenlei()
          }
          .tabBar((new BottomTabBarStyle($r('sys.media.ohos_app_icon'),'分类')))

          TabContent() {
            gouwuche({ zhanghao: this.zhanghao?.['zhanghao'] })
          }
          .tabBar((new BottomTabBarStyle($r('sys.media.ohos_app_icon'),'购物车')))

          TabContent() {
            app_wode({ zhanghao: this.zhanghao?.['zhanghao'] })
          }
          .tabBar((new BottomTabBarStyle($r('sys.media.ohos_app_icon'),'我的')))
        }
      }
      .width('100%')
    .height('100%')
  }
  onPageShow(){
    console.log('这是父组件显示页面生命周期函数')
  }
}
 
  
sousuo.ets
 
  
import router from '@ohos.router'
import  axios  from '@ohos/axios'
import { Header } from '../components/Toubu'
@Entry
@Component
struct Sousuo {
  @State sousuoValue: object = router.getParams()
  @State items:Array = []
  @State selectedItemId : number = 0
  @State one:string = ''
  private changeValue:string = this.sousuoValue?.['sousuoValue']
  build() {
      Column() {
        Header()
        Search({ value: this.changeValue, placeholder: '请输入搜索的商品',})
          .searchButton('搜索')
          .width(300)
          .height(40)
          .backgroundColor('#F5F5F5')
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .textFont({ size: 14, weight: 400 })
          // 点击搜索
          .onSubmit((value: string) => {
            axios({
              method: "post",
              url: 'http://localhost:3000/shangpins/products/',
              data: {
                changeValue: this.changeValue
              }
            }).then(res => {
              console.log(JSON.stringify(res.data.data));
              this.items = res.data.data
            }).catch(error => {
              console.error(error);
            });
          })
          // 输入搜索
          .onChange((value: string) => {
            this.changeValue = value
            console.log(this.changeValue)
            axios({
              method: "post",
              url: 'http://localhost:3000/shangpins/products/',
              data: {
                changeValue: value
              }
            }).then(res => {
              console.log(JSON.stringify(res.data.data));
              this.items = res.data.data
            }).catch(error => {
              console.error(error);
            });
          })
          .margin(20)

        List({ space: 20, initialIndex: 0 }){
          ForEach(this.items, (item) => {
            ListItem() {
              Row(){
                Image(item.img)
                  .alt($r('app.media.icon'))// 使用alt，在网络图片加载成功前使用占位图
                  .width(150)
                  .height(180)
                Column({space:10}){
                  Text(item.name)
                    .fontWeight(800)
                    .margin(20)
                  Text(item.detail)
                  Text('￥：'+item.price)
                    .fontColor('red')
                    .fontWeight(FontWeight.Bold)
                    .fontSize(20)
                }
                .width(180)
              }.alignItems(VerticalAlign.Top)
            }
            .onClick(() => {
              this.selectedItemId = item._id;
              // 获取点击物品的id
              this.one = item._id
              console.log(JSON.stringify(this.one))
              router.pushUrl({
                url: 'pages/detail',
                params: {
                  id: this.one,
                }
              })
            })
          })
        }
        .height('90%')
        .listDirection(Axis.Vertical) // 排列方向
        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
        .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
      }
      .width('100%')
    .height('100%')
  }

  //上一个页面跳转过来之后查询的数据
  onPageShow() {
    console.log('wwww' + this.sousuoValue?.['sousuoValue']);
    axios({
      method: "post",
      url: 'http://localhost:3000/shangpins/products/',
      data: {
        changeValue: this.sousuoValue?.['sousuoValue'] // 修正获取参数的方式
      }
    }).then(res => {
      console.log(JSON.stringify(res.data.data));
      this.items = res.data.data
    }).catch(error => {
      console.error(error);
    });
  }

} 
  
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/users/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%')
  }
}
 
  
XiugaiXinxi.ets
 
  
import { Header } from '../components/Toubu'
@Entry
@Component
struct XiugaiXinxi {
  @State message: string = '修改信息'

  build() {
      Column() {
        Header()

        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .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/users/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后端架构
 
  
arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】_第11张图片
 
  
fenlei_api.js
 
  
// user_api.js
const express = require('express');
const router = express.Router();
const { fenlei } = require('../db');

router.use(express.urlencoded({ extended: true }));
router.use(express.json());

// 全部查询
router.get("/find_all", async (req, res) => { // Corrected function signature
    try {
      const results = await fenlei.find();

      if (results.length > 0) {
        // 如果找到匹配的记录，则返回所有匹配的记录
        res.json({ data: results, message: "登录成功！" });
      } else {
        res.status(404).json({ message: "未找到匹配的记录" });
      }
    } catch (error) {
      res.status(500).json({ message: "服务器内部错误" });
    }
  });

// 指定查询
router.get("/find/:name", async (req, res) => {
    try {
        const name = req.params.name;
        // 使用 find 查询所有匹配指定 name 的数据记录
        const results = await fenlei.find({ name });

        if (results.length > 0) {
            // 如果找到匹配的记录，则返回所有匹配的记录
            res.json({ data: results, message: "登录成功！" });
        } else {
            res.status(404).json({ message: "未找到匹配的记录" });
        }
    } catch (error) {
        res.status(500).json({ message: "服务器内部错误" });
    }
});

module.exports = router;


 
  
gouwuche_api.js
 
  
// user_api.js
const express = require('express');
const router = express.Router();
const { gouwuche } = require('../db');

router.use(express.urlencoded({ extended: true }));
router.use(express.json());

// 全部查询
router.post("/find", async (req, res) => {
    try {
      const { username } = req.body;
      // 使用 find 查询所有匹配指定 select_classify 的数据记录
      const results = await gouwuche.find({ username });
  
      if (results.length > 0) {
        // 如果找到匹配的记录，则返回所有匹配的记录
        res.json({ data: results, message: "登录成功！" });
      } else {
        res.status(404).json({ message: "未找到匹配的记录" });
      }
    } catch (error) {
      res.status(500).json({ message: "服务器内部错误" });
    }
  });
//   添加到购物车
router.post("/publish", async (req, res) => {
    try {
        const { username,name,detail,img,select_classifyprice,price } = req.body;
        await gouwuche.create({
            username,
            name,
            detail,
            img,
            select_classifyprice,
            price
        });
        res.send("success");
    } catch (error) {
        res.send(error, "error");
    }
});

module.exports = router;


 
  
shangpin_api.js
 
  
// user_api.js
const express = require('express');
const router = express.Router();
const { shangpin } = require('../db');

router.use(express.urlencoded({ extended: true }));
router.use(express.json());

// 全部查询
router.get("/find_all", async (req, res) => { // Corrected function signature
  try {
    const results = await shangpin.find();

    if (results.length > 0) {
      // 如果找到匹配的记录，则返回所有匹配的记录
      res.json({ data: results, message: "登录成功！" });
    } else {
      res.status(404).json({ message: "未找到匹配的记录" });
    }
  } catch (error) {
    res.status(500).json({ message: "服务器内部错误" });
  }
});

// 指定查询
router.post("/find", async (req, res) => {
  try {
    const { select_classify } = req.body;
    // 使用 find 查询所有匹配指定 select_classify 的数据记录
    const results = await shangpin.find({ select_classify });

    if (results.length > 0) {
      // 如果找到匹配的记录，则返回所有匹配的记录
      res.json({ data: results, message: "登录成功！" });
    } else {
      res.status(404).json({ message: "未找到匹配的记录" });
    }
  } catch (error) {
    res.status(500).json({ message: "服务器内部错误" });
  }
});

// 指定商品详情查询
router.post("/find_detail", async (req, res) => {
  try {
    const { _id } = req.body;
    // 使用 find 查询所有匹配指定 _id 的数据记录
    const results = await shangpin.find({ _id });

    if (results.length > 0) {
      // 如果找到匹配的记录，则返回所有匹配的记录
      res.json({ data: results, message: "登录成功！" });
    } else {
      res.status(404).json({ message: "未找到匹配的记录" });
    }
  } catch (error) {
    res.status(500).json({ message: "服务器内部错误" });
  }
});


//模糊查询
router.post('/products', async (req, res) => {
  try {
      const changeValue = req.body.changeValue; // 修正获取请求体中的参数方式

      // 使用正则表达式进行模糊查询
      const results = await shangpin.find({ name: { $regex: changeValue, $options: 'i' } });
      if (results.length > 0) {
          // 如果找到匹配的记录，则返回所有匹配的记录
          res.json({ data: results, message: "查询成功！" });
      } else {
          res.status(404).json({ message: "未找到匹配的记录" });
      }
  } catch (error) {
      console.error(error);
      res.status(500).json({ message: "服务器内部错误" });
  }
});



module.exports = router;

 
  
user_api.js
 
  
// user_api.js
const express = require('express');
const router = express.Router();
const { users } = require('../db');

router.use(express.urlencoded({ extended: true }));
router.use(express.json());

// 注册账号
router.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");
    }
});

// 注销账号
router.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");
    }
});

// 修改账号密码
router.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 });
    }
});

// 账号登录
router.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: "服务器内部错误" });
    }
});

module.exports = router;

 
  
db.js
 
  
const mongoose = require('mongoose')

//连接mongodb数据库
mongoose.connect("mongodb://localhost:27017/node_one")
    .then(() => {
        console.log("数据库连接成功！")
    })
    .catch((err) => {
        console.log("数据库连接失败！", err)
    })

// 创建表用户表
const Users = new mongoose.Schema({
    zhanghao: {
        type: String,
    },
    mima: {
        type: String
    },
})
// 创建商品表
const Shangpin = new mongoose.Schema({
    name: {
        type: String,
    },
    detail: {
        type: String
    },
    img:{
        type: String
    },
    select_classify:{
        type: String
    },
    price:{
        type: String 
    }
})
//创建分类表
const Fenlei = new mongoose.Schema({
    name: {
        type: String,
    },
})
// 创建购物车表
const Gouwuche = new mongoose.Schema({
    username:{
        type: String,
    },
    name: {
        type: String,
    },
    detail: {
        type: String
    },
    img:{
        type: String
    },
    select_classify:{
        type: String
    },
    price:{
        type: String 
    }
})

const users = mongoose.model("Users", Users);
const shangpin = mongoose.model("Shangpin", Shangpin);
const fenlei = mongoose.model("Fenlei", Fenlei);
const gouwuche = mongoose.model("Gouwuche", Gouwuche);
module.exports = {
    users,
    shangpin,
    fenlei,
    gouwuche
}
 
  
index.js
 
  
// index.js
const express = require('express');
const app = express();
const userApi = require('./user_ctrl/user_api');
const shangpinApi = require('./shangpin_ctrl/shangpin_api');
const fenleiApi = require('./fenlei_ctrl/fenlei_api');
const gouwucheApi = require('./gouwuche_ctrl/gouwuche_api');

app.use('/users', userApi);

app.use('/shangpins', shangpinApi);

app.use('/gouwuche', gouwucheApi);

app.use('/fenleis', fenleiApi);

app.listen(3000, () => {
    console.log('server running');
});

 
  
后端安装指令
 
  
 
   
1. 下载node.js框架
 
   
npm install express --save
 
   
2. 下载nodemon解决node代码更新的痛点
 
   
npm install nodemon -g
 
   
3. node.js连接mongodb数据库
 
   
npm install mongoose --save
 
  
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(鸿蒙os,harmonyos,华为,node.js,mongodb)

        

            

                
    
                    
  • 【iOS】MVC设计模式
                        Magnetic_h
iosmvc设计模式objective-c学习ui
                        
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
    
                    
    • 
                    
  • UI学习——cell的复用和自定义cell
                        Magnetic_h
ui学习
                        
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
    
                    
    • 
                    
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断
                        尐尐呅

                        
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
    
                    
    • 
                    
  • c++ 的iostream 和 c++的stdio的区别和联系
                        黄卷青灯77
c++算法开发语言iostreamstdio
                        
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
    
                    
    • 
                    
  • mysql禁用远程登录
                        igotyback
mysql
                        
    去mysql库中的user表里，将host都改成localhost之后刷新权限FLUSHPRIVILEGES;
    
                    
    • 
                    
  • C#中使用split分割字符串
                        互联网打工人no1
c#
                        
    1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
    
                    
    • 
                    
  • python os.environ
                        江湖偌大
python深度学习
                        
    os.environ['TF_CPP_MIN_LOG_LEVEL']='0'#默认值，输出所有信息os.environ['TF_CPP_MIN_LOG_LEVEL']='1'#屏蔽通知信息（INFO）os.environ['TF_CPP_MIN_LOG_LEVEL']='2'#屏蔽通知信息和警告信息（INFO\WARNING）os.environ['TF_CPP_MIN_LOG_LEVEL']='
    
                    
    • 
                    
  • Python中os.environ基本介绍及使用方法
                        鹤冲天Pro
#Pythonpython服务器开发语言
                        
    文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
    
                    
    • 
                    
  • python os.environ_python os.environ 读取和设置环境变量
                        weixin_39605414
pythonos.environ
                        
    >>>importos>>>os.environ.keys()['LC_NUMERIC','GOPATH','GOROOT','GOBIN','LESSOPEN','SSH_CLIENT','LOGNAME','USER','HOME','LC_PAPER','PATH','DISPLAY','LANG','TERM','SHELL','J2REDIR','LC_MONETARY','QT_QPA
    
                    
    • 
                    
  • PHP环境搭建详细教程
                        好看资源平台
前端php
                        
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
    
                    
    • 
                    
  • SQL Server_查询某一数据库中的所有表的内容
                        qq_42772833
SQLServer数据库sqlserver
                        
    1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM
    
                    
    • 
                    
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team
                        若博豆
java算法华为javascript
                        
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
    
                    
    • 
                    
  • MongoDB Oplog 窗口
                        喝醉酒的小白
MongoDB运维
                        
    在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限
    
                    
    • 
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)
                        算法大师
华为od面试python
                        
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法
    
                    
    • 
                    
  • 【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）
                        算法大师
华为od面试python算法前端
                        
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些
    
                    
    • 
                    
  • python os 环境变量
                        CV矿工
python开发语言numpy
                        
    环境变量：环境变量是程序和操作系统之间的通信方式。有些字符不宜明文写进代码里，比如数据库密码，个人账户密码，如果写进自己本机的环境变量里，程序用的时候通过os.environ.get（）取出来就行了。os.environ是一个环境变量的字典。环境变量的相关操作importos"""设置/修改环境变量：os.environ[‘环境变量名称’]=‘环境变量值’#其中key和value均为string类
    
                    
    • 
                    
  • 第六集如何安装CentOS7.0，3分钟学会centos7安装教程
                        date分享

                        
    从光盘引导系统按回车键继续进入引导程序安装界面，选择语言这里选择简体中文版点击继续选择桌面安装下面给系统分区选择磁盘，点击完成选择基本分区，点击加号swap分区,大小填内存的两倍在选择根分区，使用所有可用的磁盘空间选择文件系统ext4点击完成，点击开始安装设置root密码，点击完成设置普通用户和密码，点击完成整个过程持续八分钟左右根据个人配置不同，时间长短不同好，现在点击重启系统进入重启状态点击本
    
                    
    • 
                    
  • 【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面
                        一个射手座的程序媛
程序员华为od面试职场和发展
                        
    最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
    
                    
    • 
                    
  • mac电脑命令行获取电量
                        小米人er
我的博客macos命令行
                        
    在macOS上，有几个命令行工具可以用来获取电量信息，最常用的是pmset命令。你可以通过以下方式来查看电池状态和电量信息：查看电池状态：pmset-gbatt这个命令会返回类似下面的输出：Nowdrawingfrom'BatteryPower'-InternalBattery-0(id=1234567)95%;discharging;4:02remainingpresent:true输出中包括电
    
                    
    • 
                    
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）
                        算法大师
华为od面试python
                        
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal
    
                    
    • 
                    
  • nosql数据库技术与应用知识点
                        皆过客，揽星河
NoSQLnosql数据库大数据数据分析数据结构非关系型数据库
                        
    Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)
    
                    
    • 
                    
  • ios GCD
                        _Waiting_

                        
    1.GCD任务和队列学习GCD之前，先来了解GCD中两个核心概念：任务和队列。任务：就是执行操作的意思，换句话说就是你在线程中执行的那段代码。在GCD中是放在block中的。执行任务有两种方式：同步执行（sync）和异步执行（async）。两者的主要区别是：是否等待队列的任务执行结束，以及是否具备开启新线程的能力。同步执行（sync）：同步添加任务到指定的队列中，在添加的任务执行结束之前，会一直等
    
                    
    • 
                    
  • 1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven
                        Energet!c
开发语言
                        
    1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
    
                    
    • 
                    
  • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验
                        张风捷特烈
iderust开发语言后端
                        
    theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
    
                    
    • 
                    
  • CentOS的根目录下，/bin 和 /sbin 用途和权限
                        Energet!c
Linux日常centoslinux运维
                        
    CentOS的根目录下，/bin和/sbin用途和权限一、/bin(Binary)二、/sbin(SystemBinary)三、总结在CentOS的根目录下，/bin和/sbin目录有不同的用途和权限一、/bin(Binary)用途:存放系统的基本命令，这些命令对所有用户都是可用的。例如：ls、cp、mv、rm等。权限:普通用户和系统管理员都可以使用这些命令。二、/sbin(SystemBinar
    
                    
    • 
                    
  • Some jenkins settings
                        SnC_

                        
    Jenkins连接到特定gitlabproject的特定branch我采用的方法是在pipeline的script中使用git命令来指定branch。如下：stage('Clonerepository'){steps{gitbranch:'develop',credentialsId:'gitlab-credential-id',url:'http://gitlab.com/repo.git'}}
    
                    
    • 
                    
  • CentOS 7官方源停服，配置本机光盘yum源
                        码哝小鱼
linux运维centoslinux运维
                        
    1、挂载系统光盘mkdir/mnt/isomount-oloop/tools/CentOS-7-x86_64-DVD-1810.iso/mnt/isocd/mnt/iso/Packages/rpm-ivh/mnt/iso/Packages/yum-utils-1.1.31-50.el7.noarch.rpm(图形界面安装，默契已安装）如安装yum-utils依赖错误，按提示安装依赖包rpm-ivh
    
                    
    • 
                    
  • 2024.9.6 Python，华为笔试题总结，字符串格式化，字符串操作，广度优先搜索解决公司组织绩效互评问题，无向图
                        RaidenQ
python华为leetcode算法力扣广度优先无向图
                        
    1.字符串格式化name="Alice"age=30formatted_string="Name:{},Age:{}".format(name,age)print(formatted_string)或者name="Alice"age=30formatted_string=f"Name:{name},Age:{age}"print(formatted_string)2.网络健康检查第一行有两个整数m
    
                    
    • 
                    
  • 第1步win10宿主机与虚拟机通过NAT共享上网互通
                        学习3人组
大数据大数据
                        
    VM的CentOS采用NAT共用宿主机网卡宿主机器无法连接到虚拟CentOS要实现宿主机与虚拟机通信，原理就是给宿主机的网卡配置一个与虚拟机网关相同网段的IP地址，实现可以互通。1、查看虚拟机的IP地址2、编辑虚拟机的虚拟网络的NAT和DHCP的配置，设置虚拟机的网卡选择NAT共享模式3、宿主机的IP配置，确保vnet8的IPV4属性与虚拟机在同一网段4、ping测试连通性[root@localh
    
                    
    • 
                                
  • Spring4.1新特性——综述
                                    jinnianshilongnian
spring 4.1
                                    
    目录 
Spring4.1新特性——综述 
Spring4.1新特性——Spring核心部分及其他 
Spring4.1新特性——Spring缓存框架增强 
Spring4.1新特性——异步调用和事件机制的异常处理 
Spring4.1新特性——数据库集成测试脚本初始化 
Spring4.1新特性——Spring MVC增强 
Spring4.1新特性——页面自动化测试框架Spring MVC T
    
                                
    • 
                                
  • Schema与数据类型优化
                                    annan211
数据结构mysql
                                    
    

目前商城的数据库设计真是一塌糊涂，表堆叠让人不忍直视，无脑的架构师，说了也不听。
在数据库设计之初，就应该仔细揣摩可能会有哪些查询，有没有更复杂的查询，而不是仅仅突出
很表面的业务需求，这样做会让你的数据库性能成倍提高，当然，丑陋的架构师是不会这样去考虑问题的。

选择优化的数据类型
 1 更小的通常更好
   更小的数据类型通常更快，因为他们占用更少的磁盘、内存和cpu缓存，
    
                                
    • 
                                
  • 第一节 HTML概要学习
                                    chenke
htmlWebcss
                                    
    第一节 HTML概要学习 
 
1. 什么是HTML 
 
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。 
 
打开记事本 输入一下内
    
                                
    • 
                                
  • MyEclipse里部分习惯的更改
                                    Array_06
eclipse
                                    
    继续补充中---------------------- 
 
 
 
1.更改自己合适快捷键windows-->prefences-->java-->editor-->Content Assist--> 
     Activation triggers for java的右侧“.”就可以改变常用的快捷键 
 
选中 Text 
    
                                
    • 
                                
  • 近一个月的面试总结
                                    cugfy
面试
                                    
    本文是在学习中的总结，欢迎转载但请注明出处：http://blog.csdn.net/pistolove/article/details/46753275 
 
 
前言 
      打算换个工作，近一个月面试了不少的公司，下面将一些面试经验和思考分享给大家。另外校招也快要开始了，为在校的学生提供一些经验供参考，希望都能找到满意的工作。 
    
                                
    • 
                                
  • HTML5一个小迷宫游戏
                                    357029540
html5
                                    
         通过《HTML5游戏开发》摘抄了一个小迷宫游戏，感觉还不错，可以画画，写字，把摘抄的代码放上来分享下，喜欢的同学可以拿来玩玩！ 
 
<html> 
 <head> 
 <title>创建运行迷宫</title> 
 <script type="text/javascript"
    
                                
    • 
                                
  • 10步教你上传githib数据
                                    张亚雄
git
                                    
    官方的教学还有其他博客里教的都是给懂的人说得，对已我们这样对我大菜鸟只能这么来锻炼，下面先不玩什么深奥的，先暂时用着10步干净利索。等玩顺溜了再用其他的方法。 
操作过程（查看本目录下有哪些文件NO.1）ls 
（跳转到子目录NO.2）cd+空格+目录 
（继续NO.3）ls 
（匹配到子目录NO.4）cd+ 目录首写字母+tab键+（首写字母“直到你所用文件根就不再按TAB键了”） 
（查看文件
    
                                
    • 
                                
  • MongoDB常用操作命令大全
                                    adminjun
mongodb操作命令
                                    
    成功启动MongoDB后，再打开一个命令行窗口输入mongo，就可以进行数据库的一些操作。输入help可以看到基本操作命令，只是MongoDB没有创建数据库的命令，但有类似的命令   如：如果你想创建一个“myTest”的数据库，先运行use myTest命令，之后就做一些操作（如：db.createCollection('user')）,这样就可以创建一个名叫“myTest”的数据库。   
一
    
                                
    • 
                                
  • bat调用jar包并传入多个参数
                                    aijuans

                                    
    下面的主程序是通过eclipse写的： 
1.在Main函数接收bat文件传递的参数（String[] args） 
 如：   String ip =args[0];          String user=args[1];       &nbs
    
                                
    • 
                                
  • Java中对类的主动引用和被动引用
                                    ayaoxinchao
java主动引用对类的引用被动引用类初始化
                                    
      
在Java代码中，有些类看上去初始化了，但其实没有。例如定义一定长度某一类型的数组，看上去数组中所有的元素已经被初始化，实际上一个都没有。对于类的初始化，虚拟机规范严格规定了只有对该类进行主动引用时，才会触发。而除此之外的所有引用方式称之为对类的被动引用，不会触发类的初始化。虚拟机规范严格地规定了有且仅有四种情况是对类的主动引用，即必须立即对类进行初始化。四种情况如下：1.遇到ne
    
                                
    • 
                                
  • 导出数据库 提示 outfile disabled
                                    BigBird2012
mysql
                                    
    在windows控制台下，登陆mysql，备份数据库： 
  
mysql>mysqldump -u root -p test test > D:\test.sql 
使用命令 mysqldump 格式如下： mysqldump -u root -p *** DBNAME > E:\\test.sql。 
注意：执行该命令的时候不要进入mysql的控制台再使用，这样会报
    
                                
    • 
                                
  • Javascript 中的 && 和 ||
                                    bijian1013
JavaScript&&||
                                    
            准备两个对象用于下面的讨论 
var alice = {
    name: "alice",
    toString: function () {
        return this.name;
    }
}
var smith = {
    name: "smith",
 
    
                                
    • 
                                
  • [Zookeeper学习笔记之四]Zookeeper Client Library会话重建
                                    bit1129
zookeeper
                                    
    为了说明问题，先来看个简单的示例代码： 
  
package com.tom.zookeeper.book;

import com.tom.Host;
import org.apache.zookeeper.WatchedEvent;
import org.apache.zookeeper.ZooKeeper;
import org.apache.zookeeper.Wat
    
                                
    • 
                                
  • 【Scala十一】Scala核心五：case模式匹配
                                    bit1129
scala
                                    
    package spark.examples.scala.grammars.caseclasses

object CaseClass_Test00 {

  def simpleMatch(arg: Any) = arg match {
    case v: Int => "This is an Int"
    case v: (Int, String)
    
                                
    • 
                                
  • 运维的一些面试题
                                    yuxianhua
linux
                                    
    1、Linux挂载Winodws共享文件夹 
  
mount -t cifs //1.1.1.254/ok /var/tmp/share/ -o username=administrator,password=yourpass
或
mount -t cifs -o username=xxx,password=xxxx //1.1.1.1/a /win 
  
 
    
                                
    • 
                                
  • Java lang包-Boolean
                                    BrokenDreams
boolean
                                    
             Boolean类是Java中基本类型boolean的包装类。这个类比较简单，直接看源代码吧。 
 

public final class Boolean implements java.io.Serializable,
                                      
    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-命令模式-Command
                                    bylijinnan
java设计模式
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 


import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

/**
 * GOF 在《设计模式》一书中阐述命令模式的意图：“将一个请求封装
    
                                
    • 
                                
  • matlab下GPU编程笔记
                                    cherishLC
matlab
                                    
    不多说，直接上代码 
 
gpuDevice   %   查看系统中的gpu,,其中的DeviceSupported会给出matlab支持的GPU个数。
g=gpuDevice(1);    %会清空 GPU 1中的所有数据,,将GPU1 设为当前GPU
reset(g)  %也可以清空GPU中数据。

a=1;
a=gpuArray(a);    %将a从CPU移到GPU中
onGP
    
                                
    • 
                                
  • SVN安装过程
                                    crabdave
SVN
                                    
    SVN安装过程 
  
subversion-1.6.12 
  
./configure --prefix=/usr/local/subversion --with-apxs=/usr/local/apache2/bin/apxs --with-apr=/usr/local/apr --with-apr-util=/usr/local/apr --with-openssl=/
    
                                
    • 
                                
  • sql　行列转换
                                    daizj
sql行列转换行转列列转行
                                    
    行转列的思想是通过case when 来实现 
列转行的思想是通过union all 来实现 
 
下面具体例子： 
 
假设有张学生成绩表(tb)如下: 
Name Subject Result 
张三 语文　　74 
张三 数学　　83 
张三 物理　　93 
李四 语文　　74 
李四 数学　　84 
李四 物理　　94 
*/ 
/* 
想变成 
姓名   &
    
                                
    • 
                                
  • MySQL--主从配置
                                    dcj3sjt126com
mysql
                                    
       linux下的mysql主从配置：   说明：由于MySQL不同版本之间的(二进制日志)binlog格式可能会不一样，因此最好的搭配组合是Master的MySQL版本和Slave的版本相同或者更低，   Master的版本肯定不能高于Slave版本。（版本向下兼容）   
   mysql1  : 192.168.100.1    //master   mysq
    
                                
    • 
                                
  • 关于yii 数据库添加新字段之后model类的修改
                                    dcj3sjt126com
Model
                                    
    rules: 
array('新字段','safe','on'=>'search') 
1、array('新字段', 'safe')//这个如果是要用户输入的话，要加一下， 
2、array('新字段', 'numerical'),//如果是数字的话 
3、array('新字段', 'length', 'max'=>100),//如果是文本 
1、2、3适当的最少要加一条，新字段才会被
    
                                
    • 
                                
  • sublime text3 中文乱码解决
                                    dyy_gusi
Sublime Text
                                    
    sublime text3中文乱码解决 
原因：缺少转换为UTF-8的插件 
目的：安装ConvertToUTF8插件包 
第一步：安装能自动安装插件的插件，百度“Codecs33”，然后按照步骤可以得到以下一段代码： 
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a30980927
    
                                
    • 
                                
  • 概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM
                                    geeksun
PHP
                                    
    CGI 
CGI全称是“公共网关接口”(Common Gateway Interface)，HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。 
CGI可以用任何一种语言编写，只要这种语言具有标准输入、输出和环境变量。如php,perl,tcl等。 FastCGI 
FastCGI像是一个常驻(long-live)型的CGI，它可以一直执行着，只要激活后，不
    
                                
    • 
                                
  • Git push 报错 "error: failed to push some refs to " 解决
                                    hongtoushizi
git
                                    
    Git push 报错 "error: failed to push some refs to " . 
此问题出现的原因是：由于远程仓库中代码版本与本地不一致冲突导致的。 
由于我在第一次git pull --rebase 代码后，准备push的时候，有别人往线上又提交了代码。所以出现此问题。 
解决方案： 
1： git pull    
2：
    
                                
    • 
                                
  • 第四章 Lua模块开发
                                    jinnianshilongnian
nginxlua
                                    
    在实际开发中，不可能把所有代码写到一个大而全的lua文件中，需要进行分模块开发；而且模块化是高性能Lua应用的关键。使用require第一次导入模块后，所有Nginx 进程全局共享模块的数据和代码，每个Worker进程需要时会得到此模块的一个副本（Copy-On-Write），即模块可以认为是每Worker进程共享而不是每Nginx Server共享；另外注意之前我们使用init_by_lua中初
    
                                
    • 
                                
  • java.lang.reflect.Proxy
                                    liyonghui160com

                                    
      
1.简介 
  
Proxy 提供用于创建动态代理类和实例的静态方法 
（1）动态代理类的属性 
 
 代理类是公共的、最终的，而不是抽象的 
 未指定代理类的非限定名称。但是，以字符串 "$Proxy" 开头的类名空间应该为代理类保留 
 代理类扩展 java.lang.reflect.Proxy  
 代理类会按同一顺序准确地实现其创建时指定的接口
    
                                
    • 
                                
  • Java中getResourceAsStream的用法
                                    pda158
java
                                    
    1.Java中的getResourceAsStream有以下几种： 1. Class.getResourceAsStream(String path) ： path 不以’/'开头时默认是从此类所在的包下取资源，以’/'开头则是从ClassPath根下获取。其只是通过path构造一个绝对路径，最终还是由ClassLoader获取资源。   　　2. Class.getClassLoader.get
    
                                
    • 
                                
  • spring 包官方下载地址（非maven）
                                    sinnk
spring
                                    
    SPRING官方网站改版后，建议都是通过 Maven和Gradle下载，对不使用Maven和Gradle开发项目的，下载就非常麻烦，下给出Spring Framework jar官方直接下载路径: 
  
 http://repo.springsource.org/libs-release-local/org/springframework/spring/ 
  
s
    
                                
    • 
                                
  • Oracle学习笔记(7) 开发PLSQL子程序和包
                                    vipbooks
oraclesql编程
                                    
        哈哈，清明节放假回去了一下，真是太好了，回家的感觉真好啊！现在又开始出差之旅了，又好久没有来了，今天继续Oracle的学习！ 
     这是第七章的学习笔记，学习完第六章的动态SQL之后，开始要学习子程序和包的使用了……，希望大家能多给俺一些支持啊！ 
    编程时使用的工具是PLSQL
    
                                
    •