Angular +Ionic实现增加，删除，编辑，修改功能。

常用的开发中，前端项目主要负责数据的表层处理。
更多主要数据业务逻辑实际操作是在后端，主要体现在数据的增删改查业务逻辑及其数据库的操作上。
今日简单罗列一下前端项目中数据表层的增删改查功能:

一，增，改

1.html中：

<ion-header><div class="bill-header"><div class="bill-header-title"><div class="bill-header-icon" (click)="goBack()"><ion-icon name="chevron-back-outline" class="icon-left"></ion-icon></div></div><div class="bill-header-null">添加发票信息</div><div class="bill-header-detail"><span></span></div><div class="bill-header-icon" *ngIf="!showEdit" (click)="showEdit=!showEdit"><span>管理</span></div><div class="bill-header-icon" *ngIf="showEdit" (click)="onFinished();"><span>完成</span></div></div>
</ion-header> <div class="bill-types"><div class="btype-title">发票类型</div><div class="btype-check"><div class="bt-citem"  *ngFor="let item of Itypes" (click)="selectType(item)"><ion-checkbox  [(ngModel)]="item.isToggled"></ion-checkbox><span>{{item.title}}</span></div></div>
</div>
<div class="bill-bottom-bg"></div>
<ion-content class="bill-message"><div class="bill-message-content"><div class="bill-message-content-cell"><a>公司名称:</a><ion-input [(ngModel)]="companyName"></ion-input></div><div class="bill-message-content-cell"><a>纳税人识别号:</a><ion-input [(ngModel)]="taxpayerIdentif"></ion-input></div><div class="bill-message-content-bcell"><ion-input placeholder=" 请输入详细地址信息"  [(ngModel)]="registerAddress">注册地址:</ion-input></div><div class="bill-message-content-cell"><a>注册电话:</a>  <ion-input [(ngModel)]="registerTelepho"></ion-input></div><div class="bill-message-content-cell"><a>开户银行:</a>  <ion-input [(ngModel)]="depositBank"></ion-input></div><div class="bill-message-content-cell"><a>银行账号:</a>  <ion-input [(ngModel)]="bankAccount"></ion-input></div><div class="bill-message-content-footer" (click)="saveBill()"><span >保存</span></div></div>
</ion-content><ion-footer>
</ion-footer>

ts中调用接口，点击保存：

 //新增发票信息
async getinsertInvoice() {const goodsReq = {'invoiceType' :this.invoiceType,//'invoiceType' :1,'companyName' :this.companyName,'taxpayerIdentifyNumber':this.taxpayerIdentif,'registerAddress':this.registerAddress,'registerTelepho':this.registerTelepho,'depositBank' :this.depositBank,'bankAccount ' :this.bankAccount,'businessLicense':'1',}this.showLoading(this.loadingCtrl, '加载中...').then((loading) => {this.rest.apiPost(goodsReq, this.rest.getinsertInvoice).subscribe(res => {const { status, msg, data } = res;if (status == 200) {this.toastWarning(this.toastCtrl, "添加成功！！");this.navCtrl.back();} else {console.log("请求失败");}loading.dismiss();}, (err) => {this.toastError(this.toastCtrl, err.msg);loading.dismiss();});})
}//保存添加
saveBill(){if(this.invoiceType!=null&&this.companyName!=null&&this.taxpayerIdentif!=null&&this.registerAddress!=null&&this.registerTelepho!=null&&this.depositBank!=null&&this.bankAccount!=null){this.getinsertInvoice();}else{this.toastWarning(this.toastCtrl, "请填写完整信息！！");}
}

二，删

html

      <div class="bill-operation"  *ngIf="showEdit"><div class="bill-null"></div><div class="bill-button"><div class="bill-delete" (click)="deleteBill(item)">删除</div><div class="bill-edit" (click)="editBill(item)">编辑</div></div></div>

//删除发票信息
async getdeleteInvoice() {const goodsReq = {'id':this.selectId}this.showLoading(this.loadingCtrl, '加载中...').then((loading) => {this.rest.apiPost(goodsReq, this.rest.getdeleteInvoice).subscribe(res => {const { status, msg, data } = res;if (status == 200) {this.toastWarning(this.toastCtrl, "删除成功！");this.getlistInvoice();} else {console.log("请求失败");}loading.dismiss();}, (err) => {this.toastError(this.toastCtrl, err.msg);loading.dismiss();});})
}//删除发票
deleteBill(item){console.log("删除",item,item.id)if(item!=null){this.selectId=item.idthis.getdeleteInvoice();}
}

三，查,根据分类条件查，筛选条件查。

1.html获取搜索框输入内容

   <div class="shop-item-search"><img class="shop-search-find" src="../../../assets/icon/search-icon/search.png"><div class="selected-tag" *ngIf="selectTag"  (click)="touchTag(inputContent)">{{this.tagName}}<div class="sure-tag" *ngIf="selectTag"><ion-icon name="close-outline" class="sure-outline"></ion-icon></div></div><div *ngIf="!selectTag"></div><ion-input class="shop-search" type="text" [(ngModel)]="inputContent"(keyup)='getVal($event)'(click)="clearInput()"></ion-input><div class="cancel-tag" *ngIf="selectNoTag"><ion-icon name="close-outline" class="close-outline"></ion-icon></div></div>

2，ts

1》获取取搜索框输入内容

  getVal(e) {//实现防抖,设置定时器let timer = null;timer && clearInterval(timer)timer = setTimeout(() => {console.log(this.inputContent);}, 500);if (this.inputContent.length > 0) {this.inputContent = this.inputContent.slice(0, 30)}let keycode = window.event ? e.keyCode : e.which;if (keycode == 13) {this.selectNoTag = true;//获取到搜索内容this.getProductSearch();}if (keycode == 27 || this.inputContent == "") {//esc键this.selectNoTag = false;this.getProductSearch();}}

2》接口传入：this.inputContent

  //产品搜索async getProductSearch() {const userInfo = {'q': this.inputContent,'pageNo': 1,'pageSize': 16,'order': this.sequenceList,'specOptionName': this.sizeItems,'brand': this.checkedBrands,'price': this.inputPrice,'categoryId': this.tagId,}this.rest.apiPost(userInfo, this.rest.getProductSearch).subscribe(res => {const { status, msg, data } = res;if (status == 200) {console.log("------产品分类搜索-----");this.tagSearchList = res.data.result;console.log(this.tagSearchList);} else {console.log("请求失败");}});}

3》完整代码

a.html

<ion-content fullscreen (ionScroll)="resizeHeader($event)" scrollEvents="true" class="product-reclassify"><section class="shop-item-header"><div id="detailNavBar" [ngClass]="isZindex ? 'onIndex': 'upIndex'"><div class="shop-content-left" (click)="goBack()"><img class="shop-cleft-img" src="../../../assets/icon/search-icon/left.png"></div><div class="shop-item-search"><img class="shop-search-find" src="../../../assets/icon/search-icon/search.png"><div class="selected-tag" *ngIf="selectTag"  (click)="touchTag(inputContent)">{{this.tagName}}<div class="sure-tag" *ngIf="selectTag"><ion-icon name="close-outline" class="sure-outline"></ion-icon></div></div><div *ngIf="!selectTag"></div><ion-input class="shop-search" type="text" [(ngModel)]="inputContent"(keyup)='getVal($event)'(click)="clearInput()"></ion-input><div class="cancel-tag" *ngIf="selectNoTag"><ion-icon name="close-outline" class="close-outline"></ion-icon></div></div><div class="shop-content-right"><img class="shop-cright-img" src="../../../assets/icon/search-icon/message.png"></div></div></section><section class="shop-in-tabs" ><div class="header-tabs" [ngClass]="isZindex ? 'onIndex':'upIndex' "><div class="tab-cell" (click)="changeBymultiple()"><span>综合排序</span></div><div class="tab-cell" (click)="changeBySales()"><span>销量优先</span></div><div class="tab-cell" (click)="changeSequence()"><div class="menu-text"><span>价格排序</span></div><div class="to-select"><div class="to-up" [ngClass]="checkedBydesc ? 'downcolor': 'upcolor'"></div><div class="to-down" [ngClass]="!checkedBydesc ? 'downcolor' : 'upcolor'"></div></div></div><div class="tab-cell" id="left-button"  (click)="openMenu()"><span>筛选</span></div></div></section><section><div class="research-result-details"><div class="research-result-adv" *ngFor="let item of tagSearchList"[routerLink]="['/product-details',item.goodsId]"><div class="result-container-img"><img [src]="item.picturepath"></div><div class="result-container-text"><div class="result-container-name"><span>{{item.productname}}</span></div><div class="result-container-price"><div class="container-price-left"><span>￥{{item.promotionprice}}</span>/<b>盒</b></div><div class="container-price-right"><a>已售{{item.salesVolume}}{{item.salesvolume}}</a></div></div></div></div></div></section><div class="no-more">--暂无更多内容--</div>
<!-- <ion-app > -->
<ion-menu side="end" menuId="first" type="overlay" class="inner-scroll" class="my-custom-menu"><ion-content><!-- 品牌 --><div ng-repeat="ite in getbrand"><div class="select-selector"><div class="selector-title"><span>{{brandList.specName}}</span></div></div><ion-list><div class="select-prices" *ngFor="let index of brandList.options"><div class="alert-brand" (click)="checkBrand(index)"><span>{{index.optionName}}</span></div></div></ion-list></div><!-- 尺寸，颜色--><div *ngFor="let item of specificAtions"><div class="select-selector"><div class="selector-title"><span>{{item.specName}}</span></div><div class="selector-text" (click)="isNoOpen(item)">{{item.options[0].specOptionName}}, {{item.options[1].specOptionName}}...</div><div class="selector-icon" (click)="isNoOpen(item)"><ion-icon name="chevron-down-outline" class="up-gray" *ngIf="!item.isOpen"></ion-icon><ion-icon name="chevron-up-outline" class="down-gray" *ngIf="item.isOpen"></ion-icon></div></div><ion-list class="open-cell" *ngIf="!item.isOpen"><div class="select-prices" *ngFor="let index of item.options"><div class="alert-size" (click)="checkSize(index)" [ngClass]="index.selectCell ? 'isSelect': 'noSelect'">{{index.specOptionName}}</div></div></ion-list><ion-list class="normal-cell" *ngIf="item.isOpen"><div class="select-prices" *ngFor="let index of item.options"><div class="alert-size" (click)="checkSize(index)" [ngClass]="index.selectCell ? 'isSelect': 'noSelect'">{{index.specOptionName}}</div></div></ion-list></div><div><div class="select-selector"><div class="selector-title"><span>价格区间(元)</span></div></div><ion-list><div class="price-area"><ion-input class="alert-price" placeholder="最低价" type="text" [(ngModel)]="beginPrice"(ngModelChange)='priceRegion($event)'></ion-input><div class="alert-bar"><div class="bar"></div></div><ion-input class="alert-price" type="text" placeholder="最高价" [(ngModel)]="endPrice"(ngModelChange)='priceRegion($event)'></ion-input></div></ion-list></div></ion-content><ion-footer><div class="bottom-buttons"><div class="alert-button" (click)="onReset()">重置</div><div class="alert-button" (click)="onFinished()">完成</div></div></ion-footer>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
<!-- </ion-app> --></ion-content>

b.ts

import { Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import { RestService, StorageService, AppService } from '../../service'
import { ToastController, LoadingController, NavController, MenuController } from '@ionic/angular';
import { UserInfo } from 'src/app/common/userinfo';
import { Router, ActivatedRoute } from '@angular/router';@Component({selector: 'app-product-reclassify ',templateUrl: './product-reclassify.page.html',styleUrls: ['./product-reclassify.page.scss'],
})
export class ProductReclassifyPage extends UserInfo implements OnInit {public goodsId: string = ""//货物idpublic tagId: string = "";//选中分类id(传参1)public tagName: string = "";//选中分类值(传参2)// public inputValue: string = "";//分类页搜索值(传参3)public inputContent: string = "";//顶部搜索public selectTag = true; //输入框内默认标签选项public checkedBydesc = true;//价格升降序转换public selectNoTag = false;public tagSearchList = [];//public sequenceList = "";//排序条件public isZindex = true;//层级选择public isOpen = true;//筛选选项伸缩public specificAtions;//规格public checkedSize = '';//选中规格(尺寸颜色)public checkedSizes = [];public sizeItems = "";//选中规格拼接为字符串(尺寸颜色)public selectCell = null;//选中筛选条件public brandList = {specName: '',options: '',optionName:''};//品牌public checkedBrands = '';//选中品牌public beginPrice: string = ""//最低价格public endPrice: string = ""//最高价格public inputPrice: string = ""//价格区间public searchTarget=[];//搜索记录constructor(private rest: RestService,private router: Router,private activatedRoute: ActivatedRoute,private navCtrl: NavController,private menu: MenuController,private loadingCtrl: LoadingController,public appService: AppService,public localStorageService: StorageService,private toastCtrl: ToastController,private el: ElementRef,){ super(appService, localStorageService);this.goodsId = this.activatedRoute.snapshot.paramMap.get('goodsId');this.tagId = this.activatedRoute.snapshot.paramMap.get('tagId');this.tagName = this.activatedRoute.snapshot.paramMap.get('tagName');// this.inputValue = this.activatedRoute.snapshot.paramMap.get('inputValue');}//回退方法goBack() {this.navCtrl.back();}// 监听滚动条resizeHeader(event) {var _header = document.getElementById("detailNavBar");let _opacity = event.detail.scrollTop / 235;if (_opacity > 1) {_opacity = 1_header.setAttribute('style', 'background: rgba(255,255,255,' + _opacity + ')');} else {_header.setAttribute('style', 'background: rgba(255,255,255,' + _opacity + ')');}}// Angular+Ionic侧边栏电商项目实现筛选功能//产品搜索async getProductSearch() {const userInfo = {'q': this.inputContent,'pageNo': 1,'pageSize': 16,'order': this.sequenceList,// 'shopId': '',// 'isNew': 'desc','specOptionName': this.sizeItems,// this.checkedSizes,// 'customCategoryId': '','brand': this.checkedBrands,'price': this.inputPrice,'categoryId': this.tagId,}this.rest.apiPost(userInfo, this.rest.getProductSearch).subscribe(res => {const { status, msg, data } = res;if (status == 200) {console.log("------产品分类搜索-----");this.tagSearchList = res.data.result;console.log(this.tagSearchList);} else {console.log("请求失败");}});}//筛选数据async getListBandAnd() {const userInfo = {'categoryId': this.tagId,}this.rest.apiPost(userInfo, this.rest.getListBandAndSpecOption).subscribe(res => {const { status, msg, data } = res;if (status == 200) {console.log("======筛选获取规格======");console.log(res.data);//品牌this.brandList = res.data[3];//颜色，颜色2,尺寸let list = res.data.splice(0, 3);this.specificAtions = list;console.log(this.specificAtions);console.log(this.brandList);} else {console.log("请求失败");}});}// inputValue//打开侧边栏openMenu() {// e.stopPropagation();this.getListBandAnd();this.menu.enable(true, 'first')this.menu.open("first");console.log("aaa2");if (this.menu.enable(true, 'first'),this.menu.open('first')) {this.isZindex == !this.isZindex;console.log("aaa1")}else if (this.menu.enable(false)) {this.isZindex == true;console.log("aaa2")}}//筛选尺寸颜色选择checkSize(index) {this.specificAtions.forEach(item => {let allCells = item.options;allCells.forEach(itemb => {itemb.selectCell = false;if (index.id == itemb.id) {itemb.selectCell = true;//选中// this.checkedSize = index.specOptionName;// this.checkedSizes.push(index.specOptionName);}});}); if (index.selectCell == true) { this.checkedSize = index.specOptionName;this.checkedSizes.push(index.specOptionName);} if (index.selectCell ==false) {// this.checkedSize = index.specOptionName;this.checkedSizes.splice(index, 1);}console.log(index.selectCell);console.log(this.checkedSizes);let Lists = this.checkedSizes.map(function (obj, indexa) {return obj;}).join(',');//转换为字符串this.sizeItems = Lists;console.log(this.sizeItems);// this.checkedSizes = Object.assign(index.specOptionName,index.specOptionName);// this.inputContent = "";// this.sequence = "";// this.tagId = "";this.getProductSearch();}//筛选品牌选择checkBrand(index) {console.log("选中了");this.checkedBrands = index.optionName;console.log(this.checkedBrands);this.getProductSearch();}//筛选打开关闭isNoOpen(item) {item.isOpen = !item.isOpen;// console.log(item);}
//筛选价格区间priceRegion($event) { this.inputPrice = this.beginPrice + '-' + this.endPrice;this.getProductSearch();console.log(this.inputPrice);}//重置onReset() { this.checkedBrands = '';this.sizeItems = '';this.getProductSearch();this.menu.open('first');}//完成onFinished() { this.menu.enable(false, 'first');this.getProductSearch();}//清除标签touchTag(inputContent) {console.log("aaaa");this.selectTag = false;this.tagId = "";console.log("aaaa");if (inputContent!==null) { this.sequenceList=""this.inputContent=inputContent;this.getProductSearch();}if (inputContent==null) { this.sequenceList=""this.getProductSearch();}}//回车搜索getVal(e) {//实现防抖,设置定时器let timer = null;timer && clearInterval(timer)timer = setTimeout(() => {console.log(this.inputContent);}, 500);if (this.inputContent.length > 0) {this.inputContent = this.inputContent.slice(0, 30)}let keycode = window.event ? e.keyCode : e.which;if (keycode == 13) {this.selectNoTag = true;//获取到搜索内容this.getProductSearch();}if (keycode == 27 || this.inputContent == "") {//esc键this.selectNoTag = false;this.getProductSearch();}}//清除输入clearInput() {this.selectNoTag = !this.selectNoTagthis.inputContent = ""this.getProductSearch();}//综合排序1changeBymultiple() { this.sequenceList = "1";this.getProductSearch();console.log(this.sequenceList);}//销量排序2changeBySales() {this.sequenceList = "2";this.getProductSearch();console.log(this.sequenceList);}//升序3降序4changeSequence() {this.checkedBydesc = !this.checkedBydescif (this.checkedBydesc==true) {this.sequenceList = "3";this.getProductSearch();console.log(this.sequenceList);} if (this.checkedBydesc!=true) {this.sequenceList = "4";this.getProductSearch();console.log(this.sequenceList);}}//获取分类页搜索框的historyItemgetclassifyTab(historyItems: any) {return JSON.parse(localStorage.getItem(historyItems))}classifyTab() { let searchTargetItem=null;if(this.searchTarget!=undefined||this.searchTarget!=null){this.searchTarget =localStorage.historyItems.split(",");//接收分类页面的输入}for (const key in this.searchTarget) {console.log(+"1111");searchTargetItem=this.searchTarget[key]}if (this.tagId == null && this.tagName == null) {this.selectTag = false;//清除掉输入框标签searchTargetItem = searchTargetItem.replace("\"", "").replace("\"", "");//去掉""this.inputContent = searchTargetItem;this.getProductSearch();console.log(searchTargetItem + "获取Item2");}console.log(this.tagId);console.log(this.tagName);}ngOnInit() {}ionViewWillEnter() {this.classifyTab();this.getProductSearch();this.getListBandAnd();}
}

c.scss

@import "../../../style/mixin.scss";
//产业商圈搜索页
.product-reclassify{width: 100%;.no-more {width: 100%;height: rem(80);line-height: rem(50);font-size: rem(32);}
//顶部搜索
.shop-item-header {width: rem(750);height: rem(88);position: fixed;top: rem(0);left: rem(0);display: flex;flex-direction: row;justify-items: center;background-color: white;z-index: 1;.onIndex {z-index: 1;color: orange;}.upIndex {z-index: 0;color: palegreen;}#detailNavBar {display: flex;align-items: center;}.shop-content-left {width: rem(100);height: rem(60);display: flex;align-items: center;.shop-cleft-img {width: rem(30);height: rem(30);margin-left: rem(30);margin-right: rem(20);}}.shop-content-right {width: rem(100);height: rem(60);text-align: center;display: flex;flex-direction: column;justify-content: space-between;justify-items: center;align-items: center;.shop-cright-img {width: rem(30);height: rem(30);margin-top: rem(8);}.shop-cright-text {width: rem(100);height: rem(30);text-align: center;font-size: rem(18);color: #6C6CA1;line-height: rem(30);}}.shop-item-search {width: rem(550);height: rem(60);font-size: rem(28);font-weight: 400;color: rgba(169, 169, 169, 1);line-height: rem(60);display: flex;align-items: center;border-radius: rem(8);background-color: #F1F2F6;.selected-tag{margin-left:rem(10);margin-top: rem(5);margin-bottom: rem(5);min-width: rem(150);max-width: rem(220);height: rem(50);line-height: rem(50);font-size: rem(28);color: #333333;background:#e0e1e6;border-radius: rem(8);text-indent: rem(15);.sure-tag {width: rem(30);height: rem(30);background: #939496;border-radius: 50%;position: absolute;top: rem(30);left: rem(280);.sure-outline {width: rem(30);height: rem(30);position: relative;top: rem(-5);left: rem(-15);color: white;}}}.shop-search-find {width: rem(30);height: rem(30);margin: 0 rem(15);};.cancel-tag {width: rem(30);height: rem(30);background:#939496;border-radius: 50%;position: absolute;top: rem(30);right: rem(120);.close-outline {width: rem(30);height: rem(30);position: relative;top: rem(-10);color:white;}}input.shop-search {flex: 1;height: rem(60);line-height: rem(60);font-size: rem(24);color: rgba(169, 169, 169, 1);border: 0;}}
}//顶部切换
.shop-in-tabs{width: 100%;//height: rem(37);height: rem(82);z-index: 1;
.onIndex{z-index: 1;background-color: orange;
}
.upIndex {z-index: 0;background-color: palegreen;
}
.header-tabs {width: 100%;height: rem(80);line-height: rem(80);display: flex;align-items: center;justify-content: center;top: rem(88);position: fixed;background-color: #FFFFFF;border-top: rem(1) solid #F1F2F6;border-bottom: rem(1) solid #F1F2F6;.tab-cell {width: 25%;text-align: center;.menu-text{width: 80%;span{width: rem(40);height: rem(80);line-height: rem(80);font-size: rem(24);color: #333333;}}.to-select {position: relative;.to-down {height: rem(15);width: rem(15);border-top: rem(15) solid transparent;border-left: rem(15) solid transparent;transform: rotate(225deg);position: absolute;top: rem(-48);left: rem(130);}.to-up {height: rem(15);width: rem(15);border-top: rem(15) solid transparent;border-left: rem(15) solid transparent;transform: rotate(45deg);position: absolute;top:rem(-50);left: rem(120);}.downcolor {border-right: rem(15) solid #007AFF;}.upcolor {border-right: rem(15) solid gray;}}span {width: rem(40);height: rem(80);line-height: rem(80);font-size: rem(24);color: #333333;}span:hover {border-bottom: 2px solid #0265ff;}.spanAtive {color: #0265ff;padding-bottom: rem(3);border-bottom: 2px solid #0265ff;}}
}.header-icon-left {width: rem(60);margin-top: rem(11);height: rem(60);background: rgba(0, 0, 0, 1);opacity: 0.49;border-radius: 50%;left: rem(40);img {width: rem(20);height: rem(40);margin-left: rem(20);margin-top: rem(12);}
}.header-icon-center-img {width: rem(80);height: rem(88);left: rem(240);img {margin-top: rem(4);width: rem(80);height: rem(80);}}.header-icon-cart {width: rem(60);height: rem(60);margin-top: rem(11);background: rgba(0, 0, 0, 1);opacity: 0.49;border-radius: 50%;position: relative;left: rem(440);img {width: rem(30);height: rem(40);margin-left: rem(12);margin-top: rem(12);}
}.header-icon-message {width: rem(60);height: rem(60);margin-top: rem(11);background: rgba(0, 0, 0, 1);opacity: 0.49;border-radius: 50%;position: relative;left: rem(500);img {width: rem(35);height: rem(35);margin-left: rem(12);margin-top: rem(12);}
}
}
//店铺信息.middle-rate-shop-name {margin-top: rem(80);width:rem(750);height: rem(140);display: flex;.middle-rate-shop-name-img {width: 20%;height: rem(140);img {margin: rem(20);width: rem(100);height: rem(100);}}.middle-rate-shop-name-text {width: 80%;height: rem(140);span {font-size: rem(22);font-weight: 500;color: rgba(245, 217, 108, 1);}.rate-shop-name-text-qzh {height: rem(70);font-size: rem(30);font-weight: 400;line-height: rem(70);}}
}.middle-rate-shop-number {width: 100%;height: rem(130);display: flex;.middle-rate-shop-number-all {width: rem(175);height: rem(130);text-align: center;.shop-number-all-text {width: rem(175);height: rem(65);font-size: rem(30);color: rgba(51, 51, 51, 1);}span {width: rem(175);height: rem(65);font-size: rem(22);color: rgba(102, 102, 102, 1);}}.middle-rate-shop-number-people {width: rem(225);height: rem(130);.shop-number-people-thing {width: rem(225);height: rem(65);span {font-size: rem(22);color: rgba(102, 102, 102, 1);}a {font-size: rem(22);color: rgba(0, 122, 255, 1);}}.shop-number-people-service {width: rem(225);height: rem(65);span {font-size: rem(22);color: rgba(102, 102, 102, 1);}a {font-size: rem(22);color: rgba(0, 122, 255, 1);}}}
}.middle-rate-shop-types {width: 100%;height: rem(130);display: flex;.middle-rate-shop-types-itemize {width: 50%;height: rem(130);text-align: center;span {display: inline-block;color: rgba(0, 122, 255, 1);width: rem(160);height: rem(60);font-size: rem(24);line-height: rem(60);margin-top: rem(35);margin-left: rem(175);border-radius: rem(5);border: rem(1) solid rgba(0, 122, 255, 1);}}.middle-rate-shop-types-play {width: 50%;height: rem(130);text-align: center;span {display: inline-block;color: rgba(0, 122, 255, 1);width: rem(160);height: rem(60);font-size: rem(24);line-height: rem(60);margin-top: rem(35);margin-right: rem(175);border-radius: rem(5);border: rem(1) solid rgba(0, 122, 255, 1);}}}
.shop-in-bottom-bar{
.bottom-tabs{width: 100%;height: rem(80);display: flex;align-items: center;justify-content: center;
bottom: rem(0);position: fixed;
background-color:oldlace ;.tab-cell {width: 40%;text-align: center;span {width: rem(40);height: rem(56);font-size: rem(24);color: #333333;}span:hover {border-bottom: 2px solid #0265ff;}.spanAtive {color: #0265ff;padding-bottom: rem(3);border-bottom: 2px solid #0265ff;}}.tab-cell-service{width: 20%;display: flex;flex-direction: column;justify-content: space-between;justify-items: center;align-items: center;.shop-cright-img {width: rem(30);height: rem(30);margin-top: rem(8);}.shop-cright-text {width: rem(100);height: rem(30);text-align: center;font-size: rem(18);color: #6C6CA1;line-height: rem(30);}}
}
}//搜索结果展示.research-result-details {margin-top: rem(84);// background-color: orange;width:rem(750);display: flex;flex-direction: row;flex-wrap: wrap;
.research-result-swipe {width: rem(250);height: rem(420);}
.research-result-adv:nth-child(1n) {border-bottom: rem(1) solid #F0F0F0;border-right: rem(1) solid #F0F0F0;
}
.research-result-adv:nth-child(2n) {border-bottom: rem(1) solid #F0F0F0;
}.research-result-adv {width:rem(374);height: rem(500);.result-container-img {width: 100%;height: rem(355);img {width: rem(334);height: rem(334);margin: rem(20) rem(20) rem(0) rem(20);}}.result-container-text {width: rem(375);height: rem(146);.result-container-name {width: rem(355);height: rem(90);margin-left:rem(20);padding-top: rem(20);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap: break-word;overflow: hidden;span {font-size: rem(24);font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(51, 51, 51, 1);line-height: rem(28);}}.result-container-price {margin: rem(10) rem(10);width: rem(355);height: rem(51);line-height: rem(51);display: flex;.container-price-left{width: 60%;height: rem(51);color:#666666;span {width: rem(84);height: rem(40);font-size: rem(20);font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color:#FF4300;line-height: rem(20);margin-left: rem(10);}}.container-price-right{width: 40%;height: rem(51);a {display: inline-block;width: rem(200);height: rem(40);line-height: rem(20);color:#666666;font-size: rem(20);font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(153, 153, 153, 1);text-indent: rem(5);}}}}}
}//侧边栏   .my-custom-menu {--width: 80%;position: fixed;--z-index: 20;.open-cell {width: 100%;height: rem(160);}.normal {height: rem(160);background-color: plum;}.alert-brand{width: rem(173);height: rem(60);line-height: rem(60);color:#999999;margin: rem(10) rem(20) rem(10) rem(20);font-size: rem(24);text-align: center;border-radius: rem(8);background-color: #F1F2F6;}.alert-brand:hover {color: #007AFF;font-size: rem(24);border: rem(1) #007AFF solid;}.select-selector {width: 100%;height: rem(80);display: flex;.selector-title {width: 66%;height: rem(80);span {display: inline-block;height: rem(80);line-height: rem(80);width: rem(173);padding-left: rem(20);color: #666666;font-size: rem(24);}}.selector-text {width: 24%;height: rem(80);line-height: rem(80);color: #999999;font-size: rem(24);text-align: end;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap: break-word;overflow: hidden;}.selector-text:hover {color: #007AFF;font-size: rem(24);}.selector-icon {width: 10%;height: rem(80);.down-gray,.up-gray {height: rem(40);width: rem(60);margin-top: rem(20);color: rgba(153, 153, 153, 1);}}}.price-area {display: flex;height: rem(60);line-height: rem(60);.alert-price {width: rem(260);height: rem(60);line-height: rem(60);margin-left: rem(20);color: #999999;font-size: rem(24);text-align: center;background-color: #F1F2F6;border-radius: rem(8);}.alert-bar {width: rem(20);height: rem(60);.bar {margin-top: rem(30);margin-left: rem(12);width: rem(15);height: rem(2);background-color: #999999;}}.alert-price:hover {border: rem(1) #007AFF solid;background-color: #FFFFFF;color: #007AFF;}}.select-prices {width: 33%;overflow-y: hidden;line-height: rem(100);font-weight: 400;float: left;.alert-size {width: rem(173);height: rem(60);line-height: rem(60);margin: rem(10) rem(20) rem(10) rem(20);font-size: rem(24);text-align: center;border-radius: rem(8);}.isSelect {border: rem(1) #007AFF solid;background-color: #FFFFFF;color: #007AFF;}.noSelect {color: #999999;background-color: #F1F2F6;}}.bottom-buttons {width: 100%;display: flex;.alert-button {width: 50%;height: rem(100);line-height: rem(100);text-align: center;font-size: rem(32);color: #333333;}.alert-button:hover {color: #FFFFFF;background-color: #007AFF;}}}}

Angular +Ionic实现增加，删除，编辑，修改功能。相关推荐

使用阿里云OSS实现文件的上传、下载、删除及修改功能
一.配置OSS相关配置信息 1.要配置 OSS 相关配置信息,您可以按照以下步骤操作: 登录阿里云控制台,进入 OSS 控制台,创建一个新的 OSS Bucket,并记录下以下信息:Bucket 名称 ...
layui图片上传增加删除图标以及功能
layui图片上传组件是没有删除功能的,这里自己增加删除功能: //删除图标var imgX = document.createElement("img"); imgX.src = ...
Javaweb8==未实现前后端分离的列表展示、新增、删除、修改功能。 servlet（逻辑处理，封装数据进域对象，转发到jsp）+jsp（el表达式获取域对象中的数据+JSTL替换if for）。
最终环境配置: IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5:从数据库取出数据. +(servlet+jsp+el表达式jstl):ser ...
JavaWeb项目----实现用户登录、注册、对商品信息进行的添加、删除、修改功能
MySQL部分 #创建数据库 create database mydb;#创建表 create table t_user (uid int primary key auto_increment,use ...
html表格增加删除和修改,表格的增删改demo
前端菜鸟,下午没什么活儿,写了个不过脑子的demo, 十分喜欢妖尾,就用妖尾做了模拟数据,大伙儿轻喷. 设计感为0,页面配色丑得我都不想看,在此膜拜我司UI工程师, 很多实现功能的地方没有想到更好的办 ...
Java的web项目练习,展示数据库中所有联系人的信息,并实现添加,删除和修改功能
整体思路: 在项目首页写一个超链接,连接地址为一个servlet(ServletDome2)-->(通过service层和dao层到数据库中查询并获取联系人表中的所有联系人的所有信息),将获取 ...
html table增加删除编辑,一个可以增加和删除行的table并可编辑表格中内容
页面文件 key value value 添加行保存 js文件 //保存国际化文件 function savei18ninfo(){ var i18ninfo = geti18ninfo(); al ...
django from组件实现增加删除编辑（推荐用法）
实现效果: 代码示例: 代码: models.py from django.db import modelsclass UserInfo(models.Model):username = models ...
商品的增加删除修改和查询
运行结果: GoodsDao package com.itheima.dao;import com.itheima.pojo.Goods; import com.itheima.utils.Druid ...

Angular +Ionic实现增加，删除，编辑，修改功能。

Angular +Ionic实现增加，删除，编辑，修改功能。相关推荐

最新文章

热门文章