vue.js创建网站实例3

修改vue-admin-template的左侧菜单，和顶部菜单
1.修改顶部菜单，修改src/layout/components/Navbar.vue
修改src/components/Breadcrumb/index.vue
找到

matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)

修改title值
修改顶部左上角的logo和标题
打开logo显示，修改src/settings.js

sidebarLogo: true

修改文字和logo地址： src/layout/components/Sidebar/Logo.vue

2.修改左侧菜单，修改src/router/index.js
添加左侧菜单连接的页面，要在src/views中添加
例如，要在左侧菜单中添加用户管理，修改src/router/index.js，

{
    path: '/users',
    component: Layout,
    redirect: '/',
    children: [{
      path: '',
      name: 'Users',
      component: () => import('@/views/users/index'),
      meta: { title: '用户管理', icon: 'dashboard' }
    }]
  },

3.表格的使用
src/views/users/index.vue代码如下：

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="block" style="margin-top:15px;">
      <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[1,5,10,20]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
import { fetchList,getList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        console.log(response)
        this.list = response.data.items
        this.total=response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.listQuery.limit=val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.page=val;
      fetchList(this.listQuery).then(response => {
        console.log(response)
        this.list = response.data.items
      })
    }

  }
}
</script>

修改src/api/table.js，代码如下：

import request from '@/utils/request'

export function getList(params) {
  return request({
    // url: '/vue-admin-template/table/list',
    url: 'users/table.php',
    method: 'get',
    params
  })
}

export function fetchList(query) {
  return request({
    // url: '/vue-admin-template/table/list',
    url: 'users/table.php',
    method: 'get',
    params: query
  })
}

接口返回的json格式如下：

{"code":20000,"data":{"total":32,"items":[{"id":1,"title":"xxx","author":"yyy","pageviews":1001,"status":"published","display_time":"2020-10-25 10:10:10"},{"id":2,"title":"xxx","author":"yyy","pageviews":986,"status":"published","display_time":"2020-10-25 10:10:10"},{"id":3,"title":"xxx","author":"yyy","pageviews":1,"status":"published","display_time":"2020-10-25 10:10:10"},{"id":4,"title":"xxx","author":"yyy","pageviews":1,"status":"draft","display_time":"2020-10-25 10:10:10"},{"id":5,"title":"xxx","author":"yyy","pageviews":1,"status":"draft","display_time":"2020-10-25 10:10:10"},{"id":6,"title":"xxx","author":"yyy","pageviews":1,"status":"draft","display_time":"2020-10-25 10:10:10"},{"id":7,"title":"xxx","author":"yyy","pageviews":1,"status":"draft","display_time":"2020-10-25 10:10:10"},{"id":8,"title":"xxx","author":"yyy","pageviews":1,"status":"draft","display_time":"2020-10-25 10:10:10"},{"id":9,"title":"xxx","author":"yyy","pageviews":1,"status":"draft","display_time":"2020-10-25 10:10:10"},{"id":10,"title":"xxx","author":"yyy","pageviews":1,"status":"draft","display_time":"2020-10-25 10:10:10"}]}}

table.php代码如下：

<?php 
header('Content-Type:application/json');
header("content-type:text/html;charset=utf-8");  //设置编码
$request_body = file_get_contents('php://input');
$json=json_decode($request_body);
echo($json->token);
// 验证token
$page=$_REQUEST["page"];//当前页
$limit=$_REQUEST["limit"];//每页显示条数
$sort=$_REQUEST["sort"];
// 验证变量合法性
//根据发送过来的变量读取数据库
//返回时，需返回一个记录总条数total
$arr = array('code' => 20000, 'data' => array('total' => 32, 'items' => array(array('id'=>1,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>1001, 'status'=>'published', 'display_time'=>'2020-10-25 10:10:10'), array('id'=>2,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>986, 'status'=>'published', 'display_time'=>'2020-10-25 10:10:10'),array('id'=>3,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>1, 'status'=>'published', 'display_time'=>'2020-10-25 10:10:10'),array('id'=>4,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>1, 'status'=>'draft', 'display_time'=>'2020-10-25 10:10:10'),array('id'=>5,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>1, 'status'=>'draft', 'display_time'=>'2020-10-25 10:10:10'),array('id'=>6,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>1, 'status'=>'draft', 'display_time'=>'2020-10-25 10:10:10'),array('id'=>7,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>1, 'status'=>'draft', 'display_time'=>'2020-10-25 10:10:10'),array('id'=>8,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>1, 'status'=>'draft', 'display_time'=>'2020-10-25 10:10:10'),array('id'=>9,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>1, 'status'=>'draft', 'display_time'=>'2020-10-25 10:10:10'),array('id'=>10,'title'=>'xxx', 'author'=>'yyy', 'pageviews'=>1, 'status'=>'draft', 'display_time'=>'2020-10-25 10:10:10'))));
//$arr = array('code' => 50008, 'message' =>  'Account and password are incorrect.');
echo(json_encode($arr));
?>

• vue.js创建网站实例1
• vue.js创建网站实例2
• vue.js创建网站实例3
• vue.js创建网站实例4
• vue.js创建网站实例5
• vue.js创建网站实例6