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

2019-08-16 admin

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

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

写在前面


这是一个开源的项目(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的封装真正的让我体会到了什么是封装.

  • 增删改查

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

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

  • 业务逻辑

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

前台开发

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

写在最后


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

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

[转载]原文链接:https://segmentfault.com/a/1190000020092882

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72671.html

文章标题:H-项目记录-01:阿里百秀开发小结

相关文章
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
零基础-5小时开发一个electron应用-[实践]
一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​ electron最开始不叫这个名字,叫...
2017-12-26
回到顶部