MVC与单元测试实践之健身网站(四)-动做管理

网站后台负责进行动做的管理，包括动做名称、介绍、训练要点、配图等内容，以便前台可以使用这些内容。在上一篇< Fit项目图片上传和云存储的调通>中已经准备好了这里涉及到的主要技术难点，如今就开始完成该模块了。

 

一 列表介绍

健身管理模块包括肌群、肌肉的显示以及动做的管理。这儿也算是开始涉及“业务内容”了，还好我以前有储备了一些关于健身的资料，如今是时候派上另外一种用场了。

a) 肌群和肌肉由于内容相对固定，因此为了减小业务逻辑以及单元测试的代码量，固然最主要是为了偷懒，就只提供列表的显示功能，没法编辑。

 

肌群信息列表：

 

 

肌肉信息列表

 

 

b) 动做不像肌群和肌肉那样固定，必须有编辑功能，列表的显示、添加、编辑、删除的相应与以前权限模块相似。主要是添加、编辑界面差别较大。

 

 

二 动做的添加、编辑

动做的添加、编辑除了文本内容，还有相关的配图须要上传、删除。文本和图片分开两张表保存，并且文本在点击保存按钮时提交，图片则在选择后当即上传并刷新以显示最新的图片列表，点击图片时能即时地删除图片。这样界面背后的html结构就比以前的添加、编辑复杂了。

a) 总体来讲，动做分为两类，局部训练与综合训练，局部训练是能归属于肌群-肌肉-动做体系下的训练内容，是对局部某块肌肉的训练，好比平板支撑动做主要是对腹横肌的锻炼；综合训练是指能提升总体机能的运动类型，好比跑步、游泳等。

因此添加、编辑动做时，首先设定的即是动做类型：

 

 

选择局部训练时，须要进一步选择肌群和肌肉，肌群是固定下拉内容，肌肉的下拉内容要随肌群的选择动态加载。

选择综合训练时，不需设置肌群和肌肉，隐藏这两个下拉框。

 

b) 此页面还包括动做介绍、动做要点和注意事项的编辑，这三项信息具备一致的编辑界面，包括了多行文本内容和配图。没有使用富文本编辑器，但刚刚写文章时才想起来要增长对跨站脚本攻击的防范呢。

 

 

三 总结

虽然以前已经准备好了图片上传和云存储的实现方式，但实际作起来才发现坑远远不止这些，包括页面布局和事件触发等花费了很多时间，主要是本身不熟悉前端的缘由。有几个比较特别的问题须要记录一下。

a) 使用的模板中复选框、单选框都是使用了iCheck插件的，以前还说样式漂亮，但今天就被iCheck坑了。

 

 

iCheck的漂亮样式主要来自上面这段属性设置代码。而后若是要注册单选框的选择事件，用通常的ID、名称选择器就无论用了。要使用下面这样的方式，绑定ifChecked事件。

 

 

b) 浏览器加载页面时是从上往下的，若是$(document).ready写在jQuery.js引用的前面，这样的代码就是无效的。在razor模板中也要注意，layout中用于填充页面脚本的FootScript标签要放在js引用的下方。

 

欢迎关注微信公众号【菜鸟程序员成长记】