无人点餐无人收银系统基础案例
无人点餐无人收银系统基础案例
创建项目
创建一个含有路由的项目
ng new angularproject --skip-install
安装依赖
npm install
运行项目
ng serve --open
创建路由
创建home组件
ng g component components/home
创建商品组件
ng g component components/pcontent
重构项目
home.component.css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@charset "UTF-8"; .index_header { width: 96%; margin: 0 auto; height: 4.4rem; background: #fff; margin-top: 1rem; display: flex; border-radius: .5rem; } .index_header .hlist { flex: 1; text-align: center; padding-top: .2rem; border-right: 1px solid #eee; } .index_header .hlist img { width: 2rem; height: 2rem; margin: 0 auto; } .index_header .hlist:last-child { border-right: none; } /*列表*/ .item .item_cate { text-align: center; padding: .5rem; } .item .item_list { display: flex; flex-wrap: wrap; padding: 0px .5rem; } .item .item_list li { width: 33.3%; padding: .5rem; box-sizing: border-box; } .item .item_list li .inner { background: #fff; width: 100%; border-radius: .5rem; overflow: hidden; } .item .item_list li .inner img { width: 100%; } .item .item_list li .inner p { padding: .2rem .5rem; } .item .item_list li .inner .title { font-weight: bold; } /*侧边栏*/ .left_cate { /*css3运动 加过渡效果*/ transition: all 1s; transform: translate(-100%, 0); z-index: 2; width: 6rem; height: 100%; position: fixed; background: #eee; top: 0px; left: 0px; } .left_cate ul { position: absolute; height: 100%; padding: .5rem; z-index: 3; background: #eee; } .left_cate ul li { line-height: 4.4rem; } .left_cate .nav_cate { position: absolute; right: -3.5rem; background: rgba(132, 128, 128, 0.9); top: 42%; width: 5rem; height: 4rem; text-align: center; border-radius: 0rem 50% 50% 0rem; z-index: 2; } .left_cate .nav_cate img { width: 1.8rem; height: 1.8rem; margin-left: 1rem; margin-top: .4rem; } .left_cate .nav_cate p { color: #fff; margin-left: 1rem; margin-top: -0.3rem; } /*透明层*/ .bg { position: fixed; width: 100%; height: 100%; background: rgba(132, 128, 128, 0.4); left: 0px; top: 0px; z-index: 1; display: none; } /*首页导航*/ .footer_nav { height: 4.4rem; width: 4.4rem; background: #000; position: fixed; color: #fff; bottom: .5rem; left: .5rem; text-align: center; border-radius: 50%; } .footer_nav img { width: 1.8rem; height: 1.8rem; margin-top: .4rem; } .footer_nav p { position: relative; top: -0.2rem; } /*导航弹出层*/ .footer_nav_show { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.6); z-index: 2; } .footer_nav_show .list li { height: 4.4rem; width: 4.4rem; background: #000; position: absolute; color: #fff; left: .5rem; text-align: center; border-radius: 50%; } .footer_nav_show .list li img { width: 1.8rem; height: 1.8rem; margin-top: .4rem; } .footer_nav_show .list li p { position: relative; top: -0.2rem; font-size: 1rem; } .footer_nav_show .list li:nth-child(1) { bottom: 15.4rem; left: 0px; } .footer_nav_show .list li:nth-child(2) { bottom: 12.4rem; left: 30%; margin-left: -2.2rem; } .footer_nav_show .list li:nth-child(3) { bottom: 7.4rem; left: 45%; margin-left: -2.2rem; } .footer_nav_show .list li:nth-child(4) { left: 50%; margin-left: -2.2rem; bottom: .5rem; } .footer_nav_show .list li:nth-child(5) { left: .5rem; bottom: .5rem; } .footer_cart { height: 4.4rem; width: 4.4rem; background: red; position: fixed; color: #fff; bottom: .5rem; right: .5rem; text-align: center; border-radius: 50%; } .footer_cart img { width: 1.8rem; height: 1.8rem; margin-top: .4rem; } .footer_cart p { position: relative; top: -0.2rem; } /*# sourceMappingURL=index.css.map */
home.component.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<header class="index_header"> <div class="hlist"> <img src="assets/images/rexiao.png"/> <p>热销榜</p> </div> <div class="hlist"> <img src="assets/images/caidan.png" /> <p>点过的菜</p> </div> <div class="hlist"> <img src="assets/images/sousuo.png"/> <p>搜你喜欢</p> </div> </header> <div class="content"> <div class="item"> <h3 class="item_cate">皮蛋瘦肉粥</h3> <ul class="item_list"> <li> <div class="inner"> <img src="assets/images/1.jpg" /> <p class="title">大蒜腊肉</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/2.jpg" /> <p class="title">家乡扣肉</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/3.jpg" /> <p class="title">主打鸡</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/2.jpg" /> <p class="title">酸辣土豆丝</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/3.jpg" /> <p class="title">家乡腊肉</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/2.jpg" /> <p class="title">长沙臭豆腐</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/3.jpg" /> <p class="title">主打鸡</p> <p class="price">¥26</p> </div> </li> </ul> </div> <div class="item"> <h3 class="item_cate">皮蛋瘦肉粥</h3> <ul class="item_list"> <li> <div class="inner"> <img src="assets/images/1.jpg" /> <p class="title">大蒜腊肉</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/2.jpg" /> <p class="title">家乡扣肉</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/3.jpg" /> <p class="title">主打鸡</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/2.jpg" /> <p class="title">酸辣土豆丝</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/3.jpg" /> <p class="title">家乡腊肉</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/2.jpg" /> <p class="title">长沙臭豆腐</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/3.jpg" /> <p class="title">主打鸡</p> <p class="price">¥26</p> </div> </li> </ul> </div> <div class="item"> <h3 class="item_cate">皮蛋瘦肉粥</h3> <ul class="item_list"> <li> <div class="inner"> <img src="assets/images/1.jpg" /> <p class="title">大蒜腊肉</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/2.jpg" /> <p class="title">家乡扣肉</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/3.jpg" /> <p class="title">主打鸡</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/2.jpg" /> <p class="title">酸辣土豆丝</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/3.jpg" /> <p class="title">家乡腊肉</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/2.jpg" /> <p class="title">长沙臭豆腐</p> <p class="price">¥26</p> </div> </li> <li> <div class="inner"> <img class="item_img" src="assets/images/3.jpg" /> <p class="title">主打鸡</p> <p class="price">¥26</p> </div> </li> </ul> </div> </div> <div class="bg" id="bg"> </div>
pcontent.component.css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@charset "UTF-8"; .back { height: 3.8rem; line-height: 3.8rem; width: 3.8rem; border-radius: 50%; background: #000; position: fixed; top: .5rem; left: .5rem; color: #fff; } .back a{ color: #fff; display: inline-block; text-decoration: none; } .back:before { content: ""; display: block; width: .8rem; height: .8rem; border-left: .2rem solid #fff; border-bottom: .2rem solid #fff; float: left; position: relative; top: 1.3rem; left: .6rem; transform: rotate(45deg); margin-right: .4rem; } .p_content .p_info { background: #fff; } .p_content .p_info img { width: 100%; height: 18rem; } .p_content .p_info h2 { padding: .2rem .5rem; } .p_content .p_info .price { padding: .2rem .5rem; color: red; } .p_content .p_detial { background: #fff; margin-top: 1rem; } .p_content .p_detial h3 { padding: .5rem; } .p_content .p_detial .p_content { padding: 1rem; } .p_content .p_detial .p_content img { max-width: 100%; display: block; margin: 0 auto; } .p_content .p_detial .p_content * { line-height: 1.5; color: #666; } /*搴曢儴*/ .pfooter { position: fixed; bottom: 0px; height: 4.4rem; line-height: 4.4rem; background: #fff; left: 0px; width: 100%; border-top: 1px solid #eee; } .pfooter .cart { float: left; display: flex; } .pfooter .cart strong { flex: 1; font-size: 1.6rem; padding: 0rem .5rem; } .pfooter .cart .cart_num { width: 10rem; display: flex; margin-top: .8rem; } .pfooter .cart .cart_num .input_left, .pfooter .cart .cart_num .input_right { flex: 1; width: 2.8rem; height: 2.8rem; line-height: 2.8rem; text-align: center; color: red; border: 1px solid #eee; font-size: 2.4rem; } .pfooter .cart .cart_num .input_center { flex: 1; } .pfooter .cart .cart_num .input_center input { width: 2rem; text-align: center; width: 100%; height: 2.8rem; border: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; float: left; } .pfooter .addcart { float: right; background: red; color: #fff; height: 3rem; border: none; padding: 0 .5rem; border-radius: .5rem; margin-top: .8rem; margin-right: .5rem; } /*# sourceMappingURL=pcontent.css.map */
pcontent.component.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="back"> <a [routerLink]="[ '/home']">返回</a> </div> <div class="p_content"> <div class="p_info"> <img src="assets/images/product.jpg"/> <h2>小炒肉</h2> <p class="price">22.00/份</p> </div> <div class="p_detial"> <h3> 商品详情 </h3> <div class="p_content"> <img src="assets/images/product.jpg"/> <br /> <p> 韩国辣酱海鲜炒面,青椒炒牛肉,芦笋腰果炒虾仁,『家常料理』简单又好吃的辣炒起司年糕鸡排 </p> <br /> <p> 韩国辣酱海鲜炒面,青椒炒牛肉,芦笋腰果炒虾仁,『家常料理』简单又好吃的辣炒起司年糕鸡排 </p> </div> </div> </div> <footer class="pfooter"> <div class="cart"> <strong>数量:</strong> <div class="cart_num"> <div class="input_left">-</div> <div class="input_center"> <input type="text" readonly="readonly" value="1" name="num" id="num" /> </div> <div class="input_right">+</div> </div> </div> <button class="addcart">加入购物车</button> </footer>
styles.css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* You can add global styles to this file, and also import other style files */ @charset "UTF-8"; body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; } html { font-size: 62.5%; /* 根元素是10px; 16*62.5%=10 默认在pc端根元素会解析成12px */ } body { font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif; color: #555; background-color: #F7F7F7; } em, i { font-style: normal; } ul, li { list-style-type: none; } strong { font-weight: normal; } .clearfix:after { content: ""; display: block; visibility: hidden; height: 0; clear: both; } /*# sourceMappingURL=basic.css.map */
将图片文件存放进项目assets文件夹下
配置路由
app-routing.module.ts文件
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; // 引入两个模块 import { HomeComponent } from './components/home/home.component'; import { PcontentComponent } from './components/pcontent/pcontent.component'; // 配置路由 const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'pcontent', component: PcontentComponent }, { path: '**', redirectTo: 'home' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
测试没有问题,说明我们的路由没有问题了!路由设置成功!
创建服务获取数据
ng g service service/common
app.module.ts 文件引入http模块及服务
添加 http 模块
import { HttpClientModule,HttpClientJsonpModule } from '@angular/common/http';
添加模块
imports: [ BrowserModule, AppRoutingModule, HttpClientModule, HttpClientJsonpModule ],
添加服务
import { CommonService } from './services/common.service';
在下面添加服务
providers: [CommonService],
在home.comonent.ts文件使用服务
引入服务
import { CommonService } from '../../services/common.service';
构造函数声明服务
constructor(public common:CommonService) { }
在服务中请求数据
引入http模块
import { HttpClient } from '@angular/common/http';
构造函数中声明
constructor(public http:HttpClient) { }
创建get方法获取数据
get(api){ // 异步数据请求 return new Promise((resole,reject)=>{ this.http.get(api).subscribe((response)=>{ resolve(response) }) }) }
common.service.ts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { resolve } from 'q'; @Injectable({ providedIn: 'root' }) export class CommonService { public domain:string='http://a.itying.com/' constructor(public http:HttpClient) { } /** * http://a.itying.com/ api/productlist * @param api */ get(api){ // 异步数据请求 return new Promise((resolve,reject)=>{ this.http.get(this.domain+api).subscribe((response)=>{ resolve(response) }) }) } }
home.component.ts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import { Component, OnInit } from '@angular/core'; import { CommonService } from '../../services/common.service'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor(public common:CommonService) { } ngOnInit() { var api = 'api/productlist' this.common.get(api).then((response)=>{ console.log(response); }) } }
home 首页实现获取后台数据
home.component.ts 文件最中,编写list变量,向html页面传送服务器数据
import { Component, OnInit } from '@angular/core'; import { CommonService } from '../../services/common.service'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { // 定义变量list,向前端传送后台数据 public list:any[]=[]; // 定义变量domain,存储后台域名 public domain:string=""; constructor(public common:CommonService) { // 构造函数中给变量domain赋值common组件中的domain域名 this.domain = this.common.domain; } ngOnInit() { var api = 'api/productlist' this.common.get(api).then((response:any)=>{ console.log(response) this.list=response.result; }) } }
前端 home.component.html 文件,关联后台数据
<header class="index_header"> <div class="hlist"> <img src="assets/images/rexiao.png" /> <p>热销榜</p> </div> <div class="hlist"> <img src="assets/images/caidan.png" /> <p>点过的菜</p> </div> <div class="hlist"> <img src="assets/images/sousuo.png" /> <p>搜你喜欢</p> </div> </header> <div class="content"> <div class="item" *ngFor="let item of list"> <h3 class="item_cate">{{item.title}}</h3> <ul class="item_list"> <li *ngFor="let food of item.list"> <div class="inner"> <img [src]="domain+food.img_url" /> <p class="title">{{food.title}}</p> <p class="price">¥{{food.price}}</p> </div> </li> </ul> </div> </div> <div class="bg" id="bg"> </div>
详情页-动态路由传值
进入 app-routing.moudle.ts 文件,给pcontent路由添加一个参数id
{ path: 'pcontent/:id', component: PcontentComponent },
到 home.component.html 文件中,为食品添加路由跳转,将商品的id值传入
<a [routerLink]="[ '/pcontent', food._id ]"> <img [src]="domain+food.img_url" /> <p class="title">{{food.title}}</p> <p class="price">¥{{food.price}}</p> </a>
在 pcontent.component.ts 文件中,获取home页面传进的id值
首先引入类库
import { ActivatedRoute } from '@angular/router';
在构造函数中声明
constructor(public router:ActivatedRoute) { }
获取传进的id值
// 获取传进的id值 this.router.params.subscribe((value)=>{ console.log(value) })
编写获取数据的方法requestContent()
首先引入common服务。
import { CommonService } from '../../services/common.service';
在构造函数中声明
constructor(public router:ActivatedRoute,public common:CommonService) { }
// 定义后台服务器域名 public domain:string=''; constructor(public router:ActivatedRoute,public common:CommonService) { this.domain = this.common.domain; }
编写请求数据方法
ngOnInit() { // 获取传进的id值 this.router.params.subscribe((value:any)=>{ console.log(value) this.requestContent(value.id) }) } // 定义获取数据的方法 requestContent(id){ // 请求数据 http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955 var api = 'api/productcontent?id='+id; this.common.get(api).then((response:any)=>{ console.log(response) }) } }
定义数组,向前端传递数据
public list:any[] =[];
this.list=response.result[0];
修改 pcontent.component.html 文件前端代码
<div class="back"> <a [routerLink]="[ '/home']">返回</a> </div>
<div class="p_content">
<div class="p_info">
<img [src]="domain+list.img_url"/>
<h2>{{list.title}}</h2>
<p class="price">{{list.price}}/份</p>
</div>
<div class="p_detial">
<h3>
商品详情
</h3>
<div class="p_content" [innerHTML]='list.content'>
</div>
</div>
</div>
<footer class="pfooter">
<div class="cart">
<strong>数量:</strong>
<div class="cart_num">
<div class="input_left">-</div>
<div class="input_center">
<input type="text" readonly="readonly" value="1" name="num" id="num" />
</div>
<div class="input_right">+</div>
</div>
</div>
<button class="addcart">加入购物车</button>
</footer>
项目关键代码
home.component.ts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import { Component, OnInit } from '@angular/core'; import { CommonService } from '../../services/common.service'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { // 定义变量list,向前端传送后台数据 public list:any[]=[]; // 定义变量domain,存储后台域名 public domain:string=""; constructor(public common:CommonService) { // 构造函数中给变量domain赋值common组件中的domain域名 this.domain = this.common.domain; } ngOnInit() { var api = 'api/productlist' this.common.get(api).then((response:any)=>{ console.log(response) this.list=response.result; }) } }
home.component.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<header class="index_header"> <div class="hlist"> <img src="assets/images/rexiao.png" /> <p>热销榜</p> </div> <div class="hlist"> <img src="assets/images/caidan.png" /> <p>点过的菜</p> </div> <div class="hlist"> <img src="assets/images/sousuo.png" /> <p>搜你喜欢</p> </div> </header> <div class="content"> <div class="item" *ngFor="let item of list"> <h3 class="item_cate">{{item.title}}</h3> <ul class="item_list"> <li *ngFor="let food of item.list"> <div class="inner"> <a [routerLink]="[ '/pcontent', food._id ]"> <img [src]="domain+food.img_url" /> <p class="title">{{food.title}}</p> <p class="price">¥{{food.price}}</p> </a> </div> </li> </ul> </div> </div> <div class="bg" id="bg"> </div>
home.component.css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@charset "UTF-8"; .index_header { width: 96%; margin: 0 auto; height: 4.4rem; background: #fff; margin-top: 1rem; display: flex; border-radius: .5rem; } .index_header .hlist { flex: 1; text-align: center; padding-top: .2rem; border-right: 1px solid #eee; } .index_header .hlist img { width: 2rem; height: 2rem; margin: 0 auto; } .index_header .hlist:last-child { border-right: none; } /*列表*/ .item .item_cate { text-align: center; padding: .5rem; } .item .item_list { display: flex; flex-wrap: wrap; padding: 0px .5rem; } .item .item_list li { width: 33.3%; padding: .5rem; box-sizing: border-box; } .item .item_list li .inner { background: #fff; width: 100%; border-radius: .5rem; overflow: hidden; } .item .item_list li .inner img { width: 100%; } .item .item_list li .inner p { padding: .2rem .5rem; } .item .item_list li .inner .title { font-weight: bold; } /*侧边栏*/ .left_cate { /*css3运动 加过渡效果*/ transition: all 1s; transform: translate(-100%, 0); z-index: 2; width: 6rem; height: 100%; position: fixed; background: #eee; top: 0px; left: 0px; } .left_cate ul { position: absolute; height: 100%; padding: .5rem; z-index: 3; background: #eee; } .left_cate ul li { line-height: 4.4rem; } .left_cate .nav_cate { position: absolute; right: -3.5rem; background: rgba(132, 128, 128, 0.9); top: 42%; width: 5rem; height: 4rem; text-align: center; border-radius: 0rem 50% 50% 0rem; z-index: 2; } .left_cate .nav_cate img { width: 1.8rem; height: 1.8rem; margin-left: 1rem; margin-top: .4rem; } .left_cate .nav_cate p { color: #fff; margin-left: 1rem; margin-top: -0.3rem; } /*透明层*/ .bg { position: fixed; width: 100%; height: 100%; background: rgba(132, 128, 128, 0.4); left: 0px; top: 0px; z-index: 1; display: none; } /*首页导航*/ .footer_nav { height: 4.4rem; width: 4.4rem; background: #000; position: fixed; color: #fff; bottom: .5rem; left: .5rem; text-align: center; border-radius: 50%; } .footer_nav img { width: 1.8rem; height: 1.8rem; margin-top: .4rem; } .footer_nav p { position: relative; top: -0.2rem; } /*导航弹出层*/ .footer_nav_show { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.6); z-index: 2; } .footer_nav_show .list li { height: 4.4rem; width: 4.4rem; background: #000; position: absolute; color: #fff; left: .5rem; text-align: center; border-radius: 50%; } .footer_nav_show .list li img { width: 1.8rem; height: 1.8rem; margin-top: .4rem; } .footer_nav_show .list li p { position: relative; top: -0.2rem; font-size: 1rem; } .footer_nav_show .list li:nth-child(1) { bottom: 15.4rem; left: 0px; } .footer_nav_show .list li:nth-child(2) { bottom: 12.4rem; left: 30%; margin-left: -2.2rem; } .footer_nav_show .list li:nth-child(3) { bottom: 7.4rem; left: 45%; margin-left: -2.2rem; } .footer_nav_show .list li:nth-child(4) { left: 50%; margin-left: -2.2rem; bottom: .5rem; } .footer_nav_show .list li:nth-child(5) { left: .5rem; bottom: .5rem; } .footer_cart { height: 4.4rem; width: 4.4rem; background: red; position: fixed; color: #fff; bottom: .5rem; right: .5rem; text-align: center; border-radius: 50%; } .footer_cart img { width: 1.8rem; height: 1.8rem; margin-top: .4rem; } .footer_cart p { position: relative; top: -0.2rem; } /*# sourceMappingURL=index.css.map */
pcontent.component.ts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { CommonService } from '../../services/common.service'; @Component({ selector: 'app-pcontent', templateUrl: './pcontent.component.html', styleUrls: ['./pcontent.component.css'] }) export class PcontentComponent implements OnInit { // 定义后台服务器域名 public domain:string=''; public list:any[] =[]; constructor(public router:ActivatedRoute,public common:CommonService) { this.domain = this.common.domain; } ngOnInit() { // 获取传进的id值 this.router.params.subscribe((value:any)=>{ // console.log(value) this.requestContent(value.id) }) } // 定义获取数据的方法 requestContent(id){ // 请求数据 http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955 var api = 'api/productcontent?id='+id; this.common.get(api).then((response:any)=>{ // console.log(response) this.list=response.result[0]; }) } }
pcontent.component.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="back"> <a [routerLink]="[ '/home']">返回</a> </div> <div class="p_content"> <div class="p_info"> <img [src]="domain+list.img_url"/> <h2>{{list.title}}</h2> <p class="price">{{list.price}}/份</p> </div> <div class="p_detial"> <h3> 商品详情 </h3> <div class="p_content" [innerHTML]='list.content'> </div> </div> </div> <footer class="pfooter"> <div class="cart"> <strong>数量:</strong> <div class="cart_num"> <div class="input_left">-</div> <div class="input_center"> <input type="text" readonly="readonly" value="1" name="num" id="num" /> </div> <div class="input_right">+</div> </div> </div> <button class="addcart">加入购物车</button> </footer>
pcontent.component.css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@charset "UTF-8"; .back { height: 3.8rem; line-height: 3.8rem; width: 3.8rem; border-radius: 50%; background: #000; position: fixed; top: .5rem; left: .5rem; color: #fff; } .back a{ color: #fff; display: inline-block; text-decoration: none; } .back:before { content: ""; display: block; width: .8rem; height: .8rem; border-left: .2rem solid #fff; border-bottom: .2rem solid #fff; float: left; position: relative; top: 1.3rem; left: .6rem; transform: rotate(45deg); margin-right: .4rem; } .p_content .p_info { background: #fff; } .p_content .p_info img { width: 100%; height: 18rem; } .p_content .p_info h2 { padding: .2rem .5rem; } .p_content .p_info .price { padding: .2rem .5rem; color: red; } .p_content .p_detial { background: #fff; margin-top: 1rem; } .p_content .p_detial h3 { padding: .5rem; } .p_content .p_detial .p_content { padding: 1rem; } .p_content .p_detial .p_content img { max-width: 100%; display: block; margin: 0 auto; } .p_content .p_detial .p_content * { line-height: 1.5; color: #666; } /*搴曢儴*/ .pfooter { position: fixed; bottom: 0px; height: 4.4rem; line-height: 4.4rem; background: #fff; left: 0px; width: 100%; border-top: 1px solid #eee; } .pfooter .cart { float: left; display: flex; } .pfooter .cart strong { flex: 1; font-size: 1.6rem; padding: 0rem .5rem; } .pfooter .cart .cart_num { width: 10rem; display: flex; margin-top: .8rem; } .pfooter .cart .cart_num .input_left, .pfooter .cart .cart_num .input_right { flex: 1; width: 2.8rem; height: 2.8rem; line-height: 2.8rem; text-align: center; color: red; border: 1px solid #eee; font-size: 2.4rem; } .pfooter .cart .cart_num .input_center { flex: 1; } .pfooter .cart .cart_num .input_center input { width: 2rem; text-align: center; width: 100%; height: 2.8rem; border: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; float: left; } .pfooter .addcart { float: right; background: red; color: #fff; height: 3rem; border: none; padding: 0 .5rem; border-radius: .5rem; margin-top: .8rem; margin-right: .5rem; } /*# sourceMappingURL=pcontent.css.map */
common.service.ts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { resolve } from 'q'; @Injectable({ providedIn: 'root' }) export class CommonService { public domain:string='http://a.itying.com/' constructor(public http:HttpClient) { } /** * http://a.itying.com/ api/productlist * @param api */ get(api){ // 异步数据请求 return new Promise((resolve,reject)=>{ this.http.get(this.domain+api).subscribe((response)=>{ resolve(response) }) }) } }
app-routing.module.ts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; // 引入两个模块 import { HomeComponent } from './components/home/home.component'; import { PcontentComponent } from './components/pcontent/pcontent.component'; // 配置路由 const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'pcontent/:id', component: PcontentComponent }, { path: '**', redirectTo: 'home' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
app.module.ts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule,HttpClientJsonpModule } from '@angular/common/http'; import { CommonService } from './services/common.service'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './components/home/home.component'; import { PcontentComponent } from './components/pcontent/pcontent.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, PcontentComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, HttpClientJsonpModule ], providers: [CommonService], bootstrap: [AppComponent] }) export class AppModule { }
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014