【实训项目】点子项目说明书-阿里云开发者社区

1.项目背景及意义

随着科技的发展、时代的进步，人们的生活水平得到了很大的提高，但与之而来的就是各种各样的问题。而身为大学生的我们首当其冲，本身就忙于学习，再加上生活中各种各样的社交活动、人与人之间的交流，难免会产生这样那样的难题困境。有些问题可以自己、或通过身边朋友解决。但还是有许多的问题是自己和身边人解决不了的。于是这样一个平台就诞生了。

2.目标

通过我们这个平台，用户不需要身份验证就可以将自己生活、学习以及情感等方面的困境难题等发布到平台上，通过悬赏的方式获得解决问题的点子，克服困难。同时也可以在闲暇的时候帮别人出点子，获取一定的利润。

3.系统结构图

4.总共能概述

（1）注册：用户在这个平台上不需要进行实名注册，但平台内的昵称及id不可以重复

（2）个人中心：包括昵称、id、性别等基本资料；我的提问记录；我的回答记录；钱包等

（3）发布问题：用户在平台上发布问题，并标上问题的类别和报酬，同时提交这个问题的报酬给平台（报酬由平台保管，直到该问题有满意的点子，然后由平台将报酬（扣除手续费后）交给回答满意点子的用户）

（4）回答问题：用户可以通过选择类别对自己想要回答的问题进行筛选

（5）问题类别：情感、学习、生活、心理、社交

5.创新与优势

通过互联网的方式将大家的点子集中起来，帮助用户解决生活中的难题。注册时不需要实名认证，在一定程度上保证了用户隐私。

6.模式

“点子”平台采取个人对个人的模式，支付模式则由平台作为第三方介入进行。对于用户来说可以在别人的帮助下解决自己的难题，又可以帮助别人解决难题。

7.项目效果展示

8.PPT展示效果

9.核心代码展示

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>蜻蜓FM</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <style>
    body{background-color: #eee; padding-bottom: 5px;}
    #user{
      height: 24%;
      background: url(../image/userinfo_bg.jpg) no-repeat center top;
      -webkit-background-size: cover;
      background-size: cover;
    }
    #avator{
      width: 7em; font-size: 12px; margin: 0 auto;
      padding-top: 106px; color: #fff; padding-bottom: 10px;
      background: url(../image/userinfo_avatar.png) no-repeat center 16px;
      -webkit-background-size: contain;
      background-size: contain;
    }
    ul{
      border-top: 1px solid #dedede;
      border-bottom: 1px solid #dedede; margin-bottom: 5px;
      background-color: #fff;
    }
    ul li{
      padding-left: 16%;
    }
    ul li.active{
      background-color: #eee;
    }
    ul.first{
      border-top: 0;
    }
    ul.last{
      margin-bottom: 0;
    }
    ul li h1{
      font-size: 16px; color: #272930; padding:10px 0;
    }
    ul li label{
      font-size: 14px; color: #787878; display: block;
      padding-bottom: 10px; border-bottom: 1px solid #ddd;
      max-width: 100%; white-space: nowrap; 
      text-overflow: ellipsis; overflow: hidden;
    }
    ul li:last-child label{
      border-bottom: 0;
    }
    .collect, .recent, .order, .msg, .contact, .timer, .alarm, .setting{
      background-position: 10px center;
      background-repeat: no-repeat;
      -webkit-background-size: 10%;
      background-size: 10%;
    }
    .collect{
      background-image: url(../image/userinfo_collection.png);
    }
    .recent{
      background-image: url(../image/userinfo_history.png);
    }
    .order{
      background-image: url(../image/userinfo_reserve.png);
    }
    .msg{
      background-image: url(../image/userinfo_conversations.png);
    }
    .contact{
      background-image: url(../image/userinfo_contact.png);
    }
    .timer{
      background-image: url(../image/userinfo_timer.png);
    }
    .alarm{
      background-image: url(../image/userinfo_alarm.png);
    }
    .setting{
      background-image: url(../image/userinfo_more.png);
    }
  </style>
</head>
<body>
    <div id="user">
      <div id="avator">
        请点击头像登录
      </div>
    </div>
    <ul class="first">
      <li tapmode="active" class="collect">
        <div>
          <h1>我的收藏</h1>
          <label>收藏喜欢的内容，更新及时告诉你</label>
        </div>
      </li>
      <li tapmode="active" class="recent">
        <div>
          <h1>最近收听</h1>
          <label>约瑟翰 庞麦郎 - 圆滑的麦当娜</label>
        </div>
      </li>
      <li tapmode="active" class="order">
        <div>
          <h1>我的预约</h1>
          <label>预约直播内容，到点准时通知您</label>
        </div>
      </li>
    </ul>
    <ul>
      <li tapmode="active" class="msg">
        <div>
          <h1>消息</h1>
          <label>无消息</label>
        </div>
      </li>
      <li tapmode="active" class="contact">
        <div>
          <h1>联系人</h1>
          <label>暂无联系人</label>
        </div>
      </li>
    </ul>
    <ul>
      <li tapmode="active" class="timer">
        <div>
          <h1>定时关闭</h1>
          <label>未设置</label>
        </div>
      </li>
      <li tapmode="active" class="alarm">
        <div>
          <h1>闹钟</h1>
          <label>闹钟未开启</label>
        </div>
      </li>
    </ul>
    <ul>
      <li tapmode="active" class="setting" onclick="setting()">
        <div>
          <h1>更多设置</h1>
          <label>缓存，音质，推送，使用帮助等</label>
        </div>
      </li>
    </ul>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
  function setting(){
    api.openWin({
      name: 'win_setting',
      url: 'win_setting.html',
      animation: {
        type: 'movein',
        subType: 'from_right'
      }
    });
  }
    apiready = function(){
    };
</script>
</html>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>蜻蜓FM</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <style>
    html,body{
      height: 100%; background-color: transparent;
      overflow: hidden;
    }
    #mask{height: 25%;}
    #radio-list{
      -webkit-transition: all .3s;
      transition: all .3s;
      -webkit-transform: translateY(100%);
      height: 75%; 
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-flex-flow: column;
      flex-flow: column;
    }
    #radio-list.in{
      -webkit-transform: translateY(0%);
    }
    #radio-list h2{
      color: #272930;
      font-size: 16px; padding: 14px; background-color: #eaeaea;
    }
    #radio-list ul{
      background-color: #eee;
      position: absolute; width: 100%;
    }
    #radio-list .list{
      position: relative; overflow: auto;
      /*-webkit-overflow-scrolling: touch;*/
      -webkit-box-flex: 1; 
      -webkit-flex: 1;
      flex: 1;
    }
    #radio-list li{
      overflow: hidden; padding: 10px 10px 0;
      background: url(../image/ic_arrow_general.png) no-repeat 96% center;
      -webkit-background-size: 18px;
      background-size: 18px;
    }
    #radio-list li.focus{
      background-color: #bebebe;
    }
    #radio-list li.focus p{
      color: #e13430;
    }
    #radio-list li.active p{
      background: url(../image/scheduleliving.png) no-repeat left center;
      padding-left: 10px; color: #e13430;
      -webkit-background-size: 10px 13px;
      background-size: 10px 13px;
    }
    #radio-list li p{
      margin-bottom: 6px;
    }
    #radio-list li div{
      font-size: 16px; color: #272930;
      border-bottom: 1px solid #ddd;
    }
    #radio-list li label{
      margin-bottom: 10px; font-size: 12px; color: #787878;
    }
    #radio-list li .arr{
      float: right; width: 10%;
    }
  </style>
</head>
<body>
<div id="mask"></div>
<div id="radio-list">
  <h2>节目单</h2>
  <div class="list">
    <ul>
      <li class="active" tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
      <li tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
      <li tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
      <li tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
      <li tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
      <li tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
      <li tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
      <li tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
      <li tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
      <li tapmode="focus">
        <div>
          <p>【美食地图】天南地北一张饼</p>
          <label>时长: 24分10秒</label>
        </div>
      </li>
    </ul>
  </div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
      var $list = $('#radio-list');
      $list.addClass('in');
      $(document.body).on('touchend',function(evt){
        if(!$.contains($list[0], evt.target)){
          $list.removeClass('in');
          setTimeout(function(){
            api.closeFrame();
          },350);
        }
      });
    };
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="Register.js"></script>
</head>
<body>
<div id="divForm">
<form >
  <table align="center">
  <tr height=50>
    <td>用户名</td>
    <td>
      <input name="username" type="text" id="txtUser" 
        onBlur="return checkUsername()"></input>
    </td>
    <td><span id="tips_username"></span></td>
  </tr>
  <tr height=50>
    <td>密码</td>
    <td>
      <input name="password" type="password" id="txtPwd"
        onBlur="return checkPassword()"></input>
    </td>
    <td><span id="tips_password"></span></td>
  </tr>
  <tr height=50>
    <td>确认密码</td>
    <td>
      <input name="password" type="password" id="txtRpt" 
        onBlur="return checkPassword()"></input>
    </td>
    <td><span id="tips_repeat"></span></td>
  </tr>
  <tr height=50>
    <td>用户类型</td>
    <td>
      <select name="usertype" id="selUser" onBlur="return checkUsertype()">
        <option value="0"></option>
        <option value="管理员">管理员</option>
        <option value="普通用户">普通用户</option>
      </select>
    </td>
    <td><span id="tips_usertype"></span></td>
  </tr>
  <tr height=50> 
    <td>性别</td>
    <td>
      <input name="sex" type="radio" value="男" onBlur="return checkSex()">男
      <input name="sex" type="radio" value="女" onBlur="return checkSex()">女
    </td>
    <td><span id="tips_sex"></span></td>
  </tr>
  <tr height=50>
    <td>出生日期</td>
    <td>
      <input name="birthdate" type="date" id="txtDate"
        onBlur="return checkBirthdate()"></input>
    </td>
    <td><span id="tips_birthdate"></span></td>
  </tr>
  <tr height=50>
    <td>兴趣爱好</td>
    <td>
      <input name="hobby" type="checkbox" value="阅读" onBlur="return checkHobby()">阅读
      <input name="hobby" type="checkbox" value="音乐" onBlur="return checkHobby()">音乐
      <input name="hobby" type="checkbox" value="运动" onBlur="return checkHobby()">运动
    </td>
    <td><span id="tips_hobby"></span></td>
  </tr>
  <tr height=50>
    <td>电子邮件</td>
    <td>
      <input name="email" type="email" id="txtMail" onBlur="return checkEmail()"></input>
    </td>
    <td><span id="tips_email"></span></td>
  </tr>
  <tr height=50>
    <td>自我介绍</td>
    <td>
      <textarea name="introduction" rows="5" cols="40" id="txtIntro" 
        onBlur="return checkIntro()"></textarea>
    </td>
    <td><span id="tips_introduction"></span></td>
  </tr>
  <tr height=50>
    <td colspan="2" align="center">
      <input name="submit" type="submit" value="提交">
      <input name="reset" type="reset" value="重置">
    </td>
  </tr>
  </table>
</form>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>蜻蜓FM</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
  <style>
    em{
            font-style: italic; color: #787878; font-size: 14px; width: 2em;
        }
        i{font-style: normal; font-size: 12px; color: #8c8c8c;}
        label{
            font-size: 16px;
        }
        ul li.active{
            background-color: #eee;
        }
        ul li .inner{
            margin-left: 20px; overflow: hidden;
            padding: 15px 20px 15px 0; border-bottom: 1px solid #dedede;
        }
        ul li:last-child{
            border-bottom: 0;
        }
        em, label{
            float: left;
        }
        i{float: right;}
        .top em, .top i{
            color: #e13531;
        }
        .hairlines li .inner{
            position: relative;
            border:none;
        }
        .hairlines li .inner:after{
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            background: #dedede;
            width: 100%;
            height: 1px;
            -webkit-transform: scaleY(0.5);
                    transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
        }
  </style>
</head>
<body>
    <ul id="rank">
        <!-- <li tapmode="active" class="top">
            <div class="inner">
                <em>1</em>
                <label for="">股市</label>
                <i>62121</i>
            </div>
        </li>
        <li tapmode="active" class="top">
            <div class="inner">
                <em>2</em>
                <label for="">王思聪</label>
                <i>40375</i>
            </div>
        </li>
        <li tapmode="active" class="top">
            <div class="inner">
            <em>3</em>
            <label for="">提速降费</label>
            <i>27839</i>
            </div>
        </li>
        <li tapmode="active">
            <div class="inner">
            <em>4</em>
            <label for="">复仇者联盟2</label>
            <i>23004</i>
            </div>
        </li> -->
    </ul>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/sha.js"></script>
<script type="text/javascript">
    apiready = function(){
        //1px线
        if(window.devicePixelRatio && devicePixelRatio >= 2){
            document.querySelector('ul').className = 'hairlines';
        }
        //云API
        var appid = 'A6987231827714', 
        appkey = '504531E6-7C61-3EF7-61FE-0B92A21FDED1';
        var now = Date.now();
        var hashStr = appid + 'UZ' + appkey + 'UZ' + now;
        var shaObj = new jsSHA(hashStr, "TEXT");
        var hash = shaObj.getHash("SHA-1", "HEX");
        hash = hash +'.'+ now;
        // alert(hash);
        api.showProgress({
            title: '加载中...',
            text: '',
            modal: true
        });
        api.ajax({
            url: 'https://d.apicloud.com/mcm/api/rank?filter[order]=index ASC',
            dataType: 'json',
            // returnAll:false,
            headers: {
                'X-APICloud-AppId': appid,
                'X-APICloud-AppKey': hash
            }
        },function(ret,err){
            if (ret) {
                // alert(JSON.stringify(ret)); 
                var i = 0, len = ret.length; 
                var htmlStr = '';
                for(i; i<len; i++){
                    var item = ret[i];
                    var topClass = '';
                    if(i<3){
                        topClass = 'top';
                    }
                    htmlStr += '<li tapmode="active" class="'+ topClass +'">'+
                        '<div class="inner">'+
                            '<em>'+ item.index +'</em>'+
                            '<label for="">'+ item.words +'</label>'+
                            '<i>'+ item.hot +'</i>'+
                        '</div>'+
                    '</li>';
                }
                $api.byId('rank').innerHTML = htmlStr;
                api.hideProgress();
            }
        });
    };
</script>
</html>

【实训项目】点子项目说明书

1.项目背景及意义

2.目标

3.系统结构图

4.总共能概述

5.创新与优势

6.模式

7.项目效果展示

8.PPT展示效果

9.核心代码展示

10.实训报告

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【实训项目】点子项目说明书

1.项目背景及意义

2.目标

3.系统结构图

4.总共能概述

5.创新与优势

6.模式

7.项目效果展示

8.PPT展示效果

9.核心代码展示

10.实训报告

热门文章

最新文章

相关课程

相关电子书

相关实验场景