JavaWeb-SpringBoot(抖音)_一、抖音项目制作
JavaWeb-SpringBoot(抖音)_一、抖音项目制作 传送门
JavaWeb-SpringBoot(抖音)_二、服务器间通讯 传送门
JavaWeb-SpringBoot(抖音)_三、抖音项目后续 传送门
使用Gradle编译项目 传送门
腾讯视频云点播 传送门
项目已托管到Github上 传送门
各个功能模块的默认配置文件application.properties
#thymeleaf编码 spring.thymeleaf.encoding=UTF-8 #热部署静态文件 spring.thymeleaf.cache=false #遵循HTML5的标准 spring.thymeleaf.mode=HTML5 #使用H2的控制台 spring.h2.console.enabled=true #Datasource spring.datasource.url=jdbc:mysql:///shakes?serverTimezone=UTC&characterEncoding=utf-8 spring.datasource.username=root spring.datasource.password=123456 spring.datasource.driver-class-name=com.mysql.jdbc.Driver #设置JPA spring.jpa.show-sql=true spring.jpa.hibernate.ddl-auto=update
实现用户的注册登录
实现上传视频封面及视频文件至腾讯云
实现过程
浏览项目资源
index.htm页面中添加thymeleaf标签，实现index.htm页面的跳转
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
@RestController public class ToController { @RequestMapping("/toindex") public ModelAndView index() { return new ModelAndView("/index.htm"); } }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>【抖音短视频】记录美好生活-Douyin.com</title><meta charset="utf-8"><script async="" src="index_files/analytics.js"></script><script src="index_files/slardar.js"></script><script>window.Slardar && window.Slardar.install({ sampleRate: 1, bid: 'douyin_web', pid: 'index_page', ignoreAjax: [], ignoreStatic: [] });</script><script src="index_files/raven_8c2f9e8.js"></script> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音、抖音音乐、抖音短视频、抖音官网、amemv"> <meta name="description" content="抖音短视频-记录美好生活的视频平台"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"><meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"><link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"><link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"><link rel="dns-prefetch" href="https://s1.pstatp.com/"><link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="index_files/base_4a834a9.css"> <link rel="stylesheet" href="index_files/index_bb583a6.css"><!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--><script src="index_files/core_1f49c51.js"></script> <script>// BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function(){}; (function(){ var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function (t, e, a, n, s, c){t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function (){ (t[s].q = t[s].q || []).push(arguments)}, t[s].t = 1 * new Date, t[s].s = c;var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0].appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, {'sampleRate': sampleRate}); ba('send', 'pageview'); baevent = function(category, action, label, value){ console.log("ba:"+category+","+action+","+label); if(category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value: 1); } }; })();</script><script async="" src="index_files/analytics_002.js"></script> <script>var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush=function(){}; var gaevent=function(){}; var gapageview=function(){}; var trackPV = gapageview; var sampleRate = 20; function initGA(){ if(sampleRate && gaAccount){ window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if(typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); // Replace with your property ID. ga('create', gaAccount, {'sampleRate': sampleRate}); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label){ gaevent('event',ga_event,ga_label); }; gaevent = function(category, action, label, value){ if(test_channel.indexOf(action) >-1) label = label+test_version; console.log("ga:"+category+","+action+","+label); if(category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value: 1); } if(typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html").on('click', '[ga_event]', function(e){ var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category,ga_event,ga_label); if($this.is('a')){ var href = $this.attr('href')||'', target = this.target; if(!( href[0]==='#' || target === "_blank" || e.isDefaultPrevented())) { setTimeout(function(){ location.href = href },400); return false } } }); } } initGA();</script> <link rel="stylesheet" href="index_files/index_75c3105.css"></head><body><div class="container"><div class="video-bg"><video muted="muted" data-autoplay="" loop="loop" autoplay="autoplay" src="index_files/tvc-v2_30097df.mp4" class="video-tvc" id="video-tvc" data-object-fit="">抱歉，您的浏览器不支持内嵌视频</video></div><div class="content"><header class="header claerFloat"><div class="header-left"><a href="https://www.douyin.com/"><img src="index_files/logo_efcda07.png" alt="logo"></a></div><div class="header-right"><ul class="header-links"><li class="header-links-item"><a href="https://musician.douyin.com/">抖音音乐人</a></li><li class="header-links-item"><a href="https://www.douyin.com/certification/agency/enter/">机构认证</a></li><li class="header-links-item"><a href="https://www.douyin.com/enterprise_auth/">企业认证</a></li><li class="header-links-item"><div class="unmute"></div></li></ul></div></header><div class="middle clearFloat"><div class="slogan"><img src="index_files/slogan_2_8d59f13.png" alt="slogan"></div><div class="btn-list"><a class="btn-primary icon-QRcode"><img src="index_files/QRcode_c129445.png" alt="qrcode"></a><div class="btn-primary"><a class="btn-hover icon-ios btn-link" href="https://itunes.apple.com/us/app/a.me-yin-le-duan-shi-pin-she-qu/id1142110895?l=zh&ls=1&mt=8"></a></div><div class="btn-primary"><a class="btn-hover icon-andorid btn-link" href="http://s.toutiao.com/UsMYE/"></a></div></div></div><footer class="footer"><nav class="nav-warpper"><span>|</span> <a href="https://www.douyin.com/cnl_music/music_tab/">音乐</a> <span>|</span><a href="https://www.douyin.com/agreement/">用户服务协议</a> <span>|</span> <a href="https://www.douyin.com/privacy/">隐私政策</a> <span>|</span> <a href="https://www.douyin.com/recovery_account/">账号找回</a> <span>|</span> <a href="https://www.douyin.com/aboutus/">联系我们</a> <span>|</span> <a href="https://ad.toutiao.com/promotion/?source2=dou">广告投放</a> <span>|</span></nav><div class="feedback-info"><p><span id="copyYear">2018</span> © 抖音 | 京ICP备16016397号-3 | 北京微播视界科技有限公司 | 京B2-20170846</p><p><a target="_blank" href="http://www.12377.cn/">中国互联网举报中心</a> | 网络文化许可证-京网文-（2016）2282-264号 | 违法和不良信息举报：010-83434212 | 举报邮箱：jubao@douyin.com</p> <div class="gongan-box"><img src="index_files/gongan_d0289dc.png"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023605">京公网安备 11010802023605号</a> <span> | 地址 : 北京市海淀区知春路51号4层408 </span></div></div></footer></div></div><script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'index_page' } }).install();</script><script>!function(){"use strict";if("undefined"!=typeof window){var t=window.navigator.userAgent.match(/Edge\/(\d{2})\./),e=!!t&&parseInt(t[1],10)>=16;if("objectFit"in document.documentElement.style!=0&&!e)return void(window.objectFitPolyfill=function(){return!1});var i=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),n=e.getPropertyValue("overflow"),o=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==n&&(t.style.overflow="hidden"),o&&"inline"!==o||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},n=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px",top:"auto",right:"auto",bottom:"auto",left:"auto","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px"};for(var n in i)e.getPropertyValue(n)!==i[n]&&(t.style[n]=i[n])},o=function(t){var e=t.parentNode;i(e),n(t),t.style.position="absolute",t.style.height="100%",t.style.width="auto",t.clientWidth>e.clientWidth?(t.style.top="0",t.style.marginTop="0",t.style.left="50%",t.style.marginLeft=t.clientWidth/-2+"px"):(t.style.width="100%",t.style.height="auto",t.style.left="0",t.style.marginLeft="0",t.style.top="50%",t.style.marginTop=t.clientHeight/-2+"px")},l=function(t){if(void 0===t)t=document.querySelectorAll("[data-object-fit]");else if(t&&t.nodeName)t=[t];else{if("object"!=typeof t||!t.length||!t[0].nodeName)return!1;t=t}for(var i=0;i<t.length;i++)if(t[i].nodeName){var n=t[i].nodeName.toLowerCase();"img"!==n||e?"video"===n&&(t[i].readyState>0?o(t[i]):t[i].addEventListener("loadedmetadata",function(){o(this)})):t[i].complete?o(t[i]):t[i].addEventListener("load",function(){o(this)})}return!0};document.addEventListener("DOMContentLoaded",function(){l()}),window.addEventListener("resize",function(){l()}),window.objectFitPolyfill=l}}();</script> <script type="text/javascript"> (function() { $(function() { $('#copyYear').text((new Date).getFullYear()); }) })(); </script> <script>var video = $('#video-tvc')[0]; if (~location.hostname.indexOf('iesdouyin')) { $('.gognan-box').remove() } $('.unmute').click(function() { if ($(this).hasClass('mute')) { video.muted = true; } else { video.muted = false; } $(this).toggleClass('mute') })</script></body></html>
package com.Gary.shakes.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; @RestController public class ToController { @RequestMapping("/toindex") public ModelAndView index() { return new ModelAndView("/index.htm"); } }
浏览四个重要的页面index.htm(首页)、login.htm(登录页)、register.htm(注册页)、music-people(上传音乐页面).htm
@RequestMapping("/toindex")
public ModelAndView index() {
return new ModelAndView("/index.htm");
}
@RequestMapping("/tologin")
public ModelAndView login() {
return new ModelAndView("/login.htm");
}
@RequestMapping("/toregister")
public ModelAndView register() {
return new ModelAndView("/register.htm");
}
@RequestMapping("/tomusic-people")
public ModelAndView musicPeople() {
return new ModelAndView("/music-people.htm");
}
index.htm(首页)
login.htm(登录页)
register.htm(注册页)
music-people(上传音乐页面).htm
完善index首页面部分
将index.htm中背景设置成腾讯用中的视频
<video muted="muted" data-autoplay="" loop="loop" autoplay="autoplay" src="http://1257737090.vod2.myqcloud.com/d7d12d2bvodcq1257737090/af5ce0b55285890785018543729/UkqGpcnKIHwA.mp4" class="video-tvc" id="video-tvc" data-object-fit="">抱歉，您的浏览器不支持内嵌视频 </video>
点击抖音音乐人，发送请求到tomusic-people
<li class="header-links-item"> <a th:href="@{~/tomusic-people}">抖音音乐人</a> </li>
使用Thymeleaf制作header项目登录头模板
模板文件单独放在src/main/resources/templates.fragments下header.html
将music-people.html中的头部替换成
<div th:replace="~{fragments/header::header}"> </div>
header.html中引入thymeleaf标签并编写头部模块代码
<body> <div class="header" th:fragment="header"> <div class="header-container"> <a href="https://musician.douyin.com/"> <div class="header-logo"> <img src="music-people_files/logo_08524dd.png" alt="logo"> </div> </a> <div class="header-login"> <a href="mailto:musician@bytedance.com" class="header-email"> <span class="header-email-icon"></span> <span>反馈及举报邮箱 musician@bytedance.com</span> </a> <!-- 未登录时候的样子 --> <a href="#" id="loginBtn"> <span class="header-user-icon"></span> <span>登录</span> </a> </div> </div> </div> </body>
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div class="header" th:fragment="header"> <div class="header-container"> <a href="https://musician.douyin.com/"> <div class="header-logo"> <img src="music-people_files/logo_08524dd.png" alt="logo"> </div> </a> <div class="header-login"> <a href="mailto:musician@bytedance.com" class="header-email"> <span class="header-email-icon"></span> <span>反馈及举报邮箱 musician@bytedance.com</span> </a> <!-- 未登录时候的样子 --> <a href="#" id="loginBtn"> <span class="header-user-icon"></span> <span>登录</span> </a> </div> </div> </div> </body> </html>
点击登录按钮触发事件
当点击music-people头部登录按钮时，修改跳转出来的登录提示
修改index_7a47cdc.js下的ModalTmplRender函数并在music-people.html下添加该代码
<div class="header-modal" id="headerModal"> <div class="header-modal-container" id="headerModalCont"> <p class="header-modal-content">Gary溫馨提示</p> <p class="header-modal-tips">如果已有抖音账号，请先到抖音app个人主页。点击右上角“…”—设置—账号管理，绑定手机号，再用该手机号来登录哦！</p> <a th:href="@{~/tologin}"> <div class="header-modal-button" id="modalBtn">我知道了</div> </a> </div> </div>
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="music-people_files/push.js"></script> <script async="" src="music-people_files/analytics.js"></script> <script src="music-people_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_home', ignoreAjax : [], ignoreStatic : [] }); </script> <title>抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <meta name="viewport" content="width=device-width,initial-scale=0.6,user-scalable=0"> <link rel="stylesheet" href="music-people_files/base_4a834a9.css"> <link rel="stylesheet" href="music-people_files/jquery.css"> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script src="music-people_files/core_1f49c51.js"></script> <script src="music-people_files/jquery.js"></script> <script src="music-people_files/lazyload.js"></script> <script> window.PAGEVIEW_NAME = '/musician_home/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="music-people_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="music-people_files/index_db26f14.css"> <link rel="stylesheet" href="music-people_files/index_eb57c76.css"> </head> <body style="overflow: hidden; height: 100%;" class="fp-viewing-0"> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="tips" id="tips">请复制链接，用电脑打开页面，成为抖音音乐人</div> <div id="fullpage" class="fullpage-container fullpage-wrapper" style="height: 100%; position: relative; touch-action: none; transform: translate3d(0px, 0px, 0px); transition: all 800ms ease 0s;"> <div class="section fp-section fp-table active fp-completely" id="section0" style="height: 910px;"> <div class="fp-tableCell" style="height: 910px;"> <div class="page-0 page" id="page0"> <div class="page-0-button-group"> <div class="page-0-header-title"> <img alt="抖音原创音乐人，看见音乐计划" src="music-people_files/page-1-title_8c7b323.png"> </div> <div class="page-0-upload" id="uploadBtn"> <a href="#"> <img class="page-0-note" alt="音乐" src="music-people_files/note_e4af899.png"> <img alt="上传音乐" src="music-people_files/upload_a97fd1d.png"> </a> </div> </div> <div class="page-0-footer"> <div class="page-0-title"> <div class="page-0-line page-0-line-l"></div> <div class="page-0-txt">已入驻抖音音乐人</div> <div class="page-0-line page-0-line-r"></div> </div> <div class="page-0-musician-container"> <div class="page-0-musician-group" id="musicianGroup" style="transition: transform 1s ease 0s; transform: translateX(-5778px);"> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/1_491ccad.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/1_491ccad.jpg");"></div> <div class="page-0-nickname">金志文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/63_794e555.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/63_794e555.jpg");"></div> <div class="page-0-nickname">吉克隽逸</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/69_6408d77.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/69_6408d77.jpg");"></div> <div class="page-0-nickname">Tizzy T</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/54_8d93189.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/54_8d93189.jpg");"></div> <div class="page-0-nickname">白举纲</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/7_e2400d0.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/7_e2400d0.jpg");"></div> <div class="page-0-nickname">李斯丹妮</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/71_efad62a.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/71_efad62a.jpg");"></div> <div class="page-0-nickname">艾菲</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/5_18df1de.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/5_18df1de.jpg");"></div> <div class="page-0-nickname">万妮达</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/24_1b3cacb.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/24_1b3cacb.jpg");"></div> <div class="page-0-nickname">刘美麟</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/14_331fff3.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/14_331fff3.jpg");"></div> <div class="page-0-nickname">阿肆</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/39_ae80033.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/39_ae80033.jpg");"></div> <div class="page-0-nickname">于文文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/57_6c4c5f0.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/57_6c4c5f0.jpg");"></div> <div class="page-0-nickname">鬼卞</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/31_adfb8a2.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/31_adfb8a2.jpg");"></div> <div class="page-0-nickname">孙八一</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/58_287c7c1.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/58_287c7c1.jpg");"></div> <div class="page-0-nickname">李行亮</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/66_ca2b2fc.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/66_ca2b2fc.jpg");"></div> <div class="page-0-nickname">牛奶咖啡</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/70_5fcc52c.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/70_5fcc52c.jpg");"></div> <div class="page-0-nickname">打扰一下</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/60_e95dde3.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/60_e95dde3.jpg");"></div> <div class="page-0-nickname">mr.miss</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/15_55b0ddd.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/15_55b0ddd.jpg");"></div> <div class="page-0-nickname">敖犬</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/2_c82018c.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/2_c82018c.jpg");"></div> <div class="page-0-nickname">2-DO</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/3_bf0e2c0.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/3_bf0e2c0.jpg");"></div> <div class="page-0-nickname">庄心妍</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/4_b2da1aa.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/4_b2da1aa.jpg");"></div> <div class="page-0-nickname">反光镜乐队</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/6_b211ca0.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/6_b211ca0.jpg");"></div> <div class="page-0-nickname">南征北战</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/8_87e9234.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/8_87e9234.jpg");"></div> <div class="page-0-nickname">徐云霄</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/9_bd233dd.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/9_bd233dd.jpg");"></div> <div class="page-0-nickname">段林希</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/10_0614943.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/10_0614943.jpg");"></div> <div class="page-0-nickname">许佳麟</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/11_a6d8183.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/11_a6d8183.jpg");"></div> <div class="page-0-nickname">布偶乐队</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/12_cb38371.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/12_cb38371.jpg");"></div> <div class="page-0-nickname">白光组合</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/13_b7cec37.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/13_b7cec37.jpg");"></div> <div class="page-0-nickname">阿克江</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/16_3a189cd.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/16_3a189cd.jpg");"></div> <div class="page-0-nickname">白天不亮</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/17_0fc2c57.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/17_0fc2c57.jpg");"></div> <div class="page-0-nickname">东南</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/18_5ca5dff.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/18_5ca5dff.jpg");"></div> <div class="page-0-nickname">房东的猫</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/19_e1eade7.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/19_e1eade7.jpg");"></div> <div class="page-0-nickname">苟乃鹏</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/20_cf3d67f.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/20_cf3d67f.jpg");"></div> <div class="page-0-nickname">果味VC乐队</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/21_165eb93.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/21_165eb93.jpg");"></div> <div class="page-0-nickname">简迷离</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/22_f908c35.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/22_f908c35.jpg");"></div> <div class="page-0-nickname">廖效浓</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/23_d2741c7.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/23_d2741c7.jpg");"></div> <div class="page-0-nickname">刘锦泽</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/25_eefa0e3.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/25_eefa0e3.jpg");"></div> <div class="page-0-nickname">刘润洁</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/26_ca03861.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/26_ca03861.jpg");"></div> <div class="page-0-nickname">龙井说唱孙旭</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/27_eff3741.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/27_eff3741.jpg");"></div> <div class="page-0-nickname">路壹Lu1</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/28_9f40c13.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/28_9f40c13.jpg");"></div> <div class="page-0-nickname">罗艺恒</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/29_b20cfa2.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/29_b20cfa2.jpg");"></div> <div class="page-0-nickname">裸儿</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/30_e2cc129.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/30_e2cc129.jpg");"></div> <div class="page-0-nickname">那吾克热</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/32_20388b0.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/32_20388b0.jpg");"></div> <div class="page-0-nickname">铁竹堂</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/33_a3d55dc.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/33_a3d55dc.jpg");"></div> <div class="page-0-nickname">夏之禹</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/34_4f72cfa.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/34_4f72cfa.jpg");"></div> <div class="page-0-nickname">新街口组合</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/35_d09f6e2.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/35_d09f6e2.jpg");"></div> <div class="page-0-nickname">徐秉龙</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/36_061de88.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/36_061de88.jpg");"></div> <div class="page-0-nickname">许钧</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/37_2d8b36f.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/37_2d8b36f.jpg");"></div> <div class="page-0-nickname">许馨文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/38_18e9d10.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/38_18e9d10.jpg");"></div> <div class="page-0-nickname">耀乐团</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/40_ed637bb.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/40_ed637bb.jpg");"></div> <div class="page-0-nickname">张歆雅</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/41_40b521e.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/41_40b521e.jpg");"></div> <div class="page-0-nickname">赵晔</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/42_653d788.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/42_653d788.jpg");"></div> <div class="page-0-nickname">周玥</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/43_9fbc632.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/43_9fbc632.jpg");"></div> <div class="page-0-nickname">Alex Hong</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/44_f23eb50.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/44_f23eb50.jpg");"></div> <div class="page-0-nickname">AY楊佬叁</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/45_52a6063.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/45_52a6063.jpg");"></div> <div class="page-0-nickname">Cee</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/46_2b363ee.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/46_2b363ee.jpg");"></div> <div class="page-0-nickname">Cloud Wang</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/47_d2e0d2f.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/47_d2e0d2f.jpg");"></div> <div class="page-0-nickname">CNBALLER</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/48_3aa328e.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/48_3aa328e.jpg");"></div> <div class="page-0-nickname">DJ Baker</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/49_b9b0b55.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/49_b9b0b55.jpg");"></div> <div class="page-0-nickname">Dragon Pig</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/50_0e934a4.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/50_0e934a4.jpg");"></div> <div class="page-0-nickname">Gold Chain</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/51_3621248.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/51_3621248.jpg");"></div> <div class="page-0-nickname">LAMPHO</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/52_5cb61c1.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/52_5cb61c1.jpg");"></div> <div class="page-0-nickname">OB03</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/53_d47b5bf.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/53_d47b5bf.jpg");"></div> <div class="page-0-nickname">s3v3n.tang</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/55_345385a.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/55_345385a.jpg");"></div> <div class="page-0-nickname">曹寅</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/56_ff5a3b3.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/56_ff5a3b3.jpg");"></div> <div class="page-0-nickname">崔子格</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/59_d706855.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/59_d706855.jpg");"></div> <div class="page-0-nickname">圈9</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/61_e200cf0.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/61_e200cf0.jpg");"></div> <div class="page-0-nickname">草台乱唱</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/62_a609aaf.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/62_a609aaf.jpg");"></div> <div class="page-0-nickname">毒药mars</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/64_b0c216c.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/64_b0c216c.jpg");"></div> <div class="page-0-nickname">冷炫忱CURTIS</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/65_ccb4683.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/65_ccb4683.jpg");"></div> <div class="page-0-nickname">孟凡明</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/67_b3c5757.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/67_b3c5757.jpg");"></div> <div class="page-0-nickname">斯斯與帆</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/68_1439dd9.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/68_1439dd9.jpg");"></div> <div class="page-0-nickname">王骞</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/72_21a5911.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/72_21a5911.jpg");"></div> <div class="page-0-nickname">陈鸿宇</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/73_4ab21ea.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/73_4ab21ea.jpg");"></div> <div class="page-0-nickname">鹿先森乐队</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/74_5afbcfb.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/74_5afbcfb.jpg");"></div> <div class="page-0-nickname">水木年华</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/75_886e8c2.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/75_886e8c2.jpg");"></div> <div class="page-0-nickname">徐梦圆</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/1_491ccad.jpg"></div> <div class="page-0-nickname">金志文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/63_794e555.jpg"></div> <div class="page-0-nickname">吉克隽逸</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/69_6408d77.jpg"></div> <div class="page-0-nickname">Tizzy T</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/54_8d93189.jpg"></div> <div class="page-0-nickname">白举纲</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/7_e2400d0.jpg"></div> <div class="page-0-nickname">李斯丹妮</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/71_efad62a.jpg"></div> <div class="page-0-nickname">艾菲</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/5_18df1de.jpg"></div> <div class="page-0-nickname">万妮达</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/24_1b3cacb.jpg"></div> <div class="page-0-nickname">刘美麟</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/14_331fff3.jpg"></div> <div class="page-0-nickname">阿肆</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/39_ae80033.jpg"></div> <div class="page-0-nickname">于文文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/57_6c4c5f0.jpg"></div> <div class="page-0-nickname">鬼卞</div> </div> </div> </div> </div> </div> </div> </div> <div class="section fp-section fp-table" id="section1" style="height: 910px;"> <div class="fp-tableCell" style="height: 910px;"> <div class="page-1 page"> <div class="page-1-container"> <div class="page-1-header"> <img src="music-people_files/page-2-title_043f0c5.png" alt="丰富宣推资源"> </div> <div class="page-1-content"> <div class="page-1-bg"> <div class="page-1-icon"> <img src="music-people_files/page-2-icon-1_214c59a.png"> </div> <div class="page-1-primary">好内容让好音乐被看见</div> <div class="page-1-secondary-1">抖音的用户们有千百种玩法和</div> <div class="page-1-secondary-2">丰富的创意，实力演绎</div> <div class="page-1-secondary-3">你的原创音乐</div> </div> <div class="page-1-bg"> <div class="page-1-icon"> <img src="music-people_files/page-2-icon-2_936f886.png"> </div> <div class="page-1-primary">个性化分发推荐</div> <div class="page-1-secondary-1">不管是成名已久，还是新人新作，</div> <div class="page-1-secondary-2">抖音都会让你的原创音乐</div> <div class="page-1-secondary-3">与伯乐相遇</div> </div> <div class="page-1-bg"> <div class="page-1-icon"> <img src="music-people_files/page-2-icon-3_04c3b49.png"> </div> <div class="page-1-primary">全系产品推广渠道支持</div> <div class="page-1-secondary-1">不仅是抖音，好的原创音乐将会</div> <div class="page-1-secondary-2">根据风格及受众分发至</div> <div class="page-1-secondary-3">头条全系产品</div> </div> </div> <div class="page-1-footer"> <p>数万首原创音乐，都获得了上万使用量，抖音重新定义了音乐宣发时代2.0</p> <p>我们会倾尽全力扶持中国原创音乐，助力音乐人 ，传播好音乐</p> </div> </div> </div> </div> </div> <div class="section fp-section fp-table" id="section2" style="height: 910px;"> <div class="fp-tableCell" style="height: 910px;"> <div class="page-2 page"> <div class="page-2-container"> <div class="page-2-top"> <div class="page-2-header"> <img class="page-2-title" src="music-people_files/page-3-title-1_ca3c6fe.png" alt="行业指导机构"> </div> <div class="page-2-img"> <img src="music-people_files/page-3-1_c6e7f9c.png" alt="CMIC"> </div> </div> <div class="page-2-btm"> <div class="page-2-header"> <img class="page-2-title" src="music-people_files/page-3-title-2_d83f152.png" alt="战略合作伙伴"> </div> <div class="page-2-partner"> <div class="page-2-img"> <img src="music-people_files/page-3-2_967deef.png" alt="Young Blood计划"> <p>Young Blood 新血计划</p> <p class="text-secondary">由摩登天空于2017年发起，2018年Young Blood音乐版块全面升级，开启包括专业制作人和评审团加入的唱片计划，旨在帮助更多新血青年探索音乐世界，实现自己的音乐梦想。</p> </div> <div class="page-2-img"> <img src="music-people_files/page-3-3_976dc82.png" alt="太合音乐集团C"> <p>中国领先的音乐服务提供商</p> </div> </div> </div> </div> </div> </div> </div> <div class="section fp-section fp-table" id="section3" style="height: 910px;"> <div class="fp-tableCell" style="height: 910px;"> <div class="page-3 page"> <div class="page-3-container"> <div class="page-3-header"> <img class="page-3-title" src="music-people_files/page-4-title-1_4c7dfb9.png" alt="战略合作伙伴"> </div> <div class="page-3-content"> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="华纳唱片" src="music-people_files/page-4-1_a43d2af.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="SONY MUSIC" src="music-people_files/page-4-2_2c185e7.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="SONY/ATV" src="music-people_files/page-4-3_65d6367.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="环球音乐" src="music-people_files/page-4-4_b99d0b3.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="咪咕音乐" src="music-people_files/page-4-5_5eb8544.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="CRC" src="music-people_files/page-4-6_035e531.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="滚石唱片" src="music-people_files/page-4-7_d6cbb82.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="摩登天空" src="music-people_files/page-4-8_c6cd99e.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="华研国际音乐" src="music-people_files/page-4-9_0fa9536.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="相信音乐" src="music-people_files/page-4-10_4cd57f4.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="网易云音乐" src="music-people_files/page-4-11_1f7974b.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="虾米音乐" src="music-people_files/page-4-12_dfbcd6c.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="酷狗音乐" src="music-people_files/page-4-13_7d11fa9.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="腾讯音乐人" src="music-people_files/page-4-14_2f3eb27.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="NNIDI" src="music-people_files/page-4-15_97a4506.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="天浩传媒" src="music-people_files/page-4-16_0215a81.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="天浩盛世" src="music-people_files/page-4-17_f569a9c.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="福茂唱片" src="music-people_files/page-4-18_cee96a4.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="唱吧" src="music-people_files/page-4-19_3f5b47f.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="碎乐" src="music-people_files/page-4-20_90bbc6a.png"> </div> </div> </div> <div class="page-3-header"> <img class="page-3-title" src="music-people_files/page-4-title-2_346983a.png" alt="战略合作伙伴"> </div> <div class="page-3-icons"> <div class="page-3-icon"> <img alt="今日头条" src="music-people_files/page-4-icon-1_85f96b8.png"> </div> <div class="page-3-icon"> <img alt="火山小视频" src="music-people_files/page-4-icon-2_ed4dfdf.png"> </div> <div class="page-3-icon"> <img alt="西瓜视频" src="music-people_files/page-4-icon-4_52244d3.png"> </div> <div class="page-3-icon"> <img alt="悟空问答" src="music-people_files/page-4-icon-5_8af8c81.png"> </div> <div class="page-3-icon"> <img alt="Flipagram" src="music-people_files/page-4-icon-7_447df84.png"> </div> <div class="page-3-icon"> <img alt="头条音乐" src="music-people_files/page-4-icon-8_c5e76f1.png"> </div> </div> </div> </div> </div> </div> </div> <div style="position: fixed; right: 20px; bottom: 20px;"> <img style="width: 129px; height: 250px;" src="music-people_files/haoshengyin1_adac7af.png"> </div> <div class="header-modal" id="headerModal"> <div class="header-modal-container" id="headerModalCont"> <p class="header-modal-content">Gary溫馨提示</p> <p class="header-modal-tips">如果已有抖音账号，请先到抖音app个人主页。点击右上角“…”—设置—账号管理，绑定手机号，再用该手机号来登录哦！</p> <a th:href="@{~/tologin}"> <div class="header-modal-button" id="modalBtn">我知道了</div> </a> </div> </div> <script> (function() { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> $(function() { require('web:page/musician/header/index'); require('web:page/musician/home/index'); }) </script> </div> <script> window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags : { bid : 'douyin_web', pid : 'musician_home' } }).install(); </script> <script src="music-people_files/index_7a47cdc.js"></script> <script src="music-people_files/musician_38254fc.js"></script> <script src="music-people_files/index_07f88bb.js"></script> <div id="fp-nav" class="right" style="margin-top: -43.5px;"> <ul> </ul> </div> </body> </html>
完善login页面：适应Thymeleaf以及添加发送验证码点击事件
login.html页面添加thymeleaf标签
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
给获取验证码添加点击事件
<input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text">
编写点击获得验证码后获得用户手机号函数
function getCode(){ var telephone = $("#telephone").val(); alert(telephone); }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="utf-8"> <meta http-equiv="x-dns-prefetch-control" content="on"> <meta name="renderer" content="webkit"> <link rel="dns-prefetch" href="https://s3.pstatp.com/"> <link rel="dns-prefetch" href="https://s3a.pstatp.com/"> <link rel="dns-prefetch" href="https://s3b.pstatp.com/"> <link rel="dns-prefetch" href="https://p1.pstatp.com/"> <link rel="dns-prefetch" href="https://p3.pstatp.com/"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"> <title>登录抖音短视频</title> <link rel="stylesheet" href="login_files/index.css"> <script> !function(e) { function t(a) { if (c[a]) return c[a].exports; var o = c[a] = { exports : {}, id : a, loaded : !1 }; return e[a].call(o.exports, o, o.exports, t), o.loaded = !0, o.exports } var a = window.webpackJsonp; window.webpackJsonp = function(r, n) { for (var p, f, s = 0, l = []; s < r.length; s++) f = r[s], o[f] && l.push.apply(l, o[f]), o[f] = 0; for (p in n) Object.prototype.hasOwnProperty.call(n, p) && (e[p] = n[p]); for (a && a(r, n); l.length;) l.shift().call(null, t); if (n[0]) return c[0] = 0, t(0) }; var c = {}, o = { 0 : 0 }; t.e = function(e, a) { if (0 === o[e]) return a.call(null, t); if (void 0 !== o[e]) o[e].push(a); else { o[e] = [ a ]; var c = document.getElementsByTagName("head")[0], r = document .createElement("script"); r.type = "text/javascript", r.charset = "utf-8", r.async = !0, r.src = t.p + "static/js/" + e + "." + { 1 : "2c3cf93e8f1706df6c36", 2 : "655191000eca154385c9", 3 : "79154c38989007851ef6", 4 : "ac0b4fb10a22450628e6", 5 : "e32178aaee36ae0b9159", 6 : "9eaf1ce3285a9f6c8c09", 7 : "c38de99df42b3baef448", 8 : "f84802439dbaf972920c" }[e] + ".js", c.appendChild(r) } }, t.m = e, t.c = c, t.p = "/toutiao/", t.p = "//s3.pstatp.com/toutiao/" }([]); </script> </head> <body> <div class="base-login"> <h1 class="box-title">手机登录抖音短视频</h1> <form class="form-wrap"> <div class="input-field mobile"> <label for="mobile" class="yellow-text">+86</label> <input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text"> </div> <div class="input-field captcha"> <label for="captcha">验证码</label> <input id="captcha" placeholder="请输入验证码" type="text"> <div class="captcha-wrap"> <img src="data:image/gif;base64,R0lGODlhagAeAIcAAAAAAAAARAAAiAAAzABEAABERABEiABEzACIAACIRACIiACIzADMAADMRADMiADMzADd3REREQAAVQAAmQAA3QBVAABVVQBMmQBJ3QCZAACZTACZmQCT3QDdAADdSQDdkwDungDu7iIiIgAAZgAAqgAA7gBmAABmZgBVqgBP7gCqAACqVQCqqgCe7gDuAADuTwD/VQD/qgD//zMzMwAAdwAAuwAA/wB3AAB3dwBduwBV/wC7AAC7XQC7uwCq/wD/AEQAREQAiEQAzEREAEREREREiEREzESIAESIRESIiESIzETMAETMRETMiETMzEQAAFUAAFUAVUwAmUkA3VVVAFVVVUxMmUlJ3UyZAEyZTEyZmUmT3UndAEndSUndk0nd3U/u7mYAAGYAZlUAqk8A7mZmAGZmZlVVqk9P7lWqAFWqVVWqqk+e7k/uAE/uT0/unlX/qlX//3cAAHcAd10Au1UA/3d3AHd3d11du1VV/127AF27XV27u1Wq/1X/AFX/VYgAiIgAzIhEAIhERIhEiIhEzIiIAIiIRIiIiIiIzIjMAIjMRIjMiIjMzIgAAIgARJkATJkAmZMA3ZlMAJlMTJlMmZNJ3ZmZAJmZTJmZmZOT3ZPdAJPdSZPdk5Pd3ZkAAKoAAKoAVaoAqp4A7qpVAKpVVapVqp5P7qqqAKqqVaqqqp6e7p7uAJ7uT57unp7u7qr//7sAALsAXbsAu6oA/7tdALtdXbtdu6pV/7u7ALu7Xbu7u6qq/6r/AKr/Var/qswAzMxEAMxERMxEiMxEzMyIAMyIRMyIiMyIzMzMAMzMRMzMiMzMzMwAAMwARMwAiN0Ak90A3d1JAN1JSd1Jk91J3d2TAN2TSd2Tk92T3d3dAN3dSd3dk93d3d0AAN0ASe4AT+4Anu4A7u5PAO5PT+5Pnu5P7u6eAO6eT+6enu6e7u7uAO7uT+7unu7u7u4AAP8AAP8AVf8Aqv8A//9VAP9VVf9Vqv9V//+qAP+qVf+qqv+q////AP//Vf//qv///ywAAAAAagAeAAAI//8EDiRY0OBBhAltLEw4cKENhw0FPpRY8R9Fixk1QrTI8SJDiR41jswI8eFJlCkxkrzI0uVLgiZhzqRZs6RNnDl17uRp0F3PnSpRAv23ykYeXkSVThQK8uUqXqvyLKUqsBuaPHlW0dSkKaqmn1Vj6uzW1R2vqTO1ukP6UmhJpzVXef0XtdtBd2ElrlrlTqTYiTmv8rKb5+7As3mO5tGk9bBBr2gTr3oMGOFZXnQbsu2LBiKaymiTdluFpvFWyJrKMkaqGLXlgu40LUbbNyHabrywln1dlBdbNGigRtU7cG1wylJ5VYYtUCpmwm0PkiZ8OmpagV7nfiXdeyBftr+zdv8r3ryudqxZ0ST9+28tY9HgJ1Km2zVqUshJ8z43f1C71qx+k2mgq+5Ca7zMDhMus6SQui+13IYDqz+D1qpNtzz8Iogz2Sg76x8NBRKuG8PcWy7DCrfCijLpPooLsAORgopE/L7LUKo8gkOKrbAaY6u1CJkrCqr1Mmwxphepqi2ryDQhiETW8OOsO4HYIm8usFSqC0fVHJyQQoIA5CtDsxAjDCqCcGtRN02kQiOxgpoaCkz3jAQQNLyK42y9NKUyCk6J3JlLupSaOxCqNvPK6Ey8rjrLyYowKw9MdyL8jaVJrQJtrkzpzKjTnLzzdFTEAGuK1KXag+tUopIEylVUESoJtCdVY111p4AAADs=" alt="" class="captcha"> </div> </div> <div class="input-field code"> <label for="code">短信验证</label> <input id="code" name="code" placeholder="请输入短信验证码" type="text"> <span class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span> </div> </form> <div class="action"> <span> 注册并登录即代表同意抖音 <a href="https://www.douyin.com/falcon/douyin_falcon/user_agreement/" target="_blank" class="yellow-text">用户服务协议</a> 和 <a href="https://www.douyin.com/falcon/douyin_falcon/privacy_agreement/" target="_blank" class="yellow-text">隐私政策</a> </span> </div> <button class="action-btn">登录</button> </div> <script src="js/jquery.min.js"></script> <script type="text/javascript" th:inline="javascript"> function getCode(){ //发送验证码 var telephone = $("#telephone").val(); alert(telephone); } var BASE_DATA = { service : 'https://www.douyin.com/login?type=musician', captcha : '' }; </script> <script type="text/javascript" src="login_files/vendor.js"></script> <script type="text/javascript" src="login_files/index.js"></script> </body> </html>
书写发送验证码的Button
当用户点击获取验证码后，为避免用户在同一时间段多次点击，可编写一个延时函数
给获取验证码添加一个点击事件ID
<span id="codeButton" class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span>
实用setTimeout()方法设置获取验证码倒计时
function getCode(){ //隐藏自己 $("#codeButton").removeAttr("onclick"); //发送验证码 var telephone = $("#telephone").val(); alert(telephone); //延时几面显示,避免用户多次连续点击 setTimeout("fun(5)",1000); } function fun(n){ if(n>0){ n--; //修改文字html中的内容 document.getElementById("codeButton").innerHTML = "还剩："+n+"秒"; //每秒递归调用自己 setTimeout("fun("+ n +")",1000); }else{ //倒计时已经结束 //显示自己 document.getElementById("codeButton").innerHTML = "获取验证码"; //添加click事件方法 $("#codeButton").attr("onclick","getCode();"); } }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="utf-8"> <meta http-equiv="x-dns-prefetch-control" content="on"> <meta name="renderer" content="webkit"> <link rel="dns-prefetch" href="https://s3.pstatp.com/"> <link rel="dns-prefetch" href="https://s3a.pstatp.com/"> <link rel="dns-prefetch" href="https://s3b.pstatp.com/"> <link rel="dns-prefetch" href="https://p1.pstatp.com/"> <link rel="dns-prefetch" href="https://p3.pstatp.com/"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"> <title>登录抖音短视频</title> <link rel="stylesheet" href="login_files/index.css"> <script> !function(e) { function t(a) { if (c[a]) return c[a].exports; var o = c[a] = { exports : {}, id : a, loaded : !1 }; return e[a].call(o.exports, o, o.exports, t), o.loaded = !0, o.exports } var a = window.webpackJsonp; window.webpackJsonp = function(r, n) { for (var p, f, s = 0, l = []; s < r.length; s++) f = r[s], o[f] && l.push.apply(l, o[f]), o[f] = 0; for (p in n) Object.prototype.hasOwnProperty.call(n, p) && (e[p] = n[p]); for (a && a(r, n); l.length;) l.shift().call(null, t); if (n[0]) return c[0] = 0, t(0) }; var c = {}, o = { 0 : 0 }; t.e = function(e, a) { if (0 === o[e]) return a.call(null, t); if (void 0 !== o[e]) o[e].push(a); else { o[e] = [ a ]; var c = document.getElementsByTagName("head")[0], r = document .createElement("script"); r.type = "text/javascript", r.charset = "utf-8", r.async = !0, r.src = t.p + "static/js/" + e + "." + { 1 : "2c3cf93e8f1706df6c36", 2 : "655191000eca154385c9", 3 : "79154c38989007851ef6", 4 : "ac0b4fb10a22450628e6", 5 : "e32178aaee36ae0b9159", 6 : "9eaf1ce3285a9f6c8c09", 7 : "c38de99df42b3baef448", 8 : "f84802439dbaf972920c" }[e] + ".js", c.appendChild(r) } }, t.m = e, t.c = c, t.p = "/toutiao/", t.p = "//s3.pstatp.com/toutiao/" }([]); </script> </head> <body> <div class="base-login"> <h1 class="box-title">手机登录抖音短视频</h1> <form class="form-wrap"> <div class="input-field mobile"> <label for="mobile" class="yellow-text">+86</label> <input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text"> </div> <div class="input-field captcha"> <label for="captcha">验证码</label> <input id="captcha" placeholder="请输入验证码" type="text"> <div class="captcha-wrap"> <img src="data:image/gif;base64,R0lGODlhagAeAIcAAAAAAAAARAAAiAAAzABEAABERABEiABEzACIAACIRACIiACIzADMAADMRADMiADMzADd3REREQAAVQAAmQAA3QBVAABVVQBMmQBJ3QCZAACZTACZmQCT3QDdAADdSQDdkwDungDu7iIiIgAAZgAAqgAA7gBmAABmZgBVqgBP7gCqAACqVQCqqgCe7gDuAADuTwD/VQD/qgD//zMzMwAAdwAAuwAA/wB3AAB3dwBduwBV/wC7AAC7XQC7uwCq/wD/AEQAREQAiEQAzEREAEREREREiEREzESIAESIRESIiESIzETMAETMRETMiETMzEQAAFUAAFUAVUwAmUkA3VVVAFVVVUxMmUlJ3UyZAEyZTEyZmUmT3UndAEndSUndk0nd3U/u7mYAAGYAZlUAqk8A7mZmAGZmZlVVqk9P7lWqAFWqVVWqqk+e7k/uAE/uT0/unlX/qlX//3cAAHcAd10Au1UA/3d3AHd3d11du1VV/127AF27XV27u1Wq/1X/AFX/VYgAiIgAzIhEAIhERIhEiIhEzIiIAIiIRIiIiIiIzIjMAIjMRIjMiIjMzIgAAIgARJkATJkAmZMA3ZlMAJlMTJlMmZNJ3ZmZAJmZTJmZmZOT3ZPdAJPdSZPdk5Pd3ZkAAKoAAKoAVaoAqp4A7qpVAKpVVapVqp5P7qqqAKqqVaqqqp6e7p7uAJ7uT57unp7u7qr//7sAALsAXbsAu6oA/7tdALtdXbtdu6pV/7u7ALu7Xbu7u6qq/6r/AKr/Var/qswAzMxEAMxERMxEiMxEzMyIAMyIRMyIiMyIzMzMAMzMRMzMiMzMzMwAAMwARMwAiN0Ak90A3d1JAN1JSd1Jk91J3d2TAN2TSd2Tk92T3d3dAN3dSd3dk93d3d0AAN0ASe4AT+4Anu4A7u5PAO5PT+5Pnu5P7u6eAO6eT+6enu6e7u7uAO7uT+7unu7u7u4AAP8AAP8AVf8Aqv8A//9VAP9VVf9Vqv9V//+qAP+qVf+qqv+q////AP//Vf//qv///ywAAAAAagAeAAAI//8EDiRY0OBBhAltLEw4cKENhw0FPpRY8R9Fixk1QrTI8SJDiR41jswI8eFJlCkxkrzI0uVLgiZhzqRZs6RNnDl17uRp0F3PnSpRAv23ykYeXkSVThQK8uUqXqvyLKUqsBuaPHlW0dSkKaqmn1Vj6uzW1R2vqTO1ukP6UmhJpzVXef0XtdtBd2ElrlrlTqTYiTmv8rKb5+7As3mO5tGk9bBBr2gTr3oMGOFZXnQbsu2LBiKaymiTdluFpvFWyJrKMkaqGLXlgu40LUbbNyHabrywln1dlBdbNGigRtU7cG1wylJ5VYYtUCpmwm0PkiZ8OmpagV7nfiXdeyBftr+zdv8r3ryudqxZ0ST9+28tY9HgJ1Km2zVqUshJ8z43f1C71qx+k2mgq+5Ca7zMDhMus6SQui+13IYDqz+D1qpNtzz8Iogz2Sg76x8NBRKuG8PcWy7DCrfCijLpPooLsAORgopE/L7LUKo8gkOKrbAaY6u1CJkrCqr1Mmwxphepqi2ryDQhiETW8OOsO4HYIm8usFSqC0fVHJyQQoIA5CtDsxAjDCqCcGtRN02kQiOxgpoaCkz3jAQQNLyK42y9NKUyCk6J3JlLupSaOxCqNvPK6Ey8rjrLyYowKw9MdyL8jaVJrQJtrkzpzKjTnLzzdFTEAGuK1KXag+tUopIEylVUESoJtCdVY111p4AAADs=" alt="" class="captcha"> </div> </div> <div class="input-field code"> <label for="code">短信验证</label> <input id="code" name="code" placeholder="请输入短信验证码" type="text"> <span id="codeButton" class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span> </div> </form> <div class="action"> <span> 注册并登录即代表同意抖音 <a href="https://www.douyin.com/falcon/douyin_falcon/user_agreement/" target="_blank" class="yellow-text">用户服务协议</a> 和 <a href="https://www.douyin.com/falcon/douyin_falcon/privacy_agreement/" target="_blank" class="yellow-text">隐私政策</a> </span> </div> <button class="action-btn">登录</button> </div> <script src="js/jquery.min.js"></script> <script type="text/javascript" th:inline="javascript"> function getCode(){ //隐藏自己 $("#codeButton").removeAttr("onclick"); //发送验证码 var telephone = $("#telephone").val(); alert(telephone); //延时几面显示,避免用户多次连续点击 setTimeout("fun(5)",1000); } function fun(n){ if(n>0){ n--; //修改文字html中的内容 document.getElementById("codeButton").innerHTML = "还剩："+n+"秒"; //每秒递归调用自己 setTimeout("fun("+ n +")",1000); }else{ //倒计时已经结束 //显示自己 document.getElementById("codeButton").innerHTML = "获取验证码"; //添加click事件方法 $("#codeButton").attr("onclick","getCode();"); } } var BASE_DATA = { service : 'https://www.douyin.com/login?type=musician', captcha : '' }; </script> <script type="text/javascript" src="login_files/vendor.js"></script> <script type="text/javascript" src="login_files/index.js"></script> </body> </html>
发送手机验证码ajax
function getCode(){ //隐藏自己 $("#codeButton").removeAttr("onclick"); //发送验证码 var telephone = $("#telephone").val(); alert(telephone); $.post( //action的地址 [[@{~/sms}]], //提交的数据 {"telephone":telephone}, //回调函数 function(data) { }, //数据格式 "json" ) //延时几面显示,避免用户多次连续点击 setTimeout("fun(5)",1000); }
发送验证码请求
书写发送短信controller
@RestController public class UserController { @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; }
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
当用户点击登录->获得到验证码，在controller层进行判断验证码是否正确，如果正确则在数据库中添加一个User数据，如果不正确的话需要用户重新书写验证码
User实体
@Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state;
package com.Gary.shakes.domain; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; @Entity public class User { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state; protected User() { } public User(Long id,String username,String password,String telephone,String code,Integer state) { this.id=id; this.username=username; this.password=password; this.telephone=telephone; this.code=code; this.state=state; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getTelephone() { return telephone; } public void setTelephone(String telephone) { this.telephone = telephone; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } }
校验验证码登录：失败情况
当用户在登录页面点击获得验证码后会获得随机的四位数，随后用户将输入四位数与系统所给的验证码进行匹配校验
当用户输入错误的验证码时，登录页面会提示用户“验证码错误！！”,当用户输入正确的验证码后跳转到register.htm
用户登录表单
<form class="form-wrap" th:action="@{~/login}"> <div class="input-field mobile"> <label for="mobile" class="yellow-text">+86</label> <input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text"> </div> <div class="input-field captcha"> <label for="captcha">验证码</label> <input id="captcha" placeholder="请输入验证码" type="text"> <div class="captcha-wrap"> <img src="data:image/gif;base64,R0lGODlhagAeAIcAAAAAAAAARAAAiAAAzABEAABERABEiABEzACIAACIRACIiACIzADMAADMRADMiADMzADd3REREQAAVQAAmQAA3QBVAABVVQBMmQBJ3QCZAACZTACZmQCT3QDdAADdSQDdkwDungDu7iIiIgAAZgAAqgAA7gBmAABmZgBVqgBP7gCqAACqVQCqqgCe7gDuAADuTwD/VQD/qgD//zMzMwAAdwAAuwAA/wB3AAB3dwBduwBV/wC7AAC7XQC7uwCq/wD/AEQAREQAiEQAzEREAEREREREiEREzESIAESIRESIiESIzETMAETMRETMiETMzEQAAFUAAFUAVUwAmUkA3VVVAFVVVUxMmUlJ3UyZAEyZTEyZmUmT3UndAEndSUndk0nd3U/u7mYAAGYAZlUAqk8A7mZmAGZmZlVVqk9P7lWqAFWqVVWqqk+e7k/uAE/uT0/unlX/qlX//3cAAHcAd10Au1UA/3d3AHd3d11du1VV/127AF27XV27u1Wq/1X/AFX/VYgAiIgAzIhEAIhERIhEiIhEzIiIAIiIRIiIiIiIzIjMAIjMRIjMiIjMzIgAAIgARJkATJkAmZMA3ZlMAJlMTJlMmZNJ3ZmZAJmZTJmZmZOT3ZPdAJPdSZPdk5Pd3ZkAAKoAAKoAVaoAqp4A7qpVAKpVVapVqp5P7qqqAKqqVaqqqp6e7p7uAJ7uT57unp7u7qr//7sAALsAXbsAu6oA/7tdALtdXbtdu6pV/7u7ALu7Xbu7u6qq/6r/AKr/Var/qswAzMxEAMxERMxEiMxEzMyIAMyIRMyIiMyIzMzMAMzMRMzMiMzMzMwAAMwARMwAiN0Ak90A3d1JAN1JSd1Jk91J3d2TAN2TSd2Tk92T3d3dAN3dSd3dk93d3d0AAN0ASe4AT+4Anu4A7u5PAO5PT+5Pnu5P7u6eAO6eT+6enu6e7u7uAO7uT+7unu7u7u4AAP8AAP8AVf8Aqv8A//9VAP9VVf9Vqv9V//+qAP+qVf+qqv+q////AP//Vf//qv///ywAAAAAagAeAAAI//8EDiRY0OBBhAltLEw4cKENhw0FPpRY8R9Fixk1QrTI8SJDiR41jswI8eFJlCkxkrzI0uVLgiZhzqRZs6RNnDl17uRp0F3PnSpRAv23ykYeXkSVThQK8uUqXqvyLKUqsBuaPHlW0dSkKaqmn1Vj6uzW1R2vqTO1ukP6UmhJpzVXef0XtdtBd2ElrlrlTqTYiTmv8rKb5+7As3mO5tGk9bBBr2gTr3oMGOFZXnQbsu2LBiKaymiTdluFpvFWyJrKMkaqGLXlgu40LUbbNyHabrywln1dlBdbNGigRtU7cG1wylJ5VYYtUCpmwm0PkiZ8OmpagV7nfiXdeyBftr+zdv8r3ryudqxZ0ST9+28tY9HgJ1Km2zVqUshJ8z43f1C71qx+k2mgq+5Ca7zMDhMus6SQui+13IYDqz+D1qpNtzz8Iogz2Sg76x8NBRKuG8PcWy7DCrfCijLpPooLsAORgopE/L7LUKo8gkOKrbAaY6u1CJkrCqr1Mmwxphepqi2ryDQhiETW8OOsO4HYIm8usFSqC0fVHJyQQoIA5CtDsxAjDCqCcGtRN02kQiOxgpoaCkz3jAQQNLyK42y9NKUyCk6J3JlLupSaOxCqNvPK6Ey8rjrLyYowKw9MdyL8jaVJrQJtrkzpzKjTnLzzdFTEAGuK1KXag+tUopIEylVUESoJtCdVY111p4AAADs=" alt="" class="captcha"> </div> </div> <div class="input-field code"> <label for="code">短信验证</label> <input id="code" name="code" placeholder="请输入短信验证码" type="text"> <span id="codeButton" class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span> </div> <div class="action"> <span> 注册并登录即代表同意抖音 <a href="https://www.douyin.com/falcon/douyin_falcon/user_agreement/" target="_blank" class="yellow-text">用户服务协议</a> 和 <a href="https://www.douyin.com/falcon/douyin_falcon/privacy_agreement/" target="_blank" class="yellow-text">隐私政策</a> </span> <div th:text="${message}" style="color:red"></div> </div> <button type="submit" class="action-btn">登录</button> </form>
UserController处理用户登录信息
//用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 System.out.println("成功！"); return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="utf-8"> <meta http-equiv="x-dns-prefetch-control" content="on"> <meta name="renderer" content="webkit"> <link rel="dns-prefetch" href="https://s3.pstatp.com/"> <link rel="dns-prefetch" href="https://s3a.pstatp.com/"> <link rel="dns-prefetch" href="https://s3b.pstatp.com/"> <link rel="dns-prefetch" href="https://p1.pstatp.com/"> <link rel="dns-prefetch" href="https://p3.pstatp.com/"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"> <title>登录抖音短视频</title> <link rel="stylesheet" href="login_files/index.css"> <script> !function(e) { function t(a) { if (c[a]) return c[a].exports; var o = c[a] = { exports : {}, id : a, loaded : !1 }; return e[a].call(o.exports, o, o.exports, t), o.loaded = !0, o.exports } var a = window.webpackJsonp; window.webpackJsonp = function(r, n) { for (var p, f, s = 0, l = []; s < r.length; s++) f = r[s], o[f] && l.push.apply(l, o[f]), o[f] = 0; for (p in n) Object.prototype.hasOwnProperty.call(n, p) && (e[p] = n[p]); for (a && a(r, n); l.length;) l.shift().call(null, t); if (n[0]) return c[0] = 0, t(0) }; var c = {}, o = { 0 : 0 }; t.e = function(e, a) { if (0 === o[e]) return a.call(null, t); if (void 0 !== o[e]) o[e].push(a); else { o[e] = [ a ]; var c = document.getElementsByTagName("head")[0], r = document .createElement("script"); r.type = "text/javascript", r.charset = "utf-8", r.async = !0, r.src = t.p + "static/js/" + e + "." + { 1 : "2c3cf93e8f1706df6c36", 2 : "655191000eca154385c9", 3 : "79154c38989007851ef6", 4 : "ac0b4fb10a22450628e6", 5 : "e32178aaee36ae0b9159", 6 : "9eaf1ce3285a9f6c8c09", 7 : "c38de99df42b3baef448", 8 : "f84802439dbaf972920c" }[e] + ".js", c.appendChild(r) } }, t.m = e, t.c = c, t.p = "/toutiao/", t.p = "//s3.pstatp.com/toutiao/" }([]); </script> </head> <body> <div class="base-login"> <h1 class="box-title">手机登录抖音短视频</h1> <form class="form-wrap" th:action="@{~/login}"> <div class="input-field mobile"> <label for="mobile" class="yellow-text">+86</label> <input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text"> </div> <div class="input-field captcha"> <label for="captcha">验证码</label> <input id="captcha" placeholder="请输入验证码" type="text"> <div class="captcha-wrap"> <img src="data:image/gif;base64,R0lGODlhagAeAIcAAAAAAAAARAAAiAAAzABEAABERABEiABEzACIAACIRACIiACIzADMAADMRADMiADMzADd3REREQAAVQAAmQAA3QBVAABVVQBMmQBJ3QCZAACZTACZmQCT3QDdAADdSQDdkwDungDu7iIiIgAAZgAAqgAA7gBmAABmZgBVqgBP7gCqAACqVQCqqgCe7gDuAADuTwD/VQD/qgD//zMzMwAAdwAAuwAA/wB3AAB3dwBduwBV/wC7AAC7XQC7uwCq/wD/AEQAREQAiEQAzEREAEREREREiEREzESIAESIRESIiESIzETMAETMRETMiETMzEQAAFUAAFUAVUwAmUkA3VVVAFVVVUxMmUlJ3UyZAEyZTEyZmUmT3UndAEndSUndk0nd3U/u7mYAAGYAZlUAqk8A7mZmAGZmZlVVqk9P7lWqAFWqVVWqqk+e7k/uAE/uT0/unlX/qlX//3cAAHcAd10Au1UA/3d3AHd3d11du1VV/127AF27XV27u1Wq/1X/AFX/VYgAiIgAzIhEAIhERIhEiIhEzIiIAIiIRIiIiIiIzIjMAIjMRIjMiIjMzIgAAIgARJkATJkAmZMA3ZlMAJlMTJlMmZNJ3ZmZAJmZTJmZmZOT3ZPdAJPdSZPdk5Pd3ZkAAKoAAKoAVaoAqp4A7qpVAKpVVapVqp5P7qqqAKqqVaqqqp6e7p7uAJ7uT57unp7u7qr//7sAALsAXbsAu6oA/7tdALtdXbtdu6pV/7u7ALu7Xbu7u6qq/6r/AKr/Var/qswAzMxEAMxERMxEiMxEzMyIAMyIRMyIiMyIzMzMAMzMRMzMiMzMzMwAAMwARMwAiN0Ak90A3d1JAN1JSd1Jk91J3d2TAN2TSd2Tk92T3d3dAN3dSd3dk93d3d0AAN0ASe4AT+4Anu4A7u5PAO5PT+5Pnu5P7u6eAO6eT+6enu6e7u7uAO7uT+7unu7u7u4AAP8AAP8AVf8Aqv8A//9VAP9VVf9Vqv9V//+qAP+qVf+qqv+q////AP//Vf//qv///ywAAAAAagAeAAAI//8EDiRY0OBBhAltLEw4cKENhw0FPpRY8R9Fixk1QrTI8SJDiR41jswI8eFJlCkxkrzI0uVLgiZhzqRZs6RNnDl17uRp0F3PnSpRAv23ykYeXkSVThQK8uUqXqvyLKUqsBuaPHlW0dSkKaqmn1Vj6uzW1R2vqTO1ukP6UmhJpzVXef0XtdtBd2ElrlrlTqTYiTmv8rKb5+7As3mO5tGk9bBBr2gTr3oMGOFZXnQbsu2LBiKaymiTdluFpvFWyJrKMkaqGLXlgu40LUbbNyHabrywln1dlBdbNGigRtU7cG1wylJ5VYYtUCpmwm0PkiZ8OmpagV7nfiXdeyBftr+zdv8r3ryudqxZ0ST9+28tY9HgJ1Km2zVqUshJ8z43f1C71qx+k2mgq+5Ca7zMDhMus6SQui+13IYDqz+D1qpNtzz8Iogz2Sg76x8NBRKuG8PcWy7DCrfCijLpPooLsAORgopE/L7LUKo8gkOKrbAaY6u1CJkrCqr1Mmwxphepqi2ryDQhiETW8OOsO4HYIm8usFSqC0fVHJyQQoIA5CtDsxAjDCqCcGtRN02kQiOxgpoaCkz3jAQQNLyK42y9NKUyCk6J3JlLupSaOxCqNvPK6Ey8rjrLyYowKw9MdyL8jaVJrQJtrkzpzKjTnLzzdFTEAGuK1KXag+tUopIEylVUESoJtCdVY111p4AAADs=" alt="" class="captcha"> </div> </div> <div class="input-field code"> <label for="code">短信验证</label> <input id="code" name="code" placeholder="请输入短信验证码" type="text"> <span id="codeButton" class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span> </div> <div class="action"> <span> 注册并登录即代表同意抖音 <a href="https://www.douyin.com/falcon/douyin_falcon/user_agreement/" target="_blank" class="yellow-text">用户服务协议</a> 和 <a href="https://www.douyin.com/falcon/douyin_falcon/privacy_agreement/" target="_blank" class="yellow-text">隐私政策</a> </span> <div th:text="${message}" style="color:red"></div> </div> <button type="submit" class="action-btn">登录</button> </form> </div> <script src="js/jquery.min.js"></script> <script type="text/javascript" th:inline="javascript"> function getCode(){ //隐藏自己 $("#codeButton").removeAttr("onclick"); //发送验证码 var telephone = $("#telephone").val(); alert(telephone); $.post( //action的地址 [[@{~/sms}]], //提交的数据 {"telephone":telephone}, //回调函数 function(data) { }, //数据格式 "json" ) //延时几面显示,避免用户多次连续点击 setTimeout("fun(5)",1000); } function fun(n){ if(n>0){ n--; //修改文字html中的内容 document.getElementById("codeButton").innerHTML = "还剩："+n+"秒"; //每秒递归调用自己 setTimeout("fun("+ n +")",1000); }else{ //倒计时已经结束 //显示自己 document.getElementById("codeButton").innerHTML = "获取验证码"; //添加click事件方法 $("#codeButton").attr("onclick","getCode();"); } } var BASE_DATA = { service : 'https://www.douyin.com/login?type=musician', captcha : '' }; </script> <script type="text/javascript" src="login_files/vendor.js"></script> <script type="text/javascript" src="login_files/index.js"></script> </body> </html>
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { System.out.println(user.getCode()); System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 System.out.println("成功！"); return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
完成手机验证码登录
用户输入正确的验证码后，controller层user传递数据给service层,service层将调用repository层的save方法
service层
public interface UserService { void save(User user); }
ServiceImpl
@Service public class UserServiceImpl implements UserService{ @Autowired private UserRepostory userRepository; @Override public void save(User user) { userRepository.save(user); } }
repository层 save方法在CrudRepository层已经封装好
public interface UserRepostory extends CrudRepository<User,Long>{ }
用户登录成功时UserController层的验证码校验
//用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 System.out.println("成功！"); user.setState(1); //在数据库中添加数据 userServiceImpl.save(user); return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.Gary.shakes.serviceimpl.UserServiceImpl; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @Autowired private UserServiceImpl userServiceImpl; @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { System.out.println(user.getCode()); System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 System.out.println("成功！"); user.setState(1); //在数据库中添加数据 userServiceImpl.save(user); return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
package com.Gary.shakes.domain; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; @Entity public class User { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state; protected User() { } public User(Long id,String username,String password,String telephone,String code,Integer state) { this.id=id; this.username=username; this.password=password; this.telephone=telephone; this.code=code; this.state=state; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getTelephone() { return telephone; } public void setTelephone(String telephone) { this.telephone = telephone; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } }
package com.Gary.shakes.service; import org.springframework.stereotype.Service; import com.Gary.shakes.domain.User; public interface UserService { void save(User user); }
package com.Gary.shakes.serviceimpl; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.Gary.shakes.domain.User; import com.Gary.shakes.repository.UserRepostory; import com.Gary.shakes.service.UserService; @Service public class UserServiceImpl implements UserService{ @Autowired private UserRepostory userRepository; @Override public void save(User user) { userRepository.save(user); } }
package com.Gary.shakes.repository; import org.springframework.data.repository.CrudRepository; import com.Gary.shakes.domain.User; public interface UserRepostory extends CrudRepository<User,Long>{ }
判断用户是否重复注使用相同手机登录
用户使用相同的手机登录，则不讲用户信息存储到数据库，用户使用新手机登录，将用户信息存储到数据库
if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
Service层
public boolean judgeTelephone(String telephone) { List<User> list = userRepository.judgeTelephone(telephone); return list.size()==0?false:true; }
Repostory层
@Query(value = "select * from user where telephone = ?1",nativeQuery = true) @Modifying List<User> judgeTelephone(String telephone);
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.Gary.shakes.serviceimpl.UserServiceImpl; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @Autowired private UserServiceImpl userServiceImpl; @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { System.out.println(user.getCode()); System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
package com.Gary.shakes.service; import org.springframework.stereotype.Service; import com.Gary.shakes.domain.User; public interface UserService { void save(User user); }
package com.Gary.shakes.serviceimpl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.Gary.shakes.domain.User; import com.Gary.shakes.repository.UserRepostory; import com.Gary.shakes.service.UserService; @Service public class UserServiceImpl implements UserService{ @Autowired private UserRepostory userRepository; @Override public void save(User user) { userRepository.save(user); } public boolean judgeTelephone(String telephone) { List<User> list = userRepository.judgeTelephone(telephone); return list.size()==0?false:true; } }
package com.Gary.shakes.repository; import java.util.List; import org.springframework.data.jpa.repository.Modifying; import org.springframework.data.jpa.repository.Query; import org.springframework.data.repository.CrudRepository; import com.Gary.shakes.domain.User; public interface UserRepostory extends CrudRepository<User,Long>{ @Query(value = "select * from user where telephone = ?1",nativeQuery = true) @Modifying List<User> judgeTelephone(String telephone); }
重定向至Register页面
为避免登录页面跳转至Register页面时出现http://localhost:8080/login?telephone=15078383095&code=4915【易产生用户信息泄露】
UserController.java中修改验证码验证成功时重定向"redirect:/toregister"
if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } return new ModelAndView("redirect:/toregister"); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
修改完后跳转将变成http://localhost:8080/toregister
register.html中引入thymeleaf标签
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
并在body中引入header头部模板
<div th:replace="~{fragments/header::header}"> </div>
将登录的用户放置session域中
UserController.java中将用户登录时的信息放置session域中
//用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } User loginUser = userServiceImpl.findUserByTelephone(user.getTelephone()); //在session域中放置User request.getSession().setAttribute("loginUser",loginUser); System.out.println(loginUser); //telephone //code return new ModelAndView("redirect:/toregister"); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
judgeTelephone(String telephone)方法查询用户电话是否重复
findUserByTelephone(String telephone)方法用来根据电话返回用户的ID
public interface UserRepostory extends CrudRepository<User,Long>{ @Query(value = "select * from user where telephone = ?1",nativeQuery = true) //只有修改的时候才会加modefy注解 List<User> judgeTelephone(String telephone); @Query(value = "select * from user where telephone = ?1",nativeQuery = true) User findUserByTelephone(String telephone); }
完成登录用户显示
当用户未登录时候，header头部模块不显示用户登录信息
当用户登录成功时候，header头部模块显示用户登录信息
用户登录成功时，session域中获得用户登录信息，用户退出登录时，发送logOut请求
<div class="header-login"> <a href="mailto:musician@bytedance.com" class="header-email"> <span class="header-email-icon"></span> <span>反馈及举报邮箱 musician@bytedance.com</span> </a> <!-- 未登录时候的样子 --> <a th:if="${session.loginUser==null}" href="#" id="loginBtn"> <span class="header-user-icon"></span> <span>登录</span> </a> <!-- 登录时候的样子 --> <a th:if="${session.loginUser!=null}" href="#" id="loginBtn"> <span class="header-user-icon" style="background-image: url(http://p0.pstatp.com/origin/3793/3114521287)"></span> <span th:text="${session.loginUser.telephone}"></span> </a> <a th:if="${session.loginUser!=null}" th:href="@{~/logOut}">| 退出登录</a> </div>
@RequestMapping("/logOut")
public ModelAndView logOut(HttpServletRequest request)
{
//在session域中移除loginUser
request.getSession().removeAttribute("loginUser");
return new ModelAndView("redirect:/tomusic-people");
}
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div class="header" th:fragment="header"> <div class="header-container"> <a href="https://musician.douyin.com/"> <div class="header-logo"> <img src="music-people_files/logo_08524dd.png" alt="logo"> </div> </a> <div class="header-login"> <a href="mailto:musician@bytedance.com" class="header-email"> <span class="header-email-icon"></span> <span>反馈及举报邮箱 musician@bytedance.com</span> </a> <!-- 未登录时候的样子 --> <a th:if="${session.loginUser==null}" href="#" id="loginBtn"> <span class="header-user-icon"></span> <span>登录</span> </a> <!-- 登录时候的样子 --> <a th:if="${session.loginUser!=null}" href="#" id="loginBtn"> <span class="header-user-icon" style="background-image: url(http://p0.pstatp.com/origin/3793/3114521287)"></span> <span th:text="${session.loginUser.telephone}"></span> </a> <a th:if="${session.loginUser!=null}" th:href="@{~/logOut}">| 退出登录</a> </div> </div> </div> </body> </html>
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.Gary.shakes.serviceimpl.UserServiceImpl; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @Autowired private UserServiceImpl userServiceImpl; @RequestMapping("/logOut") public ModelAndView logOut(HttpServletRequest request) { //在session域中移除loginUser request.getSession().removeAttribute("loginUser"); return new ModelAndView("redirect:/tomusic-people"); } @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { // System.out.println(user.getCode()); // System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } User loginUser = userServiceImpl.findUserByTelephone(user.getTelephone()); //在session域中放置User request.getSession().setAttribute("loginUser",loginUser); System.out.println(loginUser); //telephone //code return new ModelAndView("redirect:/toregister"); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
完善User实体：添加字段以及重写构造函数
添加字段音乐人信息字段用来存储用户信息
@Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state; private String name; private String wechat; private String card;
音乐信息人表单
<div class="main-content-block"> <div th:replace="~{fragments/header::header}"> </div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register_files/icon_2_grey_2e4f238.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr-grey"></div> <div class="common-module"> <img src="register_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">音乐人信息</p> <form class="step-form" id="stepForm" method="post" novalidate="novalidate"> <div class="step-input-group"> <label for="stage_name" class="verify-step-label label-not-null">歌手名</label> <input id="stage_name" name="stage_name" class="step-input" type="text"> </div> <div class="step-input-group"> <label for="name" class="verify-step-label label-not-null">真实姓名</label> <input id="name" name="name" class="verify-step-input" type="text"> </div> <div class="step-input-group"> <label for="wechat" class="verify-step-label">微信</label> <input id="wechat" class="verify-step-input" name="wechat" type="text"> </div> <div class="step-input-group"> <label for="idCard" class="verify-step-label label-not-null">身份证号码</label> <input id="idCard" class="verify-step-input" name="id_card" type="text"> </div> <div class="verify-step-button-group"> <input class="step-button" value="提交实名审核" type="submit"> </div>
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register_files/base_4a834a9.css"> <link rel="stylesheet" href="register_files/base_ce73669.css"> <style type="text/css"> ol { margin: 0; padding: 0 } table td, table th { padding: 0 } .c5 { -webkit-text-decoration-skip: none; font-weight: 700; text-decoration: underline; text-decoration-skip-ink: none; font-size: 12pt; font-family: "\004eff\005b8b" } .c10 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.1500000000000001; orphans: 2; widows: 2; text-align: center } .c0 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.1500000000000001; orphans: 2; widows: 2; text-align: left } .c2 { color: #000000; text-decoration: none; vertical-align: baseline; font-style: normal } .c4 { color: #ff0000; text-decoration: none; vertical-align: baseline; font-style: normal } .c3 { font-weight: 400; font-size: 10.5pt; font-family: "\004eff\005b8b" } .c1 { font-size: 10.5pt; font-family: "\004eff\005b8b"; font-weight: 700 } .c7 { background-color: #ffffff; max-width: 451.5pt; } .c8 { font-weight: 700; font-size: 14pt; font-family: "\004eff\005b8b" } .c6 { background-color: #ffff00 } .c9 { height: 11pt } .title { padding-top: 0pt; color: #000000; font-size: 26pt; padding-bottom: 3pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } .subtitle { padding-top: 0pt; color: #666666; font-size: 15pt; padding-bottom: 16pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } li { color: #000000; font-size: 11pt; font-family: "Arial" } p { margin: 0; color: #000000; font-size: 11pt; font-family: "Arial" } h1 { padding-top: 20pt; color: #000000; font-size: 20pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h2 { padding-top: 18pt; color: #000000; font-size: 16pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h3 { padding-top: 16pt; color: #434343; font-size: 14pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h4 { padding-top: 14pt; color: #666666; font-size: 12pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h5 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h6 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; font-style: italic; orphans: 2; widows: 2; text-align: left } </style> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script async="" src="register_files/analytics.js"></script> <script src="register_files/core_1f49c51.js"></script> <script src="register_files/jquery.js"></script> <script src="register_files/raven_8c2f9e8.js"></script> <script src="register_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_verify_upload', ignoreAjax : [], ignoreStatic : [] }); </script> <script> window.PAGEVIEW_NAME = '/musician_apply_verify/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"> </div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register_files/icon_2_grey_2e4f238.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr-grey"></div> <div class="common-module"> <img src="register_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">音乐人信息</p> <form class="step-form" id="stepForm" method="post" novalidate="novalidate"> <div class="step-input-group"> <label for="stage_name" class="verify-step-label label-not-null">歌手名</label> <input id="stage_name" name="stage_name" class="step-input" type="text"> </div> <div class="step-input-group"> <label for="name" class="verify-step-label label-not-null">真实姓名</label> <input id="name" name="name" class="verify-step-input" type="text"> </div> <div class="step-input-group"> <label for="wechat" class="verify-step-label">微信</label> <input id="wechat" class="verify-step-input" name="wechat" type="text"> </div> <div class="step-input-group"> <label for="idCard" class="verify-step-label label-not-null">身份证号码</label> <input id="idCard" class="verify-step-input" name="id_card" type="text"> </div> <div class="verify-step-button-group"> <input class="step-button" value="提交实名审核" type="submit"> </div> </form> <div class="verify-modal" id="modal"> <div class="verify-modal-container" id="modalContainer"> <h1>你的实名认证未通过！</h1> <p>请重新填写姓名、身份证号</p> <div class="step-button" id="hideModalBtn">确定</div> </div> </div> <div class="agreement-modal" id="agreement"> <div class="agreement-modal-container" id="agreementContainer"> <div class="agreement-modal-content"> <p class="c7"></p> <p class="c10"> <span class="c2 c8">抖音用户音乐作品推广服务及授权协议</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c3">欢迎您在抖音平台（“</span> <span class="c1">抖音</span> <span class="c3">”）推广、上传并授权抖音使用您的音乐！（以下简称“</span> <span class="c1">本授权</span> <span class="c2 c3">”）</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c1">在您进行本授权前，请您认真阅读并遵守《抖音用户服务协议》（以下简称“本协议”）。请您务必审慎阅读并充分理解各条款内容，特别是限制或免除责任条款，以及开通或使用某项服务的单独协议。</span> </p> <p class="c0"> <span class="c2 c1">除非您已阅读并接受本协议所有条款，否则您无权参加本授权及使用相关服务（以下简称“本服务”）。您对本服务的登陆、查看、下载、发布信息、使用等行为即视为您已阅读并同意受本协议的约束。</span> </p> <p class="c0"> <span class="c1">如果您是未成年人，请在监护人的陪同下仔细阅读并充分理解本协议，并特别注意未成年人使用条款，并征得法定监护人的同意下进行本授权。</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c2 c3">前言</span> </p> <p class="c0"> <span class="c1">凡 在抖音推广、上传并授权抖音使用您的音乐的用户（以下简称“您”或“授权人”），在网络报名参加时均需签署本协议，参与者通过网络阅读本协议全文并点击勾 选“我已阅读并同意”项后，本协议对协议各方当事人即具有合同法律效力。授权人按上传流程提交授权人的作品（以下简称 “授权作品”），即视为授权人完全同意本授权，并为在“抖音”及相关平台上推广授权作品授权北京微播视界科技有限公司及其关联公司、控制公司（以下统称 “公司”或“被授权人”）</span> <span class="c5">排他使用授权作品</span> <span class="c2 c1">。</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c2 c3">一、【声明与保证】</span> </p> <p class="c0"> <span class="c2 c3">1.1授权人保证：</span> </p> <p class="c0"> <span class="c2 c1">（1） 授权人提交的授权作品为其原创，通过本协议向被授权人进行的授权是合法、有效、无争议的，且拥有授权被授权人按本协议约定的方式使用授权作品的权利。如果 因为被授权人在本协议范围内使用授权作品陷入任何诉讼、调查、法律纠纷、行政处罚、诉讼或仲裁等，由授权人承担全部的法律责任，并赔偿被授权人因此受到的 全部直接或间接损失。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人拥有授权作品之合法完整的词曲著作权以及邻接权（包括录音录像制作者权、表演者权等），或前述权利合法有效的许可授权，以及其转授权权利。</span> </p> <p class="c0"> <span class="c2 c1">（3）词曲著作权人、表演者、录音/录像制作者之间对授权作品著作权份额的内部约定，不得对抗被授权人依本协议约定取得的授权和权益。</span> </p> <p class="c0"> <span class="c2 c1">1.2 授权人保证本授权需符合以下标准。授权人如提交有违下列标准之授权作品或材料，将直接视为丧失上传授权作品资格，被授权人有权删除提交内容（包括但不限于 授权人信息、授权作品等）且无须作出任何解释及通知。授权人不得以未获通知取消资格为由对被授权人提出任何异议。具体标准如下：</span> </p> <p class="c0"> <span class="c1">（1）授权人在线完成抖音用户注册并使用抖音服务时，即为授权人已确认理解、同意并适用《</span> <a id="id.30j0zll"></a> <a id="id.gjdgxs"></a> <span class="c2 c1">抖音—用户服务协议及隐私保护政策》及其他相关规则。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人提供的信息（包括但不限于授权人的姓名、性别、年龄、身份证号码、照片、图片、音乐作品相关信息等）是真实、完整、合法的。</span> </p> <p class="c0"> <span class="c2 c1">（3）授权人未与其他自然人、法人或其他组织签订任何限制授权人参加本授权或实施与本授权有关的一切行为的协议（包括但不限于词曲、唱片、演唱、经纪、影视合约）；或虽签订协议但已取得签约相对人的明确同意，同意授权人参加本授权并能独立实施与本授权有关的一切行为。</span> </p> <p class="c0"> <span class="c2 c1">（4）授权作品在本授权前未进行过于本授权冲突的其他授权，并且在本授权结束之前不会将同一作品用于于本授权冲突的其他授权及活动。</span> </p> <p class="c0"> <span class="c2 c1">（5） 如因授权作品违反法律法规、政策规章、公序良俗、存在权利瑕疵或侵犯了第三方的合法权益（包括但不限于著作权、专利权、商标权、肖像权、隐私权、名誉权 等）而导致被授权人或与被授权人合作的其他单位面临任何第三方的索赔、诉讼、投诉；或者使被授权人或者与被授权人合作的其他单位因此遭受任何名誉、声誉或 者财产上的损失，授权人将积极地采取一切可能采取的措施，以保证被授权人及与被授权人合作的其他单位免受上述索赔、诉讼、投诉的影响，同时对被授权人或与 被授权人合作的其他单位因此遭受的直接或间接经济损失承担全部赔偿责任。</span> </p> <p class="c0"> <span class="c2 c3">二、【授权内容】</span> </p> <p class="c0"> <span class="c2 c1">2.1授权内容：</span> </p> <p class="c0"> <span class="c2 c1">（1） 授权人将授权作品，包括词作品、曲作品、录音制品（包含相关词曲权利），整首及部分片段（根据授权人音乐上传的具体情况来判断是整首授权还是部分授权）的 著作权及其邻接权，包括信息网络传播权、放映权、广播权、复制权、发行权、表演权、改编权、表演者权、录音录像制作者权，及行使该权利所必需的相关权利独 家授予被授权人。并且，授权人明确知悉以上授权是其能够进行本授权的前提，且确认并同意前述权利不会授权给与抖音相同或类似的其他任何平台或公司。</span> </p> <a id="id.1fob9te"></a> <a id="id.3znysh7"></a> <p class="c0"> <span class="c1 c2">（2）针对上述授权内容，被授权人有权以自己的名义制止、打击侵权和盗版行为，包括但不限于申请证据保全、财产保全、行政投诉、刑事自诉、提起民事诉讼、上诉、申请执行、和解、获得赔偿金等。</span> </p> <p class="c0"> <span class="c1">2.2授权使用范围：</span> <span class="c5">任何站内、站外，线上、线下，大众媒体、自媒体等。</span> </p> <p class="c0"> <span class="c1">2.3授权性质：</span> <span class="c5">免费、排他（排除同类平台）</span> <span class="c2 c1">、可再许可（通过多层次）、可撤销（须提前90天书面通知）的授权。</span> </p> <p class="c0"> <span class="c1">2.4授权使用方式：</span> <span class="c5">被授权人及其平台用户有权（1）播放试听授权内容；（2）在抖音内作为背景音乐使用授权内容；（3）在被授权人及其关联公司平台（包括但不限于平台名称为 “今日头条”、“西瓜视频”、“火山”、“Tik Tok”、“Vigo”、“Faceu激萌”）使用；</span> <span class="c1">（3）利用授权内容作出的资料（包括音视频等）单独和/或整合在授权范围内进行播放、推广、转发、分享等</span> <span class="c5">； （4）利用授权内容针对抖音平台做宣传、推广、广告使用；（5）被授权人进行商业化使用（该等商业化使用指有偿提供给平台广告主作为背景音乐使用）和在电 信运营商平台（如中移动、联通、电信等）所有电信类产品（彩铃、振铃、全曲、IVR等）接入进行收益，该项下商业化使用和电信类产品的收益，被授权人有权 收取不少于净收入的15%作为运营代理服务费。</span> </p> <p class="c0"> <span class="c1">2.5授权地域范围：</span> <span class="c5">全世界范围内。</span> </p> <p class="c0"> <span class="c1">2.6授权期限：</span> <span class="c5">自本协议生效之日起永久，且生效之日起一年后可以提前90天书面通知的方式撤销授权，生效之日起一年内不得撤销授权。</span> </p> <p class="c0"> <span class="c2 c3">2.7授权特别规定：</span> </p> <p class="c0"> <span class="c2 c1">（1）在授权期间，被授权人有权对抖音及被授权人其他平台的名称进行单方变更（包括但不限于更名、新增等），变更后的平台同样适用本协议。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人确认并同意，被授权人有权依其产品或平台的运营需要，安排或指定其关联公司、继承公司或其认可的第三方公司（“继承公司”）继续运营被授权人的平台，而无须另行取得授权人书面同意或确认。</span> </p> <p class="c0"> <span class="c2 c3">三、【违约责任】</span> </p> <p class="c0" id="h.2et92p0"> <span class="c1">任何一方违约的，需按协议约定或法律规定向非违约方承担违约赔偿责任。授权人未能提前</span> <span class="c1 c6">90天</span> <span class="c2 c1">以书面形式通知被授权人而与其他唱片公司或其他任何公司、机构、个人签约或授权的，属授权人违约，除继续履行本协议外，授权人应向被授权人支付相当于授权人所获报酬等总收入30%的违约金，且违约金最少不低于人民币二十万元。</span> </p> <p class="c0"> <span class="c2 c3">四、【未成年人使用条款】</span> </p> <p class="c0"> <span class="c2 c1">4.1若您为未成年人，应在监护人监护、指导下阅读本协议和使用本服务。</span> </p> <p class="c0"> <span class="c2 c1">4.2未成年人用户涉世未深，容易被网络虚象迷惑，且好奇心强，遇事缺乏随机应变的处理能力，很容易被别有用心的人利用而又缺乏自我保护能力。因此，未成年人用户在使用本服务时应注意以下事项，提高安全意识，加强自我保护：</span> </p> <p class="c0"> <span class="c2 c1">（1）认清网络世界与现实世界的区别，避免沉迷于网络，影响日常的学习生活；</span> </p> <p class="c0"> <span class="c2 c1">（2）填写对外公开的个人资料时，加强个人保护意识，以免不良分子对个人生活造成骚扰；</span> </p> <p class="c0"> <span class="c2 c1">（3）在监护人或老师的指导下，学习正确使用网络；</span> </p> <p class="c0"> <span class="c2 c1">（4）避免陌生网友随意会面或参与联谊活动，以免不法分子有机可乘，危及自身安全。</span> </p> <p class="c0"> <span class="c2 c1">（5）在监护人的监护和授权下使用涉及付费类的服务。</span> </p> <p class="c0"> <span class="c1">4.3未成年人在无监护人监护、指导或监护人未尽到监护、指导义务的情况下，自行阅读本协议和使用本服务，由此对未成年人本人或其家庭或他人带来的不利后果或损失，均由该未成年人及其家长或监护人承担，公司不对未成年人该行为产生的后果或损失承担任何责任。</span> </p> <p class="c0"> <span class="c2 c3">五、【保密条款】</span> </p> <p class="c0"> <span class="c2 c1">5.1授权人因进行本授权而直接或间接获得的与本授权有直接或间接关联的一切信息，均负有保密的义务。未经公司书面同意，不得以泄露、告知、公布、发表、出版、传授、转让或其他任何形式，使任何第三方知悉属于被授权人的一切秘密信息。</span> </p> <p class="c0"> <span class="c2 c1">5.2本授权终止后，授权人仍对其在活动期间所知悉的属于公司的秘密信息具有保密义务。</span> </p> <p class="c0"> <span class="c2 c3">六、【不可抗力及免责事由】</span> </p> <p class="c0"> <span class="c2 c3">6.1 您理解并同意，在使用本服务的过程中，可能会遇到不可抗力等风险因素，使本服务发生中断。不可抗力是指不能预见、不能克服并不能避免且对一方或双方造成重 大影响的客观事件，包括但不限于自然灾害如洪水、地震、瘟疫流行和风暴等以及社会事件如战争、动乱、政府行为等。出现上述情况时，公司将努力在第一时间与 相关单位配合，及时进行修复，但是由此给您造成的损失公司在法律允许的范围内免责。</span> </p> <p class="c0"> <span class="c2 c3">6.2在法律允许的范围内，公司对以下情形导致的服务中断或受阻不承担责任：</span> </p> <p class="c0"> <span class="c2 c3">（1）受到计算机病毒、木马或其他恶意程序、黑客攻击的破坏；</span> </p> <p class="c0"> <span class="c2 c3">（2）用户或的电脑软件、系统、硬件和通信线路出现故障；</span> </p> <p class="c0"> <span class="c2 c3">（3）用户操作不当；</span> </p> <p class="c0"> <span class="c2 c3">（4）用户通过非授权的方式使用本服务；</span> </p> <p class="c0"> <span class="c2 c3">（5）其他无法控制或合理预见的情形。</span> </p> <p class="c0"> <span class="c2 c3">6.3您理解并同意，在使用本服务的过程中，可能会遇到网络信息或其他用户行为带来的风险，公司不对任何信息的真实性、适用性、合法性承担责任，也不对因侵权行为给您造成的损害负责。这些风险包括但不限于：</span> </p> <p class="c0"> <span class="c2 c3">（1）来自他人匿名或冒名的含有威胁、诽谤、令人反感或非法内容的信息；</span> </p> <p class="c0"> <span class="c2 c3">（2）因使用本协议项下的服务，遭受他人误导、欺骗或其他导致或可能导致的任何心理、生理上的伤害以及经济上的损失；</span> </p> <p class="c0"> <span class="c2 c3">（3）其他因网络信息或用户行为引起的风险。</span> </p> <p class="c0"> <span class="c2 c3">6.4您理解并同意，本服务并非为某些特定目的而设计，包括但不限于核设施、军事用途、医疗设施、交通通讯等重要领域。如果因为软件或服务的原因导致上述操作失败而带来的人员伤亡、财产损失和环境破坏等，公司不承担法律责任。</span> </p> <p class="c0"> <span class="c2 c3">6.5公司依据本协议约定获得处理违法违规内容的权利，该权利不构成公司的义务或承诺，公司不能保证及时发现违法行为或进行相应处理。</span> </p> <p class="c0"> <span class="c2 c3">6.6在任何情况下，您不应轻信借款、索要密码或其他涉及财产的网络信息。涉及财产操作的，请一定先核实对方身份，并请经常留意公司有关防范诈骗犯罪的提示。</span> </p> <p class="c0"> <span class="c2 c3">七、【协议的生效与变更】</span> </p> <p class="c0"> <span class="c2 c3">7.1您使用本服务即视为您已阅读本协议并接受本协议的约束。</span> </p> <p class="c0"> <span class="c2 c3">7.2公司有权在必要时修改本协议条款。您可以在相关服务页面查阅最新版本的协议条款。</span> </p> <p class="c0"> <span class="c2 c3">7.3协议条款变更后，如果您继续使用提供的软件或服务，即视为您已接受修改后的协议。如果您不接受修改后的协议，应当停止使用公司提供的软件或服务。</span> </p> <p class="c0"> <span class="c2 c3">八、【服务的变更、中断、终止】</span> </p> <p class="c0"> <span class="c2 c3">8.1您理解并同意公司可能会对服务内容进行变更，也可能会中断、中止或终止服务。</span> </p> <p class="c0"> <span class="c2 c3">8.2如发生下列任何一种情形，公司有权不经通知而中断或终止向您提供的服务：</span> </p> <p class="c0"> <span class="c2 c3">（1）根据法律规定您应提交真实身份等信息，而您提供的个人资料不真实、或与注册时信息不一致又未能提供合理证明；</span> </p> <p class="c0"> <span class="c2 c3">（2）您违反相关法律法规或本协议的约定；</span> </p> <p class="c0"> <span class="c2 c3">（3）按照法律规定或主管部门的要求；</span> </p> <p class="c0"> <span class="c2 c3">（4）出于安全的原因或其他必要的情形。</span> </p> <p class="c0"> <span class="c2 c3">8.3您有责任自行备份存储在本服务中的数据。如果您的服务被终止，公司可以从服务器上永久地删除您的数据。本服务终止后，公司没有义务向您返还数据。</span> </p> <p class="c0"> <span class="c2 c3">九、【争议解决与适用法律】</span> </p> <p class="c0"> <span class="c3">9.1双方应严格履行本协议，因本协议履行产生争议的，双方应友好协商，协商不成时，任何一方均有权向</span> <span class="c1">北京市海淀区人民法院</span> <span class="c2 c3">申请诉讼方式解决。</span> </p> <p class="c0"> <span class="c2 c3">9.2本协议的订立、履行、争议解决与解释均适用中华人民共和国大陆地区法律。</span> </p> <p class="c0"> <span class="c2 c3">十、【其他注意事项】</span> </p> <p class="c0"> <span class="c2 c1">10.1因第三方的原因，导致授权作品被迫中止本授权在抖音及相关平台使用的，授权人因此所受到的损失应直接向第三方要求赔偿，被授权人不负任何赔偿责任。</span> </p> <p class="c0"> <span class="c2 c1">10.2 授权作品均为授权人自愿提供，因此，该授权作品的著作权及内容的真实性、合法性均由授权人自行负责。被授权人对所有授权作品的著作权及内容的真实性、合法 性不提供任何明示或暗示的担保，被授权人对于任何个人、法人或其他组织因使用授权作品而引起的任何形式的损失，包括但不限于直接的、间接的、偶然的、惩罚 性的损失，不承担任何责任。</span> </p> <p class="c0"> <span class="c2 c3">10.3本协议任何一方未能及时行使本协议项下的权利不应被视为放弃该权利，也不影响该方在将来行使该权利。</span> </p> <p class="c0" id="h.tyjcwt"> <span class="c2 c3">10.4如果本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，或违反任何适用的法律，则该条款被视为删除，不影响本协议的其余条款的法律效力。</span> </p> <p class="c0"> <span class="c3">10.5本协议更新于</span> <span class="c3 c6">2018年8月21日</span> <span class="c2 c3">。</span> </p> <p></p> </div> <div class="agreement-step-button-group"> <input class="agreement-button-disabled" disabled="disabled" value="我已阅读并接受《参赛协议》" id="agreeSubmit" type="button"> <div class="step-button" id="agreeHideBtn">取消</div> </div> </div> </div> </div> <script>$(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/verify/verify'); })</script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_verify_upload' } }).install();</script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_verify_upload' } }).install();</script> <script src="register_files/index_7a47cdc.js"></script> <script src="register_files/es6-promise.js"></script> <script src="register_files/promise.js"></script> <script src="register_files/form_ebcf55b.js"></script> <script src="register_files/file_f9a5ca7.js"></script> <script src="register_files/toast_d6fd98c.js"></script> <script src="register_files/verify_7efc371.js"></script> </body> </html>
package com.Gary.shakes.domain; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; @Entity public class User { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state; private String name; private String wechat; private String card; protected User() { } public User(Long id,String username,String password,String telephone,String code,Integer state ,String name,String wechat,String card) { this.id=id; this.username=username; this.password=password; this.telephone=telephone; this.code=code; this.state=state; this.name=name; this.wechat=wechat; this.card=card; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getWechat() { return wechat; } public void setWechat(String wechat) { this.wechat = wechat; } public String getCard() { return card; } public void setCard(String card) { this.card = card; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getTelephone() { return telephone; } public void setTelephone(String telephone) { this.telephone = telephone; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } }
书写异步Post完成用户的添加
书写点击提交同意按钮的异步post
添加register注册页面四个属性 username name wechat card
$("#agreeSubmit").click(function() { var username = $("#stage_name").val(); var name = $("#name").val(); var wechat = $("#wechat").val(); var card = $("#idCard").val(); $.post( //action地址 [[@{~/addUser}]], //数据 {"username":username,"name":name,"wechat":wechat,"card":card}, //回调函数 function(data) { alert("access"); }, //数据格式 "json" ) })
点击提交后将信息发送addUser请求
在UserController.java中添加addUser请求
@RequestMapping("/addUser")
public ModelAndView addUser(User user,HttpServletResponse response,HttpServletRequest request) throws IOException
{
//在session域中的User 具有前四个属性 无wechat card name username
User loginUser = (User) request.getSession().getAttribute("loginUser");
//user 没id 有wechat card name username
loginUser.setWechat(user.getWechat());
loginUser.setCard(user.getCard());
loginUser.setName(user.getName());
loginUser.setUsername(user.getUsername());
userServiceImpl.save(loginUser);
response.getWriter().write("{\"success\":"+true+"}");
return null;
}
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register_files/base_4a834a9.css"> <link rel="stylesheet" href="register_files/base_ce73669.css"> <style type="text/css"> ol { margin: 0; padding: 0 } table td, table th { padding: 0 } .c5 { -webkit-text-decoration-skip: none; font-weight: 700; text-decoration: underline; text-decoration-skip-ink: none; font-size: 12pt; font-family: "\004eff\005b8b" } .c10 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.1500000000000001; orphans: 2; widows: 2; text-align: center } .c0 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.1500000000000001; orphans: 2; widows: 2; text-align: left } .c2 { color: #000000; text-decoration: none; vertical-align: baseline; font-style: normal } .c4 { color: #ff0000; text-decoration: none; vertical-align: baseline; font-style: normal } .c3 { font-weight: 400; font-size: 10.5pt; font-family: "\004eff\005b8b" } .c1 { font-size: 10.5pt; font-family: "\004eff\005b8b"; font-weight: 700 } .c7 { background-color: #ffffff; max-width: 451.5pt; } .c8 { font-weight: 700; font-size: 14pt; font-family: "\004eff\005b8b" } .c6 { background-color: #ffff00 } .c9 { height: 11pt } .title { padding-top: 0pt; color: #000000; font-size: 26pt; padding-bottom: 3pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } .subtitle { padding-top: 0pt; color: #666666; font-size: 15pt; padding-bottom: 16pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } li { color: #000000; font-size: 11pt; font-family: "Arial" } p { margin: 0; color: #000000; font-size: 11pt; font-family: "Arial" } h1 { padding-top: 20pt; color: #000000; font-size: 20pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h2 { padding-top: 18pt; color: #000000; font-size: 16pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h3 { padding-top: 16pt; color: #434343; font-size: 14pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h4 { padding-top: 14pt; color: #666666; font-size: 12pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h5 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h6 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; font-style: italic; orphans: 2; widows: 2; text-align: left } </style> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script async="" src="register_files/analytics.js"></script> <script src="register_files/core_1f49c51.js"></script> <script src="register_files/jquery.js"></script> <script src="register_files/raven_8c2f9e8.js"></script> <script src="register_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_verify_upload', ignoreAjax : [], ignoreStatic : [] }); </script> <script> window.PAGEVIEW_NAME = '/musician_apply_verify/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register_files/icon_2_grey_2e4f238.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr-grey"></div> <div class="common-module"> <img src="register_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">音乐人信息</p> <form class="step-form" id="stepForm" method="post" novalidate="novalidate"> <div class="step-input-group"> <label for="stage_name" class="verify-step-label label-not-null">歌手名</label> <input id="stage_name" name="stage_name" class="step-input" type="text"> </div> <div class="step-input-group"> <label for="name" class="verify-step-label label-not-null">真实姓名</label> <input id="name" name="name" class="verify-step-input" type="text"> </div> <div class="step-input-group"> <label for="wechat" class="verify-step-label">微信</label> <input id="wechat" class="verify-step-input" name="wechat" type="text"> </div> <div class="step-input-group"> <label for="idCard" class="verify-step-label label-not-null">身份证号码</label> <input id="idCard" class="verify-step-input" name="id_card" type="text"> </div> <div class="verify-step-button-group"> <input class="step-button" value="提交实名审核" type="submit"> </div> </form> <div class="verify-modal" id="modal"> <div class="verify-modal-container" id="modalContainer"> <h1>你的实名认证未通过！</h1> <p>请重新填写姓名、身份证号</p> <div class="step-button" id="hideModalBtn">确定</div> </div> </div> <div class="agreement-modal" id="agreement"> <div class="agreement-modal-container" id="agreementContainer"> <div class="agreement-modal-content"> <p class="c7"></p> <p class="c10"> <span class="c2 c8">抖音用户音乐作品推广服务及授权协议</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c3">欢迎您在抖音平台（“</span> <span class="c1">抖音</span> <span class="c3">”）推广、上传并授权抖音使用您的音乐！（以下简称“</span> <span class="c1">本授权</span> <span class="c2 c3">”）</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c1">在您进行本授权前，请您认真阅读并遵守《抖音用户服务协议》（以下简称“本协议”）。请您务必审慎阅读并充分理解各条款内容，特别是限制或免除责任条款，以及开通或使用某项服务的单独协议。</span> </p> <p class="c0"> <span class="c2 c1">除非您已阅读并接受本协议所有条款，否则您无权参加本授权及使用相关服务（以下简称“本服务”）。您对本服务的登陆、查看、下载、发布信息、使用等行为即视为您已阅读并同意受本协议的约束。</span> </p> <p class="c0"> <span class="c1">如果您是未成年人，请在监护人的陪同下仔细阅读并充分理解本协议，并特别注意未成年人使用条款，并征得法定监护人的同意下进行本授权。</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c2 c3">前言</span> </p> <p class="c0"> <span class="c1">凡 在抖音推广、上传并授权抖音使用您的音乐的用户（以下简称“您”或“授权人”），在网络报名参加时均需签署本协议，参与者通过网络阅读本协议全文并点击勾 选“我已阅读并同意”项后，本协议对协议各方当事人即具有合同法律效力。授权人按上传流程提交授权人的作品（以下简称 “授权作品”），即视为授权人完全同意本授权，并为在“抖音”及相关平台上推广授权作品授权北京微播视界科技有限公司及其关联公司、控制公司（以下统称 “公司”或“被授权人”）</span> <span class="c5">排他使用授权作品</span> <span class="c2 c1">。</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c2 c3">一、【声明与保证】</span> </p> <p class="c0"> <span class="c2 c3">1.1授权人保证：</span> </p> <p class="c0"> <span class="c2 c1">（1） 授权人提交的授权作品为其原创，通过本协议向被授权人进行的授权是合法、有效、无争议的，且拥有授权被授权人按本协议约定的方式使用授权作品的权利。如果 因为被授权人在本协议范围内使用授权作品陷入任何诉讼、调查、法律纠纷、行政处罚、诉讼或仲裁等，由授权人承担全部的法律责任，并赔偿被授权人因此受到的 全部直接或间接损失。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人拥有授权作品之合法完整的词曲著作权以及邻接权（包括录音录像制作者权、表演者权等），或前述权利合法有效的许可授权，以及其转授权权利。</span> </p> <p class="c0"> <span class="c2 c1">（3）词曲著作权人、表演者、录音/录像制作者之间对授权作品著作权份额的内部约定，不得对抗被授权人依本协议约定取得的授权和权益。</span> </p> <p class="c0"> <span class="c2 c1">1.2 授权人保证本授权需符合以下标准。授权人如提交有违下列标准之授权作品或材料，将直接视为丧失上传授权作品资格，被授权人有权删除提交内容（包括但不限于 授权人信息、授权作品等）且无须作出任何解释及通知。授权人不得以未获通知取消资格为由对被授权人提出任何异议。具体标准如下：</span> </p> <p class="c0"> <span class="c1">（1）授权人在线完成抖音用户注册并使用抖音服务时，即为授权人已确认理解、同意并适用《</span> <a id="id.30j0zll"></a> <a id="id.gjdgxs"></a> <span class="c2 c1">抖音—用户服务协议及隐私保护政策》及其他相关规则。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人提供的信息（包括但不限于授权人的姓名、性别、年龄、身份证号码、照片、图片、音乐作品相关信息等）是真实、完整、合法的。</span> </p> <p class="c0"> <span class="c2 c1">（3）授权人未与其他自然人、法人或其他组织签订任何限制授权人参加本授权或实施与本授权有关的一切行为的协议（包括但不限于词曲、唱片、演唱、经纪、影视合约）；或虽签订协议但已取得签约相对人的明确同意，同意授权人参加本授权并能独立实施与本授权有关的一切行为。</span> </p> <p class="c0"> <span class="c2 c1">（4）授权作品在本授权前未进行过于本授权冲突的其他授权，并且在本授权结束之前不会将同一作品用于于本授权冲突的其他授权及活动。</span> </p> <p class="c0"> <span class="c2 c1">（5） 如因授权作品违反法律法规、政策规章、公序良俗、存在权利瑕疵或侵犯了第三方的合法权益（包括但不限于著作权、专利权、商标权、肖像权、隐私权、名誉权 等）而导致被授权人或与被授权人合作的其他单位面临任何第三方的索赔、诉讼、投诉；或者使被授权人或者与被授权人合作的其他单位因此遭受任何名誉、声誉或 者财产上的损失，授权人将积极地采取一切可能采取的措施，以保证被授权人及与被授权人合作的其他单位免受上述索赔、诉讼、投诉的影响，同时对被授权人或与 被授权人合作的其他单位因此遭受的直接或间接经济损失承担全部赔偿责任。</span> </p> <p class="c0"> <span class="c2 c3">二、【授权内容】</span> </p> <p class="c0"> <span class="c2 c1">2.1授权内容：</span> </p> <p class="c0"> <span class="c2 c1">（1） 授权人将授权作品，包括词作品、曲作品、录音制品（包含相关词曲权利），整首及部分片段（根据授权人音乐上传的具体情况来判断是整首授权还是部分授权）的 著作权及其邻接权，包括信息网络传播权、放映权、广播权、复制权、发行权、表演权、改编权、表演者权、录音录像制作者权，及行使该权利所必需的相关权利独 家授予被授权人。并且，授权人明确知悉以上授权是其能够进行本授权的前提，且确认并同意前述权利不会授权给与抖音相同或类似的其他任何平台或公司。</span> </p> <a id="id.1fob9te"></a> <a id="id.3znysh7"></a> <p class="c0"> <span class="c1 c2">（2）针对上述授权内容，被授权人有权以自己的名义制止、打击侵权和盗版行为，包括但不限于申请证据保全、财产保全、行政投诉、刑事自诉、提起民事诉讼、上诉、申请执行、和解、获得赔偿金等。</span> </p> <p class="c0"> <span class="c1">2.2授权使用范围：</span> <span class="c5">任何站内、站外，线上、线下，大众媒体、自媒体等。</span> </p> <p class="c0"> <span class="c1">2.3授权性质：</span> <span class="c5">免费、排他（排除同类平台）</span> <span class="c2 c1">、可再许可（通过多层次）、可撤销（须提前90天书面通知）的授权。</span> </p> <p class="c0"> <span class="c1">2.4授权使用方式：</span> <span class="c5">被授权人及其平台用户有权（1）播放试听授权内容；（2）在抖音内作为背景音乐使用授权内容；（3）在被授权人及其关联公司平台（包括但不限于平台名称为 “今日头条”、“西瓜视频”、“火山”、“Tik Tok”、“Vigo”、“Faceu激萌”）使用；</span> <span class="c1">（3）利用授权内容作出的资料（包括音视频等）单独和/或整合在授权范围内进行播放、推广、转发、分享等</span> <span class="c5">； （4）利用授权内容针对抖音平台做宣传、推广、广告使用；（5）被授权人进行商业化使用（该等商业化使用指有偿提供给平台广告主作为背景音乐使用）和在电 信运营商平台（如中移动、联通、电信等）所有电信类产品（彩铃、振铃、全曲、IVR等）接入进行收益，该项下商业化使用和电信类产品的收益，被授权人有权 收取不少于净收入的15%作为运营代理服务费。</span> </p> <p class="c0"> <span class="c1">2.5授权地域范围：</span> <span class="c5">全世界范围内。</span> </p> <p class="c0"> <span class="c1">2.6授权期限：</span> <span class="c5">自本协议生效之日起永久，且生效之日起一年后可以提前90天书面通知的方式撤销授权，生效之日起一年内不得撤销授权。</span> </p> <p class="c0"> <span class="c2 c3">2.7授权特别规定：</span> </p> <p class="c0"> <span class="c2 c1">（1）在授权期间，被授权人有权对抖音及被授权人其他平台的名称进行单方变更（包括但不限于更名、新增等），变更后的平台同样适用本协议。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人确认并同意，被授权人有权依其产品或平台的运营需要，安排或指定其关联公司、继承公司或其认可的第三方公司（“继承公司”）继续运营被授权人的平台，而无须另行取得授权人书面同意或确认。</span> </p> <p class="c0"> <span class="c2 c3">三、【违约责任】</span> </p> <p class="c0" id="h.2et92p0"> <span class="c1">任何一方违约的，需按协议约定或法律规定向非违约方承担违约赔偿责任。授权人未能提前</span> <span class="c1 c6">90天</span> <span class="c2 c1">以书面形式通知被授权人而与其他唱片公司或其他任何公司、机构、个人签约或授权的，属授权人违约，除继续履行本协议外，授权人应向被授权人支付相当于授权人所获报酬等总收入30%的违约金，且违约金最少不低于人民币二十万元。</span> </p> <p class="c0"> <span class="c2 c3">四、【未成年人使用条款】</span> </p> <p class="c0"> <span class="c2 c1">4.1若您为未成年人，应在监护人监护、指导下阅读本协议和使用本服务。</span> </p> <p class="c0"> <span class="c2 c1">4.2未成年人用户涉世未深，容易被网络虚象迷惑，且好奇心强，遇事缺乏随机应变的处理能力，很容易被别有用心的人利用而又缺乏自我保护能力。因此，未成年人用户在使用本服务时应注意以下事项，提高安全意识，加强自我保护：</span> </p> <p class="c0"> <span class="c2 c1">（1）认清网络世界与现实世界的区别，避免沉迷于网络，影响日常的学习生活；</span> </p> <p class="c0"> <span class="c2 c1">（2）填写对外公开的个人资料时，加强个人保护意识，以免不良分子对个人生活造成骚扰；</span> </p> <p class="c0"> <span class="c2 c1">（3）在监护人或老师的指导下，学习正确使用网络；</span> </p> <p class="c0"> <span class="c2 c1">（4）避免陌生网友随意会面或参与联谊活动，以免不法分子有机可乘，危及自身安全。</span> </p> <p class="c0"> <span class="c2 c1">（5）在监护人的监护和授权下使用涉及付费类的服务。</span> </p> <p class="c0"> <span class="c1">4.3未成年人在无监护人监护、指导或监护人未尽到监护、指导义务的情况下，自行阅读本协议和使用本服务，由此对未成年人本人或其家庭或他人带来的不利后果或损失，均由该未成年人及其家长或监护人承担，公司不对未成年人该行为产生的后果或损失承担任何责任。</span> </p> <p class="c0"> <span class="c2 c3">五、【保密条款】</span> </p> <p class="c0"> <span class="c2 c1">5.1授权人因进行本授权而直接或间接获得的与本授权有直接或间接关联的一切信息，均负有保密的义务。未经公司书面同意，不得以泄露、告知、公布、发表、出版、传授、转让或其他任何形式，使任何第三方知悉属于被授权人的一切秘密信息。</span> </p> <p class="c0"> <span class="c2 c1">5.2本授权终止后，授权人仍对其在活动期间所知悉的属于公司的秘密信息具有保密义务。</span> </p> <p class="c0"> <span class="c2 c3">六、【不可抗力及免责事由】</span> </p> <p class="c0"> <span class="c2 c3">6.1 您理解并同意，在使用本服务的过程中，可能会遇到不可抗力等风险因素，使本服务发生中断。不可抗力是指不能预见、不能克服并不能避免且对一方或双方造成重 大影响的客观事件，包括但不限于自然灾害如洪水、地震、瘟疫流行和风暴等以及社会事件如战争、动乱、政府行为等。出现上述情况时，公司将努力在第一时间与 相关单位配合，及时进行修复，但是由此给您造成的损失公司在法律允许的范围内免责。</span> </p> <p class="c0"> <span class="c2 c3">6.2在法律允许的范围内，公司对以下情形导致的服务中断或受阻不承担责任：</span> </p> <p class="c0"> <span class="c2 c3">（1）受到计算机病毒、木马或其他恶意程序、黑客攻击的破坏；</span> </p> <p class="c0"> <span class="c2 c3">（2）用户或的电脑软件、系统、硬件和通信线路出现故障；</span> </p> <p class="c0"> <span class="c2 c3">（3）用户操作不当；</span> </p> <p class="c0"> <span class="c2 c3">（4）用户通过非授权的方式使用本服务；</span> </p> <p class="c0"> <span class="c2 c3">（5）其他无法控制或合理预见的情形。</span> </p> <p class="c0"> <span class="c2 c3">6.3您理解并同意，在使用本服务的过程中，可能会遇到网络信息或其他用户行为带来的风险，公司不对任何信息的真实性、适用性、合法性承担责任，也不对因侵权行为给您造成的损害负责。这些风险包括但不限于：</span> </p> <p class="c0"> <span class="c2 c3">（1）来自他人匿名或冒名的含有威胁、诽谤、令人反感或非法内容的信息；</span> </p> <p class="c0"> <span class="c2 c3">（2）因使用本协议项下的服务，遭受他人误导、欺骗或其他导致或可能导致的任何心理、生理上的伤害以及经济上的损失；</span> </p> <p class="c0"> <span class="c2 c3">（3）其他因网络信息或用户行为引起的风险。</span> </p> <p class="c0"> <span class="c2 c3">6.4您理解并同意，本服务并非为某些特定目的而设计，包括但不限于核设施、军事用途、医疗设施、交通通讯等重要领域。如果因为软件或服务的原因导致上述操作失败而带来的人员伤亡、财产损失和环境破坏等，公司不承担法律责任。</span> </p> <p class="c0"> <span class="c2 c3">6.5公司依据本协议约定获得处理违法违规内容的权利，该权利不构成公司的义务或承诺，公司不能保证及时发现违法行为或进行相应处理。</span> </p> <p class="c0"> <span class="c2 c3">6.6在任何情况下，您不应轻信借款、索要密码或其他涉及财产的网络信息。涉及财产操作的，请一定先核实对方身份，并请经常留意公司有关防范诈骗犯罪的提示。</span> </p> <p class="c0"> <span class="c2 c3">七、【协议的生效与变更】</span> </p> <p class="c0"> <span class="c2 c3">7.1您使用本服务即视为您已阅读本协议并接受本协议的约束。</span> </p> <p class="c0"> <span class="c2 c3">7.2公司有权在必要时修改本协议条款。您可以在相关服务页面查阅最新版本的协议条款。</span> </p> <p class="c0"> <span class="c2 c3">7.3协议条款变更后，如果您继续使用提供的软件或服务，即视为您已接受修改后的协议。如果您不接受修改后的协议，应当停止使用公司提供的软件或服务。</span> </p> <p class="c0"> <span class="c2 c3">八、【服务的变更、中断、终止】</span> </p> <p class="c0"> <span class="c2 c3">8.1您理解并同意公司可能会对服务内容进行变更，也可能会中断、中止或终止服务。</span> </p> <p class="c0"> <span class="c2 c3">8.2如发生下列任何一种情形，公司有权不经通知而中断或终止向您提供的服务：</span> </p> <p class="c0"> <span class="c2 c3">（1）根据法律规定您应提交真实身份等信息，而您提供的个人资料不真实、或与注册时信息不一致又未能提供合理证明；</span> </p> <p class="c0"> <span class="c2 c3">（2）您违反相关法律法规或本协议的约定；</span> </p> <p class="c0"> <span class="c2 c3">（3）按照法律规定或主管部门的要求；</span> </p> <p class="c0"> <span class="c2 c3">（4）出于安全的原因或其他必要的情形。</span> </p> <p class="c0"> <span class="c2 c3">8.3您有责任自行备份存储在本服务中的数据。如果您的服务被终止，公司可以从服务器上永久地删除您的数据。本服务终止后，公司没有义务向您返还数据。</span> </p> <p class="c0"> <span class="c2 c3">九、【争议解决与适用法律】</span> </p> <p class="c0"> <span class="c3">9.1双方应严格履行本协议，因本协议履行产生争议的，双方应友好协商，协商不成时，任何一方均有权向</span> <span class="c1">北京市海淀区人民法院</span> <span class="c2 c3">申请诉讼方式解决。</span> </p> <p class="c0"> <span class="c2 c3">9.2本协议的订立、履行、争议解决与解释均适用中华人民共和国大陆地区法律。</span> </p> <p class="c0"> <span class="c2 c3">十、【其他注意事项】</span> </p> <p class="c0"> <span class="c2 c1">10.1因第三方的原因，导致授权作品被迫中止本授权在抖音及相关平台使用的，授权人因此所受到的损失应直接向第三方要求赔偿，被授权人不负任何赔偿责任。</span> </p> <p class="c0"> <span class="c2 c1">10.2 授权作品均为授权人自愿提供，因此，该授权作品的著作权及内容的真实性、合法性均由授权人自行负责。被授权人对所有授权作品的著作权及内容的真实性、合法 性不提供任何明示或暗示的担保，被授权人对于任何个人、法人或其他组织因使用授权作品而引起的任何形式的损失，包括但不限于直接的、间接的、偶然的、惩罚 性的损失，不承担任何责任。</span> </p> <p class="c0"> <span class="c2 c3">10.3本协议任何一方未能及时行使本协议项下的权利不应被视为放弃该权利，也不影响该方在将来行使该权利。</span> </p> <p class="c0" id="h.tyjcwt"> <span class="c2 c3">10.4如果本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，或违反任何适用的法律，则该条款被视为删除，不影响本协议的其余条款的法律效力。</span> </p> <p class="c0"> <span class="c3">10.5本协议更新于</span> <span class="c3 c6">2018年8月21日</span> <span class="c2 c3">。</span> </p> <p></p> </div> <div class="agreement-step-button-group"> <input class="agreement-button-disabled" disabled="disabled" value="我已阅读并接受《参赛协议》" id="agreeSubmit" type="button"> <div class="step-button" id="agreeHideBtn">取消</div> </div> </div> </div> </div> <script type="text/javascript" th:inline="javascript"> $("#agreeSubmit").click(function() { var username = $("#stage_name").val(); var name = $("#name").val(); var wechat = $("#wechat").val(); var card = $("#idCard").val(); $.post( //action地址 [[@{~/addUser}]], //数据 {"username":username,"name":name,"wechat":wechat,"card":card}, //回调函数 function(data) { alert("access"); }, //数据格式 "json" ) }) $(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/verify/verify'); }) </script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_verify_upload' } }).install();</script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_verify_upload' } }).install();</script> <script src="register_files/index_7a47cdc.js"></script> <script src="register_files/es6-promise.js"></script> <script src="register_files/promise.js"></script> <script src="register_files/form_ebcf55b.js"></script> <script src="register_files/file_f9a5ca7.js"></script> <script src="register_files/toast_d6fd98c.js"></script> <script src="register_files/verify_7efc371.js"></script> </body> </html>
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.Gary.shakes.serviceimpl.UserServiceImpl; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @Autowired private UserServiceImpl userServiceImpl; @RequestMapping("/addUser") public ModelAndView addUser(User user,HttpServletResponse response,HttpServletRequest request) throws IOException { //在session域中的User 具有前四个属性 无wechat card name username User loginUser = (User) request.getSession().getAttribute("loginUser"); //user 没id 有wechat card name username loginUser.setWechat(user.getWechat()); loginUser.setCard(user.getCard()); loginUser.setName(user.getName()); loginUser.setUsername(user.getUsername()); userServiceImpl.save(loginUser); response.getWriter().write("{\"success\":"+true+"}"); return null; } @RequestMapping("/logOut") public ModelAndView logOut(HttpServletRequest request) { //在session域中移除loginUser request.getSession().removeAttribute("loginUser"); return new ModelAndView("redirect:/tomusic-people"); } @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { // System.out.println(user.getCode()); // System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } User loginUser = userServiceImpl.findUserByTelephone(user.getTelephone()); //在session域中放置User request.getSession().setAttribute("loginUser",loginUser); System.out.println(loginUser); //telephone //code return new ModelAndView("redirect:/toregister"); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
测试成功可以完整添加用户完整信息后，补全json的回调函数
$("#agreeSubmit").click(function() { var username = $("#stage_name").val(); var name = $("#name").val(); var wechat = $("#wechat").val(); var card = $("#idCard").val(); $.post( //action地址 [[@{~/addUser}]], //数据 {"username":username,"name":name,"wechat":wechat,"card":card}, //回调函数 function(data) { window.location=[[@{~/toregister-add-music}]] }, //数据格式 "json" ) })
register-add-music.html页面制作
添加thymeleaf标签
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
添加header头部模板
<div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header">
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script async="" src="register-add-music_files/analytics.js"></script> <script src="register-add-music_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_apply_submit', ignoreAjax : [], ignoreStatic : [] }); </script> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register-add-music_files/base_4a834a9.css"> <link rel="stylesheet" href="register-add-music_files/base_ce73669.css"> <link rel="stylesheet" href="register-add-music_files/dropkick_1b1894b.css"> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script src="register-add-music_files/core_1f49c51.js"></script> <script src="register-add-music_files/jquery.js"></script> <script src="register-add-music_files/raven_8c2f9e8.js"></script> <script> window.PAGEVIEW_NAME = '/musician_apply_submit/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register-add-music_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register-add-music_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register-add-music_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status" style="display: inline;">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_2_active_5b30557.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">提交作品</p> <p class="submit-step-tips-musi"> 建议整曲和剪辑版本（如副歌部分）一起提交，30s-60s的剪辑版本更适合抖音拍摄和传播哦 <br> 歌曲的剪辑版本建议命名为歌名-剪辑版，更方便被推荐~ </p> <div class="step-form-submit"> <div class="submit-step-upload" id="showModalBtn">+ 添加音乐</div> <div class="submit-tab-group"> <button id="showMusic" class="submit-tab-btn" style="color: #4a4a4a">已提交 </button> <span class="submit-tab-btn">|</span> <button id="showAdded" class="submit-tab-btn" style="color: #ccc" disabled="disabled"> 新增项</button> </div> <div class="submit-music-container"> <div class="submit-music-header"> <div class="submit-music-cover">封面</div> <div class="submit-music-name">音乐</div> <div class="submit-music-audio">试听</div> <div class="submit-music-campus">是否高校好声音</div> </div> <div id="musicListCont" class="submit-music-list">暂无作品，点击添加音乐添加你的作品～</div> </div> <div class="submit-music-pages" id="pages"> <button id="pagePre" class="submit-music-page-btn" disabled="disabled" style="color: #ccc"><上一页</button> <span>/</span> <button id="pageNxt" class="submit-music-page-btn" disabled="disabled" style="color: #ccc">下一页 ></button> </div> <div class="submit-step-button-group"> <div class="step-button" id="submitApply">提交</div> </div> <div class="submit-modal" id="modal"> <div class="submit-modal-container" id="modalContainer"> <p class="step-title">添加音乐</p> <form class="submit-modal-form" id="uploadMusicForm" novalidate="novalidate"> <div class="submit-modal-group"> <label class="submit-modal-label label-not-null">风格</label> <div class="dk-select step-select" id="dk0-stepSelect" style="margin-left: -200px"> <ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"> <li class="dk-optgroup"> <div class="dk-optgroup-label">中文</div> <ul class="dk-optgroup-options"> <li class="dk-option dk-option-selected" data-value="[41,49]" text="流行" role="option" aria-selected="true" id="dk0-[41,49]">流行</li> <li class="dk-option " data-value="[41,50]" text="说唱" role="option" aria-selected="false" id="dk0-[41,50]">说唱</li> <li class="dk-option " data-value="[41,51]" text="电音" role="option" aria-selected="false" id="dk0-[41,51]">电音</li> <li class="dk-option " data-value="[41,53]" text="民谣" role="option" aria-selected="false" id="dk0-[41,53]">民谣</li> <li class="dk-option " data-value="[41,56]" text="动漫" role="option" aria-selected="false" id="dk0-[41,56]">动漫</li> <li class="dk-option " data-value="[41,54]" text="古风" role="option" aria-selected="false" id="dk0-[41,54]">古风</li> <li class="dk-option " data-value="[41,55]" text="摇滚" role="option" aria-selected="false" id="dk0-[41,55]">摇滚</li> <li class="dk-option " data-value="[41,93]" text="disco" role="option" aria-selected="false" id="dk0-[41,93]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">欧美</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[42,57]" text="流行" role="option" aria-selected="false" id="dk0-[42,57]">流行</li> <li class="dk-option " data-value="[42,58]" text="说唱" role="option" aria-selected="false" id="dk0-[42,58]">说唱</li> <li class="dk-option " data-value="[42,59]" text="电音" role="option" aria-selected="false" id="dk0-[42,59]">电音</li> <li class="dk-option " data-value="[42,61]" text="爵士" role="option" aria-selected="false" id="dk0-[42,61]">爵士</li> <li class="dk-option " data-value="[42,62]" text="乡村" role="option" aria-selected="false" id="dk0-[42,62]">乡村</li> <li class="dk-option " data-value="[42,63]" text="布鲁斯" role="option" aria-selected="false" id="dk0-[42,63]">布鲁斯</li> <li class="dk-option " data-value="[42,64]" text="民谣" role="option" aria-selected="false" id="dk0-[42,64]">民谣</li> <li class="dk-option " data-value="[42,92]" text="hiphop" role="option" aria-selected="false" id="dk0-[42,92]">hiphop</li> <li class="dk-option " data-value="[42,95]" text="disco" role="option" aria-selected="false" id="dk0-[42,95]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">日韩</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[43,67]" text="说唱" role="option" aria-selected="false" id="dk0-[43,67]">说唱</li> <li class="dk-option " data-value="[43,68]" text="电音" role="option" aria-selected="false" id="dk0-[43,68]">电音</li> <li class="dk-option " data-value="[43,85]" text="摇滚" role="option" aria-selected="false" id="dk0-[43,85]">摇滚</li> <li class="dk-option " data-value="[43,69]" text="动漫" role="option" aria-selected="false" id="dk0-[43,69]">动漫</li> <li class="dk-option " data-value="[43,65]" text="j-pop" role="option" aria-selected="false" id="dk0-[43,65]">j-pop</li> <li class="dk-option " data-value="[43,66]" text="k-pop" role="option" aria-selected="false" id="dk0-[43,66]">k-pop</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">趣味</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[44,70]" text="萌宠" role="option" aria-selected="false" id="dk0-[44,70]">萌宠</li> <li class="dk-option " data-value="[44,88]" text="儿童" role="option" aria-selected="false" id="dk0-[44,88]">儿童</li> <li class="dk-option " data-value="[44,71]" text="段子" role="option" aria-selected="false" id="dk0-[44,71]">段子</li> <li class="dk-option " data-value="[44,87]" text="可爱" role="option" aria-selected="false" id="dk0-[44,87]">可爱</li> <li class="dk-option " data-value="[44,90]" text="幽默" role="option" aria-selected="false" id="dk0-[44,90]">幽默</li> </ul> </li> </ul> </div> <select class="step-select" id="stepSelect" name="style" data-dkcacheid="0"> <optgroup label="中文"> <option value="[41,49]" selected="selected">流行</option> <option value="[41,50]">说唱</option> <option value="[41,51]">电音</option> <option value="[41,53]">民谣</option> <option value="[41,56]">动漫</option> <option value="[41,54]">古风</option> <option value="[41,55]">摇滚</option> <option value="[41,93]">disco</option> </optgroup> <optgroup label="欧美"> <option value="[42,57]">流行</option> <option value="[42,58]">说唱</option> <option value="[42,59]">电音</option> <option value="[42,61]">爵士</option> <option value="[42,62]">乡村</option> <option value="[42,63]">布鲁斯</option> <option value="[42,64]">民谣</option> <option value="[42,92]">hiphop</option> <option value="[42,95]">disco</option> </optgroup> <optgroup label="日韩"> <option value="[43,67]">说唱</option> <option value="[43,68]">电音</option> <option value="[43,85]">摇滚</option> <option value="[43,69]">动漫</option> <option value="[43,65]">j-pop</option> <option value="[43,66]">k-pop</option> </optgroup> <optgroup label="趣味"> <option value="[44,70]">萌宠</option> <option value="[44,88]">儿童</option> <option value="[44,71]">段子</option> <option value="[44,87]">可爱</option> <option value="[44,90]">幽默</option> </optgroup> </select> </div> <div class="submit-modal-group"> <label for="music" class="submit-modal-label label-not-null">歌曲名</label> <input class="submit-modal-input" name="title" type="text"> </div> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">封面文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传封面文件</div> <!-- 封面文件 --> <input class="submit-modal-name" disabled="disabled" id="coverName" name="coverName"> <input name="file" id="coverFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="cover_uri" id="cover_uri" type="text"> </div> </div> <p class="submit-modal-tips">推荐上传正方形封面</p> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">视频文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传视频文件</div> <!-- 视频文件 --> <input class="submit-modal-name" disabled="disabled" id="musicName" name="musicName"> <input name="file" id="musicFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="song_uri" id="song_uri" type="text"> </div> </div> <p class="submit-modal-tips">支持mp3/wav格式，且音质在320kb以上，文件不超过200MB</p> <div class="submit-modal-group" id="if-campus" style="margin-bottom: 5px;"> <label for="original_type" class="submit-modal-label label-not-null">是否参与校园好声音</label> <input class="" name="original_type" value="1" type="radio"> 是 <input class="" name="original_type" value="0" checked="checked" type="radio"> 否 </div> <p class="submit-modal-tips"> <a style="text-decoration: underline;" href="http://voice.yiban.cn/" target="_blank">查看校园好声音活动详情</a> </p> <div id="lyric-upload"> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label">歌词</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">解析歌词文件</div> <input class="submit-modal-name" disabled="disabled" id="lyricName" name="lyricName"> <input name="file" id="lyricFile" class="submit-modal-fileiput" accept=".lrc,.trc" type="file"> <input class="step-hide-input" name="lyric" id="lyric" type="text"> </div> </div> <p class="submit-modal-tips">支持lrc/trc格式</p> </div> <div id="music-upload"> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">曲谱文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传曲谱文件</div> <input class="submit-modal-name" disabled="disabled" id="qupuName" name="qupuName"> <input name="file" id="qupuFile" class="submit-modal-fileiput" accept="image/*, application/pdf" type="file"> <input class="step-hide-input" name="qupu_uri" id="qupu_uri" type="text"> </div> </div> <p class="submit-modal-tips">支持图片格式和pdf格式</p> </div> <div class="submit-step-button-group"> <input class="step-button-disable" disabled="disabled" value="确认添加" id="submitBtn" type="submit"> <div class="step-button" id="hideModalBtn">取消</div> </div> </form> </div> </div> </div> </div> <script>$(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/submitMusic/submit'); })</script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> <script src="register-add-music_files/index_7a47cdc.js"></script> <script src="register-add-music_files/es6-promise.js"></script> <script src="register-add-music_files/promise.js"></script> <script src="register-add-music_files/file_f9a5ca7.js"></script> <script src="register-add-music_files/form_ebcf55b.js"></script> <script src="register-add-music_files/toast_d6fd98c.js"></script> <script src="register-add-music_files/dropkick_7018fdd.js"></script> <script src="register-add-music_files/xss_6a7474d.js"></script> <script src="register-add-music_files/submit_9e6c0af.js"></script> </body> </html>
上传封面文件和上传视频文件
上传封面文件input
<div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">封面文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传封面文件</div> <!-- 封面文件 --> <input class="submit-modal-name" disabled="disabled" id="coverName" name="coverName"> <input name="file" id="coverFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="cover_uri" id="cover_uri" type="text"> </div> </div>
上传视频文件input
<div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">视频文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传视频文件</div> <!-- 视频文件 --> <input class="submit-modal-name" disabled="disabled" id="musicName" name="musicName"> <input name="file" id="musicFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="song_uri" id="song_uri" type="text"> </div> </div>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script async="" src="register-add-music_files/analytics.js"></script> <script src="register-add-music_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_apply_submit', ignoreAjax : [], ignoreStatic : [] }); </script> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register-add-music_files/base_4a834a9.css"> <link rel="stylesheet" href="register-add-music_files/base_ce73669.css"> <link rel="stylesheet" href="register-add-music_files/dropkick_1b1894b.css"> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script src="register-add-music_files/core_1f49c51.js"></script> <script src="register-add-music_files/jquery.js"></script> <script src="register-add-music_files/raven_8c2f9e8.js"></script> <script> window.PAGEVIEW_NAME = '/musician_apply_submit/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register-add-music_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register-add-music_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register-add-music_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status" style="display: inline;">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_2_active_5b30557.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">提交作品</p> <p class="submit-step-tips-musi"> 建议整曲和剪辑版本（如副歌部分）一起提交，30s-60s的剪辑版本更适合抖音拍摄和传播哦 <br> 歌曲的剪辑版本建议命名为歌名-剪辑版，更方便被推荐~ </p> <div class="step-form-submit"> <div class="submit-step-upload" id="showModalBtn">+ 添加音乐</div> <div class="submit-tab-group"> <button id="showMusic" class="submit-tab-btn" style="color: #4a4a4a">已提交 </button> <span class="submit-tab-btn">|</span> <button id="showAdded" class="submit-tab-btn" style="color: #ccc" disabled="disabled"> 新增项</button> </div> <div class="submit-music-container"> <div class="submit-music-header"> <div class="submit-music-cover">封面</div> <div class="submit-music-name">音乐</div> <div class="submit-music-audio">试听</div> <div class="submit-music-campus">是否高校好声音</div> </div> <div id="musicListCont" class="submit-music-list">暂无作品，点击添加音乐添加你的作品～</div> </div> <div class="submit-music-pages" id="pages"> <button id="pagePre" class="submit-music-page-btn" disabled="disabled" style="color: #ccc"><上一页</button> <span>/</span> <button id="pageNxt" class="submit-music-page-btn" disabled="disabled" style="color: #ccc">下一页 ></button> </div> <div class="submit-step-button-group"> <div class="step-button" id="submitApply">提交</div> </div> <div class="submit-modal" id="modal"> <div class="submit-modal-container" id="modalContainer"> <p class="step-title">添加音乐</p> <form class="submit-modal-form" id="uploadMusicForm" novalidate="novalidate"> <div class="submit-modal-group"> <label class="submit-modal-label label-not-null">风格</label> <div class="dk-select step-select" id="dk0-stepSelect" style="margin-left: -200px"> <ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"> <li class="dk-optgroup"> <div class="dk-optgroup-label">中文</div> <ul class="dk-optgroup-options"> <li class="dk-option dk-option-selected" data-value="[41,49]" text="流行" role="option" aria-selected="true" id="dk0-[41,49]">流行</li> <li class="dk-option " data-value="[41,50]" text="说唱" role="option" aria-selected="false" id="dk0-[41,50]">说唱</li> <li class="dk-option " data-value="[41,51]" text="电音" role="option" aria-selected="false" id="dk0-[41,51]">电音</li> <li class="dk-option " data-value="[41,53]" text="民谣" role="option" aria-selected="false" id="dk0-[41,53]">民谣</li> <li class="dk-option " data-value="[41,56]" text="动漫" role="option" aria-selected="false" id="dk0-[41,56]">动漫</li> <li class="dk-option " data-value="[41,54]" text="古风" role="option" aria-selected="false" id="dk0-[41,54]">古风</li> <li class="dk-option " data-value="[41,55]" text="摇滚" role="option" aria-selected="false" id="dk0-[41,55]">摇滚</li> <li class="dk-option " data-value="[41,93]" text="disco" role="option" aria-selected="false" id="dk0-[41,93]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">欧美</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[42,57]" text="流行" role="option" aria-selected="false" id="dk0-[42,57]">流行</li> <li class="dk-option " data-value="[42,58]" text="说唱" role="option" aria-selected="false" id="dk0-[42,58]">说唱</li> <li class="dk-option " data-value="[42,59]" text="电音" role="option" aria-selected="false" id="dk0-[42,59]">电音</li> <li class="dk-option " data-value="[42,61]" text="爵士" role="option" aria-selected="false" id="dk0-[42,61]">爵士</li> <li class="dk-option " data-value="[42,62]" text="乡村" role="option" aria-selected="false" id="dk0-[42,62]">乡村</li> <li class="dk-option " data-value="[42,63]" text="布鲁斯" role="option" aria-selected="false" id="dk0-[42,63]">布鲁斯</li> <li class="dk-option " data-value="[42,64]" text="民谣" role="option" aria-selected="false" id="dk0-[42,64]">民谣</li> <li class="dk-option " data-value="[42,92]" text="hiphop" role="option" aria-selected="false" id="dk0-[42,92]">hiphop</li> <li class="dk-option " data-value="[42,95]" text="disco" role="option" aria-selected="false" id="dk0-[42,95]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">日韩</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[43,67]" text="说唱" role="option" aria-selected="false" id="dk0-[43,67]">说唱</li> <li class="dk-option " data-value="[43,68]" text="电音" role="option" aria-selected="false" id="dk0-[43,68]">电音</li> <li class="dk-option " data-value="[43,85]" text="摇滚" role="option" aria-selected="false" id="dk0-[43,85]">摇滚</li> <li class="dk-option " data-value="[43,69]" text="动漫" role="option" aria-selected="false" id="dk0-[43,69]">动漫</li> <li class="dk-option " data-value="[43,65]" text="j-pop" role="option" aria-selected="false" id="dk0-[43,65]">j-pop</li> <li class="dk-option " data-value="[43,66]" text="k-pop" role="option" aria-selected="false" id="dk0-[43,66]">k-pop</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">趣味</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[44,70]" text="萌宠" role="option" aria-selected="false" id="dk0-[44,70]">萌宠</li> <li class="dk-option " data-value="[44,88]" text="儿童" role="option" aria-selected="false" id="dk0-[44,88]">儿童</li> <li class="dk-option " data-value="[44,71]" text="段子" role="option" aria-selected="false" id="dk0-[44,71]">段子</li> <li class="dk-option " data-value="[44,87]" text="可爱" role="option" aria-selected="false" id="dk0-[44,87]">可爱</li> <li class="dk-option " data-value="[44,90]" text="幽默" role="option" aria-selected="false" id="dk0-[44,90]">幽默</li> </ul> </li> </ul> </div> <select class="step-select" id="stepSelect" name="style" data-dkcacheid="0"> <optgroup label="中文"> <option value="[41,49]" selected="selected">流行</option> <option value="[41,50]">说唱</option> <option value="[41,51]">电音</option> <option value="[41,53]">民谣</option> <option value="[41,56]">动漫</option> <option value="[41,54]">古风</option> <option value="[41,55]">摇滚</option> <option value="[41,93]">disco</option> </optgroup> <optgroup label="欧美"> <option value="[42,57]">流行</option> <option value="[42,58]">说唱</option> <option value="[42,59]">电音</option> <option value="[42,61]">爵士</option> <option value="[42,62]">乡村</option> <option value="[42,63]">布鲁斯</option> <option value="[42,64]">民谣</option> <option value="[42,92]">hiphop</option> <option value="[42,95]">disco</option> </optgroup> <optgroup label="日韩"> <option value="[43,67]">说唱</option> <option value="[43,68]">电音</option> <option value="[43,85]">摇滚</option> <option value="[43,69]">动漫</option> <option value="[43,65]">j-pop</option> <option value="[43,66]">k-pop</option> </optgroup> <optgroup label="趣味"> <option value="[44,70]">萌宠</option> <option value="[44,88]">儿童</option> <option value="[44,71]">段子</option> <option value="[44,87]">可爱</option> <option value="[44,90]">幽默</option> </optgroup> </select> </div> <div class="submit-modal-group"> <label for="music" class="submit-modal-label label-not-null">歌曲名</label> <input class="submit-modal-input" name="title" type="text"> </div> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">封面文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传封面文件</div> <!-- 封面文件 --> <input class="submit-modal-name" disabled="disabled" id="coverName" name="coverName"> <input name="file" id="coverFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="cover_uri" id="cover_uri" type="text"> </div> </div> <p class="submit-modal-tips">推荐上传正方形封面</p> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">视频文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传视频文件</div> <!-- 视频文件 --> <input class="submit-modal-name" disabled="disabled" id="musicName" name="musicName"> <input name="file" id="musicFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="song_uri" id="song_uri" type="text"> </div> </div> <p class="submit-modal-tips">支持mp3/wav格式，且音质在320kb以上，文件不超过200MB</p> <!-- 上传按钮 --> <div class="submit-modal-group" id="if-campus" style="margin-bottom: 5px;"> <label for="original_type" class="submit-modal-label label-not-null">点击这里上传视频</label> <input class="step-button" value="确认上传" id="submitBtn" type="button"> </div> <div class="submit-step-button-group"> <input class="step-button" value="确认添加" id="submitBtn" type="submit"> <div class="step-button" id="hideModalBtn">取消</div> </div> </form> </div> </div> </div> </div> <script>$(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/submitMusic/submit'); })</script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> <script src="register-add-music_files/index_7a47cdc.js"></script> <script src="register-add-music_files/es6-promise.js"></script> <script src="register-add-music_files/promise.js"></script> <script src="register-add-music_files/file_f9a5ca7.js"></script> <script src="register-add-music_files/form_ebcf55b.js"></script> <script src="register-add-music_files/toast_d6fd98c.js"></script> <script src="register-add-music_files/dropkick_7018fdd.js"></script> <script src="register-add-music_files/xss_6a7474d.js"></script> <script src="register-add-music_files/submit_9e6c0af.js"></script> </body> </html>
添加上传封面和上传视频至腾讯云服务器
上传封面
<input onchange="addCover(this)" name="file" id="coverFile" class="submit-modal-fileiput" type="file">
上传视频
<input onchange="addVideo(this)" name="file" id="musicFile" class="submit-modal-fileiput" type="file">
给上传的封面文件添加id
<input id="cover-file-name" class="submit-modal-name" disabled="disabled" name="coverName">
给上传的视频文件添加id
<input id="video-file-name" class="submit-modal-name" disabled="disabled" name="musicName">
视频上传核心代码
// 初始化 var videoFile = null; var coverFile = null; //得到加密后的字符 串 var getSignature = function(callback) { $.ajax({ url:[[@{~/sign}]], type:"POST", success:function(result) { callback(result); } }) } //当videoinput改变时会调用这个函 数 function addVideo(e) { // alert(e.files[0].name); videoFile=e.files[0]; $("#video-file-name").val(e.files[0].name); } //当cover改变时会调用这个函 数 function addCover(e) { // alert(e.files[0].name); coverFile = e.files[0]; $("#cover-file-name").val(e.files[0].name); } //上传视频和封 面 function upload() { alert(videoFile.name); alert(coverFile.name); qcVideo.ugcUploader.start({ //视频 videoFile:videoFile, //封面 coverFile:coverFile, //sign getSignature:getSignature, //allowAudio allowAudio:1, success:function(result) { }, errer:function(result) { alert("上传失败"); }, progress:function(result) { $("[name=videoCurr]").text(Math.floor(result.curr*100)+"%"); $("[name=coverCurr]").text(Math.floor(result.curr*100)+"%"); }, finish:function(result) { alert("上传成功"); } }) }
VideoController.java接收获得链接自己腾讯云服务器
package com.Gary.shakes.controller; import java.util.Random; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.utils.Signature; @RestController public class VideoController { //给页面一个加密后的字符串 @RequestMapping("/sign") @ResponseBody public String sign() { //得到加密后的字符串sign Signature sign = new Signature(); //id sign.setSecretId("AKIDkNsDQWZOYYVSHu49kDh9Uh1FSo3BsnLm"); //key sign.setSecretKey("XDn1a3NWzN0Tp4vH3zpSp5fEX2Rq9KYg"); //当前的时间 sign.setCurrentTime(System.currentTimeMillis()/1000); //随机数 sign.setRandom(new Random().nextInt(Integer.MAX_VALUE)); //xxx sign.setSignValidDuration(3600*24*2); //得到sign String signature = null; try { signature = sign.getUploadSignature(); System.out.println("signature："+signature); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return signature; } }
Signature.java返回链接自己腾讯云服务器的秘钥
package com.Gary.shakes.utils; import javax.crypto.Mac; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Encoder; public class Signature { private String secretId; private String secretKey; private long currentTime; private int random; private int signValidDuration; private static final String HMAC_ALGORITHM = "HmacSHA1"; private static final String CONTENT_CHARSET = "UTF-8"; public static byte[] byteMerger(byte[] byte1, byte[] byte2) { byte[] byte3 = new byte[byte1.length + byte2.length]; System.arraycopy(byte1, 0, byte3, 0, byte1.length); System.arraycopy(byte2, 0, byte3, byte1.length, byte2.length); return byte3; } public String getUploadSignature() throws Exception { String strSign = ""; String contextStr = ""; long endTime = (currentTime + signValidDuration); contextStr += "secretId=" + java.net.URLEncoder.encode(secretId, "utf8"); contextStr += "¤tTimeStamp=" + currentTime; contextStr += "&expireTime=" + endTime; contextStr += "&random=" + random; try { Mac mac = Mac.getInstance(HMAC_ALGORITHM); SecretKeySpec secretKey = new SecretKeySpec(this.secretKey.getBytes(CONTENT_CHARSET), mac.getAlgorithm()); mac.init(secretKey); byte[] hash = mac.doFinal(contextStr.getBytes(CONTENT_CHARSET)); byte[] sigBuf = byteMerger(hash, contextStr.getBytes("utf8")); strSign = new String(new BASE64Encoder().encode(sigBuf).getBytes()); strSign = strSign.replace(" ", "").replace("\n", "").replace("\r", ""); } catch (Exception e) { throw e; } return strSign; } public void setSecretId(String secretId) { this.secretId = secretId; } public void setSecretKey(String secretKey) { this.secretKey = secretKey; } public void setCurrentTime(long currentTime) { this.currentTime = currentTime; } public void setRandom(int random) { this.random = random; } public void setSignValidDuration(int signValidDuration) { this.signValidDuration = signValidDuration; } }
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script async="" src="register-add-music_files/analytics.js"></script> <script src="register-add-music_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_apply_submit', ignoreAjax : [], ignoreStatic : [] }); </script> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register-add-music_files/base_4a834a9.css"> <link rel="stylesheet" href="register-add-music_files/base_ce73669.css"> <link rel="stylesheet" href="register-add-music_files/dropkick_1b1894b.css"> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script src="register-add-music_files/core_1f49c51.js"></script> <script src="register-add-music_files/jquery.js"></script> <script src="register-add-music_files/raven_8c2f9e8.js"></script> <script> window.PAGEVIEW_NAME = '/musician_apply_submit/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register-add-music_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register-add-music_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register-add-music_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status" style="display: inline;">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_2_active_5b30557.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">提交作品</p> <p class="submit-step-tips-musi"> 建议整曲和剪辑版本（如副歌部分）一起提交，30s-60s的剪辑版本更适合抖音拍摄和传播哦 <br> 歌曲的剪辑版本建议命名为歌名-剪辑版，更方便被推荐~ </p> <div class="step-form-submit"> <div class="submit-step-upload" id="showModalBtn">+ 添加音乐</div> <div class="submit-tab-group"> <button id="showMusic" class="submit-tab-btn" style="color: #4a4a4a">已提交 </button> <span class="submit-tab-btn">|</span> <button id="showAdded" class="submit-tab-btn" style="color: #ccc" disabled="disabled"> 新增项</button> </div> <div class="submit-music-container"> <div class="submit-music-header"> <div class="submit-music-cover">封面</div> <div class="submit-music-name">音乐</div> <div class="submit-music-audio">试听</div> <div class="submit-music-campus">是否高校好声音</div> </div> <div id="musicListCont" class="submit-music-list">暂无作品，点击添加音乐添加你的作品～</div> </div> <div class="submit-music-pages" id="pages"> <button id="pagePre" class="submit-music-page-btn" disabled="disabled" style="color: #ccc"><上一页</button> <span>/</span> <button id="pageNxt" class="submit-music-page-btn" disabled="disabled" style="color: #ccc">下一页 ></button> </div> <div class="submit-step-button-group"> <div class="step-button" id="submitApply">提交</div> </div> <div class="submit-modal" id="modal"> <div class="submit-modal-container" id="modalContainer"> <p class="step-title">添加音乐</p> <form class="submit-modal-form" id="uploadMusicForm" novalidate="novalidate"> <div class="submit-modal-group"> <label class="submit-modal-label label-not-null">风格</label> <div class="dk-select step-select" id="dk0-stepSelect" style="margin-left: -200px"> <ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"> <li class="dk-optgroup"> <div class="dk-optgroup-label">中文</div> <ul class="dk-optgroup-options"> <li class="dk-option dk-option-selected" data-value="[41,49]" text="流行" role="option" aria-selected="true" id="dk0-[41,49]">流行</li> <li class="dk-option " data-value="[41,50]" text="说唱" role="option" aria-selected="false" id="dk0-[41,50]">说唱</li> <li class="dk-option " data-value="[41,51]" text="电音" role="option" aria-selected="false" id="dk0-[41,51]">电音</li> <li class="dk-option " data-value="[41,53]" text="民谣" role="option" aria-selected="false" id="dk0-[41,53]">民谣</li> <li class="dk-option " data-value="[41,56]" text="动漫" role="option" aria-selected="false" id="dk0-[41,56]">动漫</li> <li class="dk-option " data-value="[41,54]" text="古风" role="option" aria-selected="false" id="dk0-[41,54]">古风</li> <li class="dk-option " data-value="[41,55]" text="摇滚" role="option" aria-selected="false" id="dk0-[41,55]">摇滚</li> <li class="dk-option " data-value="[41,93]" text="disco" role="option" aria-selected="false" id="dk0-[41,93]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">欧美</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[42,57]" text="流行" role="option" aria-selected="false" id="dk0-[42,57]">流行</li> <li class="dk-option " data-value="[42,58]" text="说唱" role="option" aria-selected="false" id="dk0-[42,58]">说唱</li> <li class="dk-option " data-value="[42,59]" text="电音" role="option" aria-selected="false" id="dk0-[42,59]">电音</li> <li class="dk-option " data-value="[42,61]" text="爵士" role="option" aria-selected="false" id="dk0-[42,61]">爵士</li> <li class="dk-option " data-value="[42,62]" text="乡村" role="option" aria-selected="false" id="dk0-[42,62]">乡村</li> <li class="dk-option " data-value="[42,63]" text="布鲁斯" role="option" aria-selected="false" id="dk0-[42,63]">布鲁斯</li> <li class="dk-option " data-value="[42,64]" text="民谣" role="option" aria-selected="false" id="dk0-[42,64]">民谣</li> <li class="dk-option " data-value="[42,92]" text="hiphop" role="option" aria-selected="false" id="dk0-[42,92]">hiphop</li> <li class="dk-option " data-value="[42,95]" text="disco" role="option" aria-selected="false" id="dk0-[42,95]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">日韩</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[43,67]" text="说唱" role="option" aria-selected="false" id="dk0-[43,67]">说唱</li> <li class="dk-option " data-value="[43,68]" text="电音" role="option" aria-selected="false" id="dk0-[43,68]">电音</li> <li class="dk-option " data-value="[43,85]" text="摇滚" role="option" aria-selected="false" id="dk0-[43,85]">摇滚</li> <li class="dk-option " data-value="[43,69]" text="动漫" role="option" aria-selected="false" id="dk0-[43,69]">动漫</li> <li class="dk-option " data-value="[43,65]" text="j-pop" role="option" aria-selected="false" id="dk0-[43,65]">j-pop</li> <li class="dk-option " data-value="[43,66]" text="k-pop" role="option" aria-selected="false" id="dk0-[43,66]">k-pop</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">趣味</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[44,70]" text="萌宠" role="option" aria-selected="false" id="dk0-[44,70]">萌宠</li> <li class="dk-option " data-value="[44,88]" text="儿童" role="option" aria-selected="false" id="dk0-[44,88]">儿童</li> <li class="dk-option " data-value="[44,71]" text="段子" role="option" aria-selected="false" id="dk0-[44,71]">段子</li> <li class="dk-option " data-value="[44,87]" text="可爱" role="option" aria-selected="false" id="dk0-[44,87]">可爱</li> <li class="dk-option " data-value="[44,90]" text="幽默" role="option" aria-selected="false" id="dk0-[44,90]">幽默</li> </ul> </li> </ul> </div> <select class="step-select" id="stepSelect" name="style" data-dkcacheid="0"> <optgroup label="中文"> <option value="[41,49]" selected="selected">流行</option> <option value="[41,50]">说唱</option> <option value="[41,51]">电音</option> <option value="[41,53]">民谣</option> <option value="[41,56]">动漫</option> <option value="[41,54]">古风</option> <option value="[41,55]">摇滚</option> <option value="[41,93]">disco</option> </optgroup> <optgroup label="欧美"> <option value="[42,57]">流行</option> <option value="[42,58]">说唱</option> <option value="[42,59]">电音</option> <option value="[42,61]">爵士</option> <option value="[42,62]">乡村</option> <option value="[42,63]">布鲁斯</option> <option value="[42,64]">民谣</option> <option value="[42,92]">hiphop</option> <option value="[42,95]">disco</option> </optgroup> <optgroup label="日韩"> <option value="[43,67]">说唱</option> <option value="[43,68]">电音</option> <option value="[43,85]">摇滚</option> <option value="[43,69]">动漫</option> <option value="[43,65]">j-pop</option> <option value="[43,66]">k-pop</option> </optgroup> <optgroup label="趣味"> <option value="[44,70]">萌宠</option> <option value="[44,88]">儿童</option> <option value="[44,71]">段子</option> <option value="[44,87]">可爱</option> <option value="[44,90]">幽默</option> </optgroup> </select> </div> <div class="submit-modal-group"> <label for="music" class="submit-modal-label label-not-null">歌曲名</label> <input class="submit-modal-input" name="title" type="text"> </div> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">封面文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传封面文件</div> <!-- 封面文件 --> <input id="cover-file-name" class="submit-modal-name" disabled="disabled" name="coverName"> <input onchange="addCover(this)" name="file" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="cover_uri" type="text"> <span name="coverCurr"></span> </div> </div> <p class="submit-modal-tips">推荐上传正方形封面</p> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">视频文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传视频文件</div> <!-- 视频文件 --> <input id="video-file-name" class="submit-modal-name" disabled="disabled" name="musicName"> <input onchange="addVideo(this)" name="file" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="song_uri" type="text"> <span name="videoCurr"></span> </div> </div> <p class="submit-modal-tips">支持mp3/wav格式，且音质在320kb以上，文件不超过200MB</p> <!-- 上传按钮 --> <div class="submit-modal-group" id="if-campus" style="margin-bottom: 5px;"> <label for="original_type" class="submit-modal-label label-not-null">点击这里上传视频</label> <input class="step-button" onclick="upload()" value="上传视频和封面" type="button"> </div> <div class="submit-step-button-group"> <input class="step-button" value="确认添加" type="submit"> <div class="step-button" id="hideModalBtn">取消</div> </div> </form> </div> </div> </div> </div> <script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script> <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript" th:inline="javascript"> // 初始化 var videoFile = null; var coverFile = null; //得到加密后的字符 串 var getSignature = function(callback) { $.ajax({ url:[[@{~/sign}]], type:"POST", success:function(result) { callback(result); } }) } //当videoinput改变时会调用这个函 数 function addVideo(e) { // alert(e.files[0].name); videoFile=e.files[0]; $("#video-file-name").val(e.files[0].name); } //当cover改变时会调用这个函 数 function addCover(e) { // alert(e.files[0].name); coverFile = e.files[0]; $("#cover-file-name").val(e.files[0].name); } //上传视频和封 面 function upload() { alert(videoFile.name); alert(coverFile.name); qcVideo.ugcUploader.start({ //视频 videoFile:videoFile, //封面 coverFile:coverFile, //sign getSignature:getSignature, //allowAudio allowAudio:1, success:function(result) { }, errer:function(result) { alert("上传失败"); }, progress:function(result) { $("[name=videoCurr]").text(Math.floor(result.curr*100)+"%"); $("[name=coverCurr]").text(Math.floor(result.curr*100)+"%"); }, finish:function(result) { alert("上传成功"); } }) } $(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/submitMusic/submit'); })</script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install(); </script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> <script src="register-add-music_files/index_7a47cdc.js"></script> <script src="register-add-music_files/es6-promise.js"></script> <script src="register-add-music_files/promise.js"></script> <script src="register-add-music_files/file_f9a5ca7.js"></script> <script src="register-add-music_files/form_ebcf55b.js"></script> <script src="register-add-music_files/toast_d6fd98c.js"></script> <script src="register-add-music_files/dropkick_7018fdd.js"></script> <script src="register-add-music_files/xss_6a7474d.js"></script> <script src="register-add-music_files/submit_9e6c0af.js"></script> </body> </html>
---恢复内容结束---
JavaWeb-SpringBoot(抖音)_一、抖音项目制作 传送门
JavaWeb-SpringBoot(抖音)_二、服务器间通讯 传送门
JavaWeb-SpringBoot(抖音)_三、抖音项目后续 传送门
使用Gradle编译项目 传送门
腾讯视频云点播 传送门
各个功能模块的默认配置文件application.properties
#thymeleaf编码 spring.thymeleaf.encoding=UTF-8 #热部署静态文件 spring.thymeleaf.cache=false #遵循HTML5的标准 spring.thymeleaf.mode=HTML5 #使用H2的控制台 spring.h2.console.enabled=true #Datasource spring.datasource.url=jdbc:mysql:///shakes?serverTimezone=UTC&characterEncoding=utf-8 spring.datasource.username=root spring.datasource.password=123456 spring.datasource.driver-class-name=com.mysql.jdbc.Driver #设置JPA spring.jpa.show-sql=true spring.jpa.hibernate.ddl-auto=update
实现过程
浏览项目资源
index.htm页面中添加thymeleaf标签，实现index.htm页面的跳转
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
@RestController public class ToController { @RequestMapping("/toindex") public ModelAndView index() { return new ModelAndView("/index.htm"); } }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>【抖音短视频】记录美好生活-Douyin.com</title><meta charset="utf-8"><script async="" src="index_files/analytics.js"></script><script src="index_files/slardar.js"></script><script>window.Slardar && window.Slardar.install({ sampleRate: 1, bid: 'douyin_web', pid: 'index_page', ignoreAjax: [], ignoreStatic: [] });</script><script src="index_files/raven_8c2f9e8.js"></script> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音、抖音音乐、抖音短视频、抖音官网、amemv"> <meta name="description" content="抖音短视频-记录美好生活的视频平台"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"><meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"><link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"><link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"><link rel="dns-prefetch" href="https://s1.pstatp.com/"><link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="index_files/base_4a834a9.css"> <link rel="stylesheet" href="index_files/index_bb583a6.css"><!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--><script src="index_files/core_1f49c51.js"></script> <script>// BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function(){}; (function(){ var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function (t, e, a, n, s, c){t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function (){ (t[s].q = t[s].q || []).push(arguments)}, t[s].t = 1 * new Date, t[s].s = c;var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0].appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, {'sampleRate': sampleRate}); ba('send', 'pageview'); baevent = function(category, action, label, value){ console.log("ba:"+category+","+action+","+label); if(category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value: 1); } }; })();</script><script async="" src="index_files/analytics_002.js"></script> <script>var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush=function(){}; var gaevent=function(){}; var gapageview=function(){}; var trackPV = gapageview; var sampleRate = 20; function initGA(){ if(sampleRate && gaAccount){ window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if(typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); // Replace with your property ID. ga('create', gaAccount, {'sampleRate': sampleRate}); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label){ gaevent('event',ga_event,ga_label); }; gaevent = function(category, action, label, value){ if(test_channel.indexOf(action) >-1) label = label+test_version; console.log("ga:"+category+","+action+","+label); if(category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value: 1); } if(typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html").on('click', '[ga_event]', function(e){ var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category,ga_event,ga_label); if($this.is('a')){ var href = $this.attr('href')||'', target = this.target; if(!( href[0]==='#' || target === "_blank" || e.isDefaultPrevented())) { setTimeout(function(){ location.href = href },400); return false } } }); } } initGA();</script> <link rel="stylesheet" href="index_files/index_75c3105.css"></head><body><div class="container"><div class="video-bg"><video muted="muted" data-autoplay="" loop="loop" autoplay="autoplay" src="index_files/tvc-v2_30097df.mp4" class="video-tvc" id="video-tvc" data-object-fit="">抱歉，您的浏览器不支持内嵌视频</video></div><div class="content"><header class="header claerFloat"><div class="header-left"><a href="https://www.douyin.com/"><img src="index_files/logo_efcda07.png" alt="logo"></a></div><div class="header-right"><ul class="header-links"><li class="header-links-item"><a href="https://musician.douyin.com/">抖音音乐人</a></li><li class="header-links-item"><a href="https://www.douyin.com/certification/agency/enter/">机构认证</a></li><li class="header-links-item"><a href="https://www.douyin.com/enterprise_auth/">企业认证</a></li><li class="header-links-item"><div class="unmute"></div></li></ul></div></header><div class="middle clearFloat"><div class="slogan"><img src="index_files/slogan_2_8d59f13.png" alt="slogan"></div><div class="btn-list"><a class="btn-primary icon-QRcode"><img src="index_files/QRcode_c129445.png" alt="qrcode"></a><div class="btn-primary"><a class="btn-hover icon-ios btn-link" href="https://itunes.apple.com/us/app/a.me-yin-le-duan-shi-pin-she-qu/id1142110895?l=zh&ls=1&mt=8"></a></div><div class="btn-primary"><a class="btn-hover icon-andorid btn-link" href="http://s.toutiao.com/UsMYE/"></a></div></div></div><footer class="footer"><nav class="nav-warpper"><span>|</span> <a href="https://www.douyin.com/cnl_music/music_tab/">音乐</a> <span>|</span><a href="https://www.douyin.com/agreement/">用户服务协议</a> <span>|</span> <a href="https://www.douyin.com/privacy/">隐私政策</a> <span>|</span> <a href="https://www.douyin.com/recovery_account/">账号找回</a> <span>|</span> <a href="https://www.douyin.com/aboutus/">联系我们</a> <span>|</span> <a href="https://ad.toutiao.com/promotion/?source2=dou">广告投放</a> <span>|</span></nav><div class="feedback-info"><p><span id="copyYear">2018</span> © 抖音 | 京ICP备16016397号-3 | 北京微播视界科技有限公司 | 京B2-20170846</p><p><a target="_blank" href="http://www.12377.cn/">中国互联网举报中心</a> | 网络文化许可证-京网文-（2016）2282-264号 | 违法和不良信息举报：010-83434212 | 举报邮箱：jubao@douyin.com</p> <div class="gongan-box"><img src="index_files/gongan_d0289dc.png"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023605">京公网安备 11010802023605号</a> <span> | 地址 : 北京市海淀区知春路51号4层408 </span></div></div></footer></div></div><script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'index_page' } }).install();</script><script>!function(){"use strict";if("undefined"!=typeof window){var t=window.navigator.userAgent.match(/Edge\/(\d{2})\./),e=!!t&&parseInt(t[1],10)>=16;if("objectFit"in document.documentElement.style!=0&&!e)return void(window.objectFitPolyfill=function(){return!1});var i=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),n=e.getPropertyValue("overflow"),o=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==n&&(t.style.overflow="hidden"),o&&"inline"!==o||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},n=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px",top:"auto",right:"auto",bottom:"auto",left:"auto","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px"};for(var n in i)e.getPropertyValue(n)!==i[n]&&(t.style[n]=i[n])},o=function(t){var e=t.parentNode;i(e),n(t),t.style.position="absolute",t.style.height="100%",t.style.width="auto",t.clientWidth>e.clientWidth?(t.style.top="0",t.style.marginTop="0",t.style.left="50%",t.style.marginLeft=t.clientWidth/-2+"px"):(t.style.width="100%",t.style.height="auto",t.style.left="0",t.style.marginLeft="0",t.style.top="50%",t.style.marginTop=t.clientHeight/-2+"px")},l=function(t){if(void 0===t)t=document.querySelectorAll("[data-object-fit]");else if(t&&t.nodeName)t=[t];else{if("object"!=typeof t||!t.length||!t[0].nodeName)return!1;t=t}for(var i=0;i<t.length;i++)if(t[i].nodeName){var n=t[i].nodeName.toLowerCase();"img"!==n||e?"video"===n&&(t[i].readyState>0?o(t[i]):t[i].addEventListener("loadedmetadata",function(){o(this)})):t[i].complete?o(t[i]):t[i].addEventListener("load",function(){o(this)})}return!0};document.addEventListener("DOMContentLoaded",function(){l()}),window.addEventListener("resize",function(){l()}),window.objectFitPolyfill=l}}();</script> <script type="text/javascript"> (function() { $(function() { $('#copyYear').text((new Date).getFullYear()); }) })(); </script> <script>var video = $('#video-tvc')[0]; if (~location.hostname.indexOf('iesdouyin')) { $('.gognan-box').remove() } $('.unmute').click(function() { if ($(this).hasClass('mute')) { video.muted = true; } else { video.muted = false; } $(this).toggleClass('mute') })</script></body></html>
package com.Gary.shakes.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; @RestController public class ToController { @RequestMapping("/toindex") public ModelAndView index() { return new ModelAndView("/index.htm"); } }
浏览四个重要的页面index.htm(首页)、login.htm(登录页)、register.htm(注册页)、music-people(上传音乐页面).htm
@RequestMapping("/toindex")
public ModelAndView index() {
return new ModelAndView("/index.htm");
}
@RequestMapping("/tologin")
public ModelAndView login() {
return new ModelAndView("/login.htm");
}
@RequestMapping("/toregister")
public ModelAndView register() {
return new ModelAndView("/register.htm");
}
@RequestMapping("/tomusic-people")
public ModelAndView musicPeople() {
return new ModelAndView("/music-people.htm");
}
index.htm(首页)
login.htm(登录页)
register.htm(注册页)
music-people(上传音乐页面).htm
完善index首页面部分
将index.htm中背景设置成腾讯用中的视频
<video muted="muted" data-autoplay="" loop="loop" autoplay="autoplay" src="http://1257737090.vod2.myqcloud.com/d7d12d2bvodcq1257737090/af5ce0b55285890785018543729/UkqGpcnKIHwA.mp4" class="video-tvc" id="video-tvc" data-object-fit="">抱歉，您的浏览器不支持内嵌视频 </video>
点击抖音音乐人，发送请求到tomusic-people
<li class="header-links-item"> <a th:href="@{~/tomusic-people}">抖音音乐人</a> </li>
使用Thymeleaf制作header项目登录头模板
模板文件单独放在src/main/resources/templates.fragments下header.html
将music-people.html中的头部替换成
<div th:replace="~{fragments/header::header}"> </div>
header.html中引入thymeleaf标签并编写头部模块代码
<body> <div class="header" th:fragment="header"> <div class="header-container"> <a href="https://musician.douyin.com/"> <div class="header-logo"> <img src="music-people_files/logo_08524dd.png" alt="logo"> </div> </a> <div class="header-login"> <a href="mailto:musician@bytedance.com" class="header-email"> <span class="header-email-icon"></span> <span>反馈及举报邮箱 musician@bytedance.com</span> </a> <!-- 未登录时候的样子 --> <a href="#" id="loginBtn"> <span class="header-user-icon"></span> <span>登录</span> </a> </div> </div> </div> </body>
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div class="header" th:fragment="header"> <div class="header-container"> <a href="https://musician.douyin.com/"> <div class="header-logo"> <img src="music-people_files/logo_08524dd.png" alt="logo"> </div> </a> <div class="header-login"> <a href="mailto:musician@bytedance.com" class="header-email"> <span class="header-email-icon"></span> <span>反馈及举报邮箱 musician@bytedance.com</span> </a> <!-- 未登录时候的样子 --> <a href="#" id="loginBtn"> <span class="header-user-icon"></span> <span>登录</span> </a> </div> </div> </div> </body> </html>
点击登录按钮触发事件
当点击music-people头部登录按钮时，修改跳转出来的登录提示
修改index_7a47cdc.js下的ModalTmplRender函数并在music-people.html下添加该代码
<div class="header-modal" id="headerModal"> <div class="header-modal-container" id="headerModalCont"> <p class="header-modal-content">Gary溫馨提示</p> <p class="header-modal-tips">如果已有抖音账号，请先到抖音app个人主页。点击右上角“…”—设置—账号管理，绑定手机号，再用该手机号来登录哦！</p> <a th:href="@{~/tologin}"> <div class="header-modal-button" id="modalBtn">我知道了</div> </a> </div> </div>
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="music-people_files/push.js"></script> <script async="" src="music-people_files/analytics.js"></script> <script src="music-people_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_home', ignoreAjax : [], ignoreStatic : [] }); </script> <title>抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <meta name="viewport" content="width=device-width,initial-scale=0.6,user-scalable=0"> <link rel="stylesheet" href="music-people_files/base_4a834a9.css"> <link rel="stylesheet" href="music-people_files/jquery.css"> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script src="music-people_files/core_1f49c51.js"></script> <script src="music-people_files/jquery.js"></script> <script src="music-people_files/lazyload.js"></script> <script> window.PAGEVIEW_NAME = '/musician_home/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="music-people_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="music-people_files/index_db26f14.css"> <link rel="stylesheet" href="music-people_files/index_eb57c76.css"> </head> <body style="overflow: hidden; height: 100%;" class="fp-viewing-0"> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="tips" id="tips">请复制链接，用电脑打开页面，成为抖音音乐人</div> <div id="fullpage" class="fullpage-container fullpage-wrapper" style="height: 100%; position: relative; touch-action: none; transform: translate3d(0px, 0px, 0px); transition: all 800ms ease 0s;"> <div class="section fp-section fp-table active fp-completely" id="section0" style="height: 910px;"> <div class="fp-tableCell" style="height: 910px;"> <div class="page-0 page" id="page0"> <div class="page-0-button-group"> <div class="page-0-header-title"> <img alt="抖音原创音乐人，看见音乐计划" src="music-people_files/page-1-title_8c7b323.png"> </div> <div class="page-0-upload" id="uploadBtn"> <a href="#"> <img class="page-0-note" alt="音乐" src="music-people_files/note_e4af899.png"> <img alt="上传音乐" src="music-people_files/upload_a97fd1d.png"> </a> </div> </div> <div class="page-0-footer"> <div class="page-0-title"> <div class="page-0-line page-0-line-l"></div> <div class="page-0-txt">已入驻抖音音乐人</div> <div class="page-0-line page-0-line-r"></div> </div> <div class="page-0-musician-container"> <div class="page-0-musician-group" id="musicianGroup" style="transition: transform 1s ease 0s; transform: translateX(-5778px);"> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/1_491ccad.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/1_491ccad.jpg");"></div> <div class="page-0-nickname">金志文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/63_794e555.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/63_794e555.jpg");"></div> <div class="page-0-nickname">吉克隽逸</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/69_6408d77.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/69_6408d77.jpg");"></div> <div class="page-0-nickname">Tizzy T</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/54_8d93189.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/54_8d93189.jpg");"></div> <div class="page-0-nickname">白举纲</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/7_e2400d0.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/7_e2400d0.jpg");"></div> <div class="page-0-nickname">李斯丹妮</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/71_efad62a.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/71_efad62a.jpg");"></div> <div class="page-0-nickname">艾菲</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/5_18df1de.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/5_18df1de.jpg");"></div> <div class="page-0-nickname">万妮达</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/24_1b3cacb.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/24_1b3cacb.jpg");"></div> <div class="page-0-nickname">刘美麟</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/14_331fff3.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/14_331fff3.jpg");"></div> <div class="page-0-nickname">阿肆</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/39_ae80033.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/39_ae80033.jpg");"></div> <div class="page-0-nickname">于文文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/57_6c4c5f0.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/57_6c4c5f0.jpg");"></div> <div class="page-0-nickname">鬼卞</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/31_adfb8a2.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/31_adfb8a2.jpg");"></div> <div class="page-0-nickname">孙八一</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/58_287c7c1.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/58_287c7c1.jpg");"></div> <div class="page-0-nickname">李行亮</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/66_ca2b2fc.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/66_ca2b2fc.jpg");"></div> <div class="page-0-nickname">牛奶咖啡</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/70_5fcc52c.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/70_5fcc52c.jpg");"></div> <div class="page-0-nickname">打扰一下</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/60_e95dde3.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/60_e95dde3.jpg");"></div> <div class="page-0-nickname">mr.miss</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/15_55b0ddd.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/15_55b0ddd.jpg");"></div> <div class="page-0-nickname">敖犬</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/2_c82018c.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/2_c82018c.jpg");"></div> <div class="page-0-nickname">2-DO</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/3_bf0e2c0.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/3_bf0e2c0.jpg");"></div> <div class="page-0-nickname">庄心妍</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/4_b2da1aa.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/4_b2da1aa.jpg");"></div> <div class="page-0-nickname">反光镜乐队</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/6_b211ca0.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/6_b211ca0.jpg");"></div> <div class="page-0-nickname">南征北战</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/8_87e9234.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/8_87e9234.jpg");"></div> <div class="page-0-nickname">徐云霄</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/9_bd233dd.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/9_bd233dd.jpg");"></div> <div class="page-0-nickname">段林希</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/10_0614943.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/10_0614943.jpg");"></div> <div class="page-0-nickname">许佳麟</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/11_a6d8183.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/11_a6d8183.jpg");"></div> <div class="page-0-nickname">布偶乐队</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/12_cb38371.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/12_cb38371.jpg");"></div> <div class="page-0-nickname">白光组合</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/13_b7cec37.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/13_b7cec37.jpg");"></div> <div class="page-0-nickname">阿克江</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/16_3a189cd.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/16_3a189cd.jpg");"></div> <div class="page-0-nickname">白天不亮</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/17_0fc2c57.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/17_0fc2c57.jpg");"></div> <div class="page-0-nickname">东南</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/18_5ca5dff.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/18_5ca5dff.jpg");"></div> <div class="page-0-nickname">房东的猫</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/19_e1eade7.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/19_e1eade7.jpg");"></div> <div class="page-0-nickname">苟乃鹏</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/20_cf3d67f.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/20_cf3d67f.jpg");"></div> <div class="page-0-nickname">果味VC乐队</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/21_165eb93.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/21_165eb93.jpg");"></div> <div class="page-0-nickname">简迷离</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/22_f908c35.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/22_f908c35.jpg");"></div> <div class="page-0-nickname">廖效浓</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/23_d2741c7.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/23_d2741c7.jpg");"></div> <div class="page-0-nickname">刘锦泽</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/25_eefa0e3.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/25_eefa0e3.jpg");"></div> <div class="page-0-nickname">刘润洁</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/26_ca03861.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/26_ca03861.jpg");"></div> <div class="page-0-nickname">龙井说唱孙旭</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/27_eff3741.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/27_eff3741.jpg");"></div> <div class="page-0-nickname">路壹Lu1</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/28_9f40c13.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/28_9f40c13.jpg");"></div> <div class="page-0-nickname">罗艺恒</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/29_b20cfa2.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/29_b20cfa2.jpg");"></div> <div class="page-0-nickname">裸儿</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/30_e2cc129.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/30_e2cc129.jpg");"></div> <div class="page-0-nickname">那吾克热</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/32_20388b0.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/32_20388b0.jpg");"></div> <div class="page-0-nickname">铁竹堂</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/33_a3d55dc.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/33_a3d55dc.jpg");"></div> <div class="page-0-nickname">夏之禹</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/34_4f72cfa.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/34_4f72cfa.jpg");"></div> <div class="page-0-nickname">新街口组合</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/35_d09f6e2.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/35_d09f6e2.jpg");"></div> <div class="page-0-nickname">徐秉龙</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/36_061de88.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/36_061de88.jpg");"></div> <div class="page-0-nickname">许钧</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/37_2d8b36f.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/37_2d8b36f.jpg");"></div> <div class="page-0-nickname">许馨文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/38_18e9d10.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/38_18e9d10.jpg");"></div> <div class="page-0-nickname">耀乐团</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/40_ed637bb.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/40_ed637bb.jpg");"></div> <div class="page-0-nickname">张歆雅</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/41_40b521e.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/41_40b521e.jpg");"></div> <div class="page-0-nickname">赵晔</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/42_653d788.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/42_653d788.jpg");"></div> <div class="page-0-nickname">周玥</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/43_9fbc632.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/43_9fbc632.jpg");"></div> <div class="page-0-nickname">Alex Hong</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/44_f23eb50.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/44_f23eb50.jpg");"></div> <div class="page-0-nickname">AY楊佬叁</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/45_52a6063.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/45_52a6063.jpg");"></div> <div class="page-0-nickname">Cee</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/46_2b363ee.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/46_2b363ee.jpg");"></div> <div class="page-0-nickname">Cloud Wang</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/47_d2e0d2f.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/47_d2e0d2f.jpg");"></div> <div class="page-0-nickname">CNBALLER</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/48_3aa328e.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/48_3aa328e.jpg");"></div> <div class="page-0-nickname">DJ Baker</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/49_b9b0b55.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/49_b9b0b55.jpg");"></div> <div class="page-0-nickname">Dragon Pig</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/50_0e934a4.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/50_0e934a4.jpg");"></div> <div class="page-0-nickname">Gold Chain</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/51_3621248.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/51_3621248.jpg");"></div> <div class="page-0-nickname">LAMPHO</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/52_5cb61c1.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/52_5cb61c1.jpg");"></div> <div class="page-0-nickname">OB03</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/53_d47b5bf.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/53_d47b5bf.jpg");"></div> <div class="page-0-nickname">s3v3n.tang</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/55_345385a.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/55_345385a.jpg");"></div> <div class="page-0-nickname">曹寅</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/56_ff5a3b3.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/56_ff5a3b3.jpg");"></div> <div class="page-0-nickname">崔子格</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/59_d706855.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/59_d706855.jpg");"></div> <div class="page-0-nickname">圈9</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/61_e200cf0.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/61_e200cf0.jpg");"></div> <div class="page-0-nickname">草台乱唱</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/62_a609aaf.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/62_a609aaf.jpg");"></div> <div class="page-0-nickname">毒药mars</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/64_b0c216c.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/64_b0c216c.jpg");"></div> <div class="page-0-nickname">冷炫忱CURTIS</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/65_ccb4683.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/65_ccb4683.jpg");"></div> <div class="page-0-nickname">孟凡明</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/67_b3c5757.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/67_b3c5757.jpg");"></div> <div class="page-0-nickname">斯斯與帆</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/68_1439dd9.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/68_1439dd9.jpg");"></div> <div class="page-0-nickname">王骞</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/72_21a5911.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/72_21a5911.jpg");"></div> <div class="page-0-nickname">陈鸿宇</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/73_4ab21ea.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/73_4ab21ea.jpg");"></div> <div class="page-0-nickname">鹿先森乐队</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/74_5afbcfb.jpg" style="background-image: url("//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/74_5afbcfb.jpg");"></div> <div class="page-0-nickname">水木年华</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/75_886e8c2.jpg" style="background-image: url("//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/75_886e8c2.jpg");"></div> <div class="page-0-nickname">徐梦圆</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/1_491ccad.jpg"></div> <div class="page-0-nickname">金志文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/63_794e555.jpg"></div> <div class="page-0-nickname">吉克隽逸</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/69_6408d77.jpg"></div> <div class="page-0-nickname">Tizzy T</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/54_8d93189.jpg"></div> <div class="page-0-nickname">白举纲</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/7_e2400d0.jpg"></div> <div class="page-0-nickname">李斯丹妮</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/71_efad62a.jpg"></div> <div class="page-0-nickname">艾菲</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/5_18df1de.jpg"></div> <div class="page-0-nickname">万妮达</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/24_1b3cacb.jpg"></div> <div class="page-0-nickname">刘美麟</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/14_331fff3.jpg"></div> <div class="page-0-nickname">阿肆</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/39_ae80033.jpg"></div> <div class="page-0-nickname">于文文</div> </div> <div class="page-0-musician"> <div class="page-0-avatar page-lazy-load-avatar" data-src="//s3a.bytecdn.cn/aweme/resource/web/static/image/musician/KOL/57_6c4c5f0.jpg"></div> <div class="page-0-nickname">鬼卞</div> </div> </div> </div> </div> </div> </div> </div> <div class="section fp-section fp-table" id="section1" style="height: 910px;"> <div class="fp-tableCell" style="height: 910px;"> <div class="page-1 page"> <div class="page-1-container"> <div class="page-1-header"> <img src="music-people_files/page-2-title_043f0c5.png" alt="丰富宣推资源"> </div> <div class="page-1-content"> <div class="page-1-bg"> <div class="page-1-icon"> <img src="music-people_files/page-2-icon-1_214c59a.png"> </div> <div class="page-1-primary">好内容让好音乐被看见</div> <div class="page-1-secondary-1">抖音的用户们有千百种玩法和</div> <div class="page-1-secondary-2">丰富的创意，实力演绎</div> <div class="page-1-secondary-3">你的原创音乐</div> </div> <div class="page-1-bg"> <div class="page-1-icon"> <img src="music-people_files/page-2-icon-2_936f886.png"> </div> <div class="page-1-primary">个性化分发推荐</div> <div class="page-1-secondary-1">不管是成名已久，还是新人新作，</div> <div class="page-1-secondary-2">抖音都会让你的原创音乐</div> <div class="page-1-secondary-3">与伯乐相遇</div> </div> <div class="page-1-bg"> <div class="page-1-icon"> <img src="music-people_files/page-2-icon-3_04c3b49.png"> </div> <div class="page-1-primary">全系产品推广渠道支持</div> <div class="page-1-secondary-1">不仅是抖音，好的原创音乐将会</div> <div class="page-1-secondary-2">根据风格及受众分发至</div> <div class="page-1-secondary-3">头条全系产品</div> </div> </div> <div class="page-1-footer"> <p>数万首原创音乐，都获得了上万使用量，抖音重新定义了音乐宣发时代2.0</p> <p>我们会倾尽全力扶持中国原创音乐，助力音乐人 ，传播好音乐</p> </div> </div> </div> </div> </div> <div class="section fp-section fp-table" id="section2" style="height: 910px;"> <div class="fp-tableCell" style="height: 910px;"> <div class="page-2 page"> <div class="page-2-container"> <div class="page-2-top"> <div class="page-2-header"> <img class="page-2-title" src="music-people_files/page-3-title-1_ca3c6fe.png" alt="行业指导机构"> </div> <div class="page-2-img"> <img src="music-people_files/page-3-1_c6e7f9c.png" alt="CMIC"> </div> </div> <div class="page-2-btm"> <div class="page-2-header"> <img class="page-2-title" src="music-people_files/page-3-title-2_d83f152.png" alt="战略合作伙伴"> </div> <div class="page-2-partner"> <div class="page-2-img"> <img src="music-people_files/page-3-2_967deef.png" alt="Young Blood计划"> <p>Young Blood 新血计划</p> <p class="text-secondary">由摩登天空于2017年发起，2018年Young Blood音乐版块全面升级，开启包括专业制作人和评审团加入的唱片计划，旨在帮助更多新血青年探索音乐世界，实现自己的音乐梦想。</p> </div> <div class="page-2-img"> <img src="music-people_files/page-3-3_976dc82.png" alt="太合音乐集团C"> <p>中国领先的音乐服务提供商</p> </div> </div> </div> </div> </div> </div> </div> <div class="section fp-section fp-table" id="section3" style="height: 910px;"> <div class="fp-tableCell" style="height: 910px;"> <div class="page-3 page"> <div class="page-3-container"> <div class="page-3-header"> <img class="page-3-title" src="music-people_files/page-4-title-1_4c7dfb9.png" alt="战略合作伙伴"> </div> <div class="page-3-content"> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="华纳唱片" src="music-people_files/page-4-1_a43d2af.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="SONY MUSIC" src="music-people_files/page-4-2_2c185e7.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="SONY/ATV" src="music-people_files/page-4-3_65d6367.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="环球音乐" src="music-people_files/page-4-4_b99d0b3.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="咪咕音乐" src="music-people_files/page-4-5_5eb8544.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="CRC" src="music-people_files/page-4-6_035e531.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="滚石唱片" src="music-people_files/page-4-7_d6cbb82.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="摩登天空" src="music-people_files/page-4-8_c6cd99e.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="华研国际音乐" src="music-people_files/page-4-9_0fa9536.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="相信音乐" src="music-people_files/page-4-10_4cd57f4.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="网易云音乐" src="music-people_files/page-4-11_1f7974b.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="虾米音乐" src="music-people_files/page-4-12_dfbcd6c.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="酷狗音乐" src="music-people_files/page-4-13_7d11fa9.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="腾讯音乐人" src="music-people_files/page-4-14_2f3eb27.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="NNIDI" src="music-people_files/page-4-15_97a4506.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="天浩传媒" src="music-people_files/page-4-16_0215a81.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="天浩盛世" src="music-people_files/page-4-17_f569a9c.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="福茂唱片" src="music-people_files/page-4-18_cee96a4.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="唱吧" src="music-people_files/page-4-19_3f5b47f.png"> </div> </div> <div class="page-3-block"> <div class="page-3-avatar"> <img alt="碎乐" src="music-people_files/page-4-20_90bbc6a.png"> </div> </div> </div> <div class="page-3-header"> <img class="page-3-title" src="music-people_files/page-4-title-2_346983a.png" alt="战略合作伙伴"> </div> <div class="page-3-icons"> <div class="page-3-icon"> <img alt="今日头条" src="music-people_files/page-4-icon-1_85f96b8.png"> </div> <div class="page-3-icon"> <img alt="火山小视频" src="music-people_files/page-4-icon-2_ed4dfdf.png"> </div> <div class="page-3-icon"> <img alt="西瓜视频" src="music-people_files/page-4-icon-4_52244d3.png"> </div> <div class="page-3-icon"> <img alt="悟空问答" src="music-people_files/page-4-icon-5_8af8c81.png"> </div> <div class="page-3-icon"> <img alt="Flipagram" src="music-people_files/page-4-icon-7_447df84.png"> </div> <div class="page-3-icon"> <img alt="头条音乐" src="music-people_files/page-4-icon-8_c5e76f1.png"> </div> </div> </div> </div> </div> </div> </div> <div style="position: fixed; right: 20px; bottom: 20px;"> <img style="width: 129px; height: 250px;" src="music-people_files/haoshengyin1_adac7af.png"> </div> <div class="header-modal" id="headerModal"> <div class="header-modal-container" id="headerModalCont"> <p class="header-modal-content">Gary溫馨提示</p> <p class="header-modal-tips">如果已有抖音账号，请先到抖音app个人主页。点击右上角“…”—设置—账号管理，绑定手机号，再用该手机号来登录哦！</p> <a th:href="@{~/tologin}"> <div class="header-modal-button" id="modalBtn">我知道了</div> </a> </div> </div> <script> (function() { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> $(function() { require('web:page/musician/header/index'); require('web:page/musician/home/index'); }) </script> </div> <script> window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags : { bid : 'douyin_web', pid : 'musician_home' } }).install(); </script> <script src="music-people_files/index_7a47cdc.js"></script> <script src="music-people_files/musician_38254fc.js"></script> <script src="music-people_files/index_07f88bb.js"></script> <div id="fp-nav" class="right" style="margin-top: -43.5px;"> <ul> </ul> </div> </body> </html>
完善login页面：适应Thymeleaf以及添加发送验证码点击事件
login.html页面添加thymeleaf标签
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
给获取验证码添加点击事件
<input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text">
编写点击获得验证码后获得用户手机号函数
function getCode(){ var telephone = $("#telephone").val(); alert(telephone); }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="utf-8"> <meta http-equiv="x-dns-prefetch-control" content="on"> <meta name="renderer" content="webkit"> <link rel="dns-prefetch" href="https://s3.pstatp.com/"> <link rel="dns-prefetch" href="https://s3a.pstatp.com/"> <link rel="dns-prefetch" href="https://s3b.pstatp.com/"> <link rel="dns-prefetch" href="https://p1.pstatp.com/"> <link rel="dns-prefetch" href="https://p3.pstatp.com/"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"> <title>登录抖音短视频</title> <link rel="stylesheet" href="login_files/index.css"> <script> !function(e) { function t(a) { if (c[a]) return c[a].exports; var o = c[a] = { exports : {}, id : a, loaded : !1 }; return e[a].call(o.exports, o, o.exports, t), o.loaded = !0, o.exports } var a = window.webpackJsonp; window.webpackJsonp = function(r, n) { for (var p, f, s = 0, l = []; s < r.length; s++) f = r[s], o[f] && l.push.apply(l, o[f]), o[f] = 0; for (p in n) Object.prototype.hasOwnProperty.call(n, p) && (e[p] = n[p]); for (a && a(r, n); l.length;) l.shift().call(null, t); if (n[0]) return c[0] = 0, t(0) }; var c = {}, o = { 0 : 0 }; t.e = function(e, a) { if (0 === o[e]) return a.call(null, t); if (void 0 !== o[e]) o[e].push(a); else { o[e] = [ a ]; var c = document.getElementsByTagName("head")[0], r = document .createElement("script"); r.type = "text/javascript", r.charset = "utf-8", r.async = !0, r.src = t.p + "static/js/" + e + "." + { 1 : "2c3cf93e8f1706df6c36", 2 : "655191000eca154385c9", 3 : "79154c38989007851ef6", 4 : "ac0b4fb10a22450628e6", 5 : "e32178aaee36ae0b9159", 6 : "9eaf1ce3285a9f6c8c09", 7 : "c38de99df42b3baef448", 8 : "f84802439dbaf972920c" }[e] + ".js", c.appendChild(r) } }, t.m = e, t.c = c, t.p = "/toutiao/", t.p = "//s3.pstatp.com/toutiao/" }([]); </script> </head> <body> <div class="base-login"> <h1 class="box-title">手机登录抖音短视频</h1> <form class="form-wrap"> <div class="input-field mobile"> <label for="mobile" class="yellow-text">+86</label> <input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text"> </div> <div class="input-field captcha"> <label for="captcha">验证码</label> <input id="captcha" placeholder="请输入验证码" type="text"> <div class="captcha-wrap"> <img src="data:image/gif;base64,R0lGODlhagAeAIcAAAAAAAAARAAAiAAAzABEAABERABEiABEzACIAACIRACIiACIzADMAADMRADMiADMzADd3REREQAAVQAAmQAA3QBVAABVVQBMmQBJ3QCZAACZTACZmQCT3QDdAADdSQDdkwDungDu7iIiIgAAZgAAqgAA7gBmAABmZgBVqgBP7gCqAACqVQCqqgCe7gDuAADuTwD/VQD/qgD//zMzMwAAdwAAuwAA/wB3AAB3dwBduwBV/wC7AAC7XQC7uwCq/wD/AEQAREQAiEQAzEREAEREREREiEREzESIAESIRESIiESIzETMAETMRETMiETMzEQAAFUAAFUAVUwAmUkA3VVVAFVVVUxMmUlJ3UyZAEyZTEyZmUmT3UndAEndSUndk0nd3U/u7mYAAGYAZlUAqk8A7mZmAGZmZlVVqk9P7lWqAFWqVVWqqk+e7k/uAE/uT0/unlX/qlX//3cAAHcAd10Au1UA/3d3AHd3d11du1VV/127AF27XV27u1Wq/1X/AFX/VYgAiIgAzIhEAIhERIhEiIhEzIiIAIiIRIiIiIiIzIjMAIjMRIjMiIjMzIgAAIgARJkATJkAmZMA3ZlMAJlMTJlMmZNJ3ZmZAJmZTJmZmZOT3ZPdAJPdSZPdk5Pd3ZkAAKoAAKoAVaoAqp4A7qpVAKpVVapVqp5P7qqqAKqqVaqqqp6e7p7uAJ7uT57unp7u7qr//7sAALsAXbsAu6oA/7tdALtdXbtdu6pV/7u7ALu7Xbu7u6qq/6r/AKr/Var/qswAzMxEAMxERMxEiMxEzMyIAMyIRMyIiMyIzMzMAMzMRMzMiMzMzMwAAMwARMwAiN0Ak90A3d1JAN1JSd1Jk91J3d2TAN2TSd2Tk92T3d3dAN3dSd3dk93d3d0AAN0ASe4AT+4Anu4A7u5PAO5PT+5Pnu5P7u6eAO6eT+6enu6e7u7uAO7uT+7unu7u7u4AAP8AAP8AVf8Aqv8A//9VAP9VVf9Vqv9V//+qAP+qVf+qqv+q////AP//Vf//qv///ywAAAAAagAeAAAI//8EDiRY0OBBhAltLEw4cKENhw0FPpRY8R9Fixk1QrTI8SJDiR41jswI8eFJlCkxkrzI0uVLgiZhzqRZs6RNnDl17uRp0F3PnSpRAv23ykYeXkSVThQK8uUqXqvyLKUqsBuaPHlW0dSkKaqmn1Vj6uzW1R2vqTO1ukP6UmhJpzVXef0XtdtBd2ElrlrlTqTYiTmv8rKb5+7As3mO5tGk9bBBr2gTr3oMGOFZXnQbsu2LBiKaymiTdluFpvFWyJrKMkaqGLXlgu40LUbbNyHabrywln1dlBdbNGigRtU7cG1wylJ5VYYtUCpmwm0PkiZ8OmpagV7nfiXdeyBftr+zdv8r3ryudqxZ0ST9+28tY9HgJ1Km2zVqUshJ8z43f1C71qx+k2mgq+5Ca7zMDhMus6SQui+13IYDqz+D1qpNtzz8Iogz2Sg76x8NBRKuG8PcWy7DCrfCijLpPooLsAORgopE/L7LUKo8gkOKrbAaY6u1CJkrCqr1Mmwxphepqi2ryDQhiETW8OOsO4HYIm8usFSqC0fVHJyQQoIA5CtDsxAjDCqCcGtRN02kQiOxgpoaCkz3jAQQNLyK42y9NKUyCk6J3JlLupSaOxCqNvPK6Ey8rjrLyYowKw9MdyL8jaVJrQJtrkzpzKjTnLzzdFTEAGuK1KXag+tUopIEylVUESoJtCdVY111p4AAADs=" alt="" class="captcha"> </div> </div> <div class="input-field code"> <label for="code">短信验证</label> <input id="code" name="code" placeholder="请输入短信验证码" type="text"> <span class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span> </div> </form> <div class="action"> <span> 注册并登录即代表同意抖音 <a href="https://www.douyin.com/falcon/douyin_falcon/user_agreement/" target="_blank" class="yellow-text">用户服务协议</a> 和 <a href="https://www.douyin.com/falcon/douyin_falcon/privacy_agreement/" target="_blank" class="yellow-text">隐私政策</a> </span> </div> <button class="action-btn">登录</button> </div> <script src="js/jquery.min.js"></script> <script type="text/javascript" th:inline="javascript"> function getCode(){ //发送验证码 var telephone = $("#telephone").val(); alert(telephone); } var BASE_DATA = { service : 'https://www.douyin.com/login?type=musician', captcha : '' }; </script> <script type="text/javascript" src="login_files/vendor.js"></script> <script type="text/javascript" src="login_files/index.js"></script> </body> </html>
书写发送验证码的Button
当用户点击获取验证码后，为避免用户在同一时间段多次点击，可编写一个延时函数
给获取验证码添加一个点击事件ID
<span id="codeButton" class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span>
实用setTimeout()方法设置获取验证码倒计时
function getCode(){ //隐藏自己 $("#codeButton").removeAttr("onclick"); //发送验证码 var telephone = $("#telephone").val(); alert(telephone); //延时几面显示,避免用户多次连续点击 setTimeout("fun(5)",1000); } function fun(n){ if(n>0){ n--; //修改文字html中的内容 document.getElementById("codeButton").innerHTML = "还剩："+n+"秒"; //每秒递归调用自己 setTimeout("fun("+ n +")",1000); }else{ //倒计时已经结束 //显示自己 document.getElementById("codeButton").innerHTML = "获取验证码"; //添加click事件方法 $("#codeButton").attr("onclick","getCode();"); } }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="utf-8"> <meta http-equiv="x-dns-prefetch-control" content="on"> <meta name="renderer" content="webkit"> <link rel="dns-prefetch" href="https://s3.pstatp.com/"> <link rel="dns-prefetch" href="https://s3a.pstatp.com/"> <link rel="dns-prefetch" href="https://s3b.pstatp.com/"> <link rel="dns-prefetch" href="https://p1.pstatp.com/"> <link rel="dns-prefetch" href="https://p3.pstatp.com/"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"> <title>登录抖音短视频</title> <link rel="stylesheet" href="login_files/index.css"> <script> !function(e) { function t(a) { if (c[a]) return c[a].exports; var o = c[a] = { exports : {}, id : a, loaded : !1 }; return e[a].call(o.exports, o, o.exports, t), o.loaded = !0, o.exports } var a = window.webpackJsonp; window.webpackJsonp = function(r, n) { for (var p, f, s = 0, l = []; s < r.length; s++) f = r[s], o[f] && l.push.apply(l, o[f]), o[f] = 0; for (p in n) Object.prototype.hasOwnProperty.call(n, p) && (e[p] = n[p]); for (a && a(r, n); l.length;) l.shift().call(null, t); if (n[0]) return c[0] = 0, t(0) }; var c = {}, o = { 0 : 0 }; t.e = function(e, a) { if (0 === o[e]) return a.call(null, t); if (void 0 !== o[e]) o[e].push(a); else { o[e] = [ a ]; var c = document.getElementsByTagName("head")[0], r = document .createElement("script"); r.type = "text/javascript", r.charset = "utf-8", r.async = !0, r.src = t.p + "static/js/" + e + "." + { 1 : "2c3cf93e8f1706df6c36", 2 : "655191000eca154385c9", 3 : "79154c38989007851ef6", 4 : "ac0b4fb10a22450628e6", 5 : "e32178aaee36ae0b9159", 6 : "9eaf1ce3285a9f6c8c09", 7 : "c38de99df42b3baef448", 8 : "f84802439dbaf972920c" }[e] + ".js", c.appendChild(r) } }, t.m = e, t.c = c, t.p = "/toutiao/", t.p = "//s3.pstatp.com/toutiao/" }([]); </script> </head> <body> <div class="base-login"> <h1 class="box-title">手机登录抖音短视频</h1> <form class="form-wrap"> <div class="input-field mobile"> <label for="mobile" class="yellow-text">+86</label> <input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text"> </div> <div class="input-field captcha"> <label for="captcha">验证码</label> <input id="captcha" placeholder="请输入验证码" type="text"> <div class="captcha-wrap"> <img src="data:image/gif;base64,R0lGODlhagAeAIcAAAAAAAAARAAAiAAAzABEAABERABEiABEzACIAACIRACIiACIzADMAADMRADMiADMzADd3REREQAAVQAAmQAA3QBVAABVVQBMmQBJ3QCZAACZTACZmQCT3QDdAADdSQDdkwDungDu7iIiIgAAZgAAqgAA7gBmAABmZgBVqgBP7gCqAACqVQCqqgCe7gDuAADuTwD/VQD/qgD//zMzMwAAdwAAuwAA/wB3AAB3dwBduwBV/wC7AAC7XQC7uwCq/wD/AEQAREQAiEQAzEREAEREREREiEREzESIAESIRESIiESIzETMAETMRETMiETMzEQAAFUAAFUAVUwAmUkA3VVVAFVVVUxMmUlJ3UyZAEyZTEyZmUmT3UndAEndSUndk0nd3U/u7mYAAGYAZlUAqk8A7mZmAGZmZlVVqk9P7lWqAFWqVVWqqk+e7k/uAE/uT0/unlX/qlX//3cAAHcAd10Au1UA/3d3AHd3d11du1VV/127AF27XV27u1Wq/1X/AFX/VYgAiIgAzIhEAIhERIhEiIhEzIiIAIiIRIiIiIiIzIjMAIjMRIjMiIjMzIgAAIgARJkATJkAmZMA3ZlMAJlMTJlMmZNJ3ZmZAJmZTJmZmZOT3ZPdAJPdSZPdk5Pd3ZkAAKoAAKoAVaoAqp4A7qpVAKpVVapVqp5P7qqqAKqqVaqqqp6e7p7uAJ7uT57unp7u7qr//7sAALsAXbsAu6oA/7tdALtdXbtdu6pV/7u7ALu7Xbu7u6qq/6r/AKr/Var/qswAzMxEAMxERMxEiMxEzMyIAMyIRMyIiMyIzMzMAMzMRMzMiMzMzMwAAMwARMwAiN0Ak90A3d1JAN1JSd1Jk91J3d2TAN2TSd2Tk92T3d3dAN3dSd3dk93d3d0AAN0ASe4AT+4Anu4A7u5PAO5PT+5Pnu5P7u6eAO6eT+6enu6e7u7uAO7uT+7unu7u7u4AAP8AAP8AVf8Aqv8A//9VAP9VVf9Vqv9V//+qAP+qVf+qqv+q////AP//Vf//qv///ywAAAAAagAeAAAI//8EDiRY0OBBhAltLEw4cKENhw0FPpRY8R9Fixk1QrTI8SJDiR41jswI8eFJlCkxkrzI0uVLgiZhzqRZs6RNnDl17uRp0F3PnSpRAv23ykYeXkSVThQK8uUqXqvyLKUqsBuaPHlW0dSkKaqmn1Vj6uzW1R2vqTO1ukP6UmhJpzVXef0XtdtBd2ElrlrlTqTYiTmv8rKb5+7As3mO5tGk9bBBr2gTr3oMGOFZXnQbsu2LBiKaymiTdluFpvFWyJrKMkaqGLXlgu40LUbbNyHabrywln1dlBdbNGigRtU7cG1wylJ5VYYtUCpmwm0PkiZ8OmpagV7nfiXdeyBftr+zdv8r3ryudqxZ0ST9+28tY9HgJ1Km2zVqUshJ8z43f1C71qx+k2mgq+5Ca7zMDhMus6SQui+13IYDqz+D1qpNtzz8Iogz2Sg76x8NBRKuG8PcWy7DCrfCijLpPooLsAORgopE/L7LUKo8gkOKrbAaY6u1CJkrCqr1Mmwxphepqi2ryDQhiETW8OOsO4HYIm8usFSqC0fVHJyQQoIA5CtDsxAjDCqCcGtRN02kQiOxgpoaCkz3jAQQNLyK42y9NKUyCk6J3JlLupSaOxCqNvPK6Ey8rjrLyYowKw9MdyL8jaVJrQJtrkzpzKjTnLzzdFTEAGuK1KXag+tUopIEylVUESoJtCdVY111p4AAADs=" alt="" class="captcha"> </div> </div> <div class="input-field code"> <label for="code">短信验证</label> <input id="code" name="code" placeholder="请输入短信验证码" type="text"> <span id="codeButton" class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span> </div> </form> <div class="action"> <span> 注册并登录即代表同意抖音 <a href="https://www.douyin.com/falcon/douyin_falcon/user_agreement/" target="_blank" class="yellow-text">用户服务协议</a> 和 <a href="https://www.douyin.com/falcon/douyin_falcon/privacy_agreement/" target="_blank" class="yellow-text">隐私政策</a> </span> </div> <button class="action-btn">登录</button> </div> <script src="js/jquery.min.js"></script> <script type="text/javascript" th:inline="javascript"> function getCode(){ //隐藏自己 $("#codeButton").removeAttr("onclick"); //发送验证码 var telephone = $("#telephone").val(); alert(telephone); //延时几面显示,避免用户多次连续点击 setTimeout("fun(5)",1000); } function fun(n){ if(n>0){ n--; //修改文字html中的内容 document.getElementById("codeButton").innerHTML = "还剩："+n+"秒"; //每秒递归调用自己 setTimeout("fun("+ n +")",1000); }else{ //倒计时已经结束 //显示自己 document.getElementById("codeButton").innerHTML = "获取验证码"; //添加click事件方法 $("#codeButton").attr("onclick","getCode();"); } } var BASE_DATA = { service : 'https://www.douyin.com/login?type=musician', captcha : '' }; </script> <script type="text/javascript" src="login_files/vendor.js"></script> <script type="text/javascript" src="login_files/index.js"></script> </body> </html>
发送手机验证码ajax
function getCode(){ //隐藏自己 $("#codeButton").removeAttr("onclick"); //发送验证码 var telephone = $("#telephone").val(); alert(telephone); $.post( //action的地址 [[@{~/sms}]], //提交的数据 {"telephone":telephone}, //回调函数 function(data) { }, //数据格式 "json" ) //延时几面显示,避免用户多次连续点击 setTimeout("fun(5)",1000); }
发送验证码请求
书写发送短信controller
@RestController public class UserController { @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; }
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
当用户点击登录->获得到验证码，在controller层进行判断验证码是否正确，如果正确则在数据库中添加一个User数据，如果不正确的话需要用户重新书写验证码
User实体
@Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state;
package com.Gary.shakes.domain; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; @Entity public class User { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state; protected User() { } public User(Long id,String username,String password,String telephone,String code,Integer state) { this.id=id; this.username=username; this.password=password; this.telephone=telephone; this.code=code; this.state=state; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getTelephone() { return telephone; } public void setTelephone(String telephone) { this.telephone = telephone; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } }
校验验证码登录：失败情况
当用户在登录页面点击获得验证码后会获得随机的四位数，随后用户将输入四位数与系统所给的验证码进行匹配校验
当用户输入错误的验证码时，登录页面会提示用户“验证码错误！！”,当用户输入正确的验证码后跳转到register.htm
用户登录表单
<form class="form-wrap" th:action="@{~/login}"> <div class="input-field mobile"> <label for="mobile" class="yellow-text">+86</label> <input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text"> </div> <div class="input-field captcha"> <label for="captcha">验证码</label> <input id="captcha" placeholder="请输入验证码" type="text"> <div class="captcha-wrap"> <img src="data:image/gif;base64,R0lGODlhagAeAIcAAAAAAAAARAAAiAAAzABEAABERABEiABEzACIAACIRACIiACIzADMAADMRADMiADMzADd3REREQAAVQAAmQAA3QBVAABVVQBMmQBJ3QCZAACZTACZmQCT3QDdAADdSQDdkwDungDu7iIiIgAAZgAAqgAA7gBmAABmZgBVqgBP7gCqAACqVQCqqgCe7gDuAADuTwD/VQD/qgD//zMzMwAAdwAAuwAA/wB3AAB3dwBduwBV/wC7AAC7XQC7uwCq/wD/AEQAREQAiEQAzEREAEREREREiEREzESIAESIRESIiESIzETMAETMRETMiETMzEQAAFUAAFUAVUwAmUkA3VVVAFVVVUxMmUlJ3UyZAEyZTEyZmUmT3UndAEndSUndk0nd3U/u7mYAAGYAZlUAqk8A7mZmAGZmZlVVqk9P7lWqAFWqVVWqqk+e7k/uAE/uT0/unlX/qlX//3cAAHcAd10Au1UA/3d3AHd3d11du1VV/127AF27XV27u1Wq/1X/AFX/VYgAiIgAzIhEAIhERIhEiIhEzIiIAIiIRIiIiIiIzIjMAIjMRIjMiIjMzIgAAIgARJkATJkAmZMA3ZlMAJlMTJlMmZNJ3ZmZAJmZTJmZmZOT3ZPdAJPdSZPdk5Pd3ZkAAKoAAKoAVaoAqp4A7qpVAKpVVapVqp5P7qqqAKqqVaqqqp6e7p7uAJ7uT57unp7u7qr//7sAALsAXbsAu6oA/7tdALtdXbtdu6pV/7u7ALu7Xbu7u6qq/6r/AKr/Var/qswAzMxEAMxERMxEiMxEzMyIAMyIRMyIiMyIzMzMAMzMRMzMiMzMzMwAAMwARMwAiN0Ak90A3d1JAN1JSd1Jk91J3d2TAN2TSd2Tk92T3d3dAN3dSd3dk93d3d0AAN0ASe4AT+4Anu4A7u5PAO5PT+5Pnu5P7u6eAO6eT+6enu6e7u7uAO7uT+7unu7u7u4AAP8AAP8AVf8Aqv8A//9VAP9VVf9Vqv9V//+qAP+qVf+qqv+q////AP//Vf//qv///ywAAAAAagAeAAAI//8EDiRY0OBBhAltLEw4cKENhw0FPpRY8R9Fixk1QrTI8SJDiR41jswI8eFJlCkxkrzI0uVLgiZhzqRZs6RNnDl17uRp0F3PnSpRAv23ykYeXkSVThQK8uUqXqvyLKUqsBuaPHlW0dSkKaqmn1Vj6uzW1R2vqTO1ukP6UmhJpzVXef0XtdtBd2ElrlrlTqTYiTmv8rKb5+7As3mO5tGk9bBBr2gTr3oMGOFZXnQbsu2LBiKaymiTdluFpvFWyJrKMkaqGLXlgu40LUbbNyHabrywln1dlBdbNGigRtU7cG1wylJ5VYYtUCpmwm0PkiZ8OmpagV7nfiXdeyBftr+zdv8r3ryudqxZ0ST9+28tY9HgJ1Km2zVqUshJ8z43f1C71qx+k2mgq+5Ca7zMDhMus6SQui+13IYDqz+D1qpNtzz8Iogz2Sg76x8NBRKuG8PcWy7DCrfCijLpPooLsAORgopE/L7LUKo8gkOKrbAaY6u1CJkrCqr1Mmwxphepqi2ryDQhiETW8OOsO4HYIm8usFSqC0fVHJyQQoIA5CtDsxAjDCqCcGtRN02kQiOxgpoaCkz3jAQQNLyK42y9NKUyCk6J3JlLupSaOxCqNvPK6Ey8rjrLyYowKw9MdyL8jaVJrQJtrkzpzKjTnLzzdFTEAGuK1KXag+tUopIEylVUESoJtCdVY111p4AAADs=" alt="" class="captcha"> </div> </div> <div class="input-field code"> <label for="code">短信验证</label> <input id="code" name="code" placeholder="请输入短信验证码" type="text"> <span id="codeButton" class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span> </div> <div class="action"> <span> 注册并登录即代表同意抖音 <a href="https://www.douyin.com/falcon/douyin_falcon/user_agreement/" target="_blank" class="yellow-text">用户服务协议</a> 和 <a href="https://www.douyin.com/falcon/douyin_falcon/privacy_agreement/" target="_blank" class="yellow-text">隐私政策</a> </span> <div th:text="${message}" style="color:red"></div> </div> <button type="submit" class="action-btn">登录</button> </form>
UserController处理用户登录信息
//用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 System.out.println("成功！"); return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="utf-8"> <meta http-equiv="x-dns-prefetch-control" content="on"> <meta name="renderer" content="webkit"> <link rel="dns-prefetch" href="https://s3.pstatp.com/"> <link rel="dns-prefetch" href="https://s3a.pstatp.com/"> <link rel="dns-prefetch" href="https://s3b.pstatp.com/"> <link rel="dns-prefetch" href="https://p1.pstatp.com/"> <link rel="dns-prefetch" href="https://p3.pstatp.com/"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"> <title>登录抖音短视频</title> <link rel="stylesheet" href="login_files/index.css"> <script> !function(e) { function t(a) { if (c[a]) return c[a].exports; var o = c[a] = { exports : {}, id : a, loaded : !1 }; return e[a].call(o.exports, o, o.exports, t), o.loaded = !0, o.exports } var a = window.webpackJsonp; window.webpackJsonp = function(r, n) { for (var p, f, s = 0, l = []; s < r.length; s++) f = r[s], o[f] && l.push.apply(l, o[f]), o[f] = 0; for (p in n) Object.prototype.hasOwnProperty.call(n, p) && (e[p] = n[p]); for (a && a(r, n); l.length;) l.shift().call(null, t); if (n[0]) return c[0] = 0, t(0) }; var c = {}, o = { 0 : 0 }; t.e = function(e, a) { if (0 === o[e]) return a.call(null, t); if (void 0 !== o[e]) o[e].push(a); else { o[e] = [ a ]; var c = document.getElementsByTagName("head")[0], r = document .createElement("script"); r.type = "text/javascript", r.charset = "utf-8", r.async = !0, r.src = t.p + "static/js/" + e + "." + { 1 : "2c3cf93e8f1706df6c36", 2 : "655191000eca154385c9", 3 : "79154c38989007851ef6", 4 : "ac0b4fb10a22450628e6", 5 : "e32178aaee36ae0b9159", 6 : "9eaf1ce3285a9f6c8c09", 7 : "c38de99df42b3baef448", 8 : "f84802439dbaf972920c" }[e] + ".js", c.appendChild(r) } }, t.m = e, t.c = c, t.p = "/toutiao/", t.p = "//s3.pstatp.com/toutiao/" }([]); </script> </head> <body> <div class="base-login"> <h1 class="box-title">手机登录抖音短视频</h1> <form class="form-wrap" th:action="@{~/login}"> <div class="input-field mobile"> <label for="mobile" class="yellow-text">+86</label> <input id="telephone" name="telephone" placeholder="请输入抖音账号绑定手机号" type="text"> </div> <div class="input-field captcha"> <label for="captcha">验证码</label> <input id="captcha" placeholder="请输入验证码" type="text"> <div class="captcha-wrap"> <img src="data:image/gif;base64,R0lGODlhagAeAIcAAAAAAAAARAAAiAAAzABEAABERABEiABEzACIAACIRACIiACIzADMAADMRADMiADMzADd3REREQAAVQAAmQAA3QBVAABVVQBMmQBJ3QCZAACZTACZmQCT3QDdAADdSQDdkwDungDu7iIiIgAAZgAAqgAA7gBmAABmZgBVqgBP7gCqAACqVQCqqgCe7gDuAADuTwD/VQD/qgD//zMzMwAAdwAAuwAA/wB3AAB3dwBduwBV/wC7AAC7XQC7uwCq/wD/AEQAREQAiEQAzEREAEREREREiEREzESIAESIRESIiESIzETMAETMRETMiETMzEQAAFUAAFUAVUwAmUkA3VVVAFVVVUxMmUlJ3UyZAEyZTEyZmUmT3UndAEndSUndk0nd3U/u7mYAAGYAZlUAqk8A7mZmAGZmZlVVqk9P7lWqAFWqVVWqqk+e7k/uAE/uT0/unlX/qlX//3cAAHcAd10Au1UA/3d3AHd3d11du1VV/127AF27XV27u1Wq/1X/AFX/VYgAiIgAzIhEAIhERIhEiIhEzIiIAIiIRIiIiIiIzIjMAIjMRIjMiIjMzIgAAIgARJkATJkAmZMA3ZlMAJlMTJlMmZNJ3ZmZAJmZTJmZmZOT3ZPdAJPdSZPdk5Pd3ZkAAKoAAKoAVaoAqp4A7qpVAKpVVapVqp5P7qqqAKqqVaqqqp6e7p7uAJ7uT57unp7u7qr//7sAALsAXbsAu6oA/7tdALtdXbtdu6pV/7u7ALu7Xbu7u6qq/6r/AKr/Var/qswAzMxEAMxERMxEiMxEzMyIAMyIRMyIiMyIzMzMAMzMRMzMiMzMzMwAAMwARMwAiN0Ak90A3d1JAN1JSd1Jk91J3d2TAN2TSd2Tk92T3d3dAN3dSd3dk93d3d0AAN0ASe4AT+4Anu4A7u5PAO5PT+5Pnu5P7u6eAO6eT+6enu6e7u7uAO7uT+7unu7u7u4AAP8AAP8AVf8Aqv8A//9VAP9VVf9Vqv9V//+qAP+qVf+qqv+q////AP//Vf//qv///ywAAAAAagAeAAAI//8EDiRY0OBBhAltLEw4cKENhw0FPpRY8R9Fixk1QrTI8SJDiR41jswI8eFJlCkxkrzI0uVLgiZhzqRZs6RNnDl17uRp0F3PnSpRAv23ykYeXkSVThQK8uUqXqvyLKUqsBuaPHlW0dSkKaqmn1Vj6uzW1R2vqTO1ukP6UmhJpzVXef0XtdtBd2ElrlrlTqTYiTmv8rKb5+7As3mO5tGk9bBBr2gTr3oMGOFZXnQbsu2LBiKaymiTdluFpvFWyJrKMkaqGLXlgu40LUbbNyHabrywln1dlBdbNGigRtU7cG1wylJ5VYYtUCpmwm0PkiZ8OmpagV7nfiXdeyBftr+zdv8r3ryudqxZ0ST9+28tY9HgJ1Km2zVqUshJ8z43f1C71qx+k2mgq+5Ca7zMDhMus6SQui+13IYDqz+D1qpNtzz8Iogz2Sg76x8NBRKuG8PcWy7DCrfCijLpPooLsAORgopE/L7LUKo8gkOKrbAaY6u1CJkrCqr1Mmwxphepqi2ryDQhiETW8OOsO4HYIm8usFSqC0fVHJyQQoIA5CtDsxAjDCqCcGtRN02kQiOxgpoaCkz3jAQQNLyK42y9NKUyCk6J3JlLupSaOxCqNvPK6Ey8rjrLyYowKw9MdyL8jaVJrQJtrkzpzKjTnLzzdFTEAGuK1KXag+tUopIEylVUESoJtCdVY111p4AAADs=" alt="" class="captcha"> </div> </div> <div class="input-field code"> <label for="code">短信验证</label> <input id="code" name="code" placeholder="请输入短信验证码" type="text"> <span id="codeButton" class="send-code-btn yellow-text disable" onclick="getCode()">获取验证码</span> </div> <div class="action"> <span> 注册并登录即代表同意抖音 <a href="https://www.douyin.com/falcon/douyin_falcon/user_agreement/" target="_blank" class="yellow-text">用户服务协议</a> 和 <a href="https://www.douyin.com/falcon/douyin_falcon/privacy_agreement/" target="_blank" class="yellow-text">隐私政策</a> </span> <div th:text="${message}" style="color:red"></div> </div> <button type="submit" class="action-btn">登录</button> </form> </div> <script src="js/jquery.min.js"></script> <script type="text/javascript" th:inline="javascript"> function getCode(){ //隐藏自己 $("#codeButton").removeAttr("onclick"); //发送验证码 var telephone = $("#telephone").val(); alert(telephone); $.post( //action的地址 [[@{~/sms}]], //提交的数据 {"telephone":telephone}, //回调函数 function(data) { }, //数据格式 "json" ) //延时几面显示,避免用户多次连续点击 setTimeout("fun(5)",1000); } function fun(n){ if(n>0){ n--; //修改文字html中的内容 document.getElementById("codeButton").innerHTML = "还剩："+n+"秒"; //每秒递归调用自己 setTimeout("fun("+ n +")",1000); }else{ //倒计时已经结束 //显示自己 document.getElementById("codeButton").innerHTML = "获取验证码"; //添加click事件方法 $("#codeButton").attr("onclick","getCode();"); } } var BASE_DATA = { service : 'https://www.douyin.com/login?type=musician', captcha : '' }; </script> <script type="text/javascript" src="login_files/vendor.js"></script> <script type="text/javascript" src="login_files/index.js"></script> </body> </html>
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { System.out.println(user.getCode()); System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 System.out.println("成功！"); return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
完成手机验证码登录
用户输入正确的验证码后，controller层user传递数据给service层,service层将调用repository层的save方法
service层
public interface UserService { void save(User user); }
ServiceImpl
@Service public class UserServiceImpl implements UserService{ @Autowired private UserRepostory userRepository; @Override public void save(User user) { userRepository.save(user); } }
repository层 save方法在CrudRepository层已经封装好
public interface UserRepostory extends CrudRepository<User,Long>{ }
用户登录成功时UserController层的验证码校验
//用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 System.out.println("成功！"); user.setState(1); //在数据库中添加数据 userServiceImpl.save(user); return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.Gary.shakes.serviceimpl.UserServiceImpl; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @Autowired private UserServiceImpl userServiceImpl; @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { System.out.println(user.getCode()); System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 System.out.println("成功！"); user.setState(1); //在数据库中添加数据 userServiceImpl.save(user); return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
package com.Gary.shakes.domain; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; @Entity public class User { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state; protected User() { } public User(Long id,String username,String password,String telephone,String code,Integer state) { this.id=id; this.username=username; this.password=password; this.telephone=telephone; this.code=code; this.state=state; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getTelephone() { return telephone; } public void setTelephone(String telephone) { this.telephone = telephone; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } }
package com.Gary.shakes.service; import org.springframework.stereotype.Service; import com.Gary.shakes.domain.User; public interface UserService { void save(User user); }
package com.Gary.shakes.serviceimpl; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.Gary.shakes.domain.User; import com.Gary.shakes.repository.UserRepostory; import com.Gary.shakes.service.UserService; @Service public class UserServiceImpl implements UserService{ @Autowired private UserRepostory userRepository; @Override public void save(User user) { userRepository.save(user); } }
package com.Gary.shakes.repository; import org.springframework.data.repository.CrudRepository; import com.Gary.shakes.domain.User; public interface UserRepostory extends CrudRepository<User,Long>{ }
判断用户是否重复注使用相同手机登录
用户使用相同的手机登录，则不讲用户信息存储到数据库，用户使用新手机登录，将用户信息存储到数据库
if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
Service层
public boolean judgeTelephone(String telephone) { List<User> list = userRepository.judgeTelephone(telephone); return list.size()==0?false:true; }
Repostory层
@Query(value = "select * from user where telephone = ?1",nativeQuery = true) @Modifying List<User> judgeTelephone(String telephone);
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.Gary.shakes.serviceimpl.UserServiceImpl; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @Autowired private UserServiceImpl userServiceImpl; @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { System.out.println(user.getCode()); System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } return new ModelAndView("/register.htm","userModel",model); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
package com.Gary.shakes.service; import org.springframework.stereotype.Service; import com.Gary.shakes.domain.User; public interface UserService { void save(User user); }
package com.Gary.shakes.serviceimpl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.Gary.shakes.domain.User; import com.Gary.shakes.repository.UserRepostory; import com.Gary.shakes.service.UserService; @Service public class UserServiceImpl implements UserService{ @Autowired private UserRepostory userRepository; @Override public void save(User user) { userRepository.save(user); } public boolean judgeTelephone(String telephone) { List<User> list = userRepository.judgeTelephone(telephone); return list.size()==0?false:true; } }
package com.Gary.shakes.repository; import java.util.List; import org.springframework.data.jpa.repository.Modifying; import org.springframework.data.jpa.repository.Query; import org.springframework.data.repository.CrudRepository; import com.Gary.shakes.domain.User; public interface UserRepostory extends CrudRepository<User,Long>{ @Query(value = "select * from user where telephone = ?1",nativeQuery = true) @Modifying List<User> judgeTelephone(String telephone); }
重定向至Register页面
为避免登录页面跳转至Register页面时出现http://localhost:8080/login?telephone=15078383095&code=4915【易产生用户信息泄露】
UserController.java中修改验证码验证成功时重定向"redirect:/toregister"
if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } return new ModelAndView("redirect:/toregister"); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
修改完后跳转将变成http://localhost:8080/toregister
register.html中引入thymeleaf标签
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
并在body中引入header头部模板
<div th:replace="~{fragments/header::header}"> </div>
将登录的用户放置session域中
UserController.java中将用户登录时的信息放置session域中
//用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } User loginUser = userServiceImpl.findUserByTelephone(user.getTelephone()); //在session域中放置User request.getSession().setAttribute("loginUser",loginUser); System.out.println(loginUser); //telephone //code return new ModelAndView("redirect:/toregister"); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); }
judgeTelephone(String telephone)方法查询用户电话是否重复
findUserByTelephone(String telephone)方法用来根据电话返回用户的ID
public interface UserRepostory extends CrudRepository<User,Long>{ @Query(value = "select * from user where telephone = ?1",nativeQuery = true) //只有修改的时候才会加modefy注解 List<User> judgeTelephone(String telephone); @Query(value = "select * from user where telephone = ?1",nativeQuery = true) User findUserByTelephone(String telephone); }
完成登录用户显示
当用户未登录时候，header头部模块不显示用户登录信息
当用户登录成功时候，header头部模块显示用户登录信息
用户登录成功时，session域中获得用户登录信息，用户退出登录时，发送logOut请求
<div class="header-login"> <a href="mailto:musician@bytedance.com" class="header-email"> <span class="header-email-icon"></span> <span>反馈及举报邮箱 musician@bytedance.com</span> </a> <!-- 未登录时候的样子 --> <a th:if="${session.loginUser==null}" href="#" id="loginBtn"> <span class="header-user-icon"></span> <span>登录</span> </a> <!-- 登录时候的样子 --> <a th:if="${session.loginUser!=null}" href="#" id="loginBtn"> <span class="header-user-icon" style="background-image: url(http://p0.pstatp.com/origin/3793/3114521287)"></span> <span th:text="${session.loginUser.telephone}"></span> </a> <a th:if="${session.loginUser!=null}" th:href="@{~/logOut}">| 退出登录</a> </div>
@RequestMapping("/logOut")
public ModelAndView logOut(HttpServletRequest request)
{
//在session域中移除loginUser
request.getSession().removeAttribute("loginUser");
return new ModelAndView("redirect:/tomusic-people");
}
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div class="header" th:fragment="header"> <div class="header-container"> <a href="https://musician.douyin.com/"> <div class="header-logo"> <img src="music-people_files/logo_08524dd.png" alt="logo"> </div> </a> <div class="header-login"> <a href="mailto:musician@bytedance.com" class="header-email"> <span class="header-email-icon"></span> <span>反馈及举报邮箱 musician@bytedance.com</span> </a> <!-- 未登录时候的样子 --> <a th:if="${session.loginUser==null}" href="#" id="loginBtn"> <span class="header-user-icon"></span> <span>登录</span> </a> <!-- 登录时候的样子 --> <a th:if="${session.loginUser!=null}" href="#" id="loginBtn"> <span class="header-user-icon" style="background-image: url(http://p0.pstatp.com/origin/3793/3114521287)"></span> <span th:text="${session.loginUser.telephone}"></span> </a> <a th:if="${session.loginUser!=null}" th:href="@{~/logOut}">| 退出登录</a> </div> </div> </div> </body> </html>
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.Gary.shakes.serviceimpl.UserServiceImpl; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @Autowired private UserServiceImpl userServiceImpl; @RequestMapping("/logOut") public ModelAndView logOut(HttpServletRequest request) { //在session域中移除loginUser request.getSession().removeAttribute("loginUser"); return new ModelAndView("redirect:/tomusic-people"); } @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { // System.out.println(user.getCode()); // System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } User loginUser = userServiceImpl.findUserByTelephone(user.getTelephone()); //在session域中放置User request.getSession().setAttribute("loginUser",loginUser); System.out.println(loginUser); //telephone //code return new ModelAndView("redirect:/toregister"); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
完善User实体：添加字段以及重写构造函数
添加字段音乐人信息字段用来存储用户信息
@Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state; private String name; private String wechat; private String card;
音乐信息人表单
<div class="main-content-block"> <div th:replace="~{fragments/header::header}"> </div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register_files/icon_2_grey_2e4f238.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr-grey"></div> <div class="common-module"> <img src="register_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">音乐人信息</p> <form class="step-form" id="stepForm" method="post" novalidate="novalidate"> <div class="step-input-group"> <label for="stage_name" class="verify-step-label label-not-null">歌手名</label> <input id="stage_name" name="stage_name" class="step-input" type="text"> </div> <div class="step-input-group"> <label for="name" class="verify-step-label label-not-null">真实姓名</label> <input id="name" name="name" class="verify-step-input" type="text"> </div> <div class="step-input-group"> <label for="wechat" class="verify-step-label">微信</label> <input id="wechat" class="verify-step-input" name="wechat" type="text"> </div> <div class="step-input-group"> <label for="idCard" class="verify-step-label label-not-null">身份证号码</label> <input id="idCard" class="verify-step-input" name="id_card" type="text"> </div> <div class="verify-step-button-group"> <input class="step-button" value="提交实名审核" type="submit"> </div>
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register_files/base_4a834a9.css"> <link rel="stylesheet" href="register_files/base_ce73669.css"> <style type="text/css"> ol { margin: 0; padding: 0 } table td, table th { padding: 0 } .c5 { -webkit-text-decoration-skip: none; font-weight: 700; text-decoration: underline; text-decoration-skip-ink: none; font-size: 12pt; font-family: "\004eff\005b8b" } .c10 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.1500000000000001; orphans: 2; widows: 2; text-align: center } .c0 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.1500000000000001; orphans: 2; widows: 2; text-align: left } .c2 { color: #000000; text-decoration: none; vertical-align: baseline; font-style: normal } .c4 { color: #ff0000; text-decoration: none; vertical-align: baseline; font-style: normal } .c3 { font-weight: 400; font-size: 10.5pt; font-family: "\004eff\005b8b" } .c1 { font-size: 10.5pt; font-family: "\004eff\005b8b"; font-weight: 700 } .c7 { background-color: #ffffff; max-width: 451.5pt; } .c8 { font-weight: 700; font-size: 14pt; font-family: "\004eff\005b8b" } .c6 { background-color: #ffff00 } .c9 { height: 11pt } .title { padding-top: 0pt; color: #000000; font-size: 26pt; padding-bottom: 3pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } .subtitle { padding-top: 0pt; color: #666666; font-size: 15pt; padding-bottom: 16pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } li { color: #000000; font-size: 11pt; font-family: "Arial" } p { margin: 0; color: #000000; font-size: 11pt; font-family: "Arial" } h1 { padding-top: 20pt; color: #000000; font-size: 20pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h2 { padding-top: 18pt; color: #000000; font-size: 16pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h3 { padding-top: 16pt; color: #434343; font-size: 14pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h4 { padding-top: 14pt; color: #666666; font-size: 12pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h5 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h6 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; font-style: italic; orphans: 2; widows: 2; text-align: left } </style> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script async="" src="register_files/analytics.js"></script> <script src="register_files/core_1f49c51.js"></script> <script src="register_files/jquery.js"></script> <script src="register_files/raven_8c2f9e8.js"></script> <script src="register_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_verify_upload', ignoreAjax : [], ignoreStatic : [] }); </script> <script> window.PAGEVIEW_NAME = '/musician_apply_verify/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"> </div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register_files/icon_2_grey_2e4f238.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr-grey"></div> <div class="common-module"> <img src="register_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">音乐人信息</p> <form class="step-form" id="stepForm" method="post" novalidate="novalidate"> <div class="step-input-group"> <label for="stage_name" class="verify-step-label label-not-null">歌手名</label> <input id="stage_name" name="stage_name" class="step-input" type="text"> </div> <div class="step-input-group"> <label for="name" class="verify-step-label label-not-null">真实姓名</label> <input id="name" name="name" class="verify-step-input" type="text"> </div> <div class="step-input-group"> <label for="wechat" class="verify-step-label">微信</label> <input id="wechat" class="verify-step-input" name="wechat" type="text"> </div> <div class="step-input-group"> <label for="idCard" class="verify-step-label label-not-null">身份证号码</label> <input id="idCard" class="verify-step-input" name="id_card" type="text"> </div> <div class="verify-step-button-group"> <input class="step-button" value="提交实名审核" type="submit"> </div> </form> <div class="verify-modal" id="modal"> <div class="verify-modal-container" id="modalContainer"> <h1>你的实名认证未通过！</h1> <p>请重新填写姓名、身份证号</p> <div class="step-button" id="hideModalBtn">确定</div> </div> </div> <div class="agreement-modal" id="agreement"> <div class="agreement-modal-container" id="agreementContainer"> <div class="agreement-modal-content"> <p class="c7"></p> <p class="c10"> <span class="c2 c8">抖音用户音乐作品推广服务及授权协议</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c3">欢迎您在抖音平台（“</span> <span class="c1">抖音</span> <span class="c3">”）推广、上传并授权抖音使用您的音乐！（以下简称“</span> <span class="c1">本授权</span> <span class="c2 c3">”）</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c1">在您进行本授权前，请您认真阅读并遵守《抖音用户服务协议》（以下简称“本协议”）。请您务必审慎阅读并充分理解各条款内容，特别是限制或免除责任条款，以及开通或使用某项服务的单独协议。</span> </p> <p class="c0"> <span class="c2 c1">除非您已阅读并接受本协议所有条款，否则您无权参加本授权及使用相关服务（以下简称“本服务”）。您对本服务的登陆、查看、下载、发布信息、使用等行为即视为您已阅读并同意受本协议的约束。</span> </p> <p class="c0"> <span class="c1">如果您是未成年人，请在监护人的陪同下仔细阅读并充分理解本协议，并特别注意未成年人使用条款，并征得法定监护人的同意下进行本授权。</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c2 c3">前言</span> </p> <p class="c0"> <span class="c1">凡 在抖音推广、上传并授权抖音使用您的音乐的用户（以下简称“您”或“授权人”），在网络报名参加时均需签署本协议，参与者通过网络阅读本协议全文并点击勾 选“我已阅读并同意”项后，本协议对协议各方当事人即具有合同法律效力。授权人按上传流程提交授权人的作品（以下简称 “授权作品”），即视为授权人完全同意本授权，并为在“抖音”及相关平台上推广授权作品授权北京微播视界科技有限公司及其关联公司、控制公司（以下统称 “公司”或“被授权人”）</span> <span class="c5">排他使用授权作品</span> <span class="c2 c1">。</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c2 c3">一、【声明与保证】</span> </p> <p class="c0"> <span class="c2 c3">1.1授权人保证：</span> </p> <p class="c0"> <span class="c2 c1">（1） 授权人提交的授权作品为其原创，通过本协议向被授权人进行的授权是合法、有效、无争议的，且拥有授权被授权人按本协议约定的方式使用授权作品的权利。如果 因为被授权人在本协议范围内使用授权作品陷入任何诉讼、调查、法律纠纷、行政处罚、诉讼或仲裁等，由授权人承担全部的法律责任，并赔偿被授权人因此受到的 全部直接或间接损失。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人拥有授权作品之合法完整的词曲著作权以及邻接权（包括录音录像制作者权、表演者权等），或前述权利合法有效的许可授权，以及其转授权权利。</span> </p> <p class="c0"> <span class="c2 c1">（3）词曲著作权人、表演者、录音/录像制作者之间对授权作品著作权份额的内部约定，不得对抗被授权人依本协议约定取得的授权和权益。</span> </p> <p class="c0"> <span class="c2 c1">1.2 授权人保证本授权需符合以下标准。授权人如提交有违下列标准之授权作品或材料，将直接视为丧失上传授权作品资格，被授权人有权删除提交内容（包括但不限于 授权人信息、授权作品等）且无须作出任何解释及通知。授权人不得以未获通知取消资格为由对被授权人提出任何异议。具体标准如下：</span> </p> <p class="c0"> <span class="c1">（1）授权人在线完成抖音用户注册并使用抖音服务时，即为授权人已确认理解、同意并适用《</span> <a id="id.30j0zll"></a> <a id="id.gjdgxs"></a> <span class="c2 c1">抖音—用户服务协议及隐私保护政策》及其他相关规则。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人提供的信息（包括但不限于授权人的姓名、性别、年龄、身份证号码、照片、图片、音乐作品相关信息等）是真实、完整、合法的。</span> </p> <p class="c0"> <span class="c2 c1">（3）授权人未与其他自然人、法人或其他组织签订任何限制授权人参加本授权或实施与本授权有关的一切行为的协议（包括但不限于词曲、唱片、演唱、经纪、影视合约）；或虽签订协议但已取得签约相对人的明确同意，同意授权人参加本授权并能独立实施与本授权有关的一切行为。</span> </p> <p class="c0"> <span class="c2 c1">（4）授权作品在本授权前未进行过于本授权冲突的其他授权，并且在本授权结束之前不会将同一作品用于于本授权冲突的其他授权及活动。</span> </p> <p class="c0"> <span class="c2 c1">（5） 如因授权作品违反法律法规、政策规章、公序良俗、存在权利瑕疵或侵犯了第三方的合法权益（包括但不限于著作权、专利权、商标权、肖像权、隐私权、名誉权 等）而导致被授权人或与被授权人合作的其他单位面临任何第三方的索赔、诉讼、投诉；或者使被授权人或者与被授权人合作的其他单位因此遭受任何名誉、声誉或 者财产上的损失，授权人将积极地采取一切可能采取的措施，以保证被授权人及与被授权人合作的其他单位免受上述索赔、诉讼、投诉的影响，同时对被授权人或与 被授权人合作的其他单位因此遭受的直接或间接经济损失承担全部赔偿责任。</span> </p> <p class="c0"> <span class="c2 c3">二、【授权内容】</span> </p> <p class="c0"> <span class="c2 c1">2.1授权内容：</span> </p> <p class="c0"> <span class="c2 c1">（1） 授权人将授权作品，包括词作品、曲作品、录音制品（包含相关词曲权利），整首及部分片段（根据授权人音乐上传的具体情况来判断是整首授权还是部分授权）的 著作权及其邻接权，包括信息网络传播权、放映权、广播权、复制权、发行权、表演权、改编权、表演者权、录音录像制作者权，及行使该权利所必需的相关权利独 家授予被授权人。并且，授权人明确知悉以上授权是其能够进行本授权的前提，且确认并同意前述权利不会授权给与抖音相同或类似的其他任何平台或公司。</span> </p> <a id="id.1fob9te"></a> <a id="id.3znysh7"></a> <p class="c0"> <span class="c1 c2">（2）针对上述授权内容，被授权人有权以自己的名义制止、打击侵权和盗版行为，包括但不限于申请证据保全、财产保全、行政投诉、刑事自诉、提起民事诉讼、上诉、申请执行、和解、获得赔偿金等。</span> </p> <p class="c0"> <span class="c1">2.2授权使用范围：</span> <span class="c5">任何站内、站外，线上、线下，大众媒体、自媒体等。</span> </p> <p class="c0"> <span class="c1">2.3授权性质：</span> <span class="c5">免费、排他（排除同类平台）</span> <span class="c2 c1">、可再许可（通过多层次）、可撤销（须提前90天书面通知）的授权。</span> </p> <p class="c0"> <span class="c1">2.4授权使用方式：</span> <span class="c5">被授权人及其平台用户有权（1）播放试听授权内容；（2）在抖音内作为背景音乐使用授权内容；（3）在被授权人及其关联公司平台（包括但不限于平台名称为 “今日头条”、“西瓜视频”、“火山”、“Tik Tok”、“Vigo”、“Faceu激萌”）使用；</span> <span class="c1">（3）利用授权内容作出的资料（包括音视频等）单独和/或整合在授权范围内进行播放、推广、转发、分享等</span> <span class="c5">； （4）利用授权内容针对抖音平台做宣传、推广、广告使用；（5）被授权人进行商业化使用（该等商业化使用指有偿提供给平台广告主作为背景音乐使用）和在电 信运营商平台（如中移动、联通、电信等）所有电信类产品（彩铃、振铃、全曲、IVR等）接入进行收益，该项下商业化使用和电信类产品的收益，被授权人有权 收取不少于净收入的15%作为运营代理服务费。</span> </p> <p class="c0"> <span class="c1">2.5授权地域范围：</span> <span class="c5">全世界范围内。</span> </p> <p class="c0"> <span class="c1">2.6授权期限：</span> <span class="c5">自本协议生效之日起永久，且生效之日起一年后可以提前90天书面通知的方式撤销授权，生效之日起一年内不得撤销授权。</span> </p> <p class="c0"> <span class="c2 c3">2.7授权特别规定：</span> </p> <p class="c0"> <span class="c2 c1">（1）在授权期间，被授权人有权对抖音及被授权人其他平台的名称进行单方变更（包括但不限于更名、新增等），变更后的平台同样适用本协议。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人确认并同意，被授权人有权依其产品或平台的运营需要，安排或指定其关联公司、继承公司或其认可的第三方公司（“继承公司”）继续运营被授权人的平台，而无须另行取得授权人书面同意或确认。</span> </p> <p class="c0"> <span class="c2 c3">三、【违约责任】</span> </p> <p class="c0" id="h.2et92p0"> <span class="c1">任何一方违约的，需按协议约定或法律规定向非违约方承担违约赔偿责任。授权人未能提前</span> <span class="c1 c6">90天</span> <span class="c2 c1">以书面形式通知被授权人而与其他唱片公司或其他任何公司、机构、个人签约或授权的，属授权人违约，除继续履行本协议外，授权人应向被授权人支付相当于授权人所获报酬等总收入30%的违约金，且违约金最少不低于人民币二十万元。</span> </p> <p class="c0"> <span class="c2 c3">四、【未成年人使用条款】</span> </p> <p class="c0"> <span class="c2 c1">4.1若您为未成年人，应在监护人监护、指导下阅读本协议和使用本服务。</span> </p> <p class="c0"> <span class="c2 c1">4.2未成年人用户涉世未深，容易被网络虚象迷惑，且好奇心强，遇事缺乏随机应变的处理能力，很容易被别有用心的人利用而又缺乏自我保护能力。因此，未成年人用户在使用本服务时应注意以下事项，提高安全意识，加强自我保护：</span> </p> <p class="c0"> <span class="c2 c1">（1）认清网络世界与现实世界的区别，避免沉迷于网络，影响日常的学习生活；</span> </p> <p class="c0"> <span class="c2 c1">（2）填写对外公开的个人资料时，加强个人保护意识，以免不良分子对个人生活造成骚扰；</span> </p> <p class="c0"> <span class="c2 c1">（3）在监护人或老师的指导下，学习正确使用网络；</span> </p> <p class="c0"> <span class="c2 c1">（4）避免陌生网友随意会面或参与联谊活动，以免不法分子有机可乘，危及自身安全。</span> </p> <p class="c0"> <span class="c2 c1">（5）在监护人的监护和授权下使用涉及付费类的服务。</span> </p> <p class="c0"> <span class="c1">4.3未成年人在无监护人监护、指导或监护人未尽到监护、指导义务的情况下，自行阅读本协议和使用本服务，由此对未成年人本人或其家庭或他人带来的不利后果或损失，均由该未成年人及其家长或监护人承担，公司不对未成年人该行为产生的后果或损失承担任何责任。</span> </p> <p class="c0"> <span class="c2 c3">五、【保密条款】</span> </p> <p class="c0"> <span class="c2 c1">5.1授权人因进行本授权而直接或间接获得的与本授权有直接或间接关联的一切信息，均负有保密的义务。未经公司书面同意，不得以泄露、告知、公布、发表、出版、传授、转让或其他任何形式，使任何第三方知悉属于被授权人的一切秘密信息。</span> </p> <p class="c0"> <span class="c2 c1">5.2本授权终止后，授权人仍对其在活动期间所知悉的属于公司的秘密信息具有保密义务。</span> </p> <p class="c0"> <span class="c2 c3">六、【不可抗力及免责事由】</span> </p> <p class="c0"> <span class="c2 c3">6.1 您理解并同意，在使用本服务的过程中，可能会遇到不可抗力等风险因素，使本服务发生中断。不可抗力是指不能预见、不能克服并不能避免且对一方或双方造成重 大影响的客观事件，包括但不限于自然灾害如洪水、地震、瘟疫流行和风暴等以及社会事件如战争、动乱、政府行为等。出现上述情况时，公司将努力在第一时间与 相关单位配合，及时进行修复，但是由此给您造成的损失公司在法律允许的范围内免责。</span> </p> <p class="c0"> <span class="c2 c3">6.2在法律允许的范围内，公司对以下情形导致的服务中断或受阻不承担责任：</span> </p> <p class="c0"> <span class="c2 c3">（1）受到计算机病毒、木马或其他恶意程序、黑客攻击的破坏；</span> </p> <p class="c0"> <span class="c2 c3">（2）用户或的电脑软件、系统、硬件和通信线路出现故障；</span> </p> <p class="c0"> <span class="c2 c3">（3）用户操作不当；</span> </p> <p class="c0"> <span class="c2 c3">（4）用户通过非授权的方式使用本服务；</span> </p> <p class="c0"> <span class="c2 c3">（5）其他无法控制或合理预见的情形。</span> </p> <p class="c0"> <span class="c2 c3">6.3您理解并同意，在使用本服务的过程中，可能会遇到网络信息或其他用户行为带来的风险，公司不对任何信息的真实性、适用性、合法性承担责任，也不对因侵权行为给您造成的损害负责。这些风险包括但不限于：</span> </p> <p class="c0"> <span class="c2 c3">（1）来自他人匿名或冒名的含有威胁、诽谤、令人反感或非法内容的信息；</span> </p> <p class="c0"> <span class="c2 c3">（2）因使用本协议项下的服务，遭受他人误导、欺骗或其他导致或可能导致的任何心理、生理上的伤害以及经济上的损失；</span> </p> <p class="c0"> <span class="c2 c3">（3）其他因网络信息或用户行为引起的风险。</span> </p> <p class="c0"> <span class="c2 c3">6.4您理解并同意，本服务并非为某些特定目的而设计，包括但不限于核设施、军事用途、医疗设施、交通通讯等重要领域。如果因为软件或服务的原因导致上述操作失败而带来的人员伤亡、财产损失和环境破坏等，公司不承担法律责任。</span> </p> <p class="c0"> <span class="c2 c3">6.5公司依据本协议约定获得处理违法违规内容的权利，该权利不构成公司的义务或承诺，公司不能保证及时发现违法行为或进行相应处理。</span> </p> <p class="c0"> <span class="c2 c3">6.6在任何情况下，您不应轻信借款、索要密码或其他涉及财产的网络信息。涉及财产操作的，请一定先核实对方身份，并请经常留意公司有关防范诈骗犯罪的提示。</span> </p> <p class="c0"> <span class="c2 c3">七、【协议的生效与变更】</span> </p> <p class="c0"> <span class="c2 c3">7.1您使用本服务即视为您已阅读本协议并接受本协议的约束。</span> </p> <p class="c0"> <span class="c2 c3">7.2公司有权在必要时修改本协议条款。您可以在相关服务页面查阅最新版本的协议条款。</span> </p> <p class="c0"> <span class="c2 c3">7.3协议条款变更后，如果您继续使用提供的软件或服务，即视为您已接受修改后的协议。如果您不接受修改后的协议，应当停止使用公司提供的软件或服务。</span> </p> <p class="c0"> <span class="c2 c3">八、【服务的变更、中断、终止】</span> </p> <p class="c0"> <span class="c2 c3">8.1您理解并同意公司可能会对服务内容进行变更，也可能会中断、中止或终止服务。</span> </p> <p class="c0"> <span class="c2 c3">8.2如发生下列任何一种情形，公司有权不经通知而中断或终止向您提供的服务：</span> </p> <p class="c0"> <span class="c2 c3">（1）根据法律规定您应提交真实身份等信息，而您提供的个人资料不真实、或与注册时信息不一致又未能提供合理证明；</span> </p> <p class="c0"> <span class="c2 c3">（2）您违反相关法律法规或本协议的约定；</span> </p> <p class="c0"> <span class="c2 c3">（3）按照法律规定或主管部门的要求；</span> </p> <p class="c0"> <span class="c2 c3">（4）出于安全的原因或其他必要的情形。</span> </p> <p class="c0"> <span class="c2 c3">8.3您有责任自行备份存储在本服务中的数据。如果您的服务被终止，公司可以从服务器上永久地删除您的数据。本服务终止后，公司没有义务向您返还数据。</span> </p> <p class="c0"> <span class="c2 c3">九、【争议解决与适用法律】</span> </p> <p class="c0"> <span class="c3">9.1双方应严格履行本协议，因本协议履行产生争议的，双方应友好协商，协商不成时，任何一方均有权向</span> <span class="c1">北京市海淀区人民法院</span> <span class="c2 c3">申请诉讼方式解决。</span> </p> <p class="c0"> <span class="c2 c3">9.2本协议的订立、履行、争议解决与解释均适用中华人民共和国大陆地区法律。</span> </p> <p class="c0"> <span class="c2 c3">十、【其他注意事项】</span> </p> <p class="c0"> <span class="c2 c1">10.1因第三方的原因，导致授权作品被迫中止本授权在抖音及相关平台使用的，授权人因此所受到的损失应直接向第三方要求赔偿，被授权人不负任何赔偿责任。</span> </p> <p class="c0"> <span class="c2 c1">10.2 授权作品均为授权人自愿提供，因此，该授权作品的著作权及内容的真实性、合法性均由授权人自行负责。被授权人对所有授权作品的著作权及内容的真实性、合法 性不提供任何明示或暗示的担保，被授权人对于任何个人、法人或其他组织因使用授权作品而引起的任何形式的损失，包括但不限于直接的、间接的、偶然的、惩罚 性的损失，不承担任何责任。</span> </p> <p class="c0"> <span class="c2 c3">10.3本协议任何一方未能及时行使本协议项下的权利不应被视为放弃该权利，也不影响该方在将来行使该权利。</span> </p> <p class="c0" id="h.tyjcwt"> <span class="c2 c3">10.4如果本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，或违反任何适用的法律，则该条款被视为删除，不影响本协议的其余条款的法律效力。</span> </p> <p class="c0"> <span class="c3">10.5本协议更新于</span> <span class="c3 c6">2018年8月21日</span> <span class="c2 c3">。</span> </p> <p></p> </div> <div class="agreement-step-button-group"> <input class="agreement-button-disabled" disabled="disabled" value="我已阅读并接受《参赛协议》" id="agreeSubmit" type="button"> <div class="step-button" id="agreeHideBtn">取消</div> </div> </div> </div> </div> <script>$(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/verify/verify'); })</script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_verify_upload' } }).install();</script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_verify_upload' } }).install();</script> <script src="register_files/index_7a47cdc.js"></script> <script src="register_files/es6-promise.js"></script> <script src="register_files/promise.js"></script> <script src="register_files/form_ebcf55b.js"></script> <script src="register_files/file_f9a5ca7.js"></script> <script src="register_files/toast_d6fd98c.js"></script> <script src="register_files/verify_7efc371.js"></script> </body> </html>
package com.Gary.shakes.domain; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; @Entity public class User { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String username; private String password; private String telephone; //验证码 private String code; //状态是否激活 private Integer state; private String name; private String wechat; private String card; protected User() { } public User(Long id,String username,String password,String telephone,String code,Integer state ,String name,String wechat,String card) { this.id=id; this.username=username; this.password=password; this.telephone=telephone; this.code=code; this.state=state; this.name=name; this.wechat=wechat; this.card=card; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getWechat() { return wechat; } public void setWechat(String wechat) { this.wechat = wechat; } public String getCard() { return card; } public void setCard(String card) { this.card = card; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getTelephone() { return telephone; } public void setTelephone(String telephone) { this.telephone = telephone; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } }
书写异步Post完成用户的添加
书写点击提交同意按钮的异步post
添加register注册页面四个属性 username name wechat card
$("#agreeSubmit").click(function() { var username = $("#stage_name").val(); var name = $("#name").val(); var wechat = $("#wechat").val(); var card = $("#idCard").val(); $.post( //action地址 [[@{~/addUser}]], //数据 {"username":username,"name":name,"wechat":wechat,"card":card}, //回调函数 function(data) { alert("access"); }, //数据格式 "json" ) })
点击提交后将信息发送addUser请求
在UserController.java中添加addUser请求
@RequestMapping("/addUser")
public ModelAndView addUser(User user,HttpServletResponse response,HttpServletRequest request) throws IOException
{
//在session域中的User 具有前四个属性 无wechat card name username
User loginUser = (User) request.getSession().getAttribute("loginUser");
//user 没id 有wechat card name username
loginUser.setWechat(user.getWechat());
loginUser.setCard(user.getCard());
loginUser.setName(user.getName());
loginUser.setUsername(user.getUsername());
userServiceImpl.save(loginUser);
response.getWriter().write("{\"success\":"+true+"}");
return null;
}
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register_files/base_4a834a9.css"> <link rel="stylesheet" href="register_files/base_ce73669.css"> <style type="text/css"> ol { margin: 0; padding: 0 } table td, table th { padding: 0 } .c5 { -webkit-text-decoration-skip: none; font-weight: 700; text-decoration: underline; text-decoration-skip-ink: none; font-size: 12pt; font-family: "\004eff\005b8b" } .c10 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.1500000000000001; orphans: 2; widows: 2; text-align: center } .c0 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.1500000000000001; orphans: 2; widows: 2; text-align: left } .c2 { color: #000000; text-decoration: none; vertical-align: baseline; font-style: normal } .c4 { color: #ff0000; text-decoration: none; vertical-align: baseline; font-style: normal } .c3 { font-weight: 400; font-size: 10.5pt; font-family: "\004eff\005b8b" } .c1 { font-size: 10.5pt; font-family: "\004eff\005b8b"; font-weight: 700 } .c7 { background-color: #ffffff; max-width: 451.5pt; } .c8 { font-weight: 700; font-size: 14pt; font-family: "\004eff\005b8b" } .c6 { background-color: #ffff00 } .c9 { height: 11pt } .title { padding-top: 0pt; color: #000000; font-size: 26pt; padding-bottom: 3pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } .subtitle { padding-top: 0pt; color: #666666; font-size: 15pt; padding-bottom: 16pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } li { color: #000000; font-size: 11pt; font-family: "Arial" } p { margin: 0; color: #000000; font-size: 11pt; font-family: "Arial" } h1 { padding-top: 20pt; color: #000000; font-size: 20pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h2 { padding-top: 18pt; color: #000000; font-size: 16pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h3 { padding-top: 16pt; color: #434343; font-size: 14pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h4 { padding-top: 14pt; color: #666666; font-size: 12pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h5 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h6 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.1500000000000001; page-break-after: avoid; font-style: italic; orphans: 2; widows: 2; text-align: left } </style> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script async="" src="register_files/analytics.js"></script> <script src="register_files/core_1f49c51.js"></script> <script src="register_files/jquery.js"></script> <script src="register_files/raven_8c2f9e8.js"></script> <script src="register_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_verify_upload', ignoreAjax : [], ignoreStatic : [] }); </script> <script> window.PAGEVIEW_NAME = '/musician_apply_verify/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register_files/icon_2_grey_2e4f238.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr-grey"></div> <div class="common-module"> <img src="register_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">音乐人信息</p> <form class="step-form" id="stepForm" method="post" novalidate="novalidate"> <div class="step-input-group"> <label for="stage_name" class="verify-step-label label-not-null">歌手名</label> <input id="stage_name" name="stage_name" class="step-input" type="text"> </div> <div class="step-input-group"> <label for="name" class="verify-step-label label-not-null">真实姓名</label> <input id="name" name="name" class="verify-step-input" type="text"> </div> <div class="step-input-group"> <label for="wechat" class="verify-step-label">微信</label> <input id="wechat" class="verify-step-input" name="wechat" type="text"> </div> <div class="step-input-group"> <label for="idCard" class="verify-step-label label-not-null">身份证号码</label> <input id="idCard" class="verify-step-input" name="id_card" type="text"> </div> <div class="verify-step-button-group"> <input class="step-button" value="提交实名审核" type="submit"> </div> </form> <div class="verify-modal" id="modal"> <div class="verify-modal-container" id="modalContainer"> <h1>你的实名认证未通过！</h1> <p>请重新填写姓名、身份证号</p> <div class="step-button" id="hideModalBtn">确定</div> </div> </div> <div class="agreement-modal" id="agreement"> <div class="agreement-modal-container" id="agreementContainer"> <div class="agreement-modal-content"> <p class="c7"></p> <p class="c10"> <span class="c2 c8">抖音用户音乐作品推广服务及授权协议</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c3">欢迎您在抖音平台（“</span> <span class="c1">抖音</span> <span class="c3">”）推广、上传并授权抖音使用您的音乐！（以下简称“</span> <span class="c1">本授权</span> <span class="c2 c3">”）</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c1">在您进行本授权前，请您认真阅读并遵守《抖音用户服务协议》（以下简称“本协议”）。请您务必审慎阅读并充分理解各条款内容，特别是限制或免除责任条款，以及开通或使用某项服务的单独协议。</span> </p> <p class="c0"> <span class="c2 c1">除非您已阅读并接受本协议所有条款，否则您无权参加本授权及使用相关服务（以下简称“本服务”）。您对本服务的登陆、查看、下载、发布信息、使用等行为即视为您已阅读并同意受本协议的约束。</span> </p> <p class="c0"> <span class="c1">如果您是未成年人，请在监护人的陪同下仔细阅读并充分理解本协议，并特别注意未成年人使用条款，并征得法定监护人的同意下进行本授权。</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c2 c3">前言</span> </p> <p class="c0"> <span class="c1">凡 在抖音推广、上传并授权抖音使用您的音乐的用户（以下简称“您”或“授权人”），在网络报名参加时均需签署本协议，参与者通过网络阅读本协议全文并点击勾 选“我已阅读并同意”项后，本协议对协议各方当事人即具有合同法律效力。授权人按上传流程提交授权人的作品（以下简称 “授权作品”），即视为授权人完全同意本授权，并为在“抖音”及相关平台上推广授权作品授权北京微播视界科技有限公司及其关联公司、控制公司（以下统称 “公司”或“被授权人”）</span> <span class="c5">排他使用授权作品</span> <span class="c2 c1">。</span> </p> <p class="c0 c9"> <span class="c2 c3"></span> </p> <p class="c0"> <span class="c2 c3">一、【声明与保证】</span> </p> <p class="c0"> <span class="c2 c3">1.1授权人保证：</span> </p> <p class="c0"> <span class="c2 c1">（1） 授权人提交的授权作品为其原创，通过本协议向被授权人进行的授权是合法、有效、无争议的，且拥有授权被授权人按本协议约定的方式使用授权作品的权利。如果 因为被授权人在本协议范围内使用授权作品陷入任何诉讼、调查、法律纠纷、行政处罚、诉讼或仲裁等，由授权人承担全部的法律责任，并赔偿被授权人因此受到的 全部直接或间接损失。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人拥有授权作品之合法完整的词曲著作权以及邻接权（包括录音录像制作者权、表演者权等），或前述权利合法有效的许可授权，以及其转授权权利。</span> </p> <p class="c0"> <span class="c2 c1">（3）词曲著作权人、表演者、录音/录像制作者之间对授权作品著作权份额的内部约定，不得对抗被授权人依本协议约定取得的授权和权益。</span> </p> <p class="c0"> <span class="c2 c1">1.2 授权人保证本授权需符合以下标准。授权人如提交有违下列标准之授权作品或材料，将直接视为丧失上传授权作品资格，被授权人有权删除提交内容（包括但不限于 授权人信息、授权作品等）且无须作出任何解释及通知。授权人不得以未获通知取消资格为由对被授权人提出任何异议。具体标准如下：</span> </p> <p class="c0"> <span class="c1">（1）授权人在线完成抖音用户注册并使用抖音服务时，即为授权人已确认理解、同意并适用《</span> <a id="id.30j0zll"></a> <a id="id.gjdgxs"></a> <span class="c2 c1">抖音—用户服务协议及隐私保护政策》及其他相关规则。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人提供的信息（包括但不限于授权人的姓名、性别、年龄、身份证号码、照片、图片、音乐作品相关信息等）是真实、完整、合法的。</span> </p> <p class="c0"> <span class="c2 c1">（3）授权人未与其他自然人、法人或其他组织签订任何限制授权人参加本授权或实施与本授权有关的一切行为的协议（包括但不限于词曲、唱片、演唱、经纪、影视合约）；或虽签订协议但已取得签约相对人的明确同意，同意授权人参加本授权并能独立实施与本授权有关的一切行为。</span> </p> <p class="c0"> <span class="c2 c1">（4）授权作品在本授权前未进行过于本授权冲突的其他授权，并且在本授权结束之前不会将同一作品用于于本授权冲突的其他授权及活动。</span> </p> <p class="c0"> <span class="c2 c1">（5） 如因授权作品违反法律法规、政策规章、公序良俗、存在权利瑕疵或侵犯了第三方的合法权益（包括但不限于著作权、专利权、商标权、肖像权、隐私权、名誉权 等）而导致被授权人或与被授权人合作的其他单位面临任何第三方的索赔、诉讼、投诉；或者使被授权人或者与被授权人合作的其他单位因此遭受任何名誉、声誉或 者财产上的损失，授权人将积极地采取一切可能采取的措施，以保证被授权人及与被授权人合作的其他单位免受上述索赔、诉讼、投诉的影响，同时对被授权人或与 被授权人合作的其他单位因此遭受的直接或间接经济损失承担全部赔偿责任。</span> </p> <p class="c0"> <span class="c2 c3">二、【授权内容】</span> </p> <p class="c0"> <span class="c2 c1">2.1授权内容：</span> </p> <p class="c0"> <span class="c2 c1">（1） 授权人将授权作品，包括词作品、曲作品、录音制品（包含相关词曲权利），整首及部分片段（根据授权人音乐上传的具体情况来判断是整首授权还是部分授权）的 著作权及其邻接权，包括信息网络传播权、放映权、广播权、复制权、发行权、表演权、改编权、表演者权、录音录像制作者权，及行使该权利所必需的相关权利独 家授予被授权人。并且，授权人明确知悉以上授权是其能够进行本授权的前提，且确认并同意前述权利不会授权给与抖音相同或类似的其他任何平台或公司。</span> </p> <a id="id.1fob9te"></a> <a id="id.3znysh7"></a> <p class="c0"> <span class="c1 c2">（2）针对上述授权内容，被授权人有权以自己的名义制止、打击侵权和盗版行为，包括但不限于申请证据保全、财产保全、行政投诉、刑事自诉、提起民事诉讼、上诉、申请执行、和解、获得赔偿金等。</span> </p> <p class="c0"> <span class="c1">2.2授权使用范围：</span> <span class="c5">任何站内、站外，线上、线下，大众媒体、自媒体等。</span> </p> <p class="c0"> <span class="c1">2.3授权性质：</span> <span class="c5">免费、排他（排除同类平台）</span> <span class="c2 c1">、可再许可（通过多层次）、可撤销（须提前90天书面通知）的授权。</span> </p> <p class="c0"> <span class="c1">2.4授权使用方式：</span> <span class="c5">被授权人及其平台用户有权（1）播放试听授权内容；（2）在抖音内作为背景音乐使用授权内容；（3）在被授权人及其关联公司平台（包括但不限于平台名称为 “今日头条”、“西瓜视频”、“火山”、“Tik Tok”、“Vigo”、“Faceu激萌”）使用；</span> <span class="c1">（3）利用授权内容作出的资料（包括音视频等）单独和/或整合在授权范围内进行播放、推广、转发、分享等</span> <span class="c5">； （4）利用授权内容针对抖音平台做宣传、推广、广告使用；（5）被授权人进行商业化使用（该等商业化使用指有偿提供给平台广告主作为背景音乐使用）和在电 信运营商平台（如中移动、联通、电信等）所有电信类产品（彩铃、振铃、全曲、IVR等）接入进行收益，该项下商业化使用和电信类产品的收益，被授权人有权 收取不少于净收入的15%作为运营代理服务费。</span> </p> <p class="c0"> <span class="c1">2.5授权地域范围：</span> <span class="c5">全世界范围内。</span> </p> <p class="c0"> <span class="c1">2.6授权期限：</span> <span class="c5">自本协议生效之日起永久，且生效之日起一年后可以提前90天书面通知的方式撤销授权，生效之日起一年内不得撤销授权。</span> </p> <p class="c0"> <span class="c2 c3">2.7授权特别规定：</span> </p> <p class="c0"> <span class="c2 c1">（1）在授权期间，被授权人有权对抖音及被授权人其他平台的名称进行单方变更（包括但不限于更名、新增等），变更后的平台同样适用本协议。</span> </p> <p class="c0"> <span class="c2 c1">（2）授权人确认并同意，被授权人有权依其产品或平台的运营需要，安排或指定其关联公司、继承公司或其认可的第三方公司（“继承公司”）继续运营被授权人的平台，而无须另行取得授权人书面同意或确认。</span> </p> <p class="c0"> <span class="c2 c3">三、【违约责任】</span> </p> <p class="c0" id="h.2et92p0"> <span class="c1">任何一方违约的，需按协议约定或法律规定向非违约方承担违约赔偿责任。授权人未能提前</span> <span class="c1 c6">90天</span> <span class="c2 c1">以书面形式通知被授权人而与其他唱片公司或其他任何公司、机构、个人签约或授权的，属授权人违约，除继续履行本协议外，授权人应向被授权人支付相当于授权人所获报酬等总收入30%的违约金，且违约金最少不低于人民币二十万元。</span> </p> <p class="c0"> <span class="c2 c3">四、【未成年人使用条款】</span> </p> <p class="c0"> <span class="c2 c1">4.1若您为未成年人，应在监护人监护、指导下阅读本协议和使用本服务。</span> </p> <p class="c0"> <span class="c2 c1">4.2未成年人用户涉世未深，容易被网络虚象迷惑，且好奇心强，遇事缺乏随机应变的处理能力，很容易被别有用心的人利用而又缺乏自我保护能力。因此，未成年人用户在使用本服务时应注意以下事项，提高安全意识，加强自我保护：</span> </p> <p class="c0"> <span class="c2 c1">（1）认清网络世界与现实世界的区别，避免沉迷于网络，影响日常的学习生活；</span> </p> <p class="c0"> <span class="c2 c1">（2）填写对外公开的个人资料时，加强个人保护意识，以免不良分子对个人生活造成骚扰；</span> </p> <p class="c0"> <span class="c2 c1">（3）在监护人或老师的指导下，学习正确使用网络；</span> </p> <p class="c0"> <span class="c2 c1">（4）避免陌生网友随意会面或参与联谊活动，以免不法分子有机可乘，危及自身安全。</span> </p> <p class="c0"> <span class="c2 c1">（5）在监护人的监护和授权下使用涉及付费类的服务。</span> </p> <p class="c0"> <span class="c1">4.3未成年人在无监护人监护、指导或监护人未尽到监护、指导义务的情况下，自行阅读本协议和使用本服务，由此对未成年人本人或其家庭或他人带来的不利后果或损失，均由该未成年人及其家长或监护人承担，公司不对未成年人该行为产生的后果或损失承担任何责任。</span> </p> <p class="c0"> <span class="c2 c3">五、【保密条款】</span> </p> <p class="c0"> <span class="c2 c1">5.1授权人因进行本授权而直接或间接获得的与本授权有直接或间接关联的一切信息，均负有保密的义务。未经公司书面同意，不得以泄露、告知、公布、发表、出版、传授、转让或其他任何形式，使任何第三方知悉属于被授权人的一切秘密信息。</span> </p> <p class="c0"> <span class="c2 c1">5.2本授权终止后，授权人仍对其在活动期间所知悉的属于公司的秘密信息具有保密义务。</span> </p> <p class="c0"> <span class="c2 c3">六、【不可抗力及免责事由】</span> </p> <p class="c0"> <span class="c2 c3">6.1 您理解并同意，在使用本服务的过程中，可能会遇到不可抗力等风险因素，使本服务发生中断。不可抗力是指不能预见、不能克服并不能避免且对一方或双方造成重 大影响的客观事件，包括但不限于自然灾害如洪水、地震、瘟疫流行和风暴等以及社会事件如战争、动乱、政府行为等。出现上述情况时，公司将努力在第一时间与 相关单位配合，及时进行修复，但是由此给您造成的损失公司在法律允许的范围内免责。</span> </p> <p class="c0"> <span class="c2 c3">6.2在法律允许的范围内，公司对以下情形导致的服务中断或受阻不承担责任：</span> </p> <p class="c0"> <span class="c2 c3">（1）受到计算机病毒、木马或其他恶意程序、黑客攻击的破坏；</span> </p> <p class="c0"> <span class="c2 c3">（2）用户或的电脑软件、系统、硬件和通信线路出现故障；</span> </p> <p class="c0"> <span class="c2 c3">（3）用户操作不当；</span> </p> <p class="c0"> <span class="c2 c3">（4）用户通过非授权的方式使用本服务；</span> </p> <p class="c0"> <span class="c2 c3">（5）其他无法控制或合理预见的情形。</span> </p> <p class="c0"> <span class="c2 c3">6.3您理解并同意，在使用本服务的过程中，可能会遇到网络信息或其他用户行为带来的风险，公司不对任何信息的真实性、适用性、合法性承担责任，也不对因侵权行为给您造成的损害负责。这些风险包括但不限于：</span> </p> <p class="c0"> <span class="c2 c3">（1）来自他人匿名或冒名的含有威胁、诽谤、令人反感或非法内容的信息；</span> </p> <p class="c0"> <span class="c2 c3">（2）因使用本协议项下的服务，遭受他人误导、欺骗或其他导致或可能导致的任何心理、生理上的伤害以及经济上的损失；</span> </p> <p class="c0"> <span class="c2 c3">（3）其他因网络信息或用户行为引起的风险。</span> </p> <p class="c0"> <span class="c2 c3">6.4您理解并同意，本服务并非为某些特定目的而设计，包括但不限于核设施、军事用途、医疗设施、交通通讯等重要领域。如果因为软件或服务的原因导致上述操作失败而带来的人员伤亡、财产损失和环境破坏等，公司不承担法律责任。</span> </p> <p class="c0"> <span class="c2 c3">6.5公司依据本协议约定获得处理违法违规内容的权利，该权利不构成公司的义务或承诺，公司不能保证及时发现违法行为或进行相应处理。</span> </p> <p class="c0"> <span class="c2 c3">6.6在任何情况下，您不应轻信借款、索要密码或其他涉及财产的网络信息。涉及财产操作的，请一定先核实对方身份，并请经常留意公司有关防范诈骗犯罪的提示。</span> </p> <p class="c0"> <span class="c2 c3">七、【协议的生效与变更】</span> </p> <p class="c0"> <span class="c2 c3">7.1您使用本服务即视为您已阅读本协议并接受本协议的约束。</span> </p> <p class="c0"> <span class="c2 c3">7.2公司有权在必要时修改本协议条款。您可以在相关服务页面查阅最新版本的协议条款。</span> </p> <p class="c0"> <span class="c2 c3">7.3协议条款变更后，如果您继续使用提供的软件或服务，即视为您已接受修改后的协议。如果您不接受修改后的协议，应当停止使用公司提供的软件或服务。</span> </p> <p class="c0"> <span class="c2 c3">八、【服务的变更、中断、终止】</span> </p> <p class="c0"> <span class="c2 c3">8.1您理解并同意公司可能会对服务内容进行变更，也可能会中断、中止或终止服务。</span> </p> <p class="c0"> <span class="c2 c3">8.2如发生下列任何一种情形，公司有权不经通知而中断或终止向您提供的服务：</span> </p> <p class="c0"> <span class="c2 c3">（1）根据法律规定您应提交真实身份等信息，而您提供的个人资料不真实、或与注册时信息不一致又未能提供合理证明；</span> </p> <p class="c0"> <span class="c2 c3">（2）您违反相关法律法规或本协议的约定；</span> </p> <p class="c0"> <span class="c2 c3">（3）按照法律规定或主管部门的要求；</span> </p> <p class="c0"> <span class="c2 c3">（4）出于安全的原因或其他必要的情形。</span> </p> <p class="c0"> <span class="c2 c3">8.3您有责任自行备份存储在本服务中的数据。如果您的服务被终止，公司可以从服务器上永久地删除您的数据。本服务终止后，公司没有义务向您返还数据。</span> </p> <p class="c0"> <span class="c2 c3">九、【争议解决与适用法律】</span> </p> <p class="c0"> <span class="c3">9.1双方应严格履行本协议，因本协议履行产生争议的，双方应友好协商，协商不成时，任何一方均有权向</span> <span class="c1">北京市海淀区人民法院</span> <span class="c2 c3">申请诉讼方式解决。</span> </p> <p class="c0"> <span class="c2 c3">9.2本协议的订立、履行、争议解决与解释均适用中华人民共和国大陆地区法律。</span> </p> <p class="c0"> <span class="c2 c3">十、【其他注意事项】</span> </p> <p class="c0"> <span class="c2 c1">10.1因第三方的原因，导致授权作品被迫中止本授权在抖音及相关平台使用的，授权人因此所受到的损失应直接向第三方要求赔偿，被授权人不负任何赔偿责任。</span> </p> <p class="c0"> <span class="c2 c1">10.2 授权作品均为授权人自愿提供，因此，该授权作品的著作权及内容的真实性、合法性均由授权人自行负责。被授权人对所有授权作品的著作权及内容的真实性、合法 性不提供任何明示或暗示的担保，被授权人对于任何个人、法人或其他组织因使用授权作品而引起的任何形式的损失，包括但不限于直接的、间接的、偶然的、惩罚 性的损失，不承担任何责任。</span> </p> <p class="c0"> <span class="c2 c3">10.3本协议任何一方未能及时行使本协议项下的权利不应被视为放弃该权利，也不影响该方在将来行使该权利。</span> </p> <p class="c0" id="h.tyjcwt"> <span class="c2 c3">10.4如果本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，或违反任何适用的法律，则该条款被视为删除，不影响本协议的其余条款的法律效力。</span> </p> <p class="c0"> <span class="c3">10.5本协议更新于</span> <span class="c3 c6">2018年8月21日</span> <span class="c2 c3">。</span> </p> <p></p> </div> <div class="agreement-step-button-group"> <input class="agreement-button-disabled" disabled="disabled" value="我已阅读并接受《参赛协议》" id="agreeSubmit" type="button"> <div class="step-button" id="agreeHideBtn">取消</div> </div> </div> </div> </div> <script type="text/javascript" th:inline="javascript"> $("#agreeSubmit").click(function() { var username = $("#stage_name").val(); var name = $("#name").val(); var wechat = $("#wechat").val(); var card = $("#idCard").val(); $.post( //action地址 [[@{~/addUser}]], //数据 {"username":username,"name":name,"wechat":wechat,"card":card}, //回调函数 function(data) { alert("access"); }, //数据格式 "json" ) }) $(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/verify/verify'); }) </script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_verify_upload' } }).install();</script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_verify_upload' } }).install();</script> <script src="register_files/index_7a47cdc.js"></script> <script src="register_files/es6-promise.js"></script> <script src="register_files/promise.js"></script> <script src="register_files/form_ebcf55b.js"></script> <script src="register_files/file_f9a5ca7.js"></script> <script src="register_files/toast_d6fd98c.js"></script> <script src="register_files/verify_7efc371.js"></script> </body> </html>
package com.Gary.shakes.controller; import java.io.IOException; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.domain.User; import com.Gary.shakes.serviceimpl.UserServiceImpl; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; @RestController public class UserController { @Autowired private UserServiceImpl userServiceImpl; @RequestMapping("/addUser") public ModelAndView addUser(User user,HttpServletResponse response,HttpServletRequest request) throws IOException { //在session域中的User 具有前四个属性 无wechat card name username User loginUser = (User) request.getSession().getAttribute("loginUser"); //user 没id 有wechat card name username loginUser.setWechat(user.getWechat()); loginUser.setCard(user.getCard()); loginUser.setName(user.getName()); loginUser.setUsername(user.getUsername()); userServiceImpl.save(loginUser); response.getWriter().write("{\"success\":"+true+"}"); return null; } @RequestMapping("/logOut") public ModelAndView logOut(HttpServletRequest request) { //在session域中移除loginUser request.getSession().removeAttribute("loginUser"); return new ModelAndView("redirect:/tomusic-people"); } @RequestMapping("/login") public ModelAndView login(User user,HttpServletRequest request , Model model) { // System.out.println(user.getCode()); // System.out.println(user.getTelephone()); //获得session域中的验证码 String sms = (String) request.getSession().getAttribute("sms"); System.out.println(sms); System.out.println(user.getCode()); //用session域中的验证码于user输入的验证码相比对 if(sms.equals(user.getCode())) { //成功 user.setState(1); System.out.println("成功！"); //判断是否有相同的电话 if(userServiceImpl.judgeTelephone(user.getTelephone())) { //有相同的电话不用做任何事，直接return }else { //在数据库中添加数据 userServiceImpl.save(user); } User loginUser = userServiceImpl.findUserByTelephone(user.getTelephone()); //在session域中放置User request.getSession().setAttribute("loginUser",loginUser); System.out.println(loginUser); //telephone //code return new ModelAndView("redirect:/toregister"); }else { //失败 model.addAttribute("message","验证码错误！！"); return new ModelAndView("/login.html","userModel",model); } } @RequestMapping("/sms") public ModelAndView sms(String telephone,HttpServletResponse response,HttpServletRequest request) throws Exception, JSONException, IOException { System.out.println("我已经到达！"); //发送手机验证码 int appid = 1400184301; String appkey = "58f61b731363faba756087b9504bff46"; int templateId = 275243; String sign = "Garyd公众号"; //要发送的验证码 Random r = new Random(); String sms = ""+r.nextInt(10)+r.nextInt(10)+r.nextInt(10)+r.nextInt(10); //将sms验证码存储到session域中 request.getSession().setAttribute("sms", sms); String[] params = new String[1]; params[0] = sms; System.out.println("验证码："+sms); //通过sender去发送 SmsSingleSender ssender = new SmsSingleSender(appid,appkey); //国际号码 电话 短信模板id 验证码 签名 //SmsSingleSenderResult result = ssender.sendWithParam("86", telephone, templateId, params, sign, "", ""); //System.out.println(result); //代表页面已经成功了 response.getWriter().write("{\"success\":"+true+"}"); return null; } }
测试成功可以完整添加用户完整信息后，补全json的回调函数
$("#agreeSubmit").click(function() { var username = $("#stage_name").val(); var name = $("#name").val(); var wechat = $("#wechat").val(); var card = $("#idCard").val(); $.post( //action地址 [[@{~/addUser}]], //数据 {"username":username,"name":name,"wechat":wechat,"card":card}, //回调函数 function(data) { window.location=[[@{~/toregister-add-music}]] }, //数据格式 "json" ) })
register-add-music.html页面制作
添加thymeleaf标签
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
添加header头部模板
<div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header">
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script async="" src="register-add-music_files/analytics.js"></script> <script src="register-add-music_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_apply_submit', ignoreAjax : [], ignoreStatic : [] }); </script> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register-add-music_files/base_4a834a9.css"> <link rel="stylesheet" href="register-add-music_files/base_ce73669.css"> <link rel="stylesheet" href="register-add-music_files/dropkick_1b1894b.css"> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script src="register-add-music_files/core_1f49c51.js"></script> <script src="register-add-music_files/jquery.js"></script> <script src="register-add-music_files/raven_8c2f9e8.js"></script> <script> window.PAGEVIEW_NAME = '/musician_apply_submit/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register-add-music_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register-add-music_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register-add-music_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status" style="display: inline;">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_2_active_5b30557.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">提交作品</p> <p class="submit-step-tips-musi"> 建议整曲和剪辑版本（如副歌部分）一起提交，30s-60s的剪辑版本更适合抖音拍摄和传播哦 <br> 歌曲的剪辑版本建议命名为歌名-剪辑版，更方便被推荐~ </p> <div class="step-form-submit"> <div class="submit-step-upload" id="showModalBtn">+ 添加音乐</div> <div class="submit-tab-group"> <button id="showMusic" class="submit-tab-btn" style="color: #4a4a4a">已提交 </button> <span class="submit-tab-btn">|</span> <button id="showAdded" class="submit-tab-btn" style="color: #ccc" disabled="disabled"> 新增项</button> </div> <div class="submit-music-container"> <div class="submit-music-header"> <div class="submit-music-cover">封面</div> <div class="submit-music-name">音乐</div> <div class="submit-music-audio">试听</div> <div class="submit-music-campus">是否高校好声音</div> </div> <div id="musicListCont" class="submit-music-list">暂无作品，点击添加音乐添加你的作品～</div> </div> <div class="submit-music-pages" id="pages"> <button id="pagePre" class="submit-music-page-btn" disabled="disabled" style="color: #ccc"><上一页</button> <span>/</span> <button id="pageNxt" class="submit-music-page-btn" disabled="disabled" style="color: #ccc">下一页 ></button> </div> <div class="submit-step-button-group"> <div class="step-button" id="submitApply">提交</div> </div> <div class="submit-modal" id="modal"> <div class="submit-modal-container" id="modalContainer"> <p class="step-title">添加音乐</p> <form class="submit-modal-form" id="uploadMusicForm" novalidate="novalidate"> <div class="submit-modal-group"> <label class="submit-modal-label label-not-null">风格</label> <div class="dk-select step-select" id="dk0-stepSelect" style="margin-left: -200px"> <ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"> <li class="dk-optgroup"> <div class="dk-optgroup-label">中文</div> <ul class="dk-optgroup-options"> <li class="dk-option dk-option-selected" data-value="[41,49]" text="流行" role="option" aria-selected="true" id="dk0-[41,49]">流行</li> <li class="dk-option " data-value="[41,50]" text="说唱" role="option" aria-selected="false" id="dk0-[41,50]">说唱</li> <li class="dk-option " data-value="[41,51]" text="电音" role="option" aria-selected="false" id="dk0-[41,51]">电音</li> <li class="dk-option " data-value="[41,53]" text="民谣" role="option" aria-selected="false" id="dk0-[41,53]">民谣</li> <li class="dk-option " data-value="[41,56]" text="动漫" role="option" aria-selected="false" id="dk0-[41,56]">动漫</li> <li class="dk-option " data-value="[41,54]" text="古风" role="option" aria-selected="false" id="dk0-[41,54]">古风</li> <li class="dk-option " data-value="[41,55]" text="摇滚" role="option" aria-selected="false" id="dk0-[41,55]">摇滚</li> <li class="dk-option " data-value="[41,93]" text="disco" role="option" aria-selected="false" id="dk0-[41,93]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">欧美</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[42,57]" text="流行" role="option" aria-selected="false" id="dk0-[42,57]">流行</li> <li class="dk-option " data-value="[42,58]" text="说唱" role="option" aria-selected="false" id="dk0-[42,58]">说唱</li> <li class="dk-option " data-value="[42,59]" text="电音" role="option" aria-selected="false" id="dk0-[42,59]">电音</li> <li class="dk-option " data-value="[42,61]" text="爵士" role="option" aria-selected="false" id="dk0-[42,61]">爵士</li> <li class="dk-option " data-value="[42,62]" text="乡村" role="option" aria-selected="false" id="dk0-[42,62]">乡村</li> <li class="dk-option " data-value="[42,63]" text="布鲁斯" role="option" aria-selected="false" id="dk0-[42,63]">布鲁斯</li> <li class="dk-option " data-value="[42,64]" text="民谣" role="option" aria-selected="false" id="dk0-[42,64]">民谣</li> <li class="dk-option " data-value="[42,92]" text="hiphop" role="option" aria-selected="false" id="dk0-[42,92]">hiphop</li> <li class="dk-option " data-value="[42,95]" text="disco" role="option" aria-selected="false" id="dk0-[42,95]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">日韩</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[43,67]" text="说唱" role="option" aria-selected="false" id="dk0-[43,67]">说唱</li> <li class="dk-option " data-value="[43,68]" text="电音" role="option" aria-selected="false" id="dk0-[43,68]">电音</li> <li class="dk-option " data-value="[43,85]" text="摇滚" role="option" aria-selected="false" id="dk0-[43,85]">摇滚</li> <li class="dk-option " data-value="[43,69]" text="动漫" role="option" aria-selected="false" id="dk0-[43,69]">动漫</li> <li class="dk-option " data-value="[43,65]" text="j-pop" role="option" aria-selected="false" id="dk0-[43,65]">j-pop</li> <li class="dk-option " data-value="[43,66]" text="k-pop" role="option" aria-selected="false" id="dk0-[43,66]">k-pop</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">趣味</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[44,70]" text="萌宠" role="option" aria-selected="false" id="dk0-[44,70]">萌宠</li> <li class="dk-option " data-value="[44,88]" text="儿童" role="option" aria-selected="false" id="dk0-[44,88]">儿童</li> <li class="dk-option " data-value="[44,71]" text="段子" role="option" aria-selected="false" id="dk0-[44,71]">段子</li> <li class="dk-option " data-value="[44,87]" text="可爱" role="option" aria-selected="false" id="dk0-[44,87]">可爱</li> <li class="dk-option " data-value="[44,90]" text="幽默" role="option" aria-selected="false" id="dk0-[44,90]">幽默</li> </ul> </li> </ul> </div> <select class="step-select" id="stepSelect" name="style" data-dkcacheid="0"> <optgroup label="中文"> <option value="[41,49]" selected="selected">流行</option> <option value="[41,50]">说唱</option> <option value="[41,51]">电音</option> <option value="[41,53]">民谣</option> <option value="[41,56]">动漫</option> <option value="[41,54]">古风</option> <option value="[41,55]">摇滚</option> <option value="[41,93]">disco</option> </optgroup> <optgroup label="欧美"> <option value="[42,57]">流行</option> <option value="[42,58]">说唱</option> <option value="[42,59]">电音</option> <option value="[42,61]">爵士</option> <option value="[42,62]">乡村</option> <option value="[42,63]">布鲁斯</option> <option value="[42,64]">民谣</option> <option value="[42,92]">hiphop</option> <option value="[42,95]">disco</option> </optgroup> <optgroup label="日韩"> <option value="[43,67]">说唱</option> <option value="[43,68]">电音</option> <option value="[43,85]">摇滚</option> <option value="[43,69]">动漫</option> <option value="[43,65]">j-pop</option> <option value="[43,66]">k-pop</option> </optgroup> <optgroup label="趣味"> <option value="[44,70]">萌宠</option> <option value="[44,88]">儿童</option> <option value="[44,71]">段子</option> <option value="[44,87]">可爱</option> <option value="[44,90]">幽默</option> </optgroup> </select> </div> <div class="submit-modal-group"> <label for="music" class="submit-modal-label label-not-null">歌曲名</label> <input class="submit-modal-input" name="title" type="text"> </div> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">封面文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传封面文件</div> <!-- 封面文件 --> <input class="submit-modal-name" disabled="disabled" id="coverName" name="coverName"> <input name="file" id="coverFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="cover_uri" id="cover_uri" type="text"> </div> </div> <p class="submit-modal-tips">推荐上传正方形封面</p> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">视频文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传视频文件</div> <!-- 视频文件 --> <input class="submit-modal-name" disabled="disabled" id="musicName" name="musicName"> <input name="file" id="musicFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="song_uri" id="song_uri" type="text"> </div> </div> <p class="submit-modal-tips">支持mp3/wav格式，且音质在320kb以上，文件不超过200MB</p> <div class="submit-modal-group" id="if-campus" style="margin-bottom: 5px;"> <label for="original_type" class="submit-modal-label label-not-null">是否参与校园好声音</label> <input class="" name="original_type" value="1" type="radio"> 是 <input class="" name="original_type" value="0" checked="checked" type="radio"> 否 </div> <p class="submit-modal-tips"> <a style="text-decoration: underline;" href="http://voice.yiban.cn/" target="_blank">查看校园好声音活动详情</a> </p> <div id="lyric-upload"> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label">歌词</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">解析歌词文件</div> <input class="submit-modal-name" disabled="disabled" id="lyricName" name="lyricName"> <input name="file" id="lyricFile" class="submit-modal-fileiput" accept=".lrc,.trc" type="file"> <input class="step-hide-input" name="lyric" id="lyric" type="text"> </div> </div> <p class="submit-modal-tips">支持lrc/trc格式</p> </div> <div id="music-upload"> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">曲谱文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传曲谱文件</div> <input class="submit-modal-name" disabled="disabled" id="qupuName" name="qupuName"> <input name="file" id="qupuFile" class="submit-modal-fileiput" accept="image/*, application/pdf" type="file"> <input class="step-hide-input" name="qupu_uri" id="qupu_uri" type="text"> </div> </div> <p class="submit-modal-tips">支持图片格式和pdf格式</p> </div> <div class="submit-step-button-group"> <input class="step-button-disable" disabled="disabled" value="确认添加" id="submitBtn" type="submit"> <div class="step-button" id="hideModalBtn">取消</div> </div> </form> </div> </div> </div> </div> <script>$(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/submitMusic/submit'); })</script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> <script src="register-add-music_files/index_7a47cdc.js"></script> <script src="register-add-music_files/es6-promise.js"></script> <script src="register-add-music_files/promise.js"></script> <script src="register-add-music_files/file_f9a5ca7.js"></script> <script src="register-add-music_files/form_ebcf55b.js"></script> <script src="register-add-music_files/toast_d6fd98c.js"></script> <script src="register-add-music_files/dropkick_7018fdd.js"></script> <script src="register-add-music_files/xss_6a7474d.js"></script> <script src="register-add-music_files/submit_9e6c0af.js"></script> </body> </html>
上传封面文件和上传视频文件
上传封面文件input
<div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">封面文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传封面文件</div> <!-- 封面文件 --> <input class="submit-modal-name" disabled="disabled" id="coverName" name="coverName"> <input name="file" id="coverFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="cover_uri" id="cover_uri" type="text"> </div> </div>
上传视频文件input
<div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">视频文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传视频文件</div> <!-- 视频文件 --> <input class="submit-modal-name" disabled="disabled" id="musicName" name="musicName"> <input name="file" id="musicFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="song_uri" id="song_uri" type="text"> </div> </div>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script async="" src="register-add-music_files/analytics.js"></script> <script src="register-add-music_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_apply_submit', ignoreAjax : [], ignoreStatic : [] }); </script> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register-add-music_files/base_4a834a9.css"> <link rel="stylesheet" href="register-add-music_files/base_ce73669.css"> <link rel="stylesheet" href="register-add-music_files/dropkick_1b1894b.css"> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script src="register-add-music_files/core_1f49c51.js"></script> <script src="register-add-music_files/jquery.js"></script> <script src="register-add-music_files/raven_8c2f9e8.js"></script> <script> window.PAGEVIEW_NAME = '/musician_apply_submit/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register-add-music_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register-add-music_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register-add-music_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status" style="display: inline;">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_2_active_5b30557.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">提交作品</p> <p class="submit-step-tips-musi"> 建议整曲和剪辑版本（如副歌部分）一起提交，30s-60s的剪辑版本更适合抖音拍摄和传播哦 <br> 歌曲的剪辑版本建议命名为歌名-剪辑版，更方便被推荐~ </p> <div class="step-form-submit"> <div class="submit-step-upload" id="showModalBtn">+ 添加音乐</div> <div class="submit-tab-group"> <button id="showMusic" class="submit-tab-btn" style="color: #4a4a4a">已提交 </button> <span class="submit-tab-btn">|</span> <button id="showAdded" class="submit-tab-btn" style="color: #ccc" disabled="disabled"> 新增项</button> </div> <div class="submit-music-container"> <div class="submit-music-header"> <div class="submit-music-cover">封面</div> <div class="submit-music-name">音乐</div> <div class="submit-music-audio">试听</div> <div class="submit-music-campus">是否高校好声音</div> </div> <div id="musicListCont" class="submit-music-list">暂无作品，点击添加音乐添加你的作品～</div> </div> <div class="submit-music-pages" id="pages"> <button id="pagePre" class="submit-music-page-btn" disabled="disabled" style="color: #ccc"><上一页</button> <span>/</span> <button id="pageNxt" class="submit-music-page-btn" disabled="disabled" style="color: #ccc">下一页 ></button> </div> <div class="submit-step-button-group"> <div class="step-button" id="submitApply">提交</div> </div> <div class="submit-modal" id="modal"> <div class="submit-modal-container" id="modalContainer"> <p class="step-title">添加音乐</p> <form class="submit-modal-form" id="uploadMusicForm" novalidate="novalidate"> <div class="submit-modal-group"> <label class="submit-modal-label label-not-null">风格</label> <div class="dk-select step-select" id="dk0-stepSelect" style="margin-left: -200px"> <ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"> <li class="dk-optgroup"> <div class="dk-optgroup-label">中文</div> <ul class="dk-optgroup-options"> <li class="dk-option dk-option-selected" data-value="[41,49]" text="流行" role="option" aria-selected="true" id="dk0-[41,49]">流行</li> <li class="dk-option " data-value="[41,50]" text="说唱" role="option" aria-selected="false" id="dk0-[41,50]">说唱</li> <li class="dk-option " data-value="[41,51]" text="电音" role="option" aria-selected="false" id="dk0-[41,51]">电音</li> <li class="dk-option " data-value="[41,53]" text="民谣" role="option" aria-selected="false" id="dk0-[41,53]">民谣</li> <li class="dk-option " data-value="[41,56]" text="动漫" role="option" aria-selected="false" id="dk0-[41,56]">动漫</li> <li class="dk-option " data-value="[41,54]" text="古风" role="option" aria-selected="false" id="dk0-[41,54]">古风</li> <li class="dk-option " data-value="[41,55]" text="摇滚" role="option" aria-selected="false" id="dk0-[41,55]">摇滚</li> <li class="dk-option " data-value="[41,93]" text="disco" role="option" aria-selected="false" id="dk0-[41,93]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">欧美</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[42,57]" text="流行" role="option" aria-selected="false" id="dk0-[42,57]">流行</li> <li class="dk-option " data-value="[42,58]" text="说唱" role="option" aria-selected="false" id="dk0-[42,58]">说唱</li> <li class="dk-option " data-value="[42,59]" text="电音" role="option" aria-selected="false" id="dk0-[42,59]">电音</li> <li class="dk-option " data-value="[42,61]" text="爵士" role="option" aria-selected="false" id="dk0-[42,61]">爵士</li> <li class="dk-option " data-value="[42,62]" text="乡村" role="option" aria-selected="false" id="dk0-[42,62]">乡村</li> <li class="dk-option " data-value="[42,63]" text="布鲁斯" role="option" aria-selected="false" id="dk0-[42,63]">布鲁斯</li> <li class="dk-option " data-value="[42,64]" text="民谣" role="option" aria-selected="false" id="dk0-[42,64]">民谣</li> <li class="dk-option " data-value="[42,92]" text="hiphop" role="option" aria-selected="false" id="dk0-[42,92]">hiphop</li> <li class="dk-option " data-value="[42,95]" text="disco" role="option" aria-selected="false" id="dk0-[42,95]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">日韩</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[43,67]" text="说唱" role="option" aria-selected="false" id="dk0-[43,67]">说唱</li> <li class="dk-option " data-value="[43,68]" text="电音" role="option" aria-selected="false" id="dk0-[43,68]">电音</li> <li class="dk-option " data-value="[43,85]" text="摇滚" role="option" aria-selected="false" id="dk0-[43,85]">摇滚</li> <li class="dk-option " data-value="[43,69]" text="动漫" role="option" aria-selected="false" id="dk0-[43,69]">动漫</li> <li class="dk-option " data-value="[43,65]" text="j-pop" role="option" aria-selected="false" id="dk0-[43,65]">j-pop</li> <li class="dk-option " data-value="[43,66]" text="k-pop" role="option" aria-selected="false" id="dk0-[43,66]">k-pop</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">趣味</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[44,70]" text="萌宠" role="option" aria-selected="false" id="dk0-[44,70]">萌宠</li> <li class="dk-option " data-value="[44,88]" text="儿童" role="option" aria-selected="false" id="dk0-[44,88]">儿童</li> <li class="dk-option " data-value="[44,71]" text="段子" role="option" aria-selected="false" id="dk0-[44,71]">段子</li> <li class="dk-option " data-value="[44,87]" text="可爱" role="option" aria-selected="false" id="dk0-[44,87]">可爱</li> <li class="dk-option " data-value="[44,90]" text="幽默" role="option" aria-selected="false" id="dk0-[44,90]">幽默</li> </ul> </li> </ul> </div> <select class="step-select" id="stepSelect" name="style" data-dkcacheid="0"> <optgroup label="中文"> <option value="[41,49]" selected="selected">流行</option> <option value="[41,50]">说唱</option> <option value="[41,51]">电音</option> <option value="[41,53]">民谣</option> <option value="[41,56]">动漫</option> <option value="[41,54]">古风</option> <option value="[41,55]">摇滚</option> <option value="[41,93]">disco</option> </optgroup> <optgroup label="欧美"> <option value="[42,57]">流行</option> <option value="[42,58]">说唱</option> <option value="[42,59]">电音</option> <option value="[42,61]">爵士</option> <option value="[42,62]">乡村</option> <option value="[42,63]">布鲁斯</option> <option value="[42,64]">民谣</option> <option value="[42,92]">hiphop</option> <option value="[42,95]">disco</option> </optgroup> <optgroup label="日韩"> <option value="[43,67]">说唱</option> <option value="[43,68]">电音</option> <option value="[43,85]">摇滚</option> <option value="[43,69]">动漫</option> <option value="[43,65]">j-pop</option> <option value="[43,66]">k-pop</option> </optgroup> <optgroup label="趣味"> <option value="[44,70]">萌宠</option> <option value="[44,88]">儿童</option> <option value="[44,71]">段子</option> <option value="[44,87]">可爱</option> <option value="[44,90]">幽默</option> </optgroup> </select> </div> <div class="submit-modal-group"> <label for="music" class="submit-modal-label label-not-null">歌曲名</label> <input class="submit-modal-input" name="title" type="text"> </div> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">封面文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传封面文件</div> <!-- 封面文件 --> <input class="submit-modal-name" disabled="disabled" id="coverName" name="coverName"> <input name="file" id="coverFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="cover_uri" id="cover_uri" type="text"> </div> </div> <p class="submit-modal-tips">推荐上传正方形封面</p> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">视频文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传视频文件</div> <!-- 视频文件 --> <input class="submit-modal-name" disabled="disabled" id="musicName" name="musicName"> <input name="file" id="musicFile" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="song_uri" id="song_uri" type="text"> </div> </div> <p class="submit-modal-tips">支持mp3/wav格式，且音质在320kb以上，文件不超过200MB</p> <!-- 上传按钮 --> <div class="submit-modal-group" id="if-campus" style="margin-bottom: 5px;"> <label for="original_type" class="submit-modal-label label-not-null">点击这里上传视频</label> <input class="step-button" value="确认上传" id="submitBtn" type="button"> </div> <div class="submit-step-button-group"> <input class="step-button" value="确认添加" id="submitBtn" type="submit"> <div class="step-button" id="hideModalBtn">取消</div> </div> </form> </div> </div> </div> </div> <script>$(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/submitMusic/submit'); })</script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> <script src="register-add-music_files/index_7a47cdc.js"></script> <script src="register-add-music_files/es6-promise.js"></script> <script src="register-add-music_files/promise.js"></script> <script src="register-add-music_files/file_f9a5ca7.js"></script> <script src="register-add-music_files/form_ebcf55b.js"></script> <script src="register-add-music_files/toast_d6fd98c.js"></script> <script src="register-add-music_files/dropkick_7018fdd.js"></script> <script src="register-add-music_files/xss_6a7474d.js"></script> <script src="register-add-music_files/submit_9e6c0af.js"></script> </body> </html>
添加上传封面和上传视频至腾讯云服务器
上传封面
<input onchange="addCover(this)" name="file" id="coverFile" class="submit-modal-fileiput" type="file">
上传视频
<input onchange="addVideo(this)" name="file" id="musicFile" class="submit-modal-fileiput" type="file">
给上传的封面文件添加id
<input id="cover-file-name" class="submit-modal-name" disabled="disabled" name="coverName">
给上传的视频文件添加id
<input id="video-file-name" class="submit-modal-name" disabled="disabled" name="musicName">
视频上传核心代码
// 初始化 var videoFile = null; var coverFile = null; //得到加密后的字符 串 var getSignature = function(callback) { $.ajax({ url:[[@{~/sign}]], type:"POST", success:function(result) { callback(result); } }) } //当videoinput改变时会调用这个函 数 function addVideo(e) { // alert(e.files[0].name); videoFile=e.files[0]; $("#video-file-name").val(e.files[0].name); } //当cover改变时会调用这个函 数 function addCover(e) { // alert(e.files[0].name); coverFile = e.files[0]; $("#cover-file-name").val(e.files[0].name); } //上传视频和封 面 function upload() { alert(videoFile.name); alert(coverFile.name); qcVideo.ugcUploader.start({ //视频 videoFile:videoFile, //封面 coverFile:coverFile, //sign getSignature:getSignature, //allowAudio allowAudio:1, success:function(result) { }, errer:function(result) { alert("上传失败"); }, progress:function(result) { $("[name=videoCurr]").text(Math.floor(result.curr*100)+"%"); $("[name=coverCurr]").text(Math.floor(result.curr*100)+"%"); }, finish:function(result) { alert("上传成功"); } }) }
VideoController.java接收获得链接自己腾讯云服务器
package com.Gary.shakes.controller; import java.util.Random; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import com.Gary.shakes.utils.Signature; @RestController public class VideoController { //给页面一个加密后的字符串 @RequestMapping("/sign") @ResponseBody public String sign() { //得到加密后的字符串sign Signature sign = new Signature(); //id sign.setSecretId("AKIDkNsDQWZOYYVSHu49kDh9Uh1FSo3BsnLm"); //key sign.setSecretKey("XDn1a3NWzN0Tp4vH3zpSp5fEX2Rq9KYg"); //当前的时间 sign.setCurrentTime(System.currentTimeMillis()/1000); //随机数 sign.setRandom(new Random().nextInt(Integer.MAX_VALUE)); //xxx sign.setSignValidDuration(3600*24*2); //得到sign String signature = null; try { signature = sign.getUploadSignature(); System.out.println("signature："+signature); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return signature; } }
Signature.java返回链接自己腾讯云服务器的秘钥
package com.Gary.shakes.utils; import javax.crypto.Mac; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Encoder; public class Signature { private String secretId; private String secretKey; private long currentTime; private int random; private int signValidDuration; private static final String HMAC_ALGORITHM = "HmacSHA1"; private static final String CONTENT_CHARSET = "UTF-8"; public static byte[] byteMerger(byte[] byte1, byte[] byte2) { byte[] byte3 = new byte[byte1.length + byte2.length]; System.arraycopy(byte1, 0, byte3, 0, byte1.length); System.arraycopy(byte2, 0, byte3, byte1.length, byte2.length); return byte3; } public String getUploadSignature() throws Exception { String strSign = ""; String contextStr = ""; long endTime = (currentTime + signValidDuration); contextStr += "secretId=" + java.net.URLEncoder.encode(secretId, "utf8"); contextStr += "¤tTimeStamp=" + currentTime; contextStr += "&expireTime=" + endTime; contextStr += "&random=" + random; try { Mac mac = Mac.getInstance(HMAC_ALGORITHM); SecretKeySpec secretKey = new SecretKeySpec(this.secretKey.getBytes(CONTENT_CHARSET), mac.getAlgorithm()); mac.init(secretKey); byte[] hash = mac.doFinal(contextStr.getBytes(CONTENT_CHARSET)); byte[] sigBuf = byteMerger(hash, contextStr.getBytes("utf8")); strSign = new String(new BASE64Encoder().encode(sigBuf).getBytes()); strSign = strSign.replace(" ", "").replace("\n", "").replace("\r", ""); } catch (Exception e) { throw e; } return strSign; } public void setSecretId(String secretId) { this.secretId = secretId; } public void setSecretKey(String secretKey) { this.secretKey = secretKey; } public void setCurrentTime(long currentTime) { this.currentTime = currentTime; } public void setRandom(int random) { this.random = random; } public void setSignValidDuration(int signValidDuration) { this.signValidDuration = signValidDuration; } }
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script async="" src="register-add-music_files/analytics.js"></script> <script src="register-add-music_files/slardar.js"></script> <script> window.Slardar && window.Slardar.install({ sampleRate : 1, bid : 'douyin_web', pid : 'musician_apply_submit', ignoreAjax : [], ignoreStatic : [] }); </script> <title> 抖音音乐人</title> <meta charset="utf-8"> <meta http-equiv="”Cache-Control”" content="”no-transform”"> <meta http-equiv="”Cache-Control”" content="”no-siteapp”"> <meta name="baidu-site-verification" content="szjdG38sKy"> <meta name="keywords" content="抖音看见音乐,看见音乐计划,抖音音乐人,原创音乐,看见音乐计划官网"> <meta name="description" content="抖音看见音乐计划,你的音乐,我看得见"> <link rel="shortcut icon" href="https://s3.bytecdn.cn/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> <link rel="dns-prefetch" href="https://s3.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3a.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s3b.bytecdn.cn/"> <link rel="dns-prefetch" href="https://s0.pstatp.com/"> <link rel="dns-prefetch" href="https://s1.pstatp.com/"> <link rel="dns-prefetch" href="https://s2.pstatp.com/"> <link rel="stylesheet" href="register-add-music_files/base_4a834a9.css"> <link rel="stylesheet" href="register-add-music_files/base_ce73669.css"> <link rel="stylesheet" href="register-add-music_files/dropkick_1b1894b.css"> <!--[if IE]><script src="//s3a.bytecdn.cn/aweme/resource/web/static/script/lib/fix-ie8_e8a0650.js"></script><![endif]--> <script src="register-add-music_files/core_1f49c51.js"></script> <script src="register-add-music_files/jquery.js"></script> <script src="register-add-music_files/raven_8c2f9e8.js"></script> <script> window.PAGEVIEW_NAME = '/musician_apply_submit/'; </script> <script> // BA全局变量 var baAccount = window.AME_BA_ID || 'fe557d1f75199e'; var baevent = function() { }; (function() { var sampleRate = 100; // 采样比例，即上报量占总流量的百分比 !function(t, e, a, n, s, c) { t.ToutiaoAnalyticsObject = s, t[s] = t[s] || function() { (t[s].q = t[s].q || []).push(arguments) }, t[s].t = 1 * new Date, t[s].s = c; var i = e.createElement(a); i.async = 1, i.src = n, e.getElementsByTagName("head")[0] .appendChild(i) }(window, document, "script", "//s3.bytecdn.cn/ta/resource/v0/analytics.js", "ba"); ba('create', baAccount, { 'sampleRate' : sampleRate }); ba('send', 'pageview'); baevent = function(category, action, label, value) { console.log("ba:" + category + "," + action + "," + label); if (category != 'event') { ba('send', 'event', category, action, label, typeof value !== 'undefined' ? value : 1); } }; })(); </script> <script async="" src="register-add-music_files/analytics_002.js"></script> <script> var gaAccount = window.AME_GA_ID || 'UA-75850242-4'; var _gaq = _gaq || []; var gaqpush = function() { }; var gaevent = function() { }; var gapageview = function() { }; var trackPV = gapageview; var sampleRate = 20; function initGA() { if (sampleRate && gaAccount) { window.onerror = function(message, file, line) { var msg = message, f = file, l = line; if (typeof message === 'object') { msg = message.message; f = message.fileName; l = message.lineNumber; } var sFormattedMessage = '[' + f + ' (' + l + ')]' + msg; window.gaevent ? gaevent('Exceptions', sFormattedMessage, location.pathname + '::::' + navigator.userAgent) : ''; }; var test_channel = "", test_version = "", utm_source = ""; // var ua = navigator.userAgent; (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); // Replace with your property ID. ga('create', gaAccount, { 'sampleRate' : sampleRate }); //Init GA Function gapageview = function(pageName) { ga('send', 'pageview', pageName); console.log('ga:pageview', pageName); }; gaqpush = function(ga_event, ga_label) { gaevent('event', ga_event, ga_label); }; gaevent = function(category, action, label, value) { if (test_channel.indexOf(action) > -1) label = label + test_version; console.log("ga:" + category + "," + action + "," + label); if (category != 'event') { ga('send', 'event', category, action, label, typeof value !== "undefined" ? value : 1); } if (typeof window.baevent == "function") { baevent(category, action, label, value); } }; gapageview(window.PAGEVIEW_NAME); $("html") .on( 'click', '[ga_event]', function(e) { var $this = $(this); var ga_category = $this.attr('ga_category') || 'event'; var ga_event = $this.attr('ga_event'); var ga_label = $this.attr('ga_label'); gaevent(ga_category, ga_event, ga_label); if ($this.is('a')) { var href = $this.attr('href') || '', target = this.target; if (!(href[0] === '#' || target === "_blank" || e .isDefaultPrevented())) { setTimeout(function() { location.href = href }, 400); return false } } }); } } initGA(); </script> <link rel="stylesheet" href="register-add-music_files/index_db26f14.css"> </head> <body> <div class="main-content-block"> <div th:replace="~{fragments/header::header}"></div> <div class="common-header"> <div class="common-module-container"> <div class="common-module"> <img src="register-add-music_files/icon_1_active_cc77279.png"> <p class="common-module-txt"> 填写资料 <span id="verifyStatus" class="verify-status" style="display: inline;">(审核中)</span> </p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_2_active_5b30557.png"> <p class="common-module-txt">提交作品</p> </div> <div class="common-hr"></div> <div class="common-module"> <img src="register-add-music_files/icon_3_grey_b8ff386.png"> <p class="common-module-txt">等待审核</p> </div> </div> </div> <div class="zz-toast" id="zz-toast"> <h4 id="zz-toast-title">错误提示</h4> <p id="zz-toast-txt" class="zz-toast-txt">This is a danger message.</p> </div> <div class="container"> <p class="step-tips"> <span>声明：抖音团队不会以任何形式向您收取推广费用，如您遇到收费情况，请发邮件至举报邮箱：</span> <a href="mailto:musician@bytedance.com" class="step-tips-email">musician@bytedance.com</a> </p> <p class="step-title">提交作品</p> <p class="submit-step-tips-musi"> 建议整曲和剪辑版本（如副歌部分）一起提交，30s-60s的剪辑版本更适合抖音拍摄和传播哦 <br> 歌曲的剪辑版本建议命名为歌名-剪辑版，更方便被推荐~ </p> <div class="step-form-submit"> <div class="submit-step-upload" id="showModalBtn">+ 添加音乐</div> <div class="submit-tab-group"> <button id="showMusic" class="submit-tab-btn" style="color: #4a4a4a">已提交 </button> <span class="submit-tab-btn">|</span> <button id="showAdded" class="submit-tab-btn" style="color: #ccc" disabled="disabled"> 新增项</button> </div> <div class="submit-music-container"> <div class="submit-music-header"> <div class="submit-music-cover">封面</div> <div class="submit-music-name">音乐</div> <div class="submit-music-audio">试听</div> <div class="submit-music-campus">是否高校好声音</div> </div> <div id="musicListCont" class="submit-music-list">暂无作品，点击添加音乐添加你的作品～</div> </div> <div class="submit-music-pages" id="pages"> <button id="pagePre" class="submit-music-page-btn" disabled="disabled" style="color: #ccc"><上一页</button> <span>/</span> <button id="pageNxt" class="submit-music-page-btn" disabled="disabled" style="color: #ccc">下一页 ></button> </div> <div class="submit-step-button-group"> <div class="step-button" id="submitApply">提交</div> </div> <div class="submit-modal" id="modal"> <div class="submit-modal-container" id="modalContainer"> <p class="step-title">添加音乐</p> <form class="submit-modal-form" id="uploadMusicForm" novalidate="novalidate"> <div class="submit-modal-group"> <label class="submit-modal-label label-not-null">风格</label> <div class="dk-select step-select" id="dk0-stepSelect" style="margin-left: -200px"> <ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"> <li class="dk-optgroup"> <div class="dk-optgroup-label">中文</div> <ul class="dk-optgroup-options"> <li class="dk-option dk-option-selected" data-value="[41,49]" text="流行" role="option" aria-selected="true" id="dk0-[41,49]">流行</li> <li class="dk-option " data-value="[41,50]" text="说唱" role="option" aria-selected="false" id="dk0-[41,50]">说唱</li> <li class="dk-option " data-value="[41,51]" text="电音" role="option" aria-selected="false" id="dk0-[41,51]">电音</li> <li class="dk-option " data-value="[41,53]" text="民谣" role="option" aria-selected="false" id="dk0-[41,53]">民谣</li> <li class="dk-option " data-value="[41,56]" text="动漫" role="option" aria-selected="false" id="dk0-[41,56]">动漫</li> <li class="dk-option " data-value="[41,54]" text="古风" role="option" aria-selected="false" id="dk0-[41,54]">古风</li> <li class="dk-option " data-value="[41,55]" text="摇滚" role="option" aria-selected="false" id="dk0-[41,55]">摇滚</li> <li class="dk-option " data-value="[41,93]" text="disco" role="option" aria-selected="false" id="dk0-[41,93]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">欧美</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[42,57]" text="流行" role="option" aria-selected="false" id="dk0-[42,57]">流行</li> <li class="dk-option " data-value="[42,58]" text="说唱" role="option" aria-selected="false" id="dk0-[42,58]">说唱</li> <li class="dk-option " data-value="[42,59]" text="电音" role="option" aria-selected="false" id="dk0-[42,59]">电音</li> <li class="dk-option " data-value="[42,61]" text="爵士" role="option" aria-selected="false" id="dk0-[42,61]">爵士</li> <li class="dk-option " data-value="[42,62]" text="乡村" role="option" aria-selected="false" id="dk0-[42,62]">乡村</li> <li class="dk-option " data-value="[42,63]" text="布鲁斯" role="option" aria-selected="false" id="dk0-[42,63]">布鲁斯</li> <li class="dk-option " data-value="[42,64]" text="民谣" role="option" aria-selected="false" id="dk0-[42,64]">民谣</li> <li class="dk-option " data-value="[42,92]" text="hiphop" role="option" aria-selected="false" id="dk0-[42,92]">hiphop</li> <li class="dk-option " data-value="[42,95]" text="disco" role="option" aria-selected="false" id="dk0-[42,95]">disco</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">日韩</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[43,67]" text="说唱" role="option" aria-selected="false" id="dk0-[43,67]">说唱</li> <li class="dk-option " data-value="[43,68]" text="电音" role="option" aria-selected="false" id="dk0-[43,68]">电音</li> <li class="dk-option " data-value="[43,85]" text="摇滚" role="option" aria-selected="false" id="dk0-[43,85]">摇滚</li> <li class="dk-option " data-value="[43,69]" text="动漫" role="option" aria-selected="false" id="dk0-[43,69]">动漫</li> <li class="dk-option " data-value="[43,65]" text="j-pop" role="option" aria-selected="false" id="dk0-[43,65]">j-pop</li> <li class="dk-option " data-value="[43,66]" text="k-pop" role="option" aria-selected="false" id="dk0-[43,66]">k-pop</li> </ul> </li> <li class="dk-optgroup"> <div class="dk-optgroup-label">趣味</div> <ul class="dk-optgroup-options"> <li class="dk-option " data-value="[44,70]" text="萌宠" role="option" aria-selected="false" id="dk0-[44,70]">萌宠</li> <li class="dk-option " data-value="[44,88]" text="儿童" role="option" aria-selected="false" id="dk0-[44,88]">儿童</li> <li class="dk-option " data-value="[44,71]" text="段子" role="option" aria-selected="false" id="dk0-[44,71]">段子</li> <li class="dk-option " data-value="[44,87]" text="可爱" role="option" aria-selected="false" id="dk0-[44,87]">可爱</li> <li class="dk-option " data-value="[44,90]" text="幽默" role="option" aria-selected="false" id="dk0-[44,90]">幽默</li> </ul> </li> </ul> </div> <select class="step-select" id="stepSelect" name="style" data-dkcacheid="0"> <optgroup label="中文"> <option value="[41,49]" selected="selected">流行</option> <option value="[41,50]">说唱</option> <option value="[41,51]">电音</option> <option value="[41,53]">民谣</option> <option value="[41,56]">动漫</option> <option value="[41,54]">古风</option> <option value="[41,55]">摇滚</option> <option value="[41,93]">disco</option> </optgroup> <optgroup label="欧美"> <option value="[42,57]">流行</option> <option value="[42,58]">说唱</option> <option value="[42,59]">电音</option> <option value="[42,61]">爵士</option> <option value="[42,62]">乡村</option> <option value="[42,63]">布鲁斯</option> <option value="[42,64]">民谣</option> <option value="[42,92]">hiphop</option> <option value="[42,95]">disco</option> </optgroup> <optgroup label="日韩"> <option value="[43,67]">说唱</option> <option value="[43,68]">电音</option> <option value="[43,85]">摇滚</option> <option value="[43,69]">动漫</option> <option value="[43,65]">j-pop</option> <option value="[43,66]">k-pop</option> </optgroup> <optgroup label="趣味"> <option value="[44,70]">萌宠</option> <option value="[44,88]">儿童</option> <option value="[44,71]">段子</option> <option value="[44,87]">可爱</option> <option value="[44,90]">幽默</option> </optgroup> </select> </div> <div class="submit-modal-group"> <label for="music" class="submit-modal-label label-not-null">歌曲名</label> <input class="submit-modal-input" name="title" type="text"> </div> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">封面文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传封面文件</div> <!-- 封面文件 --> <input id="cover-file-name" class="submit-modal-name" disabled="disabled" name="coverName"> <input onchange="addCover(this)" name="file" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="cover_uri" type="text"> <span name="coverCurr"></span> </div> </div> <p class="submit-modal-tips">推荐上传正方形封面</p> <div class="submit-modal-group submit-modal-group--tips"> <label for="music" class="submit-modal-label label-not-null">视频文件</label> <div type="text" class="submit-modal-file"> <div class="submit-modal-button">上传视频文件</div> <!-- 视频文件 --> <input id="video-file-name" class="submit-modal-name" disabled="disabled" name="musicName"> <input onchange="addVideo(this)" name="file" class="submit-modal-fileiput" type="file"> <input class="step-hide-input" name="song_uri" type="text"> <span name="videoCurr"></span> </div> </div> <p class="submit-modal-tips">支持mp3/wav格式，且音质在320kb以上，文件不超过200MB</p> <!-- 上传按钮 --> <div class="submit-modal-group" id="if-campus" style="margin-bottom: 5px;"> <label for="original_type" class="submit-modal-label label-not-null">点击这里上传视频</label> <input class="step-button" onclick="upload()" value="上传视频和封面" type="button"> </div> <div class="submit-step-button-group"> <input class="step-button" value="确认添加" type="submit"> <div class="step-button" id="hideModalBtn">取消</div> </div> </form> </div> </div> </div> </div> <script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script> <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript" th:inline="javascript"> // 初始化 var videoFile = null; var coverFile = null; //得到加密后的字符 串 var getSignature = function(callback) { $.ajax({ url:[[@{~/sign}]], type:"POST", success:function(result) { callback(result); } }) } //当videoinput改变时会调用这个函 数 function addVideo(e) { // alert(e.files[0].name); videoFile=e.files[0]; $("#video-file-name").val(e.files[0].name); } //当cover改变时会调用这个函 数 function addCover(e) { // alert(e.files[0].name); coverFile = e.files[0]; $("#cover-file-name").val(e.files[0].name); } //上传视频和封 面 function upload() { alert(videoFile.name); alert(coverFile.name); qcVideo.ugcUploader.start({ //视频 videoFile:videoFile, //封面 coverFile:coverFile, //sign getSignature:getSignature, //allowAudio allowAudio:1, success:function(result) { }, errer:function(result) { alert("上传失败"); }, progress:function(result) { $("[name=videoCurr]").text(Math.floor(result.curr*100)+"%"); $("[name=coverCurr]").text(Math.floor(result.curr*100)+"%"); }, finish:function(result) { alert("上传成功"); } }) } $(function() { require('web:common/utils/promise.polyfill'); require('web:page/musician/apply/submitMusic/submit'); })</script> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install(); </script> </div> <script>window.Raven && Raven.config('//key@m.toutiao.com/log/sentry/v2/96', { tags: { bid: 'douyin_web', pid: 'musician_apply_submit' } }).install();</script> <script src="register-add-music_files/index_7a47cdc.js"></script> <script src="register-add-music_files/es6-promise.js"></script> <script src="register-add-music_files/promise.js"></script> <script src="register-add-music_files/file_f9a5ca7.js"></script> <script src="register-add-music_files/form_ebcf55b.js"></script> <script src="register-add-music_files/toast_d6fd98c.js"></script> <script src="register-add-music_files/dropkick_7018fdd.js"></script> <script src="register-add-music_files/xss_6a7474d.js"></script> <script src="register-add-music_files/submit_9e6c0af.js"></script> </body> </html>
(如需转载学习，请标明出处)
