观海听涛前端排班系统开发总结

项目地址

https://github.com/attack204/GHTT_arrangemenet_system

页面预览

完结总结

这玩意儿算是自己独立开发的第一个完整的项目吧,虽然最后还是有一点小小的bug,不过还算能跑的起来。

做完这个项目,前端的内容学习也基本上要告一段落了(咦这话我好像在哪儿说过2333)

总结一下自己学了哪些知识吧

html: 简单的了解了一下html,最基本的div标签啥的咱还是懂的
css:简单的学习了一下css,这次学终于搞懂了float, position这些相对难一点的内容,学了学grid的布局,最基本的排版咱还是会的233
js:简单的学习了一下js和jq,大概能用一些简单的函数
前端框架:能用mdui做一些相对简单整洁友好的网页

总的来说基本上所有内容都是浅尝辄止,最起码没有达到像c++一样的掌握程度,但是所有的技术栈拼在一起又能开发一点简单的前端页面,基本上还是符合自己的预期的。

项目总结

整个项目的开发大概分为两个部分,也可能是因为自己刚开始目标就比较明确,所以开发的比较快一点。

第一部分:设计+静态页面的编写

设计部分:因为页面比较简单,之前也见别人做过类似的项目,所以设计环节灵感来的比较快,基本上框架在一开始就确定了。

大概就是左侧一个选择列表,然后根据左侧的选择情况改变右侧的表格内容。虽然设计的比较简单,但实际上实现起来是比较麻烦的,这个之后会提

静态页面的编写:页面布局以grid为主,因为只有一个主要的container,所以设计起来也比较简单。一个比较坑的地方在于后期把页面元素改成动态生成之后grid布局会失效,这个比较令人自闭,所以后期把grid删了换成floa

第二部分:页面动态化+数据统计与提交

页面动态化:说的很高大上,其实就是把元素改为用js动态生成。在这之前先复习了一波js和jq的添加元素的语法。动态生成过程中的难点是字符串的编写。

数据统计与提交:这一部分就是表单验证 + post方式传输数据。个人感觉这是整个工程中最难的部分,因为用户所选择的课程并不容易统计。不过还好在设计页面的时候就已经考虑到了,每个元素都赋予了一个固定的id,可以直接通过id的选择与否来统计某元素是否被选择

post传数据没啥好说的,就是那样呗。。。

技术总结

  1. grid布局在一开始就要确定好,动态生成的元素加入之后是不会遵从之前父元素的grid布局的
  2. 动态生成元素中字符串的编写:其中最关键的一步是理清楚字符串的包含关系,每一层的字符串用一种表示方法。因为在写标签的时候我比较喜欢用双引号,因此在拆字符串的时候最外层一般用单引号,分割的地方也一般用单引号,具体例子见下面这句

优化与提升

有几点做的还不够好,在此记录一下,虽然可能不会再优化了2333

  1. 色块的搭配,这部分代码写得非常垃圾。。。
  2. 设计环节元素的大小,很多都是凑出来了
  3. js代码的优化,真的有些写的不能看。。。

一只菜鸡