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代码如下：
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