族谱app开发实现思路

简介

现在的年轻人对于家族的概念越来越淡薄,然而族谱app的诞生让人们能够很好的查看、咨询自己的家族史，让年轻人加深对自己家族的概念。趁项目空档期有部分时间可以前期实现一个小小的族谱app，项目的整个架构基于ionic框架的基础之上进行开发。

效果图

pic_1.gif

实现过程

1.族谱app功能包含（成员的录入，族谱的介绍，家谱亲系图，族谱联系人，电子墓园）等五大部分构成，项目基于当前最流行的ionic框架进行开发，使用的技术点如下：
1.利用sass对css进行预编译，方便样式的管理及维护.
2.懒加载
懒加载问题，我看到ionic有组件支持，但是不是很完善，可以使用下面的库
点击打开
3.请求网络

/**
 * @desc 公司信息化app接口调用的所有请求入口 
 *(封装了app端调用后端请求的入口，并对对请求权限进行拦截处理)
 * @by wjb
 * 2016/8/12
 */
app.factory('appService', ['$resource', '$cacheFactory', function($resource, $cacheFactory) {
        return function(url, defaultParam) {
            var defaultFunction = {
                query: {
                    method: 'GET',
                    isArray: true,
                    timeout: 10000
                },
                get: {
                    method: 'GET',
                    isArray: false,
                    timeout: 10000
                },
                post: {
                    method: 'POST',
                    isArray: false,
                    timeout: 10000
                },
                update: {
                    timeout: 5000,
                    method: 'PUT',
                    isArray: false
                },
                delete: {
                    method: 'DELETE',
                    isArray: false,
                    timeout: 5000
                }
            };
            /*对请求的相对地址设置添加域名前缀*/
            if(url.indexOf('http://') == -1 && url.indexOf('https://') == -1 && url.indexOf('.json') == -1) {
                url = domin + url;
            }
            var returnRes = $resource(url, defaultParam, defaultFunction);
            return returnRes;
        }
    }])
    /**
     * @desc 公司信息化app接口用户拦截器的使用
     * @by wjb 2017/9/18
     * 
     */
    .factory('userInterceptor', ['$rootScope', '$q',function($rootScope, $q) {
        return {
            /**
             * 对请求进行设置
             * @param {Object} config
             */
            request: function(config) {
                //config.headers['X-CSRF-TOKEN'] = cfg.token;
                //config.url = config.url +cfg.token;
                return config;
            },
            /**
             * 响应的处理方案
             * @param {Object} response
             */
            response: function(response) {
                // 进行预处理
                if(response.data) {
                    if(response.data.success === false) {
                        response.status = 500;
                        console.log('错误信息: ' + response.data.errormsg);
                        response.data = null;
                        return $q.reject(response);
                        //this.responseError(response);
                    } else {
                        return response || $q.when(reponse);
                    }
                } else {
                    return response || $q.when(reponse);
                }
            },
            /**
             * 响应失败的处理方案
             * @param {Object} response
             */
            responseError: function(response) {
                return $q.reject(response);
            }
        };
    }]);

4.全局常量处理

 /**
  * @desc 族谱app常量设置，及api接口
  * @by weijb
  * 2017/9/11
  */
 var domin = 'http://192.168.1.137:7001/xxx/api/',
    /*请求的前缀 域名+项目名*/
    isDebug = true,
    /*是否调试模式*/
    app = angular.module('starter', ['ionic', 'ngResource', 'oc.lazyLoad']);
 /*存放api数据集的全局变量*/
 app.constant('api', isDebug ? {

 } : {

 });

使用

1.cnpm install或者使用npm install

2.ionic serve

3有需要使用android/ios平台

   ionic platform add ios/android

4运行android/ios平台####

ionic run android/ios

7.源码查看

点击打开代码地址

结语：
1.由于时间有限，并没有对此项目投入很多的精力，如果后续又充足的时间在来完善此项目。
最后，如果这个项目能帮到你，动动你的鼠标去github上帮我点一下start呗
github地址