# 后台管理系统

**Repository Path**: qinghuaguan/background_management_system

## Basic Information

- **Project Name**: 后台管理系统
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-08-17
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 后台管理系统

#### 项目介绍
接口地址:`[http://47.96.21.88:8082/](http://47.96.21.88:8082/)`

#### 软件架构
软件架构说明：本项目使用vue框架，写的一个后台管理系统

#### 使用说明

### **项目开始之前,**先安装npm     将taobao作为镜像文件,切换到到cnpm,步骤如下:

```
前提 node.js中已经包含了npm，需要检测npm安装好了没有
0. npm -v 
0.1 npm install npm -g 升级npm
1. npm i nrm -g
2. nrm ls
3. nrm use taobao||cnpm
4. cnpm i nodemon -g
5. 检测 nodemon -v

如果没有cnpm   安装npm i cnpm -g
安装了nodemon 
启动文件的方式:nodemon index.js
```

### **项目开始预备**

##### vue-cli脚手架工具

> vue-cli是官方的一个脚手架工具，所谓脚手架就是一个架子，项目结构的架子，它里面包含一些最基本的脚本结构设置。利用vue-cli，我们可以生成这样的一个脚手架，所以就被成为脚手架工具。

1. `npm install vue-cli -g` 下载全局脚手架

2. `vue init webpack vue_admin` 使用脚手架初始化webpack项目

   ​	`注意`在初始化过程中，除了vue-router输入y之外其余的 一律是n

3. `cd vue_admin`进入初始化项目

4. `npm run dev`运行vue项目

   不能自动打开浏览器的解决方法如下:

   - 进入`vue_admin/config/index.js`文件，修改dev中的`autoOpenBrowser: true`即可,下次在启动就可以自动在浏览器中打开了

   也可以手动复制链接在浏览器中打开：

   - 手动在浏览器中输入网址`http://localhost:8080/#/`

     ​

   `npm run build`打包命令文件默认在`vue_admin/dist`目录，默认只能复制dist目录的文件到服务器中运行,不能双击以file形式打开，解决方式如下:

   ​	进入`vue_admin/config/index.js`文件，修改build中的`assetsPublicPath路径`./`

   ```
   // assetsPublicPath: '/', // 默认
   assetsPublicPath: './',   // 修改为
   ```

### **element-ui**

[http://element-cn.eleme.io/#/zh-CN/component/installation](http://element-cn.eleme.io/#/zh-CN/component/installation)

1. `npm i element-ui -S`npm 安装

2. 在main.js配置使用

   ```
   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import App from './App'
   import router from './router'

   Vue.use(ElementUI)
   ```

#### 初始化项目

1. `npm i node-sass sass-loader -D`下载scss依赖包

2. 在main.js中引入index.scss

   ```
   import '@/styles/index.scss'
   ```

### `less-loader`处理less文件

> 解析处理文件后缀名为.less的文件

```
// 1. 安装less less-loader
npm i less less-loader --save-dev

// 2. 在webpack.config.js中的moudle节点中配置解析规则
module:{
    rules:[
        {
            test:/\.less$/,
            use:['style-loader','css-loader','less-loader']
        }
    ]
}
```

## 项目start

#### 登录页面

在index.less中引入字体文件`@import './icon.less';`

login.html  模板三部曲：template+script+styles

template

```
<div class="login">
  <el-form ref="form" :model="form" class="container" :rules="rules">
    <el-form-item>
      <div class="avatar">
        <img src="../assets/avatar.jpg" alt="">
      </div>
    </el-form-item>
    <el-form-item prop="username">
      <el-input v-model="form.username" placeholder="账户" prefix-icon="myicon myicon-user"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="form.password" placeholder="密码" prefix-icon="myicon myicon-key"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="login-btn">登录</el-button>
    </el-form-item>
  </el-form>
</div>
```

script

```
data () {
  return {
    form: {
      username: '',
      password: ''
    }
  }
}
```

css样式

```
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #2f4050;

  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: white;
    .avatar {
      position: relative;
      left: 50%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .login-btn {
      width: 100%;
    }
  }
}
```

#### 登陆页面表单验证

在form表单上绑定规则`<el-form ref="form" :model="form" class="container" :rules="rules">`

把将要验证的选项添加prop属性

```
<el-form-item prop="username">
<el-form-item prop="password">
```

配置验证规则

```
return {
  form: {
    username: '',
    password: ''
  },
  rules: {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' }
    ]
  }
}
```



#### 登陆功能简单完成

1.npm i axios -S  下载axios

2.创建`src/api/index.js`配置请求

```
 import axios from 'axios'

 const baseURL = 'http://localhost:8888/api/private/v1/'
 axios.defaults.baseURL = baseURL

 // 登录验证
 export const checkUser = params => {
   return axios.post('login', params).then(res => res.data)
 }
```

3.Login.vue文件中使用

```
// 3.1 导入checkUser方法
import {checkUser} from '@/api/index.js'
// 3.2 
checkUser(this.form).then(res => {
   // 如果成功要跳转至首页, 将token保存到localStorage
   if (res.meta.status === 200) {
     this.$router.push({name: 'Home'})
   } else {
     // 如果失败，展示提示信息
     this.$message({
       type: 'error',
       message: res.meta.msg
     })
   }
})
```

4.配置路由

```
 // 4.1 引入组件
 import Home from '@/views/Home'
 // 4.2 配置路由
 routes: [
   {
     path: '/login',
     name: 'Login',
     component: Login
   },
   {
     path: '/',
     name: 'Home',
     component: Home,
     redirect: {path: 'welcome'},
     children: [
       {
         name: 'Welcome',
         path: 'welcome',
         component: Welcome
       }
     ]
   }
 ]
```

#### axios拦截器

拦截器的作用:主要是将没有token值链接跳转拦截在外面，增加安全性

1.将请求回来的token保存到本地 --在login.vue请求成功后，将token保存在本地

```
localStorage.setItem('mytoken', res.data.token)
```

2.添加axios请求拦截器

```
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {
   // 将token给到一个前后台约定好的key中，作为请求发送
   let token = localStorage.getItem('mytoken')
   if (token) {
     config.headers['Authorization'] = token
   }
   return config
 }, function (error) {
   // Do something with request error
   return Promise.reject(error)
 })
```

#### 路由导航守卫

[路由导航守卫]( https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)

```
 router.beforeEach((to, from, next) => {
   let token = localStorage.getItem('mytoken')
   // 如果已经登录，那我不干涉你，让你随便访问
   if (token) {
     next()
   } else {
     if (to.path !== '/login') {
       // 如果没有登录，但你访问其他需要登录的页面，那我就让你跳到登录页面去
       next({path: '/login'})
     } else {
       // 如果没有登录，但你访问的login，那就不干涉你，让你访问
       next()
     }
   }
 })
```



#### 参与贡献

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


#### 码云特技

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