Angular的网络请求(展示商品)

生南星

发布于 2019-07-22 14:27:55

9920

发布于 2019-07-22 14:27:55

文章被收录于专栏：生南星

这是基于Angular实现的前端页面:新建工程(cmd--npm i 工程名) ,新建需要的组件(ng g component 组件名), 利用插座<router-outlet></router-outlet>,路由将页面连接起来.
新建文件夹做后台,首先创建数据库并向里面添加商品数据.

1).首先连接mongodb数据库:

* 连接mongodb数据库的命令: * 1.进入MongoDB下的bin文件夹下--cd 路径 * 2.命令--mongod --dbpath=C:\Users\lx\Desktop\Node\MongoDB\DB * 3.再打开一个cmd * 4.重复第一步--cd 路径 * 5.命令--mongo

打开Robo 3T 连接数据库

2).代码连接数据库,实现添加数据,shopping-cart.js文件

const mongoose = require('mongoose');
//tenDB是数据库的名字
let db=mongoose.connect('mongodb://localhost/tenDB', {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.create({
        proname:"诺基亚",
        proprice:5199,
        prodes:"诺基亚（NOKIA） X6 手机 双卡双待 全网通 移动联通电信4G手机 极地白（4+64GB）） "
    },function (err,res) {
        if(!err){
            console.log("插入数据成功!");
        }else{
            console.log("插入数据失败!");
        }
    });
});

get请求,在商品展示页的组件对应的ts文件里的ngOnInit里写get请求

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

shopping-cart.js文件里,连接数据库后通过get请求请求数据库数据,返回给ngOnInit里的data

app.get('/pro/get', function (req,res) {
        model.find({}, {proname: 1, proprice: 1, prodes: 1, _id: 1}, function (err, res1) {
            res.json(res1);
        });
    });

商品展示页通过*ngFor得到data得到的所有数据

*ngFor="let item of items"

完整的商品展示页

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

至此,代码完成.

npm start命令启动组件

启动shopping-cart.js服务器

运行即可.

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-04-13，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript