城市模块开发

城市模块开发

目录

1. 添加
2. 列表
3. 编辑

添加城市页面开发

1. 静态页面

2. 需要添加的字段

   "name": "城市名称",
   "pinyin": "城市拼音",
   "isHot": 是否热门,
   

3. 提交

   • 发送请求
   • 给按钮添加loading http://huruqing.cn/docs/Element/list/04.Button.html
   • 提示用户 http://huruqing.cn/docs/Element/list/18.Message.html

城市列表页面开发

1. 静态

2. 获取数据

3. 格式单元格的数据

   // template  
   
   
   

   // js
     methods: {
       // 格式化热门城市,true显示是,否则显示 否
       formatHot(row, column, cellValue, index) {
         return cellValue?'是':'否';
       },
     }
   

4. 添加分页

   • 在data添加一个变量total, 请求数据后重新赋值

   • tempate的代码

   • 添加点击事件
     在分页组件上添加 @current-change="changPage"
     changPage函数如下

      // 切换页数
     changPage(num) {
         // 重新请求数据,带上页码pageNum
         this.getList(num);
     },
     

     // getList函数
      getList(pageNum) {
           let url = "/city/getList?pageNum="+pageNum;
           ...
      }
     

5. 添加loading

   • 在data里定义变量loading
   • 在table表格上添加属性 v-loading="loading"
   • 在请求的过程中修改loading的值

6. 添加删除

   • 添加删除按钮

   • 发送请求

   • 请求成功之后,移除页面对应的数据

     removeCity(scope) {
         // 被删除数据的下标
         let $index = scope.$index;
         // 发送请求
         let url = '/city/delById';
         let data = {
             cityId: scope.row.cityId
         }
         this.$axios.post(url,data).then(res=> {
             this.$message.success('删除成功');
             // 移除页面对应数据
             this.list.splice($index,1);
         }).catch(err=> {
             this.$message.error(err);
         })
     },
     

编辑页面开发

(一) 路由传参,获取要修改的城市id

1. 新增编辑页面,配置动态路由

       
       {
           path: '/city',  
           component: Layout,
           redirect: '/city/list',
           children:[
               {
                   path: 'list',
                   component: ()=>import('@/pages/city/children/list')
               },
               {
                   path: 'add',
                   component: ()=>import('@/pages/city/children/add')
               },
               {
                   // 配置动态路由
                   path: 'edit/:cityId',
                   component: ()=>import('@/pages/city/children/edit')
               },
           ]
       },
   

2. 从列表页面添加下面的代码

   第一种：

    
   
   
   
   //在方法中methods的命令
    //编辑的方法
       edit(scope){
         let cityId = scope.row.cityId
         console.log("cityId",cityId)
         this.$router.push(`/city/edit/${cityId}`)
         console.log("111",scope)
       },
         
      //路由拍的配置
           
            {
                path: "edit/:cityId",
                 component: () =>
                 import ('@/page/city/children/edit')
               }
   
   
   //在编辑页面中的配置如下：
     created() {    
       var cityId=this.$route.params.cityId
      this.getdata(cityId)  
     },
   

   第二种方法：

         编辑
   
   //路由拍的配置
           
            {
                path: "edit/:cityId",
                 component: () =>
                 import ('@/page/city/children/edit')
               }
   
   
   //在编辑页面中的配置如下：
     created() {    
       var cityId=this.$route.params.cityId
      this.getdata(cityId)  
     },
   
   
   

   总结:两种需要路由传参，方法一样，动态路由配置，并且在另外的一个页面也使用同样的方法来接收传过来的参数

  ```
   
   
  ```

3. 在编辑页面通过下面的代码获取cityId

   this.$route.params.cityId
   

4. 以上路由传参方式,对于参数只有一个的时候较为方便,若参数有多个,建议使用以下方式

   或者通过

   this.$router.push({
       name: '/city/edit',
       params: {
           a:2,
           b:3
       }
   })
   

(二) 根据cityId找到相应城市的信息,填充到页面

(三) 修改之后提交