移动互联网终端

背景介绍 首先介绍下在本文出现的几个比较重要的概念： 函数计算（Function Compute） : 函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息 参考 。 Fun : Fun 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件（template.yml），协助您进行开发、构建、部署操作。Fun 的更多文档 参考 。 litemall 是一个基于 Spring Boot、Vue、微信小程序等技术开发的商场系统。它包括 Spring Boot 后端 + Vue 管理员前端 + 微信小程序用户前端 + Vue 商城移动端。 更多 参考 。 本文演示如何将该 商城应用 的 Spring Boot 后端、Vue 管理员前端、Vue 商城移动端三个组件迁移到 函数计算 。 下面是一个已经将到函数计算应用示例效果演示。 效果演示 管理后台效果演示 打开 http://litemall.mofangdegisn.cn 显示登陆页面： 使用默认的账户即可登陆。完成后，会进入到后台管理页面： 可以在后台管理页面添加商品类目、上架商品、用户管理

背景介绍 首先介绍下在本文出现的几个比较重要的概念： 函数计算（Function Compute） : 函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息 参考 。 Fun : Fun 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件（template.yml），协助您进行开发、构建、部署操作。Fun 的更多文档 参考 。 litemall 是一个基于 Spring Boot、Vue、微信小程序等技术开发的商场系统。它包括 Spring Boot 后端 + Vue 管理员前端 + 微信小程序用户前端 + Vue 商城移动端。 更多 参考 。 本文演示如何将该 商城应用 的 Spring Boot 后端、Vue 管理员前端、Vue 商城移动端三个组件迁移到 函数计算 。 下面是一个已经将到函数计算应用示例效果演示。 效果演示 管理后台效果演示 打开 http://litemall.mofangdegisn.cn 显示登陆页面： 使用默认的账户即可登陆。完成后，会进入到后台管理页面： 可以在后台管理页面添加商品类目、上架商品、用户管理

背景介绍 首先介绍下在本文出现的几个比较重要的概念： 函数计算（Function Compute） : 函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息 参考 。 Fun : Fun 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件（template.yml），协助您进行开发、构建、部署操作。Fun 的更多文档 参考 。 litemall 是一个基于 Spring Boot、Vue、微信小程序等技术开发的商场系统。它包括 Spring Boot 后端 + Vue 管理员前端 + 微信小程序用户前端 + Vue 商城移动端。 更多 参考 。 本文演示如何将该 商城应用 的 Spring Boot 后端、Vue 管理员前端、Vue 商城移动端三个组件迁移到 函数计算 。 下面是一个已经将到函数计算应用示例效果演示。 效果演示 管理后台效果演示 打开 http://litemall.mofangdegisn.cn 显示登陆页面： 使用默认的账户即可登陆。完成后，会进入到后台管理页面： 可以在后台管理页面添加商品类目、上架商品、用户管理

事件简述 这是一件发生在前段时间的事情，当时的情况是这样的：一个新的功能模块上线之后，出现短信接口被恶意访问调用的情况，请求数量很大，而且通过查看短信服务商控制台也发现，短信发送量在飙升，看着统计曲线的增长，紧张的气氛也渐渐变得更浓，很明显，事情并不是遇到一个bug那么简单，因为牵涉到服务费用，需要立即解决。 当然，接口被恶意访问的这个问题已经解决，因此写了这篇文章，可以做一下简单的记录，并且静下心来分析一下其中的问题了，看完这个案例，大家也可以一起讨论讨论。 问题分析 这是当时的短信接口日志数量曲线，某一个时间点突然增长了起来并且没有降下去的意思，通过日志分析发现，攻击者用的不同IP、不同号码进行恶意调用，请求量较大，赶紧将事件做了记录并通知了相关人员，和同事做了沟通后，大家也都提出了自己的意见：有人说赶紧修改前端功能，发一版新的APP，有人说修改后端代码，紧急补救一下，也有人说要不要先关停一下服务......在网上技术论坛搜了一下相关问题，好像碰到这种事情的也不少，基本思路都是加验证码，做好安全验证，被攻击了无可奈何之类的云云。 简单对各个方案做了整理： 修改url( APP已经上线，暂时无法修改 )。 添加验证码验证( APP已经上线，暂时无法通过这种方式来解决 )。 停掉短信服务( 不现实，其他功能模块也需要调用短信服务，不考虑实施 )。 短信服务商自带防攻击，等一段时间

首先我们需要判断模态框是否已经被调用，这里使用bootstrap里提供的方法： // 监听点击事件，来触发页面是否滚动 // 定义两个函数，来禁止滚动和释放页面滚动 $ ( '.modal' ) . on ( 'show.bs.modal' , function ( e ) { stopScroll ( ) ; } ) $ ( '.modal' ) . on ( 'hidden.bs.modal' , function ( e ) { scrolling ( ) ; } ) /** * @method stopScroll 禁止页面滚动 * return 无 */ function stopScroll ( ) { // 定义一个函数来给body添加fixed属性 fixedBody ( ) ; // 为了兼容移动端，我们还需要做一下判断 var bodyWidth = $ ( 'body' ) . width ( ) ; // 并且给body添加modal-open类 $ ( 'body' ) . addClass ( 'modal-open' ) ; // 判断如果是移动端 if ( bodyWidth > 768 ) { // 移动端padding-right记得设置为17px. } } /** * @method scrolling 还原页面滚动 * return 无 */

本文主要讲了一些移动端适配的基本思路和一些代码示例，并没有讲解具体的移动端适配的方案，主要从为什么这么做出发讲了一些自己粗浅的理解。 所谓移动端适配，就是页面运行在移动端并且会根据当前运行的移动端设备的大小自行进行调整。 实现移动端适配可以按照以下思路出发， 首先要将 viewport 的宽度等于设备的宽度，即 <meta name= "viewport" content="width=device-width initial-scale=1.0"> 通过 rem， media query 等方式改变不同设备上元素的大小 rem 是一个相对单位，一般 1rem = html设置的 font-size 的值。 关于 rem 的详细介绍可以参考 移动 web 开发适配秘籍 Rem 这个免费课程。 通过设置不同设备 html 的 font-size 改变 rem 的值，令 1rem 单位的值随着设备的增大而增大。 media query 可以判断当前是什么设备，然后根据不同的设备设置不同的样式。 在设计上还要做一些事情，例如 隐藏：将 PC 端将一些不重要的内容（如友情链接等）在移动端直接隐藏掉 折行：在 PC 端显示在一行的内容在移动端可以显示几行(这一点上设置了 meta 标签后会自动帮你做，也可以在此基础上自己手动设置一些样式实现折行的效果) 自适应

在h5页面中a链接是经常用到的标签，但是在移动端，我们在页面滚动的时候，a链接就会给我们造成很大的困扰。比如我们本来只是想要页面进行滚动，结果当我们刚触碰到页面上时，页面就跳转了。。。 那么这里就是在移动端的touch事件所影响的，可以在touch事件的时候阻止a链接的点击事件，然后在释放。 < li ontouchstart = "cancleDefault(this)" ontouchend = "backDefault(this)" id = "OrdersMenu" class = "active" > < a href = "/customer/orders/1" id = "OrderQueryLink" > 订单详情 < / a > < / li > // 取消默认事件 function cancleDefault ( obj ) { // 阻止当前元素下的a元素的默认事件 obj . firstElementChild . onclick = function ( ) { return false } ; } // 还原默认事件 function backDefault ( obj ) { // 给当前元素下的a元素绑定点击事件 obj . firstElementChild . onclick = function ( ) { console . log ( 1

要实现手机访问本地开发的移动端项目，首先做到两点： 1、本地打开的项目可以使用本地ip访问 2、手机和电脑同时处于一个同一个局域网中（手机和电脑同时连上同一个wifi / 手机开热点给电脑 / 电脑开wifi给手机连接） 如果做到以上两点，那么恭喜你，就可以直接使用电脑ip在移动端访问了。 因为现开发项目是angular + ionic项目，所以以下设置及开发均以angular项目为基础进行设置。下面先来解决第一个难题： 一、angular项目配置可同时使用localhost和本地ip访问，步骤如下： step1: 找到此文件“node_modules/webpack-dev-server/lib/Server.js”，按照下图修改 将return false 修改为return true; step2： 修改配置文件package.json step2: 重启项目 到此为止就可以直接使用本机IP:4200或者localhost:4200访问项目啦。 现在第一个问题问题解决了，那么接下来看看如何通过移动端访问本地angualr项目。上面已经说了，需手机和电脑在同一个局域网内，介绍了三种方法，现仅以电脑开wifi给手机连接为例进行讲解，其他两种方式设置类似。 二、手机连接电脑测试本地开发的移动端页面 step1:关闭电脑防火墙 或者80端口允许连接; 设置方法: 打开控制面板

转自http://dev.qq.com/topic/5811d42e7fd6ec467453bf58 概要 分享内容： 互联网内容载体变迁历程，文字——图片/声音——视频——VR/AR——…….。从直播1.0秀场时代（YY），2.0游戏直播（斗鱼、虎牙、熊猫）到如今全民直播3.0泛生活娱乐时代（映客、花椒），国外直播app（Meerkat 、Periscope），随着VA/AR/MR提出的沉浸式视听体验，直播4.0时代很快就能到来。 在这个全民娱乐的时代，直播已经火得不要不要的，各大公司都有自己的直播产品。本文主要从直播的一些基本知识,一步步打造直播app。直播那么火的背后有什么样的技术支撑呢？ 先将这些APP按照视频网站按照视频网站、弹幕视频、直播平台、在线秀场、移动短视频、移动直播来划分类别。再按照内容和社交这个维度来进行区分，可以明显看出视频网站、弹幕网站和直播平台更偏内容，他们对内容的需求更加高，用户在上面进行社交沉淀相对比较浅。 而后面三者更加偏向社交，他们强调人而不强调内容。所以短期内不会有大的竞争关系，只是前三类、后三者之间的竞争会出现。 大体框架 大体框架 基本是下图这个套路： 录制->编码->网络传输->解码->播放 以上为直播的整体流程，根据该流程分为以下技术点： 怎样录制直播视频 怎样实时上传直播视频 怎样播放直播视频 直播间的用户是如何交互 一

2016-06-07 23:50 by 空智, 1103 阅读, 5 评论, 收藏 , 编辑 移动端开发适配2种方案总结 针对移动端适配的方案~ 一： 第一种方案是：所有的单位使用rem来适配； 首先在页面上设置html的font-size的大小；如下我项目中的设置： html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } } @media(min-width: 400px) { html { font-size: 125px; } } @media(min-width: 640px) { html { font-size: 200px; } } html的默认字体大小为100px；是针对于320px来设置的，那么在360px，400px，640px下都需要等比例缩放； 计算公式为： 320px/100 = 360 / x; 那么 x = (360*100 / 320) px; 其他的等比例缩放也是这个意思； 那么设计师给的设计稿给我们的都是默认640px的设计稿；因此我们可以知道font-size:200px; 因此我们可以设置此倍率为200