管理系统接口纯本地手写实现

1、登录接口

Mock.mock('/api/login', 'post', options => {
  // 本地个人数据以及个人详细数据
  let user = [
    {
      username: 'aaabbb7891',
      password: '123456',
      repassword: '123456',
      token: 'aaa',
      id: 230

    },
    {
      username: '78798',
      password: '123456',
      repassword: '123456',
      token: 'bbb',
      id: 240
    }
  ]
  let userinfo = [
    {
      id: 230,
      username: 'aaabbb7891',
      nickname: '',
      email: '',
      token: 'aaa',
      user_pic: null
    },
    {
      id: 240,
      username: '78798',
      nickname: '',
      email: '',
      token: 'bbb',
      user_pic: null
    }
  ]
  // 判断数据是否在本地有存储 未存储则存储
  if (window.localStorage.getItem('user') === null) {
    window.localStorage.setItem('user', JSON.stringify(user))
    window.localStorage.setItem('userinfo', JSON.stringify(userinfo))
  }
  // 获取本地数据
  user = JSON.parse(window.localStorage.getItem('user'))
  userinfo = JSON.parse(window.localStorage.getItem('userinfo'))
  // 解析请求数据
  const body = JSON.parse(options.body)
  const username = body.username
  const password = body.password
  // 调用获取用户信息函数,用于判断是否有此用户
  const checkUser = user.find(
    (item) => item.username === username && item.password === password
  )
  // 没有用户返回失败信息
  if (!checkUser) {
    return { code: 201, data: { message: '账号或者密码不正确' } }
  }
  // 判断本地是否有文章数据 新用户直接存储导入json
  if (window.localStorage.getItem('res') === null) {
    window.localStorage.setItem('res', JSON.stringify(res))
    window.localStorage.setItem('article', JSON.stringify(articlelist))
  }
  window.localStorage.setItem('token', JSON.stringify(checkUser.token))
  return {
    code: 0,
    message: '登录成功！',
    token: checkUser.token
  }
})

2、注册

Mock.mock('/api/reg', 'post', options => {
  // 判断本地是否有个人信息数据
  if (window.localStorage.getItem('user') === null) {
    window.localStorage.setItem('user', JSON.stringify(user))
    window.localStorage.setItem('userinfo', JSON.stringify(userinfo))
  }
  // 导入个人信息数据
  const userinfo = JSON.parse(window.localStorage.getItem('userinfo'))
  const user = JSON.parse(window.localStorage.getItem('user'))
  // 获取请求体携带的数据
  const body = JSON.parse(options.body)
  const username = body.username
  // 判断是否有重名
  const checkUser = user.find(
    (item) => item.username === username
  )
  // 添加个人token
  const length = user.length
  let token = String.fromCharCode(user[length - 1].token.charAt(0).charCodeAt() + 1)
  token = token.concat(token).concat(token)
  // 添加个人id
  const id = user[length - 1].id + 10
  // 新增user
  const result = {
    username: body.username,
    password: body.password,
    repassword: body.repassword,
    token: token,
    id: id
  }
  // 新增userinfo
  const result1 = {
    id: id,
    username: body.username,
    nickname: '',
    email: '',
    token: token,
    user_pic: null
  }
  // 没有用户返回失败信息
  if (checkUser) {
    return {
      code: 1,
      message: '用户名被占用，请更换其他用户名！'
    }
  }
  // 新增并存储
  userinfo.push(result1)
  user.push(result)
  window.localStorage.setItem('user', JSON.stringify(user))
  window.localStorage.setItem('userinfo', JSON.stringify(userinfo))
  return {
    code: 0,
    message: '注册成功！'
  }
})

3、获取个人信息

Mock.mock('/my/userinfo', 'patch', (options) => {
  const body = JSON.parse(options.body)
  // 这边由于存储token的时候没有存为json数据
  const token = body.token.replaceAll('"', '')
  const userinfo = JSON.parse(window.localStorage.getItem('userinfo'))
  // 通过个人token 定位到userinfo
  let index1 = 0
  userinfo.forEach((item, index, array) => {
    if (item.token === token) {
      index1 = index
    }
  })
  return {
    code: 0,
    message: '获取个人信息！',
    data: userinfo[index1]
  }
})

4、修改个人信息

Mock.mock('/my/userinfo', 'post', (options) => {
  const body = JSON.parse(options.body)
  const userinfo = JSON.parse(window.localStorage.getItem('userinfo'))
  // 通过个人id定位到userinfo
  let index1 = 0
  userinfo.forEach((item, index, array) => {
    if (item.id === body.id) {
      index1 = index
    }
  })
  // 修改个人信息
  userinfo[index1].email = body.email
  userinfo[index1].nickname = body.nickname
  window.localStorage.setItem('userinfo', JSON.stringify(userinfo))
  return {
    code: 0,
    message: '修改个人信息成功！'
  }
})

5、修改个人密码

Mock.mock('/my/updatepwd', 'post', (options) => {
  const user = JSON.parse(window.localStorage.getItem('user'))
  const body = JSON.parse(options.body)
  const token = body.token.replaceAll('"', '')
  // 通过个人token 定位到user
  let index1 = 0
  user.forEach((item, index, array) => {
    if (item.token === token) {
      index1 = index
    }
  })
  // 判断输入密码是否和原密码相同
  if (user[index1].password !== body.old_pwd) {
    return {
      code: 200,
      message: '原密码错误！'
    }
  }
  // 修改个人密码
  user[index1].password = body.new_pwd
  user[index1].repassword = body.re_pwd
  window.localStorage.setItem('user', JSON.stringify(user))
  return {
    code: 0,
    message: '修改个人信息成功！'
  }
})

6、修改个人头像

Mock.mock('/my/update/avatar', 'patch', (options) => {
  const userinfo = JSON.parse(window.localStorage.getItem('userinfo'))
  const body = JSON.parse(options.body)
  const token = body.token
  // 通过个人token定位到userinfo
  let index1 = 0
  userinfo.forEach((item, index, array) => {
    if (item.token === token) {
      index1 = index
    }
  })
  // 修改个人头像
  userinfo[index1].avatar = body.avatar
  userinfo[index1].user_pic = body.avatar
  window.localStorage.setItem('userinfo', JSON.stringify(userinfo))
  return {
    code: 0,
    message: '修改头像成功！'
  }
})

7、侧边栏

Mock.mock('/my/menus', () => {
  // 直接返回侧边栏数据
  return cebianlan
})

8、获取文章分类

Mock.mock('/my/cate/list', () => {
  // 判断本地是否有文章分类
  if (window.localStorage.getItem('catelist') === null) {
    window.localStorage.setItem('catelist', JSON.stringify(catelist))
  }
  // 导文章分类数据
  const catelist = JSON.parse(window.localStorage.getItem('catelist'))
  const result = {
    code: 0,
    message: '获取文章分类列表成功！',
    data: catelist
  }
  return result
})

9、添加文章分类

Mock.mock('/my/cate/add', 'post', (options) => {
  // 导文章分类数据
  const catelist = JSON.parse(window.localStorage.getItem('catelist'))
  const body = JSON.parse(options.body)
  const length = catelist.length
  // 设置文章id
  const id = catelist[length - 1].id + 2
  const result = {
    id: id,
    cate_name: body.cate_name,
    cate_alias: body.cate_alias
  }
  // 存入文章分类
  catelist.push(result)
  window.localStorage.setItem('catelist', JSON.stringify(catelist))
  return {
    code: 0,
    message: '新增文章分类成功！'
  }
})

10、删除文章分类

Mock.mock('/my/cate/del', 'delete', (options) => {
  // 导文章分类数据
  const catelist = JSON.parse(window.localStorage.getItem('catelist'))
  const body = JSON.parse(options.body)
  let index1 = 0
  catelist.forEach((item, index, array) => {
    if (item.id === body.id) {
      index1 = index
    }
  })
  catelist.splice(index1, 1)
  // 存入文章分类
  window.localStorage.setItem('catelist', JSON.stringify(catelist))
  return {
    code: 0,
    message: '删除文章分类成功！'
  }
})

11、修改文章分类

Mock.mock('/my/cate/info', 'put', (options) => {
  // 导文章分类数据
  const catelist = JSON.parse(window.localStorage.getItem('catelist'))
  const body = JSON.parse(options.body)
  // 通过id定位到文章
  let index1 = 0
  catelist.forEach((item, index, array) => {
    if (item.id === body.id) {
      index1 = index
    }
  })
  catelist[index1].cate_name = body.cate_name
  catelist[index1].cate_alias = body.cate_alias
  // 存入文章分类
  window.localStorage.setItem('catelist', JSON.stringify(catelist))
  return {
    code: 0,
    message: '修改文章分类成功！'
  }
})

12、获取文章列表

Mock.mock('/my/article/list', 'get', (options) => {
  const articlelist = JSON.parse(window.localStorage.getItem('article'))
  const body = JSON.parse(options.body)
  const cateid = body.cate_id
  // 如果没有cataid 表示为获取全部数据 否则获取cateid数据
  if (!cateid) {
    return {
      code: 0,
      message: '获取文章列表成功！',
      total: articlelist.length,
      data: articlelist
    }
  }
  // 筛选为cateid的数据
  const checkUser = articlelist.filter(p => {
    return String(p.cateid).indexOf(String(cateid)) !== -1
  })
  // 没有查询到返回失败信息
  if (!checkUser) {
    return { code: 201, data: { message: '未分类' } }
  }
  // 如果有返回成功信息
  console.log(checkUser)
  return {
    code: 0,
    message: '获取文章列表成功！',
    total: checkUser.length,
    data: checkUser
  }
})

13、获取文章列表详情

Mock.mock('/my/article/info', 'get', (options) => {
  const body = JSON.parse(options.body)
  const id = body.id
  let result = []
  const res = JSON.parse(window.localStorage.getItem('res'))
  // 获取item.id为id的文章
  result = res.filter((item, index, array) => item.id === id)
  return {
    code: 0,
    message: '请求文章详情成功！',
    data: result[0]
  }
})

14、发表文章

Mock.mock('/my/article/add', 'post', (options) => {
  // 获取本地文章列表
  const articlelist = JSON.parse(window.localStorage.getItem('article'))
  // 导文章分类数据
  const catelist = JSON.parse(window.localStorage.getItem('catelist'))
  // 获取传递数据
  const body = options.body
  const title = body.get('title')
  const content = body.get('content')
  const coverimg = body.get('cover_img')
  const state = body.get('state')
  const cateid = body.get('cate_id')
  const res = JSON.parse(window.localStorage.getItem('res'))
  // 设置文章列表id
  const length = articlelist.length
  const id = articlelist[length - 1].id + 1
  const result = {
    id: id,
    title: title,
    content: content,
    cover_img: coverimg,
    state: state,
    cate_id: cateid
  }
  // 添加文章详细内容
  res.push(result)
  window.localStorage.setItem('res', JSON.stringify(res))
  // 添加时间属性
  const myDate = new Date()
  // 通过cateid来查找catename
  let index1 = 0

  catelist.forEach((item, index, array) => {
    if (String(item.id) === cateid) {
      index1 = index
    }
  })
  const name1 = catelist[index1].cate_name
  const result1 = {
    id: id,
    title: title,
    pub_date: myDate,
    state: state,
    cateid: cateid,
    cate_name: name1
  }
  articlelist.push(result1)
  window.localStorage.setItem('article', JSON.stringify(articlelist))
  return {
    code: 0,
    message: '添加文章详情成功！'
  }
})

15、删除文章

Mock.mock('/my/article/info', 'delete', (options) => {
  // 删除文章需要同时删除res和article
  const articlelist = JSON.parse(window.localStorage.getItem('article'))
  const body = JSON.parse(options.body)
  let index1 = 0
  let index2 = 0
  // 通过id来删除 article
  articlelist.forEach((item, index, array) => {
    if (item.id === body.id) {
      index1 = index
    }
  })
  articlelist.splice(index1, 1)
  const res = JSON.parse(window.localStorage.getItem('res'))
  // 通过id来删除res
  res.forEach((item, index, array) => {
    if (item.id === body.id) {
      index2 = index
    }
  })
  res.splice(index2, 1)
  window.localStorage.setItem('res', JSON.stringify(res))
  window.localStorage.setItem('article', JSON.stringify(articlelist))
  return {
    code: 0,
    message: '删除文章分类成功！'
  }
})