城市模块开发

目录

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  
   <el-table-column prop="isHot" :formatter="formatHot" label="热门" width>
   </el-table-column>
   

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

4. 添加分页

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

   • tempate的代码

        <!-- 分页 -->
         <div class="tac mt-20">
              <el-pagination
               background
               layout="prev, pager, next"
               :total="total">
             </el-pagination>
         </div>
     

   • 添加点击事件
     在分页组件上添加 @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. 添加删除

   • 添加删除按钮

   • 发送请求

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

     <el-table-column fixed="right" label="操作" width>
        <template slot-scope="scope">
        <el-button @click="removeCity(scope)" size="small" 
                circle type="danger" icon="el-icon-delete" ></el-button>
        <el-button type="text" size="small">编辑</el-button>
        </template>
     </el-table-column>
     

     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. 从列表页面添加下面的代码

   第一种：

    
   <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope)"></el-button>
   
   
   //在方法中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)  
     },
   

   第二种方法：

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

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

  ```
   <router-link :to="`/city/edit/${scope.row.cityId}`">
   </router-link>
  ```

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

   this.$route.params.cityId
   

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

   <router-link :to="{name: 'xxx', params: {a:2,b:3}}">
   </router-link>
   

   或者通过

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

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

(三) 修改之后提交