7-1 用戶管理頁介紹及頁面實現思路講解

目錄：

• 效果圖
• 思路整理
• 目錄結構

一、效果圖

二、思路整理

1、管理頁功能

• 新增用戶
• 搜索用戶
• 更新用戶
• 刪除用戶
• 分頁展示用戶列表

2、分析頁面組成

3、考慮組件設計

三、目錄結構

3.1、目錄結構

...
-src
    -api
        ...
    -assets
        -css
            -common.css //編寫公用的樣式
            -home.css
        -...
    -common
        -Form.vue  //表單組件
        -Table.vue  //表格組件
        -...
    -mock
        -users.js  //模擬用戶登錄js
        -...
        -index.js
    -views
        -...
        -UserMange
            UserMange.vue   //用戶組件
        -....
....

3.2、編寫mock數據 user.js

import Mock from 'mockjs'

// get請求從config.url獲取參數，post從config.body中獲取參數
function param2Obj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse(
    '{"' +
      decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') +
      '"}'
  )
}

let List = []
const count = 200

for (let i = 0; i < count; i++) {
  List.push(
    Mock.mock({
      id: Mock.Random.guid(),
      name: Mock.Random.cname(),
      addr: Mock.mock('@county(true)'),
      'age|18-60': 1,
      birth: Mock.Random.date(),
      sex: Mock.Random.integer(0, 1)
    })
  )
}

export default {
  /**
   * 獲取列表
   * 要帶參數 name, page, limt; name可以不填, page,limit有默認值。
   * @param name, page, limit
   * @return {{code: number, count: number, data: *[]}}
   */
  getUserList: config => {
    const { name, page = 1, limit = 20 } = param2Obj(config.url)
    console.log('name:' + name, 'page:' + page, '分頁大小limit:' + limit)
    const mockList = List.filter(user => {
      if (name && user.name.indexOf(name) === -1) return false
      return true
    })
    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
    return {
      code: 20000,
      count: mockList.length,
      list: pageList
    }
  },
  /**
   * 增加用戶
   * @param name, addr, age, birth, sex
   * @return {{code: number, data: {message: string}}}
   */
  createUser: config => {
    const { name, addr, age, birth, sex } = JSON.parse(config.body)
    console.log(JSON.parse(config.body))
    List.unshift({
      id: Mock.Random.guid(),
      name: name,
      addr: addr,
      age: age,
      birth: birth,
      sex: sex
    })
    return {
      code: 20000,
      data: {
        message: '添加成功'
      }
    }
  },
  /**
   * 刪除用戶
   * @param id
   * @return {*}
   */
  deleteUser: config => {
    const { id } = param2Obj(config.url)
    if (!id) {
      return {
        code: -999,
        message: '參數不正確'
      }
    } else {
      List = List.filter(u => u.id !== id)
      return {
        code: 20000,
        message: '刪除成功'
      }
    }
  },
  /**
   * 批量刪除
   * @param config
   * @return {{code: number, data: {message: string}}}
   */
  batchremove: config => {
    let { ids } = param2Obj(config.url)
    ids = ids.split(',')
    List = List.filter(u => !ids.includes(u.id))
    return {
      code: 20000,
      data: {
        message: '批量刪除成功'
      }
    }
  },
  /**
   * 修改用戶
   * @param id, name, addr, age, birth, sex
   * @return {{code: number, data: {message: string}}}
   */
  updateUser: config => {
    const { id, name, addr, age, birth, sex } = JSON.parse(config.body)
    const sex_num = parseInt(sex)
    List.some(u => {
      if (u.id === id) {
        u.name = name
        u.addr = addr
        u.age = age
        u.birth = birth
        u.sex = sex_num
        return true
      }
    })
    return {
      code: 20000,
      data: {
        message: '編輯成功'
      }
    }
  }
}

在index.js中mock鏈接

import Mock from 'mockjs'
import userApi from './user'

// 用戶相關
Mock.mock(/\/user\/getUser/, 'get', userApi.getUserList)
Mock.mock(/\/user\/del/, 'get', userApi.deleteUser)
Mock.mock(/\/user\/batchremove/, 'get', userApi.batchremove)
Mock.mock(/\/user\/add/, 'post', userApi.createUser)
Mock.mock(/\/user\/edit/, 'post', userApi.updateUser)

3.3、From.vue和Table.vue的模板

<template>
    <div>表單</div>
</template>

<script>
    export default {
        name: "Form.vue"
    }
</script>

<style scoped>

</style>

3.4、common.css初始化

/*編寫公用的樣式*/
.manage {

}

3.5、編輯UserMange.Vue

<template>
    <div class="manage">
      <div class="manage-header">
        <Form></Form>
      </div>
      <div class="manage-content">
        <Table></Table>
      </div>
    </div>
</template>

<script>
    import '../../assets/css/common.css'  //導入css
    import Form from '../../common/Form'   //導入 Form表單
    import Table from '../../common/Table'  //導入Table組件

    export default {
        components: { //注冊組件
          Form,
          Table
        }
    }
</script>

<style scoped>

</style>