项目笔记-基于VUE2.0的电商后台管理系统（一）

前端项目初始化步骤

①安装vue脚手架

②通过vue脚手架创建项目

③配置vue路由

④配置elementUI组件库

⑤配置axios库

⑥初始化git

第一部分：登录界面

首先，在登录界面设置一个该电商管理系统的头像，然后在下面面引入elementUI内的form表单，表单内主要有四个元素：账号输入栏，密码输入栏，登录按钮，重置按钮，效果展示如下：

<template>
  <div class="login_container">
    <div class="login_box">
      <!--        头像-->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <el-form ref="loginFormRef" :model="loginForm" class="login_form" :rules="loginFormRules">
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-s-custom" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

 接下来，为账号和密码的输入绑定规则、规则错误时的提示信息、以及默认展示的账号以及密码。

 data () {
      return {
        loginForm: {
          username: 'admin',
          password: '123456'
        },
        loginFormRules: {
          username: [
            {
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 15,
              message: '长度在 6 到 15 个字符',
              trigger: 'blur'

resetLoginForm方法是利用resetFields重置两个input栏中已输入信息。

  login方法：首先将输入好的账号和密码传递给接口地址，当登录成功后把登录信息存储到sessionStorage,使用户在本次浏览器打开时都无需再进行登录，登陆状态将得以保留，最后登录成功后进入home页面。

      resetLoginForm () {
        this.$refs.loginFormRef.resetFields()
      },
      login () {
        this.$refs.loginFormRef.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.post('login', this.loginForm)
          if (res.meta.status !== 200) return this.$message.error('登陆失败！')
          this.$message.success('登陆成功！')
          window.sessionStorage.setItem('token', res.data.token)
          this.$router.push('/home')
        })
      }

 第二部分：系统主页

首先，系统主页右上角的退出按钮与login页面相关，通过绑定logout方法，将存储在sessionStorage的token清除掉，并退回login页面。

 <el-button type="info" @click="logout">退出</el-button>
-----------------------------------------------------------
logout () {
        window.sessionStorage.clear()
        this.$router.push('/login')
      },

接下来，设置页面左边的菜单栏，效果如下图所示：

 第一步，在页面载入时，通过created钩子调用getMenuList()方法，从接口地址得到列表所需要的数据：列表名字，列表内的子列表名字，每个列表前的图标编码。利用v-for循环依次将得到的数据渲染到页面上。

<el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
            <template slot="title">
              <i :class="iconsObj[item.id]"></i>
              <span>{{item.authName}}</span>
            </template>
          </el-submenu>
<--------------------------------------------------------------------->
data () {
      return {
        iconsObj: {
          '125': 'iconfont icon-user',
          '103': 'iconfont icon-tijikongjian',
          '101': 'iconfont icon-shangpin',
          '102': 'iconfont icon-danju',
          '145': 'iconfont icon-baobiao'
        },
        menulist: [],

        isCollapse:false,
        activePath:''

      }
    },
    created () {
      this.getMenuList()
      this.activePath = window.sessionStorage.getItem('activePath')
    },
<--------------------------------------------------------------------->
 async getMenuList () {
        const { data: res } = await this.$http.get('menus')
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.menulist = res.data
      },

最后，在HTML代码块内，加入每个列表的路由路径，通过点击该列表子标题即可跳转到该页面，页面显示该路由所对应的资源

<el-main><router-view></router-view></el-main>
<----------------------------------------------->
<el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id"
            @click="saveNavState('/' + subItem.path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{subItem.authName}}</span>
              </template>
            </el-menu-item>

完整代码链接：https://gitee.com/ckkingg/vue_shop（仅可用来学习沟通）