无人点餐无人收银系统基础案例
创建项目
创建一个含有路由的项目
ng new angularproject --skip-install
安装依赖
npm install
运行项目
ng serve --open
创建路由
创建home组件
ng g component components/home
创建商品组件
ng g component components/pcontent
重构项目
home.component.css
@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 */
View Code
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">
<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>
View Code
pcontent.component.css
@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 */
View Code
pcontent.component.html
<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>
View Code
styles.css
/* 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 */
View Code
将图片文件存放进项目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
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)
})
})
}
}View Code
home.component.ts
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);
})
}
}View Code
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
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;
})
}
}View Code
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">
<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>
View Code
home.component.css
@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 */
View Code
pcontent.component.ts
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];
})
}
}View Code
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>
View Code
pcontent.component.css
@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 */
View Code
common.service.ts
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)
})
})
}
}View Code
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/:id', component: PcontentComponent },
{ path: '**', redirectTo: 'home' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }View Code
app.module.ts
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 { }View Code
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！
【重要说明】本文为本人的学习记录，论点和观点仅代表个人而不代表当时技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【Gitee地址】秦浩铖：https://gitee.com/wjw1014
