小鸭子后台管理中心

小鸭子后台管理中心

前言

这是一个仿闲鱼的购物商城，需要用户来发布自己的闲置商品，用户发布的商品需要经过后台管理中心的审核，只有审核通过才能正式上架，后台主要进行商品的审核功能。

---

一、项目初始化

使用 Vue CLI 创建项目

如果你还没有安装 VueCLI，或者版本低于 4，请执行下面的命令安装或是升级：

npm install --global @vue/cli

然后直接使用 Git Bash 执行项目创建

vue ui

加入 Git 版本管理

建议在项目的一开始就加入版本管理，通过版本管理，我们可以得到很多好处，例如：
• 代码备份
• 多人协作
• 历史记录
• …
下面是具体的操作流程。
（1）创建远程仓库（GitHub、Gitee、coding）。。。。
（2）把本地仓库推送到远程仓库
如果没有本地仓库：

# 初始化本地仓库
git init

# 把文件添加到暂存区
git add README.md

# 把暂存区文件提交到本地仓库形成历史记录
git commit -m "first commit"

# 添加远端仓库地址到本地仓库
git remote add origin https://github.com/lipengzhou/toutiao-publish-admin.git

# 推送到远程仓库
git push -u origin master

如果已有本地仓库

VueCLI 在创建项目的时候自动帮你初始化了 Git 仓库，并且基于初始代码默认执行了一次提交。

git remote add origin https://github.com/lipengzhou/toutiao-publish-admin.git

# -u 就是记住本次推送的信息，下次就不用写推送信息了，可以直接 git push
git push -u origin master

（3）之后如果有代码变动需要提交

git add
git commit

# 推送到远程仓库
# 推送的时候如果不改变远程仓库和分支的话就直接
git push

# 如果推送的远程仓库或是分支改变了
$ git push -u 远程仓库 分支名称

扩展：管理远程仓库地址信息

# 查看使用帮助
git remote --help

# 查看所有的远程仓库信息
git remote -v

# 添加远程仓库地址信息
git remote add 名称 远程仓库地址

# 删除指定的远程仓库信息
git remote remove 名称

# 修改远程仓库地址信息
git remote set-url 远程仓库地址名称 新地址

二、Token 处理

使用拦截器统一设置用户 Token

axios 拦截器官方示例：https://github.com/axios/axios#interceptors

在 request 请求模块中添加如下代码：

// 请求拦截器
request.interceptors.request.use(
  // 任何所有请求会经过这里
  // config 是当前请求相关的配置信息对象
  // config 是可以修改的
  function (config) {
    const token= window.localStorage.getItem('token')

    // 如果有登录用户信息，则统一设置 token
    if (user) {
      config.headers.token= `${token}`
    }

    // 然后我们就可以在允许请求出去之前定制统一业务功能处理
    // 例如：统一的设置 token

    // 当这里 return config 之后请求在会真正的发出去
    return config
  },
  // 请求失败，会经过这里
  function (error) {
    return Promise.reject(error)
  }
)

控制页面访问权限

在我们的项目中，除了登录页面，其它所有页面都需要具有登录状态才能访问。也就是说我们要给这些需要登录才能访问的页面进行统一控制。

通常的做法就是利用路由的导航守卫来统一处理。

所谓的路由拦截器就是一个公共的页面访问门卫，简单说就是所有的页面访问都要经过这里，我们可以在这里执行一共公共的操作，例如校验是否具有登录状态。

具体做法就是在 src/router/index.js 中：

// 路由导航守卫：说白了所有页面的导航都会经过这里
// 守卫页面的导航的
// to：要去的路由信息
// from：来自哪里的路由信息
// next：放行方法
router.beforeEach((to, from, next) => {
  // 如果要访问的页面不是 /login，校验登录状态
  // 如果没有登录，则跳转到登录页面
  // 如果登录了，则允许通过
  // 允许通过
  // next()

  const token= JSON.parse(window.localStorage.getItem('token'))

  // 校验非登录页面的登录状态
  if (to.path !== '/login') {
    if (token) {
      // 已登录，允许通过
      next()
    } else {
      // 没有登录，跳转到登录页面
      next('/login')
    }
  } else {
    // 登录页面，正常允许通过
    next()
  }
})

关于路由导航守卫更详细的用户请参考官方文档：[https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

三、 封装请求模块

对于项目中的请求操作：

• 接口请求可能需要重用
• 实际工作中，接口非常容易变动，改起来麻烦

建议的做法是把所有的请求都封装成函数然后统一的组织到模块中进行管理，这样做的好处就是：管理维护更方便，也好重用。
下面是优化封装请求的具体操作。
1、创建 src/api/xxx.js，封装请求方法
例如

/**
 * 用户相关请求模块
 */
import request from '@/utils/request'

// 管理员登录
export const login = data => {
  let qs = require('querystring')
  return request({
    method: 'POST',
    url: '/admin/login/',
    // data 用来设置 POST 请求体
    data: qs.stringify(data)
   // data:  JSON.toString(data)
  })
}

2、在登录组件中加载使用

import { login } from '@/api/admin'

用户退出

1、给退出按钮注册点击事件

  <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$router.push('/settings')">设置</el-dropdown-item>
            <el-dropdown-item @click.native="onLogout">退出</el-dropdown-item>
  </el-dropdown-menu>

注意：什么时候使用 .native？首先肯定是在组件上注册事件可能会用到，如果普通方式注册不上，这个时候加 .native 修饰符。
例如你给一个组件注册一个 input 事件，如果直接 @input 注册无效，那就试一下 @input.native。

 onLogout () {
         this.$confirm('确认退出吗？', '退出提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 把用户的登录状态清除
            window.localStorage.removeItem('token')
            // 跳转到登录页面
            this.$router.push('/login')
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出'
            })
          })
      }