README.md · andy_yang/vue_admin

## vue后台管理项目

### 接口地址 `http://47.96.21.88:8082/
### vue-cli 脚手架工具

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

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项目
   - 自动可能不会在浏览器中打开,解决方法如下
     + 手动在浏览器中输入网址`http://localhost:8080/#/`
     + 进入`vue_admin/config/index.js`文件，修改dev中的`autoOpenBrowser: true`即可,下次在启动就可以自动在浏览器中打开了
   - `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
1. `npm i element-ui -S`npm 安装
2. 在main.js配置使用
   ```javascipt
   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
   ```javascript
   import '@/styles/index.scss'
   ```

### 项目start
#### 登录页面
> 复制子图图标并配置引入
- 在index.scss中引入字体文件`@import './icon.scss';`
- html
  ```
  <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>
  ```

- css样式
  ```scss
  .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%;
      }
    }
  }
  ```

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

#### 登录页面表单验证
- 在form表单上绑定规则`<el-form ref="form" :model="form" class="container" :rules="rules">`
- 把将要验证的选项添加prop属性
  ```html
  <el-form-item prop="username">
  <el-form-item prop="password">
  ```

- 配置验证规则
  ```javascript
  return {
    form: {
      username: '',
      password: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    }
  }
  ```

#### 登陆功能简单完成
1. `npm i axios -S`
2. 创建`src/api/index.js`配置请求
   ```javascript
    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文件中使用
   ```javascript
   // 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. 配置路由
   ```javascript
    // 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拦截器
1. 将请求回来的token保存到本地
   ```javascript
   localStorage.setItem('mytoken', res.data.token)
   ```

2. 添加axios请求拦截器
   ```javascript
    // 添加请求拦截器
    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)
    })
   ```

#### 路由导航守卫
1. [导航守卫](https://router.vuejs.org/zh-cn/advanced/navigation-guards.html)
   ```javascript
    router.beforeEach((to, from, next) => {
      let token = localStorage.getItem('mytoken')
      // 如果已经登录，那我不干涉你，让你随便访问
      if (token) {
        next()
      } else {
        if (to.path !== '/login') {
          // 如果没有登录，但你访问其他需要登录的页面，那我就让你跳到登录页面去
          next({path: '/login'})
        } else {
          // 如果没有登录，但你访问的login，那就不干涉你，让你访问
          next()
        }
      }
    })
   ```

#### 首页
- Home中的html
  ```html
  <el-container>
      
      <el-aside width="auto">
        <div class="logo"></div>
        <el-menu
          default-active="2"
          :collapse="isCollapse"
          class="el-menu-admin"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>

<el-header>
          <i class="myicon myicon-menu toggle-btn" @click="toggleCollapse"></i>
          <div class="system-title">电商后台管理系统</div>
          <div>
            <span class="welcome">
              您好，xxx
            </span>
            <el-button type="text" @click="logout">退出</el-button>
          </div>
        </el-header>

<el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
  ```

- Home中的css
  ```css
  .home {
  height: 100%;
  .el-menu-admin:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu {
    border-right: none;
  }
  .el-container {
    height: 100%;
  }
  .el-aside {
    background-color: #545c64;
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #545c64;
  }
  .logo {
    height:60px;
    background: url(../assets/logo.png);
    background-size: cover;
    background-color: #989898;
  }
  .toggle-btn {
    font-size: 36px;
    color: #989898;
    cursor: pointer;
    line-height: 60px;
  }
  .system-title {
    font-size: 28px;
    color: white;
  }
  .welcome, {
    color: white;
  }
}
  ```

- Home中的js
  ```javascript
  export default {
    data () {
      return {}
    },
    mounted () {
      let params = {params: {query: '', pagenum: 1, pagesize: 1}}
      getUserList(params).then(res => {
        console.log(res)
      })
    },
    methods: {
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      },
    }
  }
  ```

- 创建欢迎页面并配置子路由
  + `views/welcome/Welcome.vue`
    ```
    <template>
      <div>欢迎登录</div>
    </template>
    <script>
    export default {

}
    </script>
    <style lang="scss" scoped>

</style>

```

+ 配置路由
    ```javascript
    {
      path: '/',
      name: 'Home',
      component: Home,
      redirect: {path: 'welcome'},
      children: [
        {
          name: 'Welcome',
          path: 'welcome',
          component: Welcome
        }
      ]
    }
    ```

##### 头部功能完善
1. 在项目中配置vuex
   1. 使用`npm i vuex -S`安装vuex
   2. 在main.js中引入并vuex并使用
      ```javascript
      import store from '@/store/store'
      new Vue({
        el: '#app',
        router,
        store,
        components: { App },
        template: '<App/>'
      })
      ```

2. 在`Login.vue`页面共享用户名
   ```javascript
   // 使用vuex共享用户名
   this.$store.commit('setUsername', res.data.username)
   ```

3. 在sotre.js页面设置修改方法和计算属性获取用户名
   ```javascript
    const state = {
        username: ''
    }
    const mutations = {
        setUsername: (state, username) => {
            state.username = username

// 1.将用户名存储到本地
            localStorage.setItem('uname', username)
        }
    }
    const actions = {}
    const getters = {
        username: state => {
            // 2.用vuex中的计算属性获取到本地存储到的用户名
            return localStorage.getItem('uname')
        }
    }
   ```

#### 用户列表
##### 用户列表页面
1. 创建`User/User.vue`文件
2. 配置用户列表路由
   ```javascript
    children: [
      {
        name: 'Welcome',
        path: 'welcome',
        component: Welcome
      }, {
        name: 'User',  // 新增用户子路由
        path: 'user',
        component: User
      }
    ]
   ```

3. 修改elementUI配置开启路由
   ```html
   <el-menu
      :router="true"
      :collapse="isCollapse"
      class="el-menu-admin"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/user">
          <i class="el-icon-menu"></i>
          <span slot="title">用户列表</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
   ```

4. 添加面包屑导航组件并在element.scss中覆盖默认样式
5. 完成用户的静态页面
   ```
    <template>
      <div class="user">
        <el-row>
          <el-col :span="24">
            <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
          </el-breadcrumb>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24">
            <el-input placeholder="请输入内容" class="search-input">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <el-button type="success" plain >添加用户</el-button>
          </el-col>
        </el-row>
        
        <el-table
        :data="tableData"
        border
        style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
        
        <div class="block">
          
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          tableData: [
            {
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄"
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄"
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄"
            }
          ],
          currentPage1: 5,
          currentPage2: 5,
          currentPage3: 5,
          currentPage4: 4
        };
      },
      created() {},
      methods: {
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`)
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .user {
      .margin-20 {
        margin: 20px 0;
      }
      .search-input {
        width: 300px;
      }
      .page {
        padding: 5px 0;
        background-color: #d3dce6;
      }
    }
    </style>

```

#### 给组件添加原生事件需要加.native修饰符
> <el-input placeholder="请输入内容" class="search-input" v-model="query" @keydown.native.enter="initList">

andy_yang/vue_admin

简介

发行版

贡献者

近期动态

andy_yang/vue_admin .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

andy_yang/vue_admin