精灵商场项目(二)--Github+EasyUI+商品列表

最新推荐文章于 2024-01-27 21:02:36 发布

冷潇丶

最新推荐文章于 2024-01-27 21:02:36 发布

阅读量1.2k

点赞数 3

分类专栏：分布式电商项目文章标签：电商项目

本文链接：https://blog.csdn.net/qq_42495388/article/details/102828943

版权

一、git版本控制

1.1 创建github仓库,进行版本控制

GitHub地址 : https://github.com/q850717441/jl

1.2 idea添加.ignore忽略不必要提交的文件

idea 如何优雅的添加.ignore 忽略不必要提交的文件

在这里插入图片描述

1.3 GIT免密提交

在项目所在位置打开git-bash，在git bash交互环境输入命令：
git config credential.helper store
后续正常 push，第一次要输入账号密码，以后就不用了

二、PowerDesinger

2.1 PD介绍

PD可以以图形化的形式展现数据库中表与表之间的关联关系 , 并且能够自动的生存建库建表的语句 , 以及可以非常灵活的切换数据库

2.2 安装

安装完成之后,将破解补丁中的文件复制.替换根目录中的文件信息,就可以运行了

2.3 查看表设计模型

打开 PhysicalDataModel.pdm 文件

在这里插入图片描述

三、前端UI框架采用EasyUI

EasyUI官网 : http://www.jeasyui.net/

bootstrap官网 : https://www.bootcss.com/

Layui官网 : https://www.layui.com/ 当前比较流行的,收费

3.1 EasyUI介绍

(1) easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合

(2) 为创建现代化，互动，JavaScript应用程序，提供必要的功能

(3) 不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面

(4) 完美支持HTML5网页的完整框架

(5) 节省您网页开发的时间和规模

(6) 简单且功能强大

3.2 入门案例

<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<!--easyUI的js主文件  -->
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!--国际化的js文件  -->
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!--引入easyUI的样式  -->
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<body>
		<div class="easyui-draggable">拖动DIV</div>
</body>

3.3 RESTful 实现通用页面跳转

实现通用页面跳转
特点:
(1)前缀相同
(2)访问地址不同
(3)请求地址与跳转的页面相同的
方法: 参数使用/分割;参数使用{}包裹,并且设置变量名称;使用@PathVariable注解动态获取数据
注: 如果传递的参数数量众多时,使用对象封装

@Controller
public class IndexController {
   
	@RequestMapping("/page/{moduleName}")
	public String item_add(@PathVariable String moduleName) {
   
		return moduleName;
	}

3.5 EasyUI表格数据展现

由于前段页面接收的数据为JSON格式{"total":xxx,"rows":[{},{}}

3.5.1 编辑VO对象

封装数据为JSON通过ajax展示到EasyUI表格中

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable implements Serializable{
   
	private Integer total;
	private List<?> rows;
}