保姆级教程之医药采购系统平台笔记第1天04：系统UI首页的设计和部署&首页first.jsp的设计

如果想要获取第一天的源码，笔记，和相关工具，增加需求，代码重构，可以关注我并私信！！！

---

三 系统首页的设计和部署（重点）

1 复制静态页面(jsp页面，css样式，js等)

将图片images、css、js等表现层目录从原型中拷贝到yycgproject工程里面。

---

2 复制menu.json文件作为配置菜单项

系统菜单配置在menu.json文件中，因此目前只是用来测试，所以该文件只是象征性的存在！

等在后面随着项目的深入，在“用户授权”一节中会根据用户的角色从数据库中获取数据，然后组织成json格式的数据返回到页面。

就是说，该menu.json文件可以是没有的！

在menu.jso中配置一个用户管理的菜单，内容如下：

{    "menus" : [{"icon" : "icon-sys","menuid" : "1","menuname" : "系统管理","url" : "","menus" : [                  {"icon" : "icon-log","menuid" : "1_1","menuname" : "用户管理","url" : "/yycgproject/user/queryuser.action"                  }]                }              ] }

这里只有一个用户管理的菜单项，随之项目的深入，在menu.json文件中会添加更过的菜单项！！！

---

3 认识系统首页first.jsp

地址栏访问：http://localhost:8080/yycgproject后，先访问的是index.jsp页面，该页面如下：

该请求会跳转到后台的FirstAction类中的first（）方法（该类的编写参考“FirstAction.java的编写”）！

其中，系统首页是first.jsp页面。该first.jsp所在目录如下：

打开common_js.jsp文件，内容如下：

<!-- jquery和jquery easyui相关的JS文件 --> <script type="text/javascript" src="${baseurl}js/jquery-1.4.4.min.js"></script> <SCRIPT type="text/javascript" src="${baseurl}js/easyui/jquery.easyui.min.1.2.2.js"></SCRIPT> <script type="text/javascript" src="${baseurl}js/easyui/locale/easyui-lang-zh_CN.js"></script> <!-- jquery的ajax的form表单提交 --> <script type="text/javascript" src="${baseurl}js/jquery.form.min.js"></script> <!--加载系统自定义的包  .在一个大型的系统中，必定会有一些系统自定义的JS文件来封装一些公用的方法！！！--> <script type="text/javascript" src="${baseurl}js/custom.jquery.form.js"></script> <script type="text/javascript" src="${baseurl}js/custom.box.main.js"></script