目录
src下创建此目录
api目录下创建js文件引入axios(封装的方法)
//引入axios的对象
import request from '../utils/request'
export function getUser(page,size,name) {
return request({
url: '/getUserList',
method: 'get',
params:{
page,
size,
name
}
})
}
export function deleUser(id) {
return request({
url: '/deleUser',
method: 'DELETE',
params:{
id
}
})
}
export function addUser(user) {
return request({
url: '/addUser',
method: 'post',
data:user
})
}
export function updateUser(user) {
return request({
url: '/updateUser',
method: 'post',
data:user
})
}
前端页面(使用elementui组件)
<template>
<el-card class="box-card">
<el-breadcrumb separator="/">
<el-breadcrumb-item>系统管理</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
</el-breadcrumb>
<!-- 表单 -->
<el-form :inline="true" :model="user" class="demo-form-inline">
<el-form-item label="用户名">
<el-input v-model="user.name" placeholder="用户名" clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
<el-button
type="primary"
style="float: right; margin-right: 20px"
@click="toDoAddUser()"
>新增用户信息</el-button
>
</el-form>
<!-- 表格 -->
<el-table :data="userList" border style="width: 100%">
<el-table-column prop="id" label="编号" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="age" label="年龄" width="100"> </el-table-column>
<el-table-column prop="email" label="邮箱" width="220"> </el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete"
@click="delUser(scope.row.id)">删除</el-button>
<el-button
type="primary"
icon="el-icon-edit"
@click="toDoUpUser(scope.row)"
>修改</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[2, 3, 4, 5]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>