vue后台管理系统项目实战(二)

每天更新…

项目地址：https://gitee.com/wang_li_pingping/mallmanager

install dependencies

npm install

serve with hot reload at localhost:8080

npm run dev

build for production with minification

npm run build

build for production and view the bundle analyzer report

npm run build --report

更新内容：
全局时间过滤器fitter

//全局过滤器-处理日期
Vue.filter('fmtdate',(v)=>{
  return moment(v).format('YYYY-MM-DD')
})

用户列表接口数据请求
用户数据列表渲染
ps：今天有点其他事情，就先这样

1、全局时间过滤器的引入 后续处理时间戳格式化

npm i moment

mian.js中引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//引入公共样式
import './assets/css/reset.css'
//引入自定义插件https用于接口请求
import MyHttpServer from './plugins/https'
Vue.use(MyHttpServer)
//导入moment
import moment from 'moment'
/*import user from '../src/views/user/index'
Vue.use(user);
Vue.component('user',user)*/

Vue.config.productionTip = false

//全局过滤器-处理日期
Vue.filter('fmtdate',(v)=>{
  return moment(v).format('YYYY-MM-DD')
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2、新建user.vue并配置users用户列表路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/login/login.vue'
import Home from '../components/home/home.vue'
Vue.use(Router)
import Users from '../components/users/users.vue'

export default new Router({
  routes: [
    {
      name:'login',
      path: '/login',
      component:Login
    },
    {
      name:'home',
      path: '/',
      component:Home,
      children:[
        {
          name:'Users',
          path:'users',
          component:Users
        }
      ]
    }
  ]
})

3、用户列表组件页面users.vue

<template>
  <el-card class="box-card">
    <!--1.面包屑-->
    <!--首页/用户管理/用户列表-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--2.搜索框-->
    <el-row class="searchRow">
      <el-col>
        <el-input
          placeholder="请输入内容"
          v-model="queryInfo.query"
          class="inputSearch">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button type="success">添加用户</el-button>
      </el-col>
    </el-row>
    <!--用户列表表格-->
    <el-table
      :data="userList"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="60">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话">
      </el-table-column>
      <!--<el-table-column
        prop="create_time"
        label="创建时间">
      </el-table-column>-->
      <el-table-column
        prop="create_time"
        label="创建时间">
        <template slot-scope="scope">
          {{scope.row.create_time | fmtdate}}
        </template>
      </el-table-column>
      <el-table-column
        prop="mg_state"
        label="用户状态">
      </el-table-column>
      <el-table-column
        prop="role_name"
        label="操作">
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script>
  export default {
    data () {
      return {
        queryInfo:{
          query: '',
          pagenum: 1,
          pagesize: 2,
        },
        userList: [],
        total:1,
      }
    },
    created () {
      this.getUserList()
    },
    methods: {
      async getUserList () {
        //需要授权的API 必须在请求头中使用 Authorization 字段 提供 token 令牌
        const AUTH_TOKEN = localStorage.getItem('token')
        this.$http.defaults.headers.common['Authorization'] = AUTH_TOKEN
        const res = await this.$http.get('users', {params:this.queryInfo})
        console.log(res)
        if (res.status===200){
          this.userList = res.data.data.users;
          this.total = res.data.data.total;
          this.$message.success(res.data.meta.msg)
        }else{
          this.$message.error(res.data.meta.msg)
        }
      }
    }
  }
</script>
<style>
  .box-card {
    height: 100%;
  }

  .inputSearch {
    width: 300px;
  }

  .searchRow {
    margin-top: 20px;
  }
</style>

4、home页面mian区添加嵌套路由

<el-main class="main">
        <router-view></router-view>
      </el-main>

效果：