Vue前端项目-用户管理-显示用户列表(上)
目录
1、用户管理页面
2、导入相关的 element-ui 组件
3、查询用户列表API
4、全局挂载方法
5、添加日期范围方法
6、定义分页组件
7、scroll-to 文件
8、未完成部分
9、Controller层
10、Service层
11、Service的 impl
12、Mapper接口
13、Mapper接口映射描述文件
实现效果图：
1、用户管理页面
在 src / views / system / user / index.vue 中，在创建组件时，调用查询方法获取用户列表数据
2、导入相关的 element-ui 组件
在 src / plugins / elements.js 文件中
import { Table, TableColumn, Pagination } from 'element-ui'
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)3、查询用户列表API
创建 src / api / system / user.js 文件
import request from '@/utils/request'
// 查询用户列表
export function listUser(query) {
return request({
url: '/system/user/list',
method: 'get',
params: query
})
}
4、全局挂载方法
在 src / main.js 文件中，导入添加日期范围的方法，并挂载到全局方法中
import { addDateRange } from '@/utils/ruoyi'
// 全部方法挂载
Vue.prototype.addDateRange = addDateRange5、添加日期范围方法
新建 src / utils / ruoyi.js 文件,内容:
// 添加日期范围
export function addDateRange(params, dateRange) {
var search = params
search.beginTime = ''
search.endTime = ''
if (dateRange !== null && dateRange !== '') {
search.beginTime = this.dateRange[0]
search.endTime = this.dateRange[1]
}
return search
}
6、定义分页组件
新建 src / components / Pagination / index.vue 文件，内容：
7、scroll-to 文件
新建 src / utils / scroll-to.js 文件，内容：
Math.easeInOutQuad = function(t, b, c, d) {
t /= d / 2
if (t < 1) {
return c / 2 * t * t + b
}
t--
return -c / 2 * (t * (t - 2) - 1) + b
}
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()
/**
* Because it's so fucking difficult to detect the scrolling element, just move them all
* @param {number} amount
*/
function move(amount) {
document.documentElement.scrollTop = amount
document.body.parentNode.scrollTop = amount
document.body.scrollTop = amount
}
function position() {
return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}
/**
* @param {number} to
* @param {number} duration
* @param {Function} callback
*/
export function scrollTo(to, duration, callback) {
const start = position()
const change = to - start
const increment = 20
let currentTime = 0
duration = (typeof (duration) === 'undefined') ? 500 : duration
var animateScroll = function() {
// increment the time
currentTime += increment
// find the value with the quadratic in-out easing function
var val = Math.easeInOutQuad(currentTime, start, change, duration)
// move the document.body
move(val)
// do the animation unless its over
if (currentTime < duration) {
requestAnimFrame(animateScroll)
} else {
if (callback && typeof (callback) === 'function') {
// the animation is done so lets callback
callback()
}
}
}
animateScroll()
}
8、未完成部分
9、Controller层
package com.ruoyi.project.system.controller;
/**
* 用户信息
*
* @author ruoyi
*/
@RestController
@RequestMapping("/system/user")
@CrossOrigin
public class SysUserController extends BaseController {
@Resource
private ISysUserService userService;
/**
* 获取用户列表
*/
@GetMapping("/list")
public TableDataInfo list(SysUser user) {
startPage();
List list = userService.selectUserList(user);
return getDataTable(list);
}
}
10、Service层
package com.ruoyi.project.system.service;
/**
* 用户 业务层
*
* @author ruoyi
*/
public interface ISysUserService {
/**
* 根据条件分页查询用户列表
*
* @param user 用户信息
* @return 用户信息集合信息
*/
List selectUserList(SysUser user);
}
11、Service的 impl
package com.ruoyi.project.system.service.impl;
/**
* 用户 业务层处理
*
* @author ruoyi
*/
@Service
public class SysUserServiceImpl implements ISysUserService {
private static final Logger log = LoggerFactory.getLogger(SysUserServiceImpl.class);
@Resource
private SysUserMapper userMapper;
/**
* 根据条件分页查询用户列表
*
* @param user 用户信息
* @return 用户信息集合信息
*/
@Override
public List selectUserList(SysUser user) {
return userMapper.selectUserList(user);
}
}
12、Mapper接口
package com.ruoyi.project.system.mapper;
public interface SysUserMapper {
/**
* 根据条件分页查询用户列表
*
* @param sysUser 用户信息
* @return 用户信息集合信息
*/
List selectUserList(SysUser user);
}
13、Mapper接口映射描述文件
在 resources / mybatis / system / SysUserMapper.xml 文件