会员系统新版本开发历程 – 数据图表设计

2016年8月25日建站历程 原创教程76,6076

后台用户的首页,是自己的账户信息。起初设计的时候,就像加入图表的样式。所以在网上找了点模板来用。文章源自狐狸影视城-https://fox-studio.net/31796.html

先看看旧版本用户的账户管理页面。文章源自狐狸影视城-https://fox-studio.net/31796.html

会员系统新版本开发历程 – 数据图表设计文章源自狐狸影视城-https://fox-studio.net/31796.html

 文章源自狐狸影视城-https://fox-studio.net/31796.html

很low,有没有。再来看看新版本的设计。文章源自狐狸影视城-https://fox-studio.net/31796.html

会员系统新版本开发历程 – 数据图表设计文章源自狐狸影视城-https://fox-studio.net/31796.html

 文章源自狐狸影视城-https://fox-studio.net/31796.html

新版本有没有高端大气上档次,哈哈。文章源自狐狸影视城-https://fox-studio.net/31796.html

 文章源自狐狸影视城-https://fox-studio.net/31796.html

数据库列表样式设计过程分享

前两天,搞最下面的(充值记录)列表样式的数据库显示。他是有互动的,点击没列标题,会自动升降序排列列表。模块右上角还有搜索功能,左上角有显示数量切换。这些都是用户参与的互动效果,光看图片是体会不来的。文章源自狐狸影视城-https://fox-studio.net/31796.html

后面说的这些有互动的功能,都是用js中jquery写的。当然基本是用网上的代码,我jquery可没玩的这么溜,简单一点的还行。文章源自狐狸影视城-https://fox-studio.net/31796.html

说说其中一个问题的障眼法处理吧。就是列表默认是正序。也就是说,第一次的充值记录是排在第一条的,只有当你点击“序号”栏目时,才会转换为倒序,最后的充值记录显示上来。文章源自狐狸影视城-https://fox-studio.net/31796.html

我当然是想让最后的充值记录显示在第一条啦,可是这些代码都是在js中写的。你不知道有多复杂。我给你们看看截图吧。文章源自狐狸影视城-https://fox-studio.net/31796.html

会员系统新版本开发历程 – 数据图表设计文章源自狐狸影视城-https://fox-studio.net/31796.html

我要是能看懂,就是真“大神”了。毕竟我是做影视后期专业的,才自学了三个月左右的编程,还是现学现卖。别说修改了,看都看不懂。文章源自狐狸影视城-https://fox-studio.net/31796.html

但是,用仅有的知识,也是可以解决这个问题的。那就是通过jquery来模拟一次鼠标点击,从而实现默认显示最后一次充值的充值记录。文章源自狐狸影视城-https://fox-studio.net/31796.html

之前不是说过嘛,点击每个列的标题名称,是可以切换升降序的排列。文章源自狐狸影视城-https://fox-studio.net/31796.html

那么我添加代码如下:文章源自狐狸影视城-https://fox-studio.net/31796.html

  1. $(document).ready(function () {
  2.     $('.sorting_asc').trigger("click");
  3. });

就这么简单,其中“.sorting_asc”是按钮的class编号。这个只是众多活学活用中的冰山一角。唉,总之呢,开发会员系统插件这个项目,比起初想象中要复杂太多了。文章源自狐狸影视城-https://fox-studio.net/31796.html

当初想的简单,还想着出教程呢。现在看来,难呐。太多逻辑思维在里面了,因为我在刚开始构想框架的时候,是将所有的重复代码全部用function包起来,在以后的升级维护时候,直接调用function,这样方便我以后的维护和管理等。文章源自狐狸影视城-https://fox-studio.net/31796.html

可问题是,这样设计代码框架。会很产生很多的调用和判断,虽然减少了代码量,但是增加了逻辑难度。文章源自狐狸影视城-https://fox-studio.net/31796.html

这个列表的设计用了整整三天时间。太心累。。。最后得到简化后的代码书写如下:文章源自狐狸影视城-https://fox-studio.net/31796.html

会员系统新版本开发历程 – 数据图表设计文章源自狐狸影视城-https://fox-studio.net/31796.html

这一段便是得到的最简化后的代码。基本都是function调用,其实我还在想,如果以后用这样的地方比较多,或许直接把这一串代码也写成function进行调用。然后传递变量到function中去。这样子,以后使用这个表格样式,直接一两行代码搞定。多牛逼,哈哈。文章源自狐狸影视城-https://fox-studio.net/31796.html

 文章源自狐狸影视城-https://fox-studio.net/31796.html

数据库图表设计历程分享

图表数据库的数据,同样是jquery写的。我找到的代码如下:文章源自狐狸影视城-https://fox-studio.net/31796.html

会员系统新版本开发历程 – 数据图表设计文章源自狐狸影视城-https://fox-studio.net/31796.html

这里是控制节点参数的。前端效果如图:文章源自狐狸影视城-https://fox-studio.net/31796.html

会员系统新版本开发历程 – 数据图表设计文章源自狐狸影视城-https://fox-studio.net/31796.html

呀,有是看不懂的js。萨疼。。。文章源自狐狸影视城-https://fox-studio.net/31796.html

数据库中的数据,是从0开始,经过时间,用户充值越多,记录越多。也就是说,图表中的节点是不固定的,还有数据也是从每一条中的数据库里读取的。是动态的。文章源自狐狸影视城-https://fox-studio.net/31796.html

它这个模板中的代码是静态的。每一个节点什么的都是写好,固定的。文章源自狐狸影视城-https://fox-studio.net/31796.html

我要做的就是把静态的改成动态的。听着似乎很简单。文章源自狐狸影视城-https://fox-studio.net/31796.html

第一问题,在js文件中打开并获取数据库中的数据。就这一个问题,我百度了多半天都没解决。最后还是在php文件中用input标签写在div模块里面,并起一个唯一的id,在jquery中调用。最后在php中,给div一个 display:none 的隐藏样式。文章源自狐狸影视城-https://fox-studio.net/31796.html

会员系统新版本开发历程 – 数据图表设计文章源自狐狸影视城-https://fox-studio.net/31796.html

再接下来就是第二个问题,因为数据库的记录数量是不固定的。也就是说图表的节点是动态的。那么从模板的代码格式来看,我需要用for循环来得到数据库中充值记录的总数目,进行循环。文章源自狐狸影视城-https://fox-studio.net/31796.html

可是他的书写格式为文章源自狐狸影视城-https://fox-studio.net/31796.html

  1. date:[
  2.         { y: '2014', a: 50, b: 90},
  3.        // ……
  4. ]

需要重复的是{}括号中的内容,如果你略懂这些代码,那么逻辑上的写法应该是文章源自狐狸影视城-https://fox-studio.net/31796.html

  1. date:[
  2.         for(i=0; i<max_list_num; i++){
  3.                 { y: $date_time, a: $value, b: 0},
  4.        }
  5. ]
  6. /**
  7. *   max_list_num 为数据库中记录的总数目。
  8. *   $date_time 每一条记录的时间
  9. *   $value 充值的数值
  10. *   模板是两条图表线,我这里只是用一条,因为同一个时间里,不可能同时产生充值和消费的记录,所以打算分开!
  11. **/

这样的书写格式在与否上是有错误的。就这个问题,我询问了我当前使用主题的作者“知更鸟”同学,只是到现在他也没给我答案。当然,从我想他发问到我解决这个问题中间只用了差不多3个小时。文章源自狐狸影视城-https://fox-studio.net/31796.html

其实问题的重点就在数组array和数组的括号[]这里。就这破问题,活活整了我一天时间,直到发帖前,刚解决了这个问题。昨天解决的是数据库列表显示。文章源自狐狸影视城-https://fox-studio.net/31796.html

好吧,那就分享下改好的代码吧:文章源自狐狸影视城-https://fox-studio.net/31796.html

会员系统新版本开发历程 – 数据图表设计文章源自狐狸影视城-https://fox-studio.net/31796.html

看着是不是很无语的感觉。哈哈,虽然代码很短,但是确实个非常棘手的问题。相信我,在编程世界中,就算一个标点符号,解决不了也会搞垮一个项目的。文章源自狐狸影视城-https://fox-studio.net/31796.html

weinxin
千年骚狐
  • 本文由 发表于 2016年8月25日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
评论:7   其中:访客  6   博主  1
    • 百丽微商
      百丽微商 0

      看到骚狐页脚的法律顾问:陈庚华律师,感觉这个世界慢慢的都是爱啊。你的会员系统,真心功能强大。

      • 鱼丸粗面
        鱼丸粗面 1

        狐狸,为什么不做CG了,有点伤感,是不是走在前面的你已经看到这是条绝路 险路了,所以另寻他法抛弃了我们,看你去映速社区一趟回来就没有新教程了,是确定不再回来了吗

          • 千年骚狐
            千年骚狐

            @ 鱼丸粗面 哈哈,我的专业是影视,不会放弃的。更不会抛弃喜欢我视频的你们 <img src="” />

          • 鱼丸粗面
            鱼丸粗面 1

            <img src="” />

            • 142857
              142857 1

              不错不错

              • JINGV
                JINGV 0

                <img src="” />

                • yxc419943244
                  yxc419943244 0

                  不错

                匿名

                发表评论

                匿名网友 填写信息

                :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                确定

                取消