10天完成民猫电商毕设——商品展示实现2（7th day）

1.知识充电

router-link传值与接收

向将要跳转页面传值：

<router-link to="/home"></router-link>
<router-link :to="{path: '/home', query: {id:12}}"></router-link>
<router-link :to="{name: 'home', params: {name:hao}}"></router-link>

注意：传参时to前要加冒号，使用params的时候，只能用name来指定页面。
跳转页面接收值：

 data () {
    return {
      id: this.$route.query.id,
      name: this.$route.params.name
    }
  },

可以在watch中进行监听，看看值有没有传入（以监听id为例）

  watch: {
    '$route.query.id': {
      handler: function (val) {
       console.log(val)
      },
      deep: true // 深度检测
    }
  },

params 和 query 传参的区别：

1. params传参时，参数不会出现在url路径上面，但是刷新页面时param里面的数据会消失
2. query传参时，参数出现在url路径上面，刷新页面时query里面的数据不变
3. params传参，路由路径后面需要写/:参数名1/参数名2，传过来的参数就保存在这里，不写参数名的时候，用户一刷新传过来的参数就没有了,而query传参，就不需要在路由路径后面再写任何东西
4. params传参，参数保存在了路由路径后面提前写的对应参数名里。query传参，会自动在路由路径后面形成传的参数名及对应的值。
5. 在传多个参数的时候，使用query比较好，如果使用params，还得在路由路径后面创建多个参数名

条件分页查询

定义：Page<T> page(Page<T> page, Wrapper<T> queryWrapper);
参数解释：T为实体类，page对象需要当前页current和页大小size两个参数进行构造，queryWrapper为查询条件构造器
返回结果：

{
    "records": [
        {
            "id": 240,
            "description": "非常新",
            "hot": null,
            "hotTime": null,
            "name": "二手手机888888",
            "price": 500.0,
            "proPic": "/images/2f80814d-82dd-4361-811a-b172c577053f.jpg",
            "specialPrice": null,
            "specialPriceTime": null,
            "stock": null,
            "bigTypeId": 1,
            "smallTypeId": 1,
            "transactionMode": "线下",
            "desiredNumber": 0,
            "issuePlace": "湖北省武汉市",
            "viewNum": 0,
            "issueId": 42,
            "status": 1,
            "issueTime": "2022-04-26 17:21:40"
        }
    ],
    "total": 9,
    "size": 1,
    "current": 1,
    "orders": [],
    "optimizeCountSql": true,
    "searchCount": true,
    "countId": null,
    "maxLimit": null,
    "pages": 9
}

2.删除发布商品实现

接口测试

前端调用

为了防止用户误操作，我们在真正删除前弹窗进行确认

        this.$confirm('确定要删除该发布吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	//此处放置前端删除和后端删除的代码
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

3.修改商品发布实现

修改商品信息，感觉可以复用发布商品的组件，可以使用saveOrUpdate替换save方法，在插入一条记录前，查询是否已经存在该商品，不存在就插入，存在则更新该记录
不过这里存在一个问题，如何确认是否存在该商品，可以根据商品id,发布商品时id是没有值的，值由后台数据库自增得到，而在更新时，id已经有值了，可以将是否等于id作为条件构造器传入saveOrUpdate进行条件构造
现在的问题的关键是从发布列表点击修改按钮时，需要携带所有该发布的数据到发布组件中，并且其中一部分会需要回显
携带参数：
通过query或者params向跳转组件传值，然后再通过this.$route.query.参数名或者this.$route.params.参数名
数据回显：
单纯的数据回显比较简单，直接赋值即可
图片回显需要在upload组件中设置一个file-list属性，它的值是一个数组，数组的每一项是一个含有name和url属性的对象，
将要回显图片的名字和地址以对象的形式保存到fileList数组中

在修改发布是需要将按钮上的文字显示由“发布宝贝”变更为“重新发布”：
在data中设置一个属性btnContent，初始值为“发布宝贝”，在修改按钮点击后修改btnContent为“重新发布”

4.分类显示所有用户发布的商品实现

在el-menu组件的开启路由模式:router="true"，这样自动将每个el-menu-item的index作为它的路由地址
现在，我们设想将所有这些分类的路由地址都映射到一个Product组件上，唯一不同的是，传入的分类名是不同的，这样后台根据分类名查找所有同类的商品，以对象数组的形式返回给前台循环渲染
在网上查阅资料，找到一个可行的方法可以测试一下：

测试发现有些鸡肋，舍弃。。。
只能在路由的配置文件中一个个将每一个导航路径都映射到组件Product

然后利用el-menu-item的route属性将小分类id传入Product组件

我们在Product组件中的计算属性中利用this.$route.query.id获得分类id

好，现在的问题是在什么时候请求数据库的商品数据，以及一次请求多少数据，最好是每次请求一页数据，点下一页时再请求下一页数据
还是在home组件的mounted时期请求所有分类的首页数据，这样不会出现刷新数据丢失的问题了

分页数据已经获得，明天把他们全部渲染一下

参考文章：
router-link的传值及接收
vue 如何实现多个路由共用同一个页面组件
vue路由监听不到怎么办？
el-menu菜单路由跳转时传参给组件
解决MybatisPlus插件分页查询不起作用，总是查询全部数据问题