پیشنهاد ویژه
[button color="primary" size="big" link="https://nabfollower.com/buy-real-follower/" icon="" target="true" follow="false"]خرید فالوور واقعی[/button][button color="primary" size="big" link="https://nabfollower.com/buy-instagram-like/" icon="" target="true" follow="false"]خرید لایک اینستاگرام[/button][button color="primary" size="big" link="https://nabfollower.com/buy-instagram-views/" icon="" target="true" follow="false"]خرید ویو اینستاگرام[/button][button color="primary" size="big" link="https://nabfollower.com/" icon="" target="true" follow="false"]خرید فالوور اینستاگرام[/button]
به تازگی ، من بسیاری از دانشجویان را دیده ام که به دنبال آموزش در پروژه های بازار هستند.
این پروژه یک طرح جدایی از انتهای جلو و عقب را اتخاذ می کند ، و انتهای پشت از Apache+MySQL+PHP استفاده می کند ، و قسمت جلوی آن بومی Hongmeng است. این کارکردهای کامل مانند ثبت نام ، ورود به سیستم ، طبقه بندی محصول ، سبد خرید ، خرید ، سفارش من و غیره را تحقق می بخشد و سرپرستان می توانند کاربران و محصولات را در پایگاه داده برگشتی اضافه ، حذف ، اصلاح و بررسی کنند.
بگذارید برخی از نکات کلیدی این پروژه را با شما در میان بگذارم.
قسمت صفحه اصلی یک مؤلفه لیست است ، قسمت داخلی سه قسمت است.
List({space:8}){
ListItem(){
Swiper() {
ForEach(this.data, (item:Resource) => {
Image(item)
.size({ width: '100%', height: 200 })
.borderRadius(12)
.padding(8)
})
}
}
ListItem(){
Grid(){
ForEach(this.classData,(item:object,index:number) => {
GridItem(){
Column(){
Image(item['cover'])
.width('100%')
.height('80%')
Text(item['classname'])
.fontColor(Color.Black)
.fontSize(14)
.margin({top:3})
}
}
.width(70)
.height(90)
})
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
.width('100%')
.height(200)
.backgroundColor(Color.White)
}
.width('100%')
.height(200)
ListItem(){
Grid(){
ForEach(this.goods,(item:object,index:number) => {
GridItem(){
Column(){
Image(item['cover'])
.width('100%')
.height((this.screen_width - 25)/2)
Text(item['name'])
.fontColor(Color.Black)
.fontSize(17)
.margin({top:4})
.fontWeight(FontWeight.Bold)
.maxLines(2)
Text(item['price'])
.fontColor(Color.Red)
.fontSize(15)
.margin({top:6})
}
.alignItems(HorizontalAlign.Start)
}
.width((this.screen_width - 24)/2)
.height(this.listHeight)
})
}
.backgroundColor(Color.White)
.columnsTemplate('1fr 1fr')
.rowsGap(5)
.columnsGap(5)
.width('100%')
}
.width('100%')
}
.width('100%')
.height('100%')
رابط طبقه بندی به دو قسمت تقسیم می شود.
کد به شرح زیر است:
Row() {
List(){
ForEach(this.classData,(item:object,index)=>{
ListItem(){
Text(item['classname'])
.fontColor(Color.Gray)
.fontSize(17)
}
.backgroundColor(index == this.classIndex? 'rgb(255,255,255)' : 'rgb(240,240,240)')
.width(100)
.height(55)
.onClick(()=>{
this.getSubClass(item['id'])
this.classIndex = index
})
})
}
.width(100)
.height('100%')
.backgroundColor(Color.White)
Grid(){
ForEach(this.subClassData,(item:object,index)=>{
GridItem(){
Column(){
Image(item['cover'])
.width('100%')
.height((this.screen_width - 100)/3)
Text(item['name'])
.fontSize(15)
.fontColor(Color.Black)
}
.onClick(()=>{
})
}
.backgroundColor(Color.White)
.width((this.screen_width - 100)/3)
.height((this.screen_width - 100)/3 + 20)
})
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(5)
.rowsGap(5)
.width(this.screen_width - 100)
.height('100%')
}
صفحات دیگر نیز نسبتاً ساده هستند و بیشتر آنها با استفاده از اجزای لیست اجرا می شوند ، بنابراین من یک به یک به جزئیات نمی پردازم.
