蓝云ERP3.0项目开发笔记-------------Day03

2023-11-23 11:50
文章标签 项目 开发 笔记 day03 ------------- 蓝云 erp3.0

本文主要是介绍蓝云ERP3.0项目开发笔记-------------Day03，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、员工管理的完善

主要任务：

1、查询页面完善任务：
  • 查询员工不显示密码
  • 查询员工显示性别汉字
  • 查询员工日期格式化显示
  • 查询员工所在部门显示为部门名
  • 完善员工查询功能，实现范围查询
2、员工数据编辑界面完善任务：
  • 性别输入改为单选框
  • 日期格式化，不让用户输入，让用户选择
  • 部门输入框改为下拉菜单，选择数据
  • 数据的前端验证
  • 解决日期无法正常回显问题
  • 解决下拉列表，数据回显问题
  • 解决Struts2日期无法保存问题

具体实现过程：

一、查询页面完善：

1、修改查询页面不显示密码

  • 修改前端页面显示：
    雇员页面js文件

    （此处修改只是不显示，但是通过F12控制台，仍然可以看到后台传过来的雇员密码）

  • 解决控制台可查看密码：

    解决方法：修改Emp实体类，为其添加JSON注解：@JSONField(serialize=false)。添加后此对象在进行转换为JSON数据时，该行将不再被序列化为JSON数据。

    在这里插入图片描述

2、修改查询页面性别显示

  • 修改前端页面，添加EasyUI的格式化器formatter
    在这里插入图片描述

3、日期格式化显示

  • 引入date.js，用于格式化显示雇员中的日期显示

    date.js代码如下：

    // 对Date的扩展，将 Date 转化为指定格式的String   
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，   
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
// 例子：   
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18   
Date.prototype.Format = function(fmt)   
{ //author: meizz   if(isNaN(this.getDate())){return "";}var o = {   "M+" : this.getMonth()+1,                 //月份   "d+" : this.getDate(),                    //日   "h+" : this.getHours(),                   //小时   "m+" : this.getMinutes(),                 //分   "s+" : this.getSeconds(),                 //秒   "q+" : Math.floor((this.getMonth()+3)/3), //季度   "S"  : this.getMilliseconds()             //毫秒   };   if(/(y+)/.test(fmt))   fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   for(var k in o)   if(new RegExp("("+ k +")").test(fmt))   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   return fmt;   
}

  • 前端页面添加EasyUI的formatter格式器
    在这里插入图片描述

4、显示部门名称

  • 修改Emp实体类，将其中的Long类型的depuuid成员，修改为Dep类型的dep
    在这里插入图片描述

  • 修改Emp实体类的映射文件，配置为多对一的关联关系
    在这里插入图片描述

  • 为界面的部门字段添加格式化器，显示部门名称
    在这里插入图片描述

  • 解决每个部门只显示一次的问题

    问题如下：
    在这里插入图片描述

  • 解决部门只显示一次（关闭FastJson的循环引用保护）在转换为JSON时添加如下参数：
    在这里插入图片描述
    5、完善员工查询功能，实现员工出生日期范围查询

    • 修改部门查询为下拉列表框的方式选择查询的部门

      前端页面修改 在这里插入图片描述
      后台代码修改（修改EmpDao类中的添加查询条件的方法，加上如下内容）
      在这里插入图片描述

    • 修改前端页面显示 ，修改性别查询为单选框查询

      前端页面修改（修改emp.html）
      在这里插入图片描述
      后台代码修改（修改EmpDao类）
      在这里插入图片描述

    • 实现出生日期范围查询

      前端代码修改 在这里插入图片描述 后台代码修改
      在这里插入图片描述

二、员工数据编辑界面完善：

1、编辑雇员的性别，由输入框改为单选框

  • 修改emp.html中的性别表单如下：
    在这里插入图片描述

2、雇员出生日期，不再让用户输入，改为用户选择

  • 使用EasyUI的日期插件，修改input表单的class为easyui-datebox
    在这里插入图片描述
  • 修改其为不可编辑状态，防止用户输入
    在这里插入图片描述

3、部门下拉列表加载部门信息

  • 使用EasyUI的列表插件，实现通过URL加载部门列表
    在这里插入图片描述

4、前端的数据验证

  • 验证登录名不为空

    使用EasyUI中的easyui-validatebox类，修改其data-options如下
    在这里插入图片描述

    required：是否为必须填写项
    missingMessage：未填写时，鼠标移到上边的提示信息

  • 验证邮箱格式必须要正确

    使用EasyUI中的easyui-validatebox类，修改其data-option如下：
    在这里插入图片描述

    validType：验证的类型
    invalidMessage：当格式不正确时的提示信息

  • 将部门修改成必填

    由于combobox继承于validatebox，所以，可以直接为其添加data-options属性如下：
    在这里插入图片描述

  • 保存提交时，验证所有表单是否都数据校验通过，然后提交数据

    使用到EasyUI中表单form的validate方法，当所有表单都验证通过时返回true，故如下：
    在这里插入图片描述

5、完善数据回显，日期类型无法回显的错误

  • 定义FastJSON的日期转换格式，在带有日期类型的对象转换JSON时，添加转换格式：

    在这里插入图片描述

6、完善数据回显，下拉列表无法回显：

  • 问题原因

    前端返回数据：
    在这里插入图片描述
    前端接收数据表单： 在这里插入图片描述 由于数据回显是根据name值，匹配JSON数据中的键进行回显的，很明显JSON中并没有t.dep.uuid的键，因此数据不可回显。

  • 解决方法：

    编写JSON数据拼接方法mapJson，传入属性驱动的标志符，进行拼接，拼接方法如下：

    /*** 	自定添加前缀* @param jsonString* @param prefix* @return*/
private String mapJson(String jsonString,String prefix){//将JSON数据转换为Map的JSONObject对象Map<String,Object> map=JSON.parseObject(jsonString);//创建一个新的Map，存放拼接的JSON数据Map<String,Object> newmap=new HashMap<String,Object>();//遍历前边解析出的JSONObject对象for(String key:map.keySet()){//判断当前获取的是否为一个Map类型的对象if(map.get(key) instanceof Map) {//如果是，则将获取到的其对象，强转为Map类型Map<String,Object> innerMap=(Map<String,Object>)map.get(key);//遍历每个对象，将其前缀、键、值进行拼接for (String innerKey : innerMap.keySet()) {//进行拼接newmap.put(prefix+"."+key+"."+innerKey,innerMap.get(innerKey));}}else {newmap.put(prefix+"."+key, map.get(key));}}//将我们拼接的Map转为JSON字符串，并返回return  JSON.toJSONString(newmap);
}
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20190418205425670.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NjkzMjk1,size_16,color_FFFFFF,t_70)> 添加以上代码后，转换出的JSON的数据如下，此时就可以进行下拉列表的数据回显了：	![在这里插入图片描述](https://img-blog.csdnimg.cn/20190418130510348.png)

7、解决日期无法转换导致的日期保存不上的问题：

  • 问题原因：

    由于Struts2自带的日期类型转换器，但是他的类型转换器只能转换它所支持的类型：

    通过查看Struts2的源代码发现，其共有7个自带的日期转换器，其代码如下：
    在这里插入图片描述
    其中我们最熟悉的转换的日期类型就是第七种：fc3399，其可转换"yyy-MM-dd’T’HH:mm:ss"类型的日期，通过我的测试发现，该表达式转换出来的日期如下：
    在这里插入图片描述
    输出结果：
    在这里插入图片描述
    之前一直疑惑，我传入的是2019-4-18，这样的日期为什么转换不过来，原来问题出在这里，所以原因是其只转换的是带有时分秒且通过‘T’分割的‘-’分割的日期类型，如：2019-04-18T20:51:37。

    由于此系统不需要时分秒的时间传入，所以只能自定义类型转换器：

  • 此系统解决日期方法：

    有两种方法可以选择：①定义全局日期类型转换器，②定义局部日期类型转换器

    • 全局日期类型转换器的定义：

      编写类型转换类，通过继承 StrutsTypeConverter类，进行日期类型的转换，其代码如下：

      package cn.itcast.erp.utils;import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;import org.apache.struts2.util.StrutsTypeConverter;public class DateConversion extends StrutsTypeConverter {DateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd");public Object convertFromString(Map context, String[] values, Class toClass) {if(values.length!=0) {Date date=null;try {date = dateFormat.parse(values[0]);} catch (ParseException e) {System.out.println("数据转换出现错误");}return date;}return null;}public String convertToString(Map context, Object Obj) {if(Obj!=null) {Date date=(Date)Obj;String dateStr=dateFormat.format(date);return dateStr;}return "";}}

      编写xwork-conversion.properties属性文件，放在src根目录下，其内容如下：

      java.util.Date=cn.itcast.erp.utils.DateConversion

    • 定义局部日期类型转换器

      编写类型转换类与上边的全局类型转换器的类一样

      编写：action类名-conversion.properties的属性文件，存放在文件名当中的action类名的Action所在包路径下，定义内容如下：

      要转换的参数名=cn.itcast.erp.utils.DateConversion

二、商品管理的完善

主要任务：

1、查询页面完善任务：
  • 完善商品类型显示
  • 实现商品类型按下拉菜单进行选择查询
  • 实现销售价的范围查询
  • 实现进货价格范围查询
2、编辑商品页面完善
  • 进货与销售价格的单位显示"￥"
  • 商品名改为必填

具体实现过程：

一、查询页面完善：

1、完善商品类型的显示

  • 配置一对多的关联关系（一个商品类型，对应多个商品）

    修改Goods的实体类如下，将其关联的商品类型改为Goodstype类型：
    在这里插入图片描述
    修改Goods.hbm.xml的hibernate映射文件，配置多对一的关联关系如下：
    在这里插入图片描述

  • 修改前端页面显示，使用EasyUI的格式器，实现如下：
    在这里插入图片描述

2、实现按照下拉菜单进行商品类型的查询

前端界面修改
在这里插入图片描述
后台代码编写
在这里插入图片描述

3、实现销售价范围查询

前端代码修改，添加一个小数价数字输入框，如下：
在这里插入图片描述
后台代码实现，如下：
在这里插入图片描述

4、实现进货价范围查找：

前端代码修改：
在这里插入图片描述
后台代码实现：
在这里插入图片描述

一、编辑商品页面完善：

1、进货与销售价格的单位显示"￥"

前端代码编写
在这里插入图片描述

2、商品名改为必填

修改前端页面
在这里插入图片描述

这篇关于蓝云ERP3.0项目开发笔记-------------Day03的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/417741。

相关文章

这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...
【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络（1）sklearn

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络（1）sklearn

系列文章目录 监督学习：参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归（SAheart.csv） 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学
阅读更多...
系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

本章知识考点：         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识
阅读更多...
Linux_kernel驱动开发11

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前，需要制作不同类型格式的根文件系统         在产品研发阶段，我们还是需要使用nfs的方式挂载根文件系统         优点：可以直接在上位机中修改文件系统内容，延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2