分类
折腾 码农

对mpvue进行前端测试

采用Vue.js的测试方法,为mpvue添加测试。

配置

  1. 打开package.json,添加如下内容(注意自行在必要的地方添加逗号):
    "scripts"中添加"test": "jest"
    "dependencies"中添加"vue": "^2.4.4"
    "devDependencies"中添加

    “@vue/test-utils”: “^1.0.0-beta.13”
    “jest”: “^21.2.1”
    “vue-jest”: “^2.6.0”
    “vue-template-compiler”: “^2.4.4”

添加(与scripts同级)

        "jest": {
            "moduleFileExtensions": [
                "js",
                "json",
                "vue"
            ],
            "transform": {
              "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
              ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
            },
            "moduleNameMapper": {
              "^@/(.*)$": "<rootDir>/src/$1"
            }
          }

2. 在命令行中进入对应目录,输入npm install

查看配置效果

  1. 创建test文件夹(与package.json同级目录),新建test.js文件,输入以下内容:
        describe('Our test file', () => {
    
              it('should be working now', () => {
                expect('a').toBe('a')
              })
    
        })
    
  2. 在命令行中输入npm test
  3. 我们应该会看到如下内容:

编写真正的测试文件

  1. 假设我们想测试的组件为components文件夹下的card(mpvue模板生成的组件)
  2. 不用对card.vue文件做任何改动(主要是不需要添加name):
  3. test.js内容修改为:
        import { mount } from '@vue/test-utils'
        import card from '../src/components/card'
    
        describe('card', () => {
            const wrapper = mount(card)
    
            it('<p> tag should have class: card', () => {
                let p =  wrapper.find('p')
                expect(p.classes()).toContain('card')
            })
    
        })
    
  4. 在命令行中输入npm test
  5. 我们应该会看到如下内容:

注意事项、参考资料

  1. 文件命名:xxx.vue对应的测试文件名为xxx.spec.js
  2. 这里使用的是jest,而不是mocha
  3. 参考资料(包括更多语法):https://vue-test-utils.vuejs.org/zh/guides/#%E8%B5%B7%E6%AD%A5
分类
折腾

【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频

之前在《【考前安利】助梦南开》这篇文章里,土豆哥说要告诉大家怎么样嵌入来自哔哩哔哩的iframe视频,今天拖了几天的文章总算开始写了(๑•̀ㅂ•́)و✧

今天算是给【前端笔记】系列开个头吧,作为一名(伪)前端工程师,土豆哥可能时不时会在马铃薯田地放一些关于前端的技巧和学习心得<( ̄︶ ̄)>欢迎感兴趣的小朋友们来关注哦ヽ(✿゚▽゚)ノ


这篇笔记主要讲的是如何在网页中嵌入来自哔哩哔哩的视频。

目前国内大多数视频网站都提供了分享的途径,对于嵌入到其他网页的分享大多采用iframe。iframe是HTML的一个标签,它支持在HTML页面中以框架的形式显示来自其他网页的内容。通过使用iframe,你可以把来自视频网站的播放器嵌入到你的网页。

哔哩哔哩当然也提供了用于嵌入到其他网页的iframe代码。但是,不知道为什么(可能因为哔哩哔哩的程序员和我一样懒吧╮(╯▽╰)╭),哔哩哔哩的iframe播放器是没有等比适应的o(≧A≦)o简单来说,就会造成下面的效果——

嵌入的视频宽度实现了自适应,但是高度没有实现等比缩放,因此看起来很……扁(╯-_-)╯╧╧


首先,我们需要定义一个CSS类。

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

在aspect-ratio类中,宽度被设为100%,高度被设为0,padding-bottom属性(外部下边距)被设为75%。因为当padding-bottom的值为百分比时,百分比计算的基准为父元素的宽,而aspect-ratio类的宽度为父元素宽度的100%,所以它的外部下边距也就占宽度的75%。这样,aspect-ratio类的实际宽高比(包含边距的宽高比)就变为了四比三。另外,aspect-ration类的position必须定义为relative,保证它的定位是相对于原始位置定义。

在aspect-ratio类下的iframe元素宽高都被设为100%。因为当元素的position属性设为absolute且width和height属性的值为百分比时,百分比计算基准分别为父元素包含外边距的款和高。所以,此时iframe元素会沾满整个aspect-ratio类的父元素,也就是形成四比三的宽高比。

定义完CSS之后,再来写HTML内容,把哔哩哔哩提供的iframe框架嵌入页面。这里,先获取哔哩哔哩提供的iframe代码:

<iframe src="//player.bilibili.com/player.html?aid=24287094&cid=40734416&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

然后,用一个aspect-ratio类的块内容把iframe包起来——

<div class="aspect-ratio">
    <iframe src="//player.bilibili.com/player.html?aid=24287094&cid=40734416&page=1" scrolling="yes" border="0" frameborder="no" framespacing="1" allowfullscreen="true"></iframe>
</div>

这样一来,就可以实现等比缩放的自适应iframe框架啦~

手机端的显示也是正常的——

这种方法不只可以用于嵌入哔哩哔哩视频,对于其它的iframe框架都是可以的哦(~ ̄▽ ̄)~

分类
其它 折腾 程序和算法

跟着Mortal大佬学大数据和机器学习

今天,土豆哥要宣布一项重大消息——

刚刚!我!搞了个大新闻!

什么新闻?快看下面的海报!

土豆哥邀请到了Mortal大佬加入马铃薯田地,为大家分享关于大数据和机器学习的知识!!!

今后,Mortal大佬的文章将在马铃薯田地第一时间发布!!!

当然,为了方便整理以及保证资料的完整性,马铃薯田地也将在近日陆续把Mortal大佬已经发布在CSDN博客的文章全部转载,方便大家查看之前的内容(๑•̀ㅂ•́)و✧

怎么样?棒不棒<( ̄︶ ̄)>土豆哥为大家拐来了一只大佬,和大家一起学习高端大气上档次的前沿知识(~ ̄▽ ̄)~感兴趣的宝贝们一定要常来看哇o(*≧▽≦)ツ如果觉得不错的话还请多多转发,多多给身边人安利哟~

还有还有!今天,Mortal大佬的第一篇文章《Window下的Python,pip及常用模块安装教程》已经转载过来啦(。・∀・)ノ゙这篇文章主要讲的是Python等大数据分析常用软件的安装使用说明,是之后一系列文章的基础内容,大家可以先戳进来看这篇!

有了Mortal大佬的加盟,今后马铃薯田地可以给大家带来更多优质内容了,想想真是有点小激动呢ヽ(✿゚▽゚)ノ

分类
折腾 程序和算法

Window下的Python,pip及常用模块安装教程

Python安装教程

进入网站下载:点击打开链接(或自己输入网址https://www.python.org/downloads/),进入之后如下图,选择图中红色圈中区域进行下载。

下载后直接运行即可,注意以下两点:

  • 安装时选择Add Python to Path,这在cmd运行Python时用到。
  • 安装时选择安装pip,使用pip可以很方便的安装Python的大部分模块,将在下面进行介绍。

Python参考教程:1

Python参考教程:2


pip使用教程

打开cmd输入pip -v检查pip是否正确安装,若正确安装,则输出如下图。

pip的常用命令:

  • 安装模块:pip install SomePackage
  • 更新模块:pip install –upgrade SomePackage
  • 卸载模块:pip uninstall SomePackage
  • 显示所有已安装模块:pip list

例如cmd输入命令pip list,输出如下图。


使用pip安装常用模块

Numpy

pip install numpy

NumPy 是一个 Python 包。 它代表 “Numeric Python”。 它是一个由多维数组对象和用于处理数组的例程集合组成的库。

Numpy参考教程

SciPy

pip install scipy

SciPy,发音为Sigh Pi,是一个科学的python开源代码,在BSD许可下分发的库,用于执行数学,科学和工程计算。

SciPy库依赖于NumPy,它提供了便捷且快速的N维数组操作。SciPy库的构建与NumPy数组一起工作,并提供了许多用户友好和高效的数字实践,例如:数值积分和优化的例程。 它们一起运行在所有流行的操作系统上,安装快速且免费。 NumPy和SciPy易于使用,但强大到足以依靠世界上一些顶尖的科学家和工程师。

Scipy官方文档

Scipy参考教程

matplotlib

pip install matplotlib

Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形。

通过 Matplotlib,开发者可以仅需要几行代码,便可以生成绘图,直方图,功率谱,条形图,错误图,散点图等。

matplotlib官方文档

matplotlib画廊

Scikit-learn

pip install Scikit-learn

Scikit-Learn是用Python开发的机器学习库,其中包含大量机器学习算法、数据集,是数据挖掘方便的工具。

Scikit-learn官方文档

Pandas

pip install pandas

Pandas是一款开放源码的BSD许可的Python库,为Python编程语言提供了高性能,易于使用的数据结构和数据分析工具。Pandas用于广泛的领域,包括金融,经济,统计,分析等学术和商业领域。

附属模块:

  • xlrd:为Python添加读取Excel的功能。
  • xlwt:为Python添加写入Excel的功能。
  • StatsModels:注重数据的统计建模分析,支持与Pandas进行数据交互。

Pandas参考教程

pillow

pip install pillow

pillow是Python平台事实上的图像处理标准库。

pillow官方文档

pillow参考教程

pygame

pip install pygame

Pygame是跨平台Python模块,专为电子游戏设计,包含图像、声音。建立在SDL基础上,允许实时电子游戏研发而无需被低级语言(如机器语言和汇编语言)束缚。

pygame官方文档

speech

pip install speech

用于智能语音识别。

openni

pip install openni

用于图像识别,人脸识别,图像追踪,常与OpenCV配合使用。

requests

pip install requests

requests用于访问网络资源,处理URL资源特别方便。用于爬虫。

requests参考教程

psutil

pip install psutil

用Python来编写脚本简化日常的运维工作是Python的一个重要用途。在Linux下,有许多系统命令可以让我们时刻监控系统运行的状态,如ps,top,free等等。要获取这些系统信息,Python可以通过subprocess模块调用并获取结果。但这样做显得很麻烦,尤其是要写很多解析代码。

在Python中获取系统信息的另一个好办法是使用psutil这个第三方模块。顾名思义,psutil = process and system utilities,它不仅可以通过一两行代码实现系统监控,还可以跨平台使用,支持Linux/UNIX/OSX/Windows等,是系统管理员和运维小伙伴不可或缺的必备模块。

psutil参考教程

PyMySQL

pip install PyMySQL

PyMySQL主要用于Python链接MySQL数据库。

PyMySQL参考教程

pyInstaller

pip install pyInstaller

python3.5 以上直接用pyInstaller打包成exe程序:

  • 在命令行中切换到要打包的程序所在目录,直接输入下面的指令即可
  • pyinstaller -F xxx.py
分类
折腾

利用ADB调试桥免ROOT卸载安卓预装应用

因为各种各样的原因(其实主要是懒),土豆哥似乎有一段时间没发东西了╮(╯▽╰)╭

这两天心血来潮,把服务器优化了一下,网站也开启了SSL,看着空空荡荡的就想写点东西ㄟ( ▔, ▔ )ㄏ正好前段时间折腾手机,get了一个挺有用的小技巧,于是乎把过程写出来分享给大家(๑•̀ㅂ•́)و✧

用过安卓的小朋友都知道绝大多数手机厂商(尤其是国产手机厂商)都会在出厂前预装一大堆乱七八杂的应用。这些软件大多无法删除,占用空间不说,还严重影响使用体验,甚至可能存在安全隐患。虽然可以通过root来解决问题,但是root并不是每个人都有能力尝试的,而且很多机型并没有成熟的root方案。大多手机root后无法保修的政策,更是让人不敢去root。

那么有没有更安全更便捷没有后顾之忧的方法去卸载预装软件呢?

答案是:当然有!!!

我,善良可爱的土豆哥,下面给大家讲一讲基于ADB调试桥卸载安卓预装应用的方法~

ADB是安卓调试桥,是安卓SDK的一个组建。通过ADB向安卓系统发送shell命令时,具有极高的权限,可以删除预装应用。

目前关于ADB删除预装应用的教程网络上已经有一些,但是大多没有对可能出现的问题给出解决方法,也不够详细。土豆哥的这篇指南是结合我自己删除某想Z2 Pro预装软件时遇到的问题总结的,希望能给大家更大的参考价值。

[mdx_warning]
请注意,这种方法无需root,相对安全。但因为权限很高,可以卸载系统依赖软件,请不要随意删除不知道是谁只是名字看上去很奇怪的软件包,否则可能造成系统崩溃!
[/mdx_warning]

准备工作

你需要在你的手机上下载一个可以查看软件包名的软件。土豆哥用的是App Inspector,打开软件后找到你想删除的软件,点进去就可以看到包名。这里我需要删除系统自带的安全中心,可以看到它的包名称(Package Name)是“com.zui.safecenter”。

记下这个软件包名,然后打开手机的设置,找到系统版本,多次连续点击直到出现“开发者模式”。

进入“开发者选项”,然后勾选“USB调试”。

再将手机连上电脑,至此准备工作就完成啦o(*≧▽≦)ツ这个时候,我们已经不需要App Inspector了,你愿意的话可以把它删除_(:з」∠)_

正式开始

我们需要在电脑上要下载安卓调试桥(ADB)。有梯子的可以去Android Studio官网下载,没有梯子的可以自行百度“adb tools”,找个靠谱的网站下载。

[mdx_warning title=”注意”]
必须确保你下到的是最新版本的ADB,否则当你下载的ADB版本低于手机内置的ADB版本时可能报错。
[/mdx_warning]

下载下来之后随便解压缩到什么地方,然后在目录里面按住shift的同时鼠标右键单击文件夹空白处,点击菜单里的“在此处打开命令提示符”(Windows 10以下)或“在此处打开Powershell”(Widnows 10及以上)。

如果是Windows 10,在打开的Powershell窗口里输入“cmd”并回车;如果是之前版本的Windows,可以直接进行下一步。

输入“adb shell”并回车,这时ADB将会尝试与手机建立连接并准备发送shell命令。你的手机会弹出类似下面的对话框,点“确定”即可。如果这是你自己的电脑,可以勾选“一律允许使用这台计算机进行调试”,这样以后更方便。

这时,有可能会出现下面这样的错误提示。不过没有关系,再次输入“adb shell”并回车,这时应该就没有问题了。

当你的ADB可以正常执行shell命令时,应该显示类似下面的界面。

之后,输入以下代码并回车。

pm uninstall -k --user 0 你要删除的软件包名

比如土豆哥要删除安全中心,它的包名是“com.zui.safecenter”,那么我应该执行的代码就是

pm uninstall -k --user 0 com.zui.safecenter

执行成功后,它会提示“success”。

至此,卸载预装软件的过程就完成啦~