H-项目记录-01：阿里百秀开发小结

欢迎访问我的博客：林除夕

这是一个练习项目，通过它练习了前面所学到的大部分知识，同时学习和练习了后端的部分。如果你也想通过这个项目练练手，可以看看我在练习期间遇到了哪些问题作为参考。

写在前面

---

这是一个开源的项目（wordpress上的主题站，更多信息可以百度阿里百秀。），以前似乎是有这样一个网站，但是现在找不到了。因为是开源的所以可以很方便的找到所有的静态页面。这次练习主要重点并不在与如何切静态页面，而是在于具体业务功能（用户与页面之间的交互==>页面与页面之间的交互==>前端与后端的交互）的实现上。（后面我会发一些前面我切过的静态页面）。

---

前期配置准备

---

环境准备

• 操作系统：win10
• 服务器：Apache2.4.39（win64）
• 数据库：MySQL8.0
• 后端语言：php7.1.3

前端技术选型

• 部分h5c3
• jQuery 1.9.1
• bootstrap 3.3.7
• JsRender 0.9.8
• 以及其他不重要的插件类库

架构

├─admin
│  ├─api
│  └─inc
└─static
    ├─assets
    │  ├─css
    │  ├─img
    │  └─vendors
    │      ├─存放引入的类库
    └─uploads
       └─用户上传的文件

开发流程

---

st=>start: 开始
e=>end: 结束
op1=>operation: 业务拆分：前台/后台
op2=>operation: 后台开发
op3=>operation: 前台开发
st->op1->op2->op3->e

开发记录

---

搭建环境

为了模拟真实的开发场景以及未来将要面对网站部署的问题,我按照可能的服务器架构在自己的电脑上配置了对应的环境

• apache与php

  • 网上推荐的标准搭配之一,apache自身带有对php较为友好的扩展,所以链接在一起还是很简单的主要是找到相应的拓展配置位置比较麻烦.
  • apache的配置不能说难,重点是在于内容很多,配置文件很长,需要仔细阅读与查找自己需要的配置在什么地方,要了解每个配置选项的作用.因为重心并不在运维这一块,所以我只找了我需要的一些进行了解.

• MySQL

  • 主要还是在于与apache的联动上,需要在apache上启用相关拓展,并将相关路径,填入apache配置文件中
  • 可视化:还是那句话重点不在这里就不深究其内容,使用可视化工具对于小白更加友好.我这里使用的是navicat premium

后台开发

优先选择后台开发是因为,这次的页面已经切好了,主要考虑功能和交互.前台页面只需要将数据库数据读出来进行渲染就ok了相对比较简单.后台因为涉及数据管理,可以练习很多增删改查和业务逻辑

• php的使用

  第一次接触世界上最好的语言(大雾)难免还是有点紧张

  • 语法很奇葩申明变量用$这种操作一般人干不出来,还有代码段要写在<php ?>这个里面也是很难受了.
  • 都说php就是大号的模板引擎但是它用的位置比模板引擎多太多了(专注使用php语法的话),这就导致它的一些麻烦的地方被放大很多倍
  • 确实减少了很多麻烦,可以与html混编节省了很多操作,还有就是在与服务端交互上体验是比单纯用js来得爽快的多.
  • 通过这次开发掌握了php的基本语法以及api,同时也封装了几个比较常用的模块(主要是操作数据库)
  • 我目前觉得php中比较重要(主要是常用)的几个内容:超全局变量 cookie和session操作 数据库操作 header的运用
  • 还有一些特殊问题,我会单独整理一篇文章

• 数据交换

  • 页面与页面:可以参看我的另外一篇文章中提到的内容B-前端杂谈-01-数据在页面间传递的几种方式

  • 前端与后端:

    • 因为前后端一个主要在客户端上运行,一个主要在服务端允许,这就涉及到了网路传输的问题.通过这次练习比较深入的理解了一下客户端-->服务端-->客户端的运作机制,虽然时序图画得还不好,但是也已经能够看懂它们代表的什么了,我觉得是这次练习和学习中比较重要的收获.
    • 了解到了http协议的运作机制以及传输的包中会包含哪些内容
    • 大致了解了http与https之间的差别

  • ajax与php: 核心还是使用get post 只是实现方面不一样,

    • 使用ajax可以让代码感觉起来更加统一但是需要后端代码配合
    • php传递起来更简单因为后端也是php,但是要注意header的设置
  • jsonp:前端实现跨域请求的主要手段,但是需要后端配合返回能被js执行的代码.通过练习理解了其机制,封装了一次自己的jsonp代码,下次使用可能还是会用轮子,不会自己造了,但是对于jsonp的封装真正的让我体会到了什么是封装.

• 增删改查

  不要问后端是什么,问就是增删改查(大雾)

  没有什么好说的主要是如何配合业务使用,现在的我也只是勉强会用,肯定比不上后端大佬们的积累,但是经过这个项目很好的提高了我的这方面的熟练度.

• 业务逻辑

  • 整个项目我是从静态页面加功能,因为没有原型图,只能自己根据成品和自己的理解整理业务,所以有些业务设计的可能不好,但是大体与成品的功能一致,且在开发过程中加入了一些自己的想法,(交互体验优化方面)
  • 我在我的另外一篇文章中也提到过,开发的效率很大程度上来自对于业务的理解,因为确定业务逻辑,可以帮助你决定该怎么做,这样就避免了在选择上浪费的时间,且开发思路会相对更加清晰.

前台开发

​ 没啥好说的,正如前面所说,因为这次开发的页面是已经切好的,所以前台更多的只是将数据库数据读出来,然后使用模板引擎进行渲染就好了.

写在最后

---

通过这次练习,确实的提高了我很多方面的业务能力,但是现在我的开发效率上仍然有待提高.技术上还没有一个确定一个比较完整的开发体系,还需要学习.

好了就写这么多了,希望我这篇文章能在你也开始这个练习之前给你一些启发,帮助你确定通过这个练习能获得什么.