今天开始着手写之前项目中使用到的el-admin的前端工程说明。
背景：1.el-admin-qd 版本

  "name": "eladmin",
  "version": "1.9.0",

2.node与npm版本

AppledeiMac-3:tcxxeladmin apple$ node -v
v12.16.1
AppledeiMac-3:tcxxeladmin apple$ npm -v
6.14.2

3. IDE: WebStorm 2018.1.2

1.首先同步下来eladmin-qd代码

git clone http***.git

2.安装npm依赖

工程根路径下npm install，过程可能比较冗长，如果出现错误，请先检查错误日志【安装结束后会提供日志地址】、node版本、npm版本。如果版本有些老，建议更新node与npm【亲身经历】。

3.将工程运行起来

工程根路径下npm run dev
运行成功后会在终端提示运行的端口

  Your application is running here: http://localhost:8013   

运行成功后在浏览器访问：localhost:8013 出现：

image.png

表示运行成功。
解释下8013端口号是在哪里配置的：

image.png

可在此处对应用端口进行修改。

4.剖析网络访问

首先通过页面地址http://localhost:8013/login?redirect=%2Fdashboard我们可以知道当前页面的路由地址是/login，在router/router.js中找到该路由：

{ path: '/login',
    meta: { title: '登录', noCache: true },
    component: () => import('@/views/login/index'),
    hidden: true
  }

从该定义中可以找到对应的页面视图：

image.png

5.剖析登录的网络访问

首先找到登录页面中的登录按钮：

<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>

找到 handleLogin 函数：

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        const user = this.loginForm
        if (valid) {
          this.loading = true
          if (user.rememberMe) {
            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          this.$store.dispatch('Login', user).then(() => {
            // 登录成功
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

从这里我们看到网络访问是由$store进行调配的，调配给了Login，传参是user，接下来找到该Login函数：
src/store/index.js --- src/store/modules/user.js

image.png

找到Login函数：

image.png

从这里我们看到Login内部调用了login(username, password)，login函数是从api中的login导入的：import { login, getInfo } from '@/api/login'
接下来找到该文件中的login函数：

export function login(username, password) {
  return request({
    url: 'auth/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

request

接下来查看request：

终于看到使用的网络请求工具：axios，配置的base_url是在配置文件中定义的BASE_API
开发环境下为：

image.png
监控登录页面的调用：
image.png

前后对应上了，搞定。