webApp项目开发

作者: 小草莓蹦蹦跳 | 来源:发表于2017-10-18 23:33 被阅读0次

webApp项目开发
Cordova webapp实战开发（二）- 代码初探
React Webapp(二)-项目开发
使用手机联调Vue项目
【WebApp全栈项目开发】实战
#ReactApp项目构建流程【2】
springboot配置静态资源
SpringMVC项目搭建
命令行创建项目
[java]33、Maven部署tomcat

1. 开发项目准备

将项目基本架构搭建好
- 使用npm init -f 生成package.json
设置视口（meta:vp）
引入文件（注意文件的位置和名称，是以build为准）
- 导入css/index.css文件
- 导入js/index.js文件（在src中不存在，但是在build中是可见的）
使用bower下载angular（下载angular-ui 时，会同时将依赖的angular一同下载）

bower install angular angular-ui-router

重新gulp.将angular编译进项目
屏幕适配（标准写法）
- rem:相对单位，相对于根元素的字体大小。在移动端自适应屏幕，是未来的趋势（px转化为rem）
- px:绝对单位
- em:相对于父元素的字体的大小
```
 var fontSize = window.screen.width / 10 +'px';
 document.getElementsByTagName('html')[0].style.fontSize = fontSize;
```
将angular 链接到index.html中

2. 创建模块和控制器

使用title验证angular是否绑定成功
注意在页面上绑定

3.开始做导航

大标签<navs></navs>
自定义指令:创建标签
- 创建一个文件夹directive，在js的目录下，专门用于自定义指令的存放。
- 导航标签的逻辑在NavDir.js
- 自定义指令中需要外置模板，所以创建一个文件夹view，专门用于模板的存放。
- 导航标签的自定义指令中的外置模板是nav_tpl.html，注意路径的格式。
- 在style目录下创建文件夹template_style，用于存放模板的样式。
- nav_tpl.html的样式写在nav.less中
- 要将所有相关的.less文件带入index.less中
- 回退按钮的设置
  控制回退按钮的显示与不显示：
  在navs标签上添加属性is-back = "true"
  使用link指令：

link:function ($scope,ele,attr) {
                //通过判断isBack这个属性的值来设置它的显示和隐藏
                if (attr.isBack != "true"){
                    ele.find('em').css({
                        // "display":"inline-block"
                        "display":"none"
                    })
                }

4. 最底部的tab切换

样式布局的实现
- 使用自定义指令创建标签<tabbar>
- 在TabbarDir.js中写逻辑
- 外置模板是tabbar_tpl.html
- 外置模板的样式是tabbar.less
- 整体是固定定位，定位在底部。
- 底部上边框有一条分隔线
- ul 使用弹性布局，li 比例是1:1:1:1

.tabbar{
  width: 100%;
  .h(49);
  position: fixed;
  .left(0);
  .bottom(0);
  .right(0);
  background: #fff;
  border-top:1px solid #ccc;
  ul{
    display: flex;
    list-style: none;
    li{
      .pt(4);
      flex:1;
      text-align: center;
      .fs(14);
      img{
        .w(20);
        .h(20);
      }
    }
  }

}

点击tab的首先时,上面显示首页,点击作者时,上面显示作者,两个组建涉及到通信
- 方式一：
01.tabbar儿子在link指令中定义点击事件触发的方法，并发送指令给父亲，使用$scope$emit()方法发送信息。

 link:function ($scope, ele, attr) {
                $scope.tabChange = function (args) {
                    //向父亲发送指令
                    /**
                     * 参数一：发送指令的名称
                     * 参数二：传递的参数
                     */
                    $scope.$emit('Change',{value:args});
                }
            }

02.父亲接收tabbar儿子的信息，并利用接收到的参数进行处理后，再广播发送给nav儿子

 //接受tabbar儿子的消息
        /**
         * 参数一：接受到的指令的名称
         * 参数二：接受之后的回调
         */
        $scope.$on('Change',function ($event, args) {
            //接受发送的参数
            $scope.currentType = args.value;

            var title = "首页";
            switch ($scope.currentType){
                case 'home':
                    title = '首页';
                    break;
                case 'author':
                    title = '作者';
                    break;
                case 'content':
                    title = "栏目";
                    break;
                case 'my':
                    title = "我的";
                    break;
            }
            //再向nav儿子发送消息
            $scope.$broadcast('sendTitle',{title:title});
        })

03.nav儿子接收父亲的信息,并且修改导航中的span

link:function ($scope,ele,attr) {
                //接收父亲发送过来的消息(监听标题改变的通知)
                $scope.$on('sendTitle',function ($event, args) {
                    var title = args.title;
                    ele.find('span').html(title);
                });

方式二：
- 01.直接在父控制器中定义点击后触发的方法，并发送参数给nav儿子
- 02.只是两方的通信，加快通信速度。
- 03.注意父亲发送消息是在点击后触发的方法的逻辑之内
修改tabbar选中后的样式

图片改变
- 使用插值语法，使用三元运算符，判断目前点击的对象是否与自己相等，相等的话设置图片为选中的，否则为原来的图片

 <li ng-click="tabChange('my')">
            <p>
                ![]({{currentType == 'my' ? '../images/mySel.png' : '../images/my_icon.png'}})
            </p>我的
        </li>

文字变色
- 当选中时，使用ng-class添加类 active

  <li ng-click="tabChange('my')" ng-class="{active:currentType == 'my'}">
            <p>
                ![]({{currentType == 'my' ? '../images/mySel.png' : '../images/my_icon.png'}})
            </p>我的
        </li>

注意要先设置默认选中首页

  $scope.currentType = "home";

5.通过多视图显示中间内容

在界面上布局四个div，分别绑定ui-view = "home"
注入路由依赖模块
创建一个文件夹config，专门用于配置服务
建立文件RouterConfig.js，配置路由服务

(function (angular) {
    var app = angular.module('app');
    app.config(['$stateProvider','$urlRouterProvider',function ($stateProvider, $urlRouterProvider) {
        $stateProvider.state('app',{
            url:'/',
            views:{
                home:{template:'<p>home</p>'},
                author:{template:'<p>author</p>'},
                content:{template:'<p>content</p>'},
                my:{template:'<p>my</p>'}
            }
        });
        $urlRouterProvider.otherwise('/');
    }])
})(angular);

控制分别显示的内容

<!--通过多视图显示中间的内容-->
<div ng-show="currentType == 'home' " ui-view="home"></div>
<div ng-show="currentType == 'author'"  ui-view="author"></div>
<div ng-show="currentType == 'content'"  ui-view="content"></div>
<div ng-show="currentType == 'my'"  ui-view="my"></div>

设置外链模板。对应的页面需要有对应的控制器
创建controller文件夹,用于控制器的创建
创建HomeController.js用于创建属于HOME页面的控制器
使用插值语法验证是否绑定成功

(function (angular) {
    var app = angular.module('app');
    app.controller('HomeController',['$scope',function ($scope) {
        $scope.name = "首页";
    }])
})(angular);

控制显示每个页面的不同item
- 使用自定义指令创建标签list
- 创建文件ListDir.js，在这里面实现逻辑
- 使用外置模板 list_tpl.html 这个里面放置的时各种不同的类型的item
- 给list_tpl页面创建一个对应的list.less文件,并加入到index.less
- 创建其他几种item
- 基本局部

<div class="list_content">
    <p class="tag">洗洗睡</p>
    <h3>大标题</h3>

<!--模块1-->
    <div class="post1" ng-if = "true">
        <p>滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴</p>
    </div>

<!--模块2-->
    <div class="post2" ng-if = "true">
        <p>滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴滴2</p>
        ![](../images/post_1.png)
    </div>

<!--模块3-->
    <div class="post3" ng-if = "true">
        <ul>
            <li>![](../images/post_3.png)</li>
            <li>![](../images/post_4.png)</li>
            <li>![](../images/post_5.png)</li>
        </ul>
    </div>
</div>

对应的样式

.list_content{
  .tag{
    .w(80);
    background-color: #666;
    color: #fff;
    .fs(12);
    .h(25);
    .lh(25);
    text-align: center;
    .ml(10);
    .mt(5);
    border-radius: 0 0 5px 5px;
  }
  p{
    .padding(0,10);
    .fs(16);
    color: #999;
  }
  h3{
    .padding(0,10)
  }
  .post2{
    position: relative;
    p{
      .w(260);
    }
    img{
      .w(80);
      .h(80);
      position: absolute;
      .right(15);
      .top(5);
    }
  }
  .post3{
    ul{
      .padding(0,10);
      display: flex;
      li{
        flex: 1;
        .ml(2);
        img{
          .w(110);
          .h(80);
        }
      }
    }
  }
}

访问真实的数据通过php桥接

<?php
/**
 * Created by PhpStorm.
 * User: gaowei
 * Date: 2017/2/25
 * Time: 10:40
 */
header("Content-Type: text/html; charset=UTF-8");
$url = "https://moment.douban.com/api/stream/date/2017-03-10?alt=json&apikey=0bcf52793711959c236df76ba534c0d4&app_version=1.7.4&douban_udid=d623045db9fcb0d5243174c1bf1a675f887047c0&format=full&udid=9a34d8b038ff38971050199b0c5ee9c60c6d1ca3&version=6";

$res = file_get_contents($url);
$fun = $_GET['callback'];
echo $fun.'('.$res.')';

配置本地的http协议,白名单配置

(function (angular) {
    var app = angular.module('app');
    app.config(['$sceDelegateProvider',function ($sceDelegateProvider) {
        $sceDelegateProvider.resourceUrlWhitelist([
            'self',
            'http://localhost/api/**'
        ])
    }])
})(angular);

注入服务

(function (angular) {
    var app = angular.module('app');

    //注入服务
    app.controller('HomeController',['$scope','$http',function ($scope,$http) {
        $scope.name = "首页";

        //跨域请求
        $http({
            url:'http://localhost/api/home.php',
            method:'jsonp'
        }).then(function (res) {
            console.log(res);
        }).catch(function (err) {

        })
    }])
})(angular);

获取数据后，绑定数据
- 通过ng-if 的值判断显示或者隐藏。值为后台数据获取。

 ng-if = "item.display_style == 10001"

通过获得的数据的长度是否为零，再确定显示或者隐藏。

ng-if="item.column.name.length != 0"

6.对刚才加载数据的过程做一个优化

使用双向绑定

<list listarray = "listData"></list>

在自定义指令中添加该步骤，listarray对应上面标签的属性

 scope:{
                listarray:'='
            }

listDatas为跨域请求后获取到的数据

-  $http({
            url:'http://localhost/api/home.php',
            method:'jsonp'
        }).then(function (res) {
           $scope.listData = res.data.posts;
            console.log($scope.listDatas);
        }).catch(function (err) {

        })

7.对于版本的变化,上面代码无能为力,为了适应版本变化,抽取!

建立文件夹service，用于存放自定义服务的文件
建立文件httpService,用于自定义服务

(function (angular) {
    "use strict";
    /**
     * 自定义服务三种方式
     * service
     * factory
     * value
     * @type {angular.Module}
     */
    var app = angular.module('app');
    app.service('wmxHttp',['$http',function ($http) {
        this.getData = function (success, error) {
            // 请求数据
            $http({
                url:'http://localhost/api/home.php',
                method:'jsonp'
            }).then(function (res) {
                success(res.data.posts);
            }).catch(function (err) {
                error(err);
            })
        }
    }])
})(angular);

8.固定头部

webApp项目开发
1. 开发项目准备将项目基本架构搭建好使用npm init -f 生成package.json 设置视口（me...
Cordova webapp实战开发（二）- 代码初探
开发环境与项目创建请参考 Cordova webapp实战开发（一）- 环境布置项目环境已经布置好第一个项目也已经...
React Webapp(二)-项目开发
https://segmentfault.com/a/1190000011474522这个学习redux很有用轮...
使用手机联调Vue项目
最近在做一个项目是个混合开发的项目，在android主应用中加载一个Vue开发的webApp，由于开发过程中需要使...
【WebApp全栈项目开发】实战
本文章将完整的叙述一个WebApp项目的开发过程，包括服务器的搭建，数据库设计，接口开发等等。首先来看一下本产品...
#ReactApp项目构建流程【2】
ReactApp项目构建流程【2】 React服务端渲染为什么会有服务端渲染？webapp开发模式很多框架都由浏...
springboot配置静态资源
在以前开发项目的时候静态文件放在src/main/webapp，而springboot默认的静态文件的路径是在cl...
SpringMVC项目搭建
1. 建立项目建立java项目在项目根目录下新建webapp文件夹；在webapp下新建一个WEB-INF文件...
命令行创建项目
注: Maven version = 3.5.0 创建 webapp 项目创建普通 Java 项目
[java]33、Maven部署tomcat
前面讲过关于如何使用IDEA创建一个webapp项目。我们都知道，用IDEA创建的webapp项目使用本地tomc...