Java精品項(xiàng)目瑞吉外賣之員工信息管理篇

更新時(shí)間：2022年05月13日 09:50:32 作者：爪哇斗羅

這篇文章主要為大家詳細(xì)介紹了java精品項(xiàng)目-瑞吉外賣訂餐系統(tǒng)，此項(xiàng)目過大，分為多章獨(dú)立講解，本篇內(nèi)容為員工信息分頁查詢與啟用或禁用員工狀態(tài)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一. 員工信息分頁查詢

1. 需求分析

當(dāng)系統(tǒng)中的用戶越來越多頁面展示不完整，我們需要通過實(shí)現(xiàn)分頁的方式去展示員工的信息：

2. 代碼開發(fā)

在開發(fā)代碼之前，需要理清楚程序的執(zhí)行過程與業(yè)務(wù)邏輯：

頁面發(fā)送Ajax請(qǐng)求，將分頁查詢參數(shù)（page,pagesize,name）提交到服務(wù)端服務(wù)端
Controller接收頁面提交的數(shù)據(jù)并調(diào)用查詢的數(shù)據(jù)
Service調(diào)用Mapper操作數(shù)據(jù)庫，查詢分頁數(shù)據(jù)
Controller將查詢到的分頁數(shù)據(jù)響應(yīng)到頁面
頁面接收到分頁的數(shù)據(jù)并通過ElementUI的Table組件展示到頁面上

其實(shí)頁面的分頁參數(shù)是通過JSON的格式傳值后端，但是為何是圖中是以這種問號(hào)的方式拼接的呢，原因是前端將請(qǐng)求進(jìn)行一個(gè)攔截后重新拼接后的結(jié)果（前端代碼不再敘述）。

配置分頁插件

package com.itheima.reggie.config;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
/**
 * 配置Mybatis-plus分頁插件
 * @author jektong
 * @date 2022年05月01日 0:08
 */
@Configuration
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return mybatisPlusInterceptor;
    }
}

Controller層

   /**
     * 員工信息分頁查詢
     *
     * @param page 當(dāng)前頁
     * @param pageSize 頁碼
     * @param name 關(guān)鍵字查詢
     * @return
     */
    @GetMapping("/page")
    public R<Page> page(int page, int pageSize, String name) {
        log.info("page={},pageSize={},name={}", page, pageSize, name);
        // 構(gòu)造分頁構(gòu)造器
        Page pageInfo = new Page(page, pageSize);
        // 構(gòu)造條件
        LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();
        queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getName, name).or()
                .like(StringUtils.isNotEmpty(name),Employee::getUsername,name);
        // 添加排序
        queryWrapper.orderByDesc(Employee::getUpdateTime);
        // 執(zhí)行查詢
        employeeService.page(pageInfo, queryWrapper);
        return R.success(pageInfo);
    }

二. 啟用或禁用員工狀態(tài)

1 需求分析

員工管理列表頁，可以對(duì)某個(gè)員工狀態(tài)進(jìn)行啟用或者禁用的操作。賬號(hào)禁用的與員工不可登錄系統(tǒng)，啟用過后可以正常登錄。這一操作只允許管理員進(jìn)行操作。

2 代碼開發(fā)

前端核心代碼

頁面中是如何做到只有管理員admin可以看到禁用按鈕的，其實(shí)在前端只需獲取到登錄的賬號(hào)，然后進(jìn)行一個(gè)用戶名判斷即可：

頁面初始化的時(shí)候就獲取登錄賬號(hào)：

created() {
          this.init()
          this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },

顯示賬號(hào)狀態(tài)的那一列:

<el-table-column label="賬號(hào)狀態(tài)">
    <template slot-scope="scope">
        {{ String(scope.row.status) === '0' ? '已禁用' : '正常' }}
    </template>
</el-table-column>

向后端傳遞JSON的數(shù)據(jù)，將需要禁用員工的賬號(hào)的ID與狀態(tài)傳值后端，前端主要代碼：

//狀態(tài)修改
statusHandle (row) {
	this.id = row.id
	this.status = row.status
	this.$confirm('確認(rèn)調(diào)整該賬號(hào)的狀態(tài)?', '提示', {
		'confirmButtonText': '確定',
		'cancelButtonText': '取消',
		'type': 'warning'
	}).then(() => {
		enableOrDisableEmployee({ 'id': this.id, 'status': !this.status ? 1 : 0 }).then(res => {
			console.log('enableOrDisableEmployee',res)
			if (String(res.code) === '1') {
				this.$message.success('賬號(hào)狀態(tài)更改成功！')
				this.handleQuery()
			}
		}).catch(err => {
			this.$message.error('請(qǐng)求出錯(cuò)了：' + err)
		})
	})
},

后端核心代碼

/**
 * 根據(jù)用戶ID去修改用戶狀態(tài)
 *  @param request
 *  @param employee
 *  @return
 */
@PostMapping
	public R<String> update(HttpServletRequest request, @RequestBody Employee employee){
	// 獲取員工ID
	Long empId = (Long) request.getSession().getAttribute("employee");
	employee.setUpdateTime(LocalDateTime.now());
	employee.setUpdateUser(empId);
	employeeService.updateById(employee);
	return R.success("員工信息修改成功");
}

其實(shí)測(cè)試發(fā)現(xiàn)這段代碼是不會(huì)被修改成功的，因?yàn)樯婕耙粋€(gè)JS的精度問題，JS識(shí)別Long類型只精確到16位，而ID是雪花算法生成的ID有19位，導(dǎo)致ID精度丟失。

代碼修復(fù)

如何解決上述問題，將頁面的Long類型轉(zhuǎn)為字符串。具體步驟：

使用JacksonObjectMapper對(duì)JSON數(shù)據(jù)進(jìn)行轉(zhuǎn)換
在WebConfig配置類中擴(kuò)展SringMVC的消息轉(zhuǎn)換器，鏡像Java對(duì)象到JSON數(shù)據(jù)的轉(zhuǎn)換

JacksonObjectMapper：

package com.itheima.reggie.common;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateDeserializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateTimeDeserializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalTimeDeserializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateSerializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalTimeSerializer;
import org.springframework.stereotype.Component;
import java.math.BigInteger;
import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.time.format.DateTimeFormatter;
import static com.fasterxml.jackson.databind.DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES;
/**
 * 對(duì)象映射器:基于jackson將Java對(duì)象轉(zhuǎn)為json，或者將json轉(zhuǎn)為Java對(duì)象
 * 將JSON解析為Java對(duì)象的過程稱為 [從JSON反序列化Java對(duì)象]
 * 從Java對(duì)象生成JSON的過程稱為 [序列化Java對(duì)象到JSON]
 */
@Component
public class JacksonObjectMapper extends ObjectMapper {
    public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
    public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
    public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss";
    public JacksonObjectMapper() {
         super();
        //收到未知屬性時(shí)不報(bào)異常
        this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false);
        //反序列化時(shí)，屬性不存在的兼容處理
        this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
        SimpleModule simpleModule = new SimpleModule()
                .addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))
                .addSerializer(BigInteger.class, ToStringSerializer.instance)
                .addSerializer(Long.class, ToStringSerializer.instance)
                .addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));
        //注冊(cè)功能模塊 例如，可以添加自定義序列化器和反序列化器
        this.registerModule(simpleModule);
    }
}

WebMVCConfig：

/**
     * 擴(kuò)展MVC消息轉(zhuǎn)換器
     * @param converters
     */
    @Override
    protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
        log.info("擴(kuò)展消息轉(zhuǎn)換器");
        // 創(chuàng)建消息轉(zhuǎn)換器
        MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
        // 設(shè)置對(duì)象轉(zhuǎn)換器，底層使用Jackson將Java對(duì)象轉(zhuǎn)為json
        messageConverter.setObjectMapper(new JacksonObjectMapper());
        // 將上面的消息轉(zhuǎn)換器對(duì)象追加到MVC框架的轉(zhuǎn)換器集合中
        converters.add(0,messageConverter);
    }

修復(fù)之后員工狀態(tài)可以正常修改，ID也改變?yōu)樽址袷搅耍?/p>