资料：前辈的源码、堆栈旁的猫的个人博客页面
工具：vs2015community\Sql Server 2012
简介：使用MVC4.0开发模式
先上演示图：
整体预览
滑动效果
动态图标提示
创建数据库
首先做好准备工作，主要目的是招新，所以就一张基本信息表就够了，见表也很简单，时间限制，我就直接借用前辈的数据库了。
着手项目
新建ASP.NET MVC项目
考虑到兼容性问题，因为我们最终要放到网站的服务器上，服务器上的VS版本较低，这样打开VS2015的项目就会遇到很多问题，最偷懒的解决办法就是，在服务器上创建项目框架，然后用自己的VS2015去打开，再去开发。
文件部署
文件清理
创建的项目模板中通常带有很多我们并不需要的东西，而这个招新网站本来也不会是特别大型的，所以相比之下，那些无用的很占空间，所以还是清理掉比较好。
添加必要的文件夹
- CSS:样式文件，放在Content文件夹中；
- JS:js脚本文件，放在Script文件夹中；
- Files:存放一些文档文件；
- images:存放Logo、上传存照等图片文件；
样式文件、图片、一些文档，也就是1、3、4都放在Content文件夹中，JS放在Script文件夹中，做好分类规整会给后续开发带来很大帮助。
创建页面
我的招新网站主要分为下面几部分页面：
- 首页:对网站以及这次招新的要求做一个简要说明介绍，并提供报名入口进行简历填写。主要是前端界面设计，基本没有和后台的数据交流。
- 简历填写页面：简历的页面设计以及后台逻辑，涉及到将信息提交数据库，文件、照片上传下载。网上有很多求职网站中的填写简历界面都做得非常棒，而且给人感觉也不错，但毕竟不是开源，只能借鉴其页面设计，后台要怎么开发，我找到网站官网上一些功能，可以通过改造成简历填写的一部分，最重要的是有参考，本人还处在学习阶段，所以还是需要一些前辈经验来帮助自己的网站开发。
- 提示页面：在简历提交成功或失败，需要提供给用户一个提示页面，提交已成功或失败，这样可以带给用户更好的体验。
- 母版页：如果页面较多，或有重合内容，比如网站的标志、上方导航栏，下方版权提示一般都会是固定不变的，这就可以把他们做成母版页。
前端
具体实现的代码过程就不详述了，简单说下中间遇到的问题和解决办法，以及经验吧。
1.原本打算模仿大神堆栈旁的猫的博客页面，只用Html+CSS+js完成各种效果，无奈能力不够，招新时间都快到了，最后临时使用了jQuery->fullPage.js，实现在同一个页面，点击导航栏，定位到指定位置，原理是锚链接。<a href="#firstPage"></a> ,firstPage是指定div的ID，点击链接就会跳转到指定的div.
https://github.com/alvarotrigo/fullPage.js
这里有详细的fullPage.js的使用方法和注意事项。
2.在准备写一个网站的前端页面之前，一定要有一个整体的页面设计规划，对于各模块的摆放位置，都要提前有一个明确的设计，所以说，找一个美工设计的伙伴提前做好设计特别重要，自己设计也可以。我就因为没有提前做好规划设计，导致后来让美工设计的同学帮忙看一下，就遭到了吐槽，而且很多布局都有大改动，又加大了工程量。
3.适配手机：当然也可以不用适配，直接按在电脑上的样子显示，不过因为我做的这个页面是通过锚链接定位到四个页面，也相当于四个屏幕，如果不进行适配，就达不到理想效果。手机适配也不难，就是可能麻烦了点，因为各个手机尺寸都不一样，强烈建议使用百分比。手机屏幕有限，所以尽可能的就是要把无用信息和效果进行删减。
上图：
手机端适配预览
后台( ASP.NET C# )
主要涉及到的功能点有提交简历信息插入数据库、上传文件、后台查看简历列表以及建立详细信息。
这个网站的完成比较匆忙，仅仅完善了用户能看到的页面，后台管理员查看简历没有很好的进行完善，招新已经过去很久了，直到今天才腾出来点时间完成这篇未完成的文章。也无暇在对每一个步骤进行详细的回忆和描述，如果有朋友对哪一个部分感兴趣或者有疑问可以留下评论或私信，欢迎哦！
网友评论