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 }]
    }
  ]
})