前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >完整代码

完整代码

作者头像
生南星
发布2019-07-22 14:27:42
7510
发布2019-07-22 14:27:42
举报
文章被收录于专栏:生南星
  1. myHeader组件HTML页面
代码语言:javascript
复制
<div class="header">
  <h3>欢迎来到购物车!</h3>
</div>

myHeader组件css页面

代码语言:javascript
复制
.header{
  width: 100%;
  height: 10%;
  background-color: #b6ccc8;
  display: flex;
  align-items: center;
  justify-content: center;
}

2.app组件HTML页面

代码语言:javascript
复制
<app-my-header></app-my-header>
<router-outlet></router-outlet>
<app-my-footer></app-my-footer>

3.myFooter组件的HTML页面

代码语言:javascript
复制
<section>
  <p>联系我们 | tel: 036-4758434095</p>
</section>

myFooter组件的css页面

代码语言:javascript
复制
section{
  width: 100%;
  height: 15%;
  background-color: #b6ccc8;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  box-sizing: border-box;
  padding-top: 2%;
}

4.myMiddle组件的HTML页面

代码语言:javascript
复制
<div class="middle">
  <div class="left">
    <a [routerLink]="['product']">商品详情</a>
  </div>
  <div class="right">
    <p>welcome to shopping cart!</p>
    <router-outlet></router-outlet>
  </div>
  <div class="clean"></div>
</div>

myMiddle组件的css页面

代码语言:javascript
复制
.middle{
  width: 100%;
  height: 75%;
  text-align: center;
}
.left{
  width: 20%;
  height: 100%;
  float: left;
  background: #f7ffeb;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
}
.right{
  width: 80%;
  height: 100%;
  float: left;
  background: #ffdf90;
  text-align: center;
}
p{
  font-size: 20px;
}
.clean{
  clear: both;
}

5.myRight组件的HTML页面

代码语言:javascript
复制
<section>
  <h2>商品展示页面</h2>
  <div *ngFor="let item of items" class="des">
    <p>商品名称:{{item.proname}}, 商品价格:{{item.proprice}}</p>
    <p>商品描述:{{item.prodes}}</p>
  </div>
</section>

myRight组件的css页面

代码语言:javascript
复制
section{
  width: 100%;
  text-align: left;
}
h2{
  text-align: center;
}
.des{
  width: 100%;
  margin-top: 6px;
}

myRight组件的ts页面

代码语言:javascript
复制
import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-my-right',
  templateUrl: './my-right.component.html',
  styleUrls: ['./my-right.component.css']
})
export class MyRightComponent implements OnInit {
  items: any;
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('/pro/get').subscribe((data) => {
      console.log(data);
      this.items = data;
    });
  }
}

6.shopping-cart.js页面

代码语言:javascript
复制
const mongoose = require('mongoose');

let express = require('express');
let bp = require('body-parser');
let app = express();
app.use(bp.json());


let db=mongoose.connect('mongodb://localhost/shoppingDB', {useNewUrlParser: true});
mongoose.connection.on("open",function () {
    console.log("数据库连接成功!");
    let schema=new mongoose.Schema({
        proname:{type:"String"},
        proprice:{type:"Number"},
        prodes:{type:"String"},
    },{
        collection:"shop_product"
    });
    let model=mongoose.model("shop_product",schema);
    
    app.get('/pro/get', function (req,res) {
        model.find({}, {proname: 1, proprice: 1, prodes: 1, _id: 1}, function (err, res1) {
            res.json(res1);
        });
    });
    /*model.create({
        proname:"诺基亚",
        proprice:5199,
        prodes:"诺基亚(NOKIA) X6 手机 双卡双待 全网通 移动联通电信4G手机 极地白(4+64GB)) "
    },function (err,res) {
        if(!err){
            console.log("插入数据成功!");
        }else{
            console.log("插入数据失败!");
        }
    });*/
});

app.listen(4556);

温馨提示:记得配置问文件.

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 生南星 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档