gzy项目-页面开发实例（一）

一.项目配置导入

1.在开发工具Spring中配置已经下载好的apache-maven-3.5.0文件包，完成maven项目的部署；注意在apache-maven-3.5.0\conf文件中配置settings.xml文件：

确定好接下来我们要用到的项目框架性文件，避免我们从中央仓库下载，节省开发时间，提高效率。

二.原料去向页面开发

1.在文件路径：gzy-sc-ui\src\main\resources\templatesl中新建文件夹medicinalGoneTest——用于封装原料去向的静态页面；

新建edit.html（原料去向的编辑页面，所示的内容都经过lay-ui前端框架修饰，）和list.html（原料去向的主列表页面，同样的，所示的内容都经过lay-ui前端框架修饰，这里要注意medicinalGoneTest页面中js文件的引用设置，如下图所示）

 

2.在文件路径gzy-sc-ui/src/main/resources/static/ag/medicinalGoneTest/下新建medicinalGoneTest.js文件，封装一些具体对象和方法，便于对网页内容进行相关操作，下面简要介绍几个重要原函数:

①什么是实体类？

说白了就是让程序员操作数据库的时候不用写SQL语句；就是数据库表生成的一个类；实体类就是把对一个表的操作全写在一个类中，这样做可以是操作数据库变得简便，减少代码，提高效率，使程序员专注于逻辑关系；

②栏函数：返回页面栏上的必要的参数值；

例如：

 

 

③使用queryParams（查询参数）拿参数：页面大小，页码，排序，排序字段等；

 

 

④对象初始化函数，包括选用什么请求方式、后台URL、分页方式等一系列的页面设置；

 

 

⑤选择行函数，返回所选的行，当没有选择任何行的时候返回一个空数组；

⑥点击行函数，用于刷新行；

 

⑦刷新表单函数；

 

 

⑧使用layui框架中增删改查功能等，其中用到了ajax技术；

(什么是ajax技术：

直白地说，就是没用AJAX的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。

用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷）

 

 

3.文件路径/gzy-sc-ui/src/main/java/com/gzy/controller/下创建MedicinalGoneTestController.java；

创建一个UI层的控制器：

 

用来调用medicinalGoneTest/list和medicinalGoneTest/edit这个两个页面；

（注：GetMapping是一个组合注解，是@RequestMapping(method = RequestMethod.GET)的缩写。该注解将HTTP Get 映射到 特定的处理方法上。）

4.文件路径/gzy-sc-admin/src/main/resources/mapper/下创建MedicinalGoneTestMapper.xml：它是数据库连接池Mybatis的配置文件(详解请查看https://www.cnblogs.com/dqh94/p/7404100.html):

 

其中包括数据库的增删改查，配置文件的主要元素如下图所示:

 

 

5.文件路径/gzy-sc-admin/src/main/java/com/gzy/dao/下创建MedicinalGoneTestMapper.java，创建Mybatis连接池的接口，一般都是

Mapper.xml+Mapper.java的组合，作用相当于dao:

(其中包括定义数据库连接的增删改功能)

 

6.文件路径/gzy-sc-admin/src/main/java/com/gzy/service/下创建MedicinalGoneTestService.java，创建用户层处理业务逻辑的接口，包括增删改，但不涉及到访问数据库：

 

 

 7.文件路径/gzy-sc-admin/src/main/java/com/gzy/service/impl/下创建MedicinalGoneTestServiceImpl.java，创建用户层业务处理的具体实现类，包括增删改：

 

8.文件路径/gzy-sc-admin/src/main/java/com/gzy/controller/下创建MedicinalGoneTestController.java，创建用户层的控制器类，调用具体的增删改的功能模块：

 

 

三、项目调试

1.页面显示故障，无法执行基本功能和显示数据库数据：

 

 调试：

1.问题出现在/gzy-sc-admin/src/main/java/com/gzy/controller/MedicinalGoneTestController.java文件中：

当用POST、PUT模式提交数据时，发现服务器端接受不到提交的数据，这里需要选择正确的路径才行；

调试完成，页面恢复正常：

 2. 问题：F12查看出现错误：Failed to load resource: the server responded with a status of 500 ()：bad request一般是请求的request有问题，不符合服务器的要求导致的，可能是URL拼的有问题，可能是参数传的不对。可以检查下URL和确认下服务器对前台发送的请求有没有一些特别的要求规范，一些参数格式的要求。

调试：/gzy-sc-ui/src/main/resources/static/ag/productBaseTest/productBaseTest.js文件中修改url

结果：页面恢复正常：

 3.medicinalInfTest药品图片无法显示？

*调试：本地找不到药品图片文件；

 

4.角色管理页面出现404BUG；

 

调试：问题出现在/gzy-sc-admin/src/main/java/com/gzy/controller/RoleController.java中，F12控制台信息显示：rolelistTest接口获取不到，是因为ID不同造成的，修改RoleController.java中“roleTestlist”为“list”,问题解决；

 

转载于:https://www.cnblogs.com/zhzJAVA11/p/8275094.html