[Vue.js]实战 -- 电商项目(二)

主页布局

整体布局

主页布局开始

• 引入官网的框架时,首先要在element.js中添加

import { 
    Container,
    Header,
    Aside,
    Main
} from 'element-ui'
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)

 

左侧菜单布局

• 引入官网的框架时,首先要在element.js中添加

import { 
    Menu,
    Submenu,
    MenuItemGroup,
    MenuItem
} from 'element-ui'
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)

• 渲染左侧菜单

 

通过接口获取菜单数据

通过axios请求拦截器添加token，保证拥有获取数据的权限

• 在main.js文件中添加

// axios请求拦截
axios.interceptors.request.use(config => {
    // 为请求头对象，添加 Token 验证的 Authorization 字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

 

优化左侧菜单

• 获取到所有菜单

created() {
    //获取到所有菜单
    this.getMenuList()
},
    methods: {
        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
            console.log(res)
        },
    }

 

• 实现图标出现

data() {
    return {
        // 左侧菜单数据
        menulist: [],
        iconsObj: {
            '125': 'iconfont icon-user',
            '103': 'iconfont icon-tijikongjian',
            '101': 'iconfont icon-shangpin',
            '102': 'iconfont icon-danju',
            '145': 'iconfont icon-baobiao'
        },
    }
}

 

• 实现文本与图标的间隙

.iconfont {
    margin-right: 10px;
}

 

• 实现左侧菜单折叠和展开

  • 在基本样式中添加

  
  <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="toggle-button" @click="toggleCollapse">|||div>
  el-aside>
  

  • 在css样式中添加

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

  • 点击按钮，切换菜单的折叠与展开

  <script>
      export default {
  		data() {
      		return {
  
  				// 是否折叠
  				isCollapse: false,
      		}
  		},
  		methods: {
  			toggleCollapse() {
  				this.isCollapse = !this.isCollapse
  			}
      	}
  	}
  </script>
  

 

路由重定向

• 创建新的Welcome.vue
• 在index.js中添加

import Welcome from "../components/Welcome";
const routes = [
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children:[
            {
                path: '/welcome',
                component: Welcome
            }
        ]
    }

]

• 在右侧内容主体区域添加路由占位符

 

用户管理模块

用户管理概述

通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能

• 用户信息列表展示

• 添加用户

• 修改用户

• 删除用户

• 启用或禁用用户

• 用户角色分配

 

用户管理 - 列表展示

用户列表布局

• 面包屑导航 el-breadcrumb

• Element-UI 栅格系统基本使用 el-row

• 表格布局 el-table、el-pagination

---

• 创建Users.vue
• 在index.js中添加

import Users from "../components/user/Users"

const routes = [
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children:[
            {
                path: '/welcome',
                component: Welcome
            },
            {
                path: '/users',
                component: Users
            },
        ]
    }

]

• 处理高亮问题

  • 在侧边栏菜单区域添加default-active="/users"
  • 在二级菜单中绑定点击事件

  <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/' + subItem.path)">
  </el-submenu>
  

  • 保存链接的激活状态

  saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
  }
  

  • 创建一个被激活的链接地址

  activePath: ''
  

  • 赋值

  created() {
      this.activePath = window.sessionStorage.getItem('activePath')
  }
  

• 绘制基本ui结构

  • 官网找到面包屑

  <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>
  div>
  

  • 导入element.js

  import Breadcrumb,BreadcrumbItem from 'element-ui'
  
  Vue.use(Breadcrumb)
  Vue.use(BreadcrumbItem)
  

  • 官网找到卡片

  <el-card class="box-card">
    <div v-for="o in 4" :key="o" class="text item">
      {{'列表内容 ' + o }}
    div>
  el-card>
  

  • 导入element.js

  import Card from 'element-ui'
  
  Vue.use(Card)
  

  • 在css样式中添加

  .el-breadcrumb {
      margin-bottom: 15px;
      font-size: 12px;
  }
  
  .el-card {
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  }
  

  • 官网找到搜索与添加

  
  <el-row :gutter="20">
      <el-col :span="8">
          <el-input placeholder="请输入内容">
              <el-button slot="append" icon="el-icon-search">el-button>
          el-input>
      el-col>
      <el-col :span="4">
          <el-button type="primary">添加用户el-button>
      el-col>
  el-row>
  

  • 导入element.js

  import Row,Col from 'element-ui'
  
  Vue.use(Row)
  Vue.use(Col)
  

• 获取用户列表数据

export default {
    data() {
        return {
            // 获取用户列表的参数对象
            queryInfo: {
                query: '',
                // 当前的页数
                pagenum: 1,
                // 当前每页显示多少条数据
                pagesize: 2
            },
            userlist:[],
            total:0
        }
    },
    created() {
        this.getUserList()
    },
    methods:{
        async getUserList() {
            const { data: res } = await this.$http.get('users', {
                params: this.queryInfo
            })
            //判断
            if (res.meta.status !== 200) {
                return this.$message.error('获取用户列表失败！')
            }
            //赋值
            this.userlist = res.data.users
            this.total = res.data.total
            console.log(res)
        },
    }

}

• 渲染列表数据

  • 官网找到表格

  <el-table :data="userlist" border stripe>
      
      <el-table-column type="index">el-table-column>
      <el-table-column label="姓名" prop="username">el-table-column>
      <el-table-column label="邮箱" prop="email">el-table-column>
      <el-table-column label="电话" prop="mobile">el-table-column>
      <el-table-column label="角色" prop="role_name">el-table-column>
      <el-table-column label="状态">
      el-table-column>
      <el-table-column label="操作" width="180px">
      el-table-column>
  el-table>
  

  • 导入element.js

  import Table,TableColumn from 'element-ui'
  
  Vue.use(Table)
  Vue.use(TableColumn)
  

  • 添加css样式

  .el-table {
      margin-top: 15px;
      font-size: 12px;
  }
  

 

用户状态列和操作列处理

• 显示

  • 添加开关

  <el-table-column label="状态">
      <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state">
          el-switch>
      template>
  el-table-column>
  

  • 导入element.js

  import Switch from 'element-ui'
  
  Vue.use(Switch)
  

• 操作

  • 添加大小和文字提示

  <el-table-column label="操作" width="180px">
      <template slot-scope="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>
  

  • 导入element.js

  import Tooltip from 'element-ui'
  
  Vue.use(Tooltip)
  

   

表格数据分页

① 当前页码：pagenum

② 每页条数：pagesize

③ 记录总数：total

④ 页码变化事件

⑤ 每页条数变化事件

⑥ 分页条菜单控制

---

• 页码显示

  • 添加分页

  
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
  el-pagination>
  

  • 引入element.js

  import Pagination from 'element-ui'
  
  Vue.use(Pagination)
  

  • 监听pagesize改变事件

  handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
  }
  

  • 监听页码值改变事件

  handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getUserList()
  }
  

  • 添加css样式

  .el-pagination {
      margin-top: 15px;
  }
  

• 修改用户状态

  • 官网找到开关

  <el-table-column label="状态">
      <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
          el-switch>
      template>
  el-table-column>
  

  • 监听swich开关状态改变

  // 监听 switch 开关状态的改变
  async userStateChanged(userinfo) {
      console.log(userinfo)
      const { data: res } = await this.$http.put(
          `users/${userinfo.id}/state/${userinfo.mg_state}`
      )
      if (res.meta.status !== 200) {
          userinfo.mg_state = !userinfo.mg_state
          return this.$message.error('更新用户状态失败！')
      }
      this.$message.success('更新用户状态成功！')
  },
  

   

• 搜索功能

  将搜索关键字，作为参数添加到列表查询的参数

  • 添加点击事件

  <el-col :span="8">
      <el-input placeholder="请输入内容" v-model="queryInfo.query">
          <el-button slot="append" icon="el-icon-search" @click="getUserList">el-button>
      el-input>
  el-col>
  

  • 添加输入框,实现可清空效果

  clearable
  

  • 绑定clear事件

  @clear="getUserList"
  

 

添加用户

• 对话框

  • 添加对话框

  
  <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      
  
      
      <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消el-button>
          <el-button type="primary" @click="addDialogVisible">确 定el-button>
      span>
  el-dialog>
  

  • 引入element.js

  import Dialog from 'element-ui'
  
  Vue.use(Dialog)
  

• 表单

  • 添加表单

  <el-form
           :model="addForm"
           :rules="addFormRules"
           ref="addFormRef"
           label-width="70px"
           >
      <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username">el-input>
      el-form-item>
      <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password">el-input>
      el-form-item>
      <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email">el-input>
      el-form-item>
      <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile">el-input>
      el-form-item>
  el-form>
  

  • 添加用户的表单数据

  addForm: {
      username: '',
      password: '',
      email: '',
      mobile: ''
  },
  

  • 添加表单的验证规则对象

  addFormRules: {
      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'
              }
          ],
              email: [
                  { required: true, message: '请输入邮箱', trigger: 'blur' },
                  { validator: checkEmail, trigger: 'blur' }
              ],
                  mobile: [
                      { required: true, message: '请输入手机号', trigger: 'blur' },
                      { validator: checkMobile, trigger: 'blur' }
                  ]
  }
  

• 自定义规则

  • 验证邮箱的规则

  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[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
  
      if (regMobile.test(value)) {
          return cb()
      }
  
      cb(new Error('请输入合法的手机号'))
  }
  

• 预验证

  • 点击按钮,添加新用户

  // 点击按钮，添加新用户
  addUser() {
      this.$refs.addFormRef.validate(async valid => {
          if (!valid) return
          // 可以发起添加用户的网络请求
          const { data: res } = await this.$http.post('users', this.addForm)
  
          if (res.meta.status !== 201) {
              this.$message.error('添加用户失败！')
          }
  
          this.$message.success('添加用户成功！')
          // 隐藏添加用户的对话框
          this.addDialogVisible = false
          // 重新获取用户列表数据
          this.getUserList()
      })
  }
  

 

修改用户

• 在修改按钮中添加

@click="showEditDialog(scope.row.id)"

• 展示编辑用户的对话框

async showEditDialog(id) {
    // console.log(id)
    const { data: res } = await this.$http.get('users/' + id)

    if (res.meta.status !== 200) {
        return this.$message.error('查询用户信息失败！')
    }

    this.editForm = res.data
    this.editDialogVisible = true
},

• 修改用户的对话框

<el-dialog
           title="修改用户"
           :visible.sync="editDialogVisible"
           width="50%"
           @close="editDialogClosed"
           >
    <el-form
             :model="editForm"
             :rules="editFormRules"
             ref="editFormRef"
             label-width="70px"
             >
        <el-form-item label="用户名">
            <el-input v-model="editForm.username" disabled>el-input>
        el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email">el-input>
        el-form-item>
        <el-form-item label="手机" prop="mobile">
            <el-input v-model="editForm.mobile">el-input>
        el-form-item>
    el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消el-button>
        <el-button type="primary" @click="editUserInfo">确 定el-button>
    span>
el-dialog>

• 控制修改角色对话框的显示隐藏

editDialogVisible: false,

• 查询到的用户信息对象

editForm: {}

• 修改表单的的验证规则对象

// 修改表单的验证规则对象
editFormRules: {
    email: [
        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
        { validator: checkEmail, trigger: 'blur' },
    ],
        mobile: [
            { required: true, message: '请输入用户手机', trigger: 'blur' },
            { validator: checkMobile, trigger: 'blur' },
        ],
},

• 绑定close事件,重置关闭后操作

@close="editDialogClosed"

editDialogClosed() {
    this.$refs.editFormRef.resetFields()
},

• 修改用户信息并提交

editUserInfo() {
    this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return
        // 发起修改用户信息的数据请求
        const { data: res } = await this.$http.put(
            'users/' + this.editForm.id,
            {
                email: this.editForm.email,
                mobile: this.editForm.mobile,
            }
        )

        if (res.meta.status !== 200) {
            return this.$message.error('更新用户信息失败！')
        }

        // 关闭对话框
        this.editDialogVisible = false
        // 刷新数据列表
        this.getUserList()
        // 提示修改成功
        this.$message.success('更新用户信息成功！')
    })
}

 

删除用户

• 官网找到弹框

• 导入element.js

import MessageBox from 'element-ui'
// 全局挂载
Vue.prototype.$confirm = MessageBox.confirm

• 绑定单击事件

@click="removeUserById(scope.row.id)"

• 根据id删除对应的用户信息

async removeUserById(id) {
    // 弹框询问用户是否删除数据
    const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).catch((err) => err)

    // 如果用户确认删除，则返回值为字符串 confirm
    // 如果用户取消了删除，则返回值为字符串 cancel
    // console.log(confirmResult)
    if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
    }

    const { data: res } = await this.$http.delete('users/' + id)

    if (res.meta.status !== 200) {
        return this.$message.error('删除用户失败！')
    }

    this.$message.success('删除用户成功！')
    this.getUserList()
}

 

分配角色

• 官网找到select和option并导入

import { 
  Option,
  Select
} from 'element-ui'

Vue.use(Option)
Vue.use(Select)

• 分配角色对话框

<el-dialog
           title="分配角色"
           :visible.sync="setRoleDialogVisible"
           width="50%"
           @close="setRoleDialogClosed"
           >
    <div>
        <p>当前的用户：{{ userInfo.username }}p>
        <p>当前的角色：{{ userInfo.role_name }}p>
        <p>
            分配新角色：
            <el-select v-model="selectedRoleId" placeholder="请选择">
                <el-option
                           v-for="item in rolesList"
                           :key="item.id"
                           :label="item.roleName"
                           :value="item.id"
                           >
                el-option>
            el-select>
        p>
    div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="setRoleDialogVisible = false">取 消el-button>
        <el-button type="primary" @click="saveRoleInfo">确 定el-button>
    span>
el-dialog>

• 监听分配角色对话框的关闭事件

// 监听分配角色对话框的关闭事件
setRoleDialogClosed() {
    this.selectedRoleId = ''
    this.userInfo = {}
},

• 展示分配角色的对话框

// 展示分配角色的对话框
async setRole(userInfo) {
    this.userInfo = userInfo

    // 在展示对话框之前，获取所有角色的列表
    const { data: res } = await this.$http.get('roles')
    if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败！')
    }

    this.rolesList = res.data

    this.setRoleDialogVisible = true
},

• 点击按钮，分配角色

// 点击按钮，分配角色
async saveRoleInfo() {
    if (!this.selectedRoleId) {
        return this.$message.error('请选择要分配的角色！')
    }

    const { data: res } = await this.$http.put(
        `users/${this.userInfo.id}/role`,
        {
            rid: this.selectedRoleId,
        }
    )

    if (res.meta.status !== 200) {
        return this.$message.error('更新角色失败！')
    }

    this.$message.success('更新角色成功！')
    this.getUserList()
    this.setRoleDialogVisible = false
},

• 监听分配角色对话框的关闭事件

// 监听分配角色对话框的关闭事件
setRoleDialogClosed() {
    this.selectedRoleId = ''
    this.userInfo = {}
},