vue heima电商项目实战

前期环境：
1.vscode

点击详情
2.vue ui
这里
3.elm组件
just so so

• login

<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt />
      </div>
      <!-- 登录表单区域 -->
      <el-form  ref="loginFromRef"  :model="loginFrom" :rules="loginFromRules" label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginFrom.username" prefix-icon="iconfont icon-denglu"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginFrom.password" prefix-icon="iconfont icon-mima" type="password"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetloginFrom">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 这是登录表单的数据绑定对象
      loginFrom: {
        username: '',
        password: ''
      },
      // 这是表单的验证规则对象
      loginFromRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetloginFrom () {
      // console.log(this)
      this.$refs.loginFromRef.resetFields()
    },
    login () {
      this.$message.success('登录成功')
      // this.$refs.loginFromRef.validate(async valid => {
      //   if (!valid) return
      //   const { data: res } = await this.$http.post('login', this.loginFrom)
      //   if (res.meta.status !== 200) return console.log('登录失败')
      //   console.log('登录成功')
      //  })
      // }
      // window.sessionStorage.setItem("token",res.data.token);    保存token
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

• home

/* eslint-disable vue/valid-v-for */
<template>

<el-container class="home-container">
    <!-- 头部区域 -->
  <el-header>
      <div>
          <img src="../assets/icon_tips.png" alt="">
          <span>电商后台管理系统</span>
      </div>
  </el-header>
  <!-- 页面主体区域 -->
  <el-container>
      <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区 -->
         <el-menu background-color="#333744" text-color="#fff"
         active-text-color="#409EFF" :unique-opened="true" :collapse="isCollapse"
         :collapse-transition="false" :router="true" :default-active="1-4-1">
      <!-- 一级菜单 -->
      <el-submenu index="1">
          <!-- 一级的菜单模版区域 -->
        <template slot="title">
            <!--图标 -->
          <i class="el-icon-user-solid"></i>
          <!-- 文本 -->
          <span>用户管理</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item index="1-4-1" @click="saveNavstate(1-4-1)">
        <template slot="title">
            <!--图标 -->
          <i class="el-icon-menu"></i>
          <!-- 文本 -->
          <span>用户列表</span>
        </template></el-menu-item>
      </el-submenu>
       <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-opportunity"></i>
          <span>权限管理</span>
        </template>
        <el-menu-item index="2-4-1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>角色列表</span>
        </template></el-menu-item>
          <el-menu-item index="2-4-2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>权限列表</span>
        </template></el-menu-item>
      </el-submenu>
       <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-goods"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item index="3-4-1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>商品列表</span>
        </template></el-menu-item>
          <el-menu-item index="3-4-2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>分类参数</span>
        </template></el-menu-item>
         <el-menu-item index="3-4-3">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>商品分类</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-shop"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item index="4-4-1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>订单列表</span>
        </template></el-menu-item>
          <el-menu-item index="4-4-2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>订单分类</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-share"></i>
          <span>数据统计</span>
        </template>
        <el-menu-item index="5-4-1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>统计概况</span>
        </template></el-menu-item>
          <el-menu-item index="5-4-2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>数据梳理</span>
        </template></el-menu-item>
      </el-submenu>
    </el-menu>
    </el-aside>
    <!-- 右册内容主题 -->
    <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

</template>

<script>
export default {
  data () {
    return {
    // 是否折叠
      isCollapse: false,
      // 被激活的链接地止
      activePath: ''
    }
  },
  created () {
    this.activePath = window.sessionStorage.getItem('activePash')
  },
  methods: {
    // 点击按钮，切换菜单的折叠与展开
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态
    saveNavstate (activePath) {
      window.sessionStorage.setItem('activePash', activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style lang="less" scoped>
.home-container{
    height: 100%;
}

.el-header {
    background-color: #373D41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 20px;
    > div {
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }

    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #eee;
    }
}

.el-aside{
    background-color: #333744;
    .el-menu {
        border-right: none;
    }
}

.el-main{
    background-color: #EAEDF1;
    }

.toggle-button{
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
</style>

• user

<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片试图 -->
    <el-card class="box-card">
      <!-- 搜索 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 搜索与添加区域 -->
          <el-input placeholder="请输入内容" v-model="input1" clearable>
            <el-button slot="append" icon="el-icon-search" @click="tableData"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="address" label="邮箱"></el-table-column>
        <el-table-column prop="phonenum" label="电话"></el-table-column>
        <el-table-column prop="rolename" label="角色"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" @change="userStateChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope>
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            <!-- 分配角色按钮 -->
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="2"
      ></el-pagination>
    </el-card>

    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
        <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary"  @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    // 验证邮箱规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }

    // 验证手机号规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }

    return {
      tableData: [
        {
          name: 'admin',
          address: '[email protected]',
          phonenum: 14253627654,
          rolename: '超级管理员',
          state: true
        },
        {
          name: '王一博',
          address: '[email protected]',
          phonenum: 15243627654,
          rolename: '测试角色2',
          state: false
        }
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      input1: '',
      // 控制添加用户对话框的显示与隐藏
      addDialogVisible: false,
      ruleForm: {
        name: '',
        password: '',
        email: '',
        mobile: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6到 15 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
    }
  },
  created () {},
  methods: {
    // 监听pagesize改变事件
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    // 监听页码值
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    userStateChange (userinfo) {
      console.log(userinfo)
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 监听添加用户对话框的关闭事件
    addDialogClosed () {
      this.$refs.ruleForm.resetFields()
    },
    // 点击按钮，添加新用户
    addUser () {
    // 预校验
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return
        // 可以发起添加用户的网络请求
        this.$message.success('添加用户即将成功！请耐心等待审核')
        // 隐藏用户对话框
        this.addDialogVisible = false
      })
    }
  }
}
</script>

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

相关接口调用

• 需要导入的组件

import Vue from 'vue'
import {
  Button,
  Form,
  FormItem,
  Input,
  Message,
  Container,
  Header,
  Aside,
  Main,
  Menu,
  Submenu,
  MenuItem,
  Breadcrumb,
  BreadcrumbItem,
  Card,
  Row,
  Col,
  Table,
  TableColumn,
  Switch,
  Tooltip,
  Pagination,
  Dialog
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.prototype.$message = Message

• 关于路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import User from '../components/User.vue'
Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        { path: '/welcome', component: Welcome },
        { path: '/1-4-1', component: User }]
    }
  ]
})