# admin-web

**Repository Path**: libearys/admin-web

## Basic Information

- **Project Name**: admin-web
- **Description**: 使用 vue3 搭建后台管理系统
- **Primary Language**: JavaScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-10
- **Last Updated**: 2022-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# admin-web

#### 介绍
使用 vue3 搭建后台管理系统



#### 软件架构

Vue.js

Vue Router

Vue CLI

Vuex

axios

Element

Echarts




#### 安装教程

1.  
2.  
3.  



#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx



#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request



#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)





# 搭建步骤

### 使用 Vue CLI 创建项目

安装 Vue CLI

> npm install --global @vue/cli



创建 Vue 项目

```javascript
vue create admin-web
```

```javascript
Vue CLI v4.4.6
┌──────────────────────────────────────────┐
│                                          │
│   New version available 4.4.6 → 4.5.13   │
│     Run npm i -g @vue/cli to update!     │ // 它这里提示 Vue 的最新版本是 4.5.13，可以使用 npm i -g @vue/cli to update 更新 Vue 版本
│                                          │
└──────────────────────────────────────────┘

? Please pick a preset:
> default (babel, eslint)
  Manually select features // 我们选择这个（自定义配置）
```



> default：默认勾选 babel、eslint，回车之后直接进入装包
>
> manually：自定义勾选特性配置，选择完毕之后，才会进入装包
>
> 选择第 2 种：手动选择特性，支持更多自定义选项



```
Vue CLI v4.4.6
┌──────────────────────────────────────────┐
│                                          │
│   New version available 4.4.6 → 4.5.13   │
│     Run npm i -g @vue/cli to update!     │
│                                          │
└──────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
```



> 分别选择：
> Babel：es6 转 es5
> Router：路由
> CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
> Linter / Formatter：代码格式校验，ESLint 代码格式校验



```
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
```

> 是否使用 history 模式，这里输入 N 回车（不使用），history 兼容不太好



```
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
 Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus
```

> 选择 CSS 预处理器，这里选择我们熟悉的 Less



```
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
```

> 选择校验工具，这里选择 ESLint + [Standard config](https://standardjs.com/)



```
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
```

> 选择在什么时机下触发代码格式校验：
>
> - Lint on save：每当保存文件的时候
>
> - Lint and fix on commit：每当执行 `git commit` 提交的时候
>
> 这里建议两个都选上，更严谨。



```
? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files
  In package.json
```

> Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：
>
> - In dedicated config files：分别保存到单独的配置文件
>
> - In package.json：保存到 package.json 文件中
>
> 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。



```
? Save this as a preset for future projects? (y/N) N
```

> 这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。
>
> 这里根据自己需要输入 y 或者 n，我这里输入 n 不需要。



```
Vue CLI v4.4.6
✨  Creating project in D:\IDEA_Work_Space\IDEA_Gitee\admin-web.
⚙️  Installing CLI plugins. This might take a while...

[                 .] | reify:@babel/helper-define-polyfill-provider: timing reifyNode:node_modules/type-fest Completed
```

> 开始构建...



如果构建完成之后，出现下面的提示：

```basic
added 1345 packages in 41s
🚀  Invoking generators...
📦  Installing additional dependencies...

npm ERR! code ERESOLVE 								// 代码解析
npm ERR! ERESOLVE unable to resolve dependency tree // 无法解析依赖关系树
npm ERR!
npm ERR! While resolving: admin-web@0.1.0
npm ERR! Found: vue@2.6.12
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency: // 无法解析依赖关系
npm ERR! peer vue@"3.0.11" from @vue/compiler-sfc@3.0.11
npm ERR! node_modules/@vue/compiler-sfc
npm ERR!   peer @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.13
npm ERR!   node_modules/@vue/cli-service
npm ERR!     dev @vue/cli-service@"~4.5.0" from the root project
npm ERR!     1 more (@vue/eslint-config-standard)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry // 修复上游依赖冲突，或重试
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\duzhou\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\duzhou\AppData\Local\npm-cache\_logs\2021-05-10T03_12_37_274Z-debug.log
 ERROR  command failed: npm install --loglevel error
```



> 这里可能是解析时使用的版本和我本地的版本不一致导致的，
>
> 它这里提示使用 npm i --force 或者 npm i --legacy-peer-deps
>
> 这里我试过用 npm i --legacy-peer-deps 可以解决这个问题



我们首先要进入项目的文件夹 `cd admin-web`，然后执行 `npm i --legacy-peer-deps`

```basic
D:\IDEA_Work_Space\IDEA_Gitee\admin-web>npm i --legacy-peer-deps
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.

added 167 packages, removed 27 packages, and changed 1 package in 8s
```



执行完之后，就可以通过 `npm run sreve` 运行项目了

```basic
D:\IDEA_Work_Space\IDEA_Gitee\admin-web>npm run serve

> admin-web@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2911ms                                                                      上午11:32:09

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.3.13:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
```



OK，项目构建成功



### 目录结构说明

| 目录/文件    | 说明                                                         |
| :----------- | :----------------------------------------------------------- |
| build        | 项目构建(webpack)相关代码                                    |
| config       | 配置目录，包括端口号等。我们初学可以使用默认的。             |
| node_modules | npm 加载的项目依赖模块                                       |
| src          | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。index.css: 样式文件。 |
| static       | 静态资源目录，如图片、字体等。                               |
| public       | 公共资源目录。                                               |
| test         | 初始测试目录，可删除                                         |
| .xxxx文件    | 这些是一些配置文件，包括语法配置，git配置等。                |
| index.html   | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。       |
| package.json | 项目配置文件。                                               |
| README.md    | 项目的说明文档，markdown 格式                                |



### 调整初始目录结构

这里主要就是两个工作：

- 删除默认的初始化文件
- 新增我们需要的目录结构



调整 `App.vue`

```html
<template>
  <div id="app">
    <h1>最光阴的后台管理系统</h1>
    <!-- 路由出口 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less"></style>
```



将 `router/index.js` 修改为

```js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 路由配置
const routes = []

const router = new VueRouter({
  routes
})

export default router
```



删除默认生成的不相关文件：

- src/views/About.vue

- src/views/Home.vue

- src/components/HelloWorld.vue

- src/assets/logo.png



增加以下几个目录

- src/api		储存请求接口

- src/util       工具模块

- src/layout   页面布局

- src/style      全局样式

  - index.css 设置全局样式

  - 在 `main.js` 中加载全局样式 `import './style/index.css'`

    ```js
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import './style/index.css' // 加载全局样式
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app') // 将 vue 挂载到 App 上面
    ```





### 导入 Element UI

Element 地址：https://element.eleme.cn/#/zh-CN/component/installation



安装 Element UI

```
npm i element-ui -S
```



在 `main.js` 中配置 element 组件库

```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 加载全局样式
import './style/index.css'
// 加载 Element UI
import ElementUI from 'element-ui'
// 加载 Element 样式
import 'element-ui/lib/theme-chalk/index.css'

// 全局注册 ElementUI
Vue.use(ElementUI)
Vue.config.productionTip = false

// 创建 vue 实例
// 把 router 配置到根实例当中
// 通过 render 方法把 App 根组件渲染到 #app 入口节点（也就是 App.vue）
new Vue({
  router,
  render: h => h(App)
}).$mount('#app') // 将 vue 挂载到 App 上面
```





### 封装请求模块

为了方便，我们在这里把 axios 单独封装一个模块用于项目中的请求操作。

在 `src/util` 中创建 `request.js` 文件

```js
// 基于 axios 封装的请求模块
import axios from 'axios'

const request = axios.create({
  baseUrl: 'http:127.0.0.1:9090' // 请求的基础路径
})

// 导出请求模块
export default request
```



`request.js` 的使用 demo

```js
import request from 'request.js'

request({
    mehtod: 'get',
    url: '/xxx/xxx',
    data: 你的JSON对象
})
```



### 创建登录页面



#### 创建登录页面组件并配置路由

在 src/views/login 创建 index.vue

```html
<template>
  <div class="login-container">登录页面</div>
</template>

<script>
export default {
  name: 'Login',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less"></style>
```



在 `src/router/index.js` 给登录页面配置路由

```js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/vuews/login' // 一、导入 login 组件

Vue.use(VueRouter)

// 路由配置
const routes = [
  // 二、配置登录页面路由
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router
```



启动项目，访问登录页面



#### 登录页面布局

编辑 `src/views/login/index.vue` 

```html
<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <div class="login-head">
        <div class="logo"></div>
      </div>
      <el-form class="login-form" ref="form" :model="user" size="medium">
        <!-- el-form：表单组件，每个表单项必须使用 el-form-item 组件包裹-->
        <el-form-item>
          <el-input v-model="user.mobile" placeholder="请输入手机号" autofocus=true></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="doLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from '@/util/request'

export default {
  name: 'Login',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '' // 验证码
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    doLogin () {
      // 获取表单数据（根据接口要求绑定数据）
      const user = this.user
      request({
        method: 'POST',
        url: '/login',
        data: user
      })
      // 表单验证
      // 验证通过，提交登录
      // 处理登录响应结果
      console.log(user)
    }
  }
}
</script>

<style scoped lang="less">
  .login-container {
    /*固定定位*/
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    // 水平居中
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    // background: url('./最.png') no-repeat;
    /*background-color: #9B59B6;*/
    /*background-size: cover;*/
    /*登录表单 CSS 设置*/
    .login-form-wrap {
      background-color: #9B59B6;
      min-width: 300px;
      padding: 10px 50px 15px;
      .login-head {
        height: 30px;
        display: flex;
        justify-content: center;
        .logo {
          width: 30px;
          height: 30px;
          /*background: url('./最.png') no-repeat;*/
          background-size: contain;
        }
      }
      .login-form {
        .login-btn {
          width: 100%;
        }
      }
    }
  }
</style>
```



#### 实现基本登录功能

步骤：

1. 在 `data` 中定义对象，并应用到登录表单
2. 给登录按钮注册点击事件
3. 获取表单数据
4. 请求登录
5. 处理后端响应结果
   - 成功处理
   - 失败处理

```js
  methods: {
    doLogin () {
      // 获取表单数据（根据接口要求绑定数据）
      const user = this.user
      // 表单验证
      // 验证通过，提交登录
      request({
        method: 'POST',
        url: '/login',
        data: user
      }).then(res => {
        console.log(res)
        this.$message({
          message: '登录成功',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
        this.$message.error('登录失败')
      })
    }
  }
```



#### 登录 Loading 提示

参考文档：[Element - Form 表单 -> Loading 加载](https://element.eleme.cn/#/zh-CN/component/loading)



两个作用：

- 防止网络请求慢出现用户多次点击触发登录请求

- - 一种方式是在请求期间把交互按钮禁用不允许被点击

- - 一种方式就是展示 loading 不允许被点击

- 交互反馈



```js
  methods: {
    doLogin () {
      // 获取表单数据（根据接口要求绑定数据）
      const user = this.user
      // 表单验证
      // 验证通过，展示 loading并提交登录
      const loading = this.doLoading()
      request({
        method: 'POST',
        url: '/login',
        data: user
      }).then(res => {
        console.log(res)
        this.$message({
          message: '登录成功',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
        this.$message.error('登录失败')
      })
      // 关闭 loading
      loading.close()
    },
    // loading 提示
    doLoading () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return loading
    }
  }
```



#### 表单验证

文档传送门：[Element UI 表单验证](https://element.eleme.cn/#/zh-CN/component/form#form-biao-dan)



**模板配置**

<img src="image/README/image-20210510154137509.png" alt="image-20210510154137509" align="left" />



**在 data 中定义验证规则**

<img src="image/README/image-20210510154238013.png" alt="image-20210510154238013" align="left" />



**在登录方法中执行校验**

<img src="image/README/image-20210510154608436.png" alt="image-20210510154608436" align="left" />





#### 封装登录请求模块

对于项目中的请求操作：



- 接口请求可能需要重用

- 实际工作中，接口非常容易变动，改起来麻烦



我们建议的做法是把所有的请求都封装成函数然后统一的组织到模块中进行管理，这样做的好处就是：管理维护更方便，也好重用。



下面是我们优化封装请求的具体操作。

1、创建 `src/api/login.js`，封装登录请求方法

```js
import request from './util/request'

export const login = (data) => {
  return request({
    method: 'post',
    url: '/login',
    data: data
  }).then(res => {
    console.log(res)
    this.$message({
      message: '登录成功',
      type: 'success'
    })
  }).catch(err => {
    console.log(err)
    this.$message.error('登录失败')
  })
}
```



2、在登录组件中使用

引入 login.js

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

<img src="image/README/image-20210510160306318.png" alt="image-20210510160306318" align="left" />



使用方法

<img src="image/README/image-20210510160223754.png" alt="image-20210510160223754" align="left" />





### Layout 页面布局



#### 创建首页并配置路由

创建 `src/views/index.vue`

```html
<template>
  <div class="home-container">首页</div>
</template>

<script>
export default {
  name: 'HomeIndex',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less"></style>
```



配置路由

```js
// 路由配置
const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/index',
    name: 'index',
    component: Index
  }
]
```



设置登录成功之后的路由跳转到首页

<img src="image/README/image-20210510164853655.png" alt="image-20210510164853655" align="left" />



#### 创建 Layout 组件并配置路由