Angular DAY06

Angular06

商品列表

http://101.96.128.94:9999/data/product/list.php?pno=2

商品详情

•	组件名: detail 需要生成: ionic g page detail
•	跳转需要传参: routerLink="[路径, 参数对象]"
•	接口地址: http://101.96.128.94:9999/data/product/details.php?lid=8
–	参数 lid 需要在跳转时传入
–	通过服务读取 路由参数
•	图片需要拼接前缀路径: http://101.96.128.94:9999/
•	下方的HTML展示, 需要正则替换 补全图片路径
–	HTML需要用 : [innerHTML] 属性进行设置, 相当于vue的 v-html

购物车

此页面 服务器做了 登录状态验证 操作, 前端必须开启 session 验证模式: 等讲
最好自己到 学子商城 官网 注册一个账号使用: 因为 doudou 账号被共享了
http://101.96.128.94:9999/register.html
查看购物车数据 
http://101.96.128.94:9999/data/cart/list.php 
 
加入购物车接口:   在商品详情页实现 
http://101.96.128.94:9999/data/cart/add.php?buyCount=1&lid=1 
参数lid 代表商品的id 
注意: 需要登录状态的接口  必须用 proxy 方式, 带证书 发送 
 
更新数量接口: 
http://101.96.128.94:9999/data/cart/update_count.php?iid=1&count=2 
注意:  参数是 iid   
count 代表更新的数量 
 
删除接口:  需要自己在效果图上设计一个 删除按钮 
http://101.96.128.94:9999/data/cart/del.php?iid=1 
注意 参数是 iid 

跨域设定

{
  "/api": {
    "target": "http://101.96.128.94:9999",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}
 

---

首页

•	点击 banner 的滚动图, 可以跳转到对应页面, 显示其中的网页
–	新建页面: banner ioinic g page banner
–	跳转传参: 点击栏目对应的 网页地址
•	注意: 地址是相对路径, 要想显示必须拼接上域名前缀: http://101.96.128.94:9999/
–	网页的显示, 使用 iframe 标签即可
•	首页的查看详情按钮
–	点击时 触发函数, 用 编程跳转完成跳转操作
–	参数 lid , 在返回值中并不是直接存在的; 而是在 返回值的 href 中, 值的结尾; 需要想办法把 lid 从字符串中抠出来

真机发布

项目制作完毕, 需要编译成产品. 然后安装到手机上运行:
此处ionic提供两种方式
• 简单:
– https://dashboard.ionicframework.com/
– 登录官方 -> 上传代码 -> 交钱 -> 打包
• 复杂
– 在自己电脑上搭建编译环境
– https://www.cnblogs.com/unofficial/p/4837190.html