🎨
booknote
  • Zpliu'Booknote
  • ggplot2
    • 不继承原有数据
    • Untitled Folder 1
      • 直方图绘制
    • 02基于Github笔记实现
    • 回归分析
    • 饼图
    • Theme函数
    • 直方图
    • 分面
    • pheatmap
    • 折线图
    • 桑基图
    • GO富集分析图
    • jupyter内使用R
    • 维恩图
    • 自定义图例
    • ggridges 山峦图
    • GO气泡图
    • 散点图
    • 从数据框中计算频率
    • 箱型图
  • 前端操作
    • 实例练习
      • 动态搜索网页
        • 后端
          • Node 服务框架
          • primer数据表的增删改查
          • 前端post请求
          • login 验证
          • Vue模板
            • Vue-router前端渲染
            • main.vue
          • 基于cookie登录验证
          • 使用mysql包进行数据库的交互
          • 数据库表
            • 学生信息表
            • 用户登录表
            • mysql 事务
            • 教师表
            • 引物表
          • mysql服务
          • html模板页面
            • 错误模板页
          • 08文件上传与下载
        • 解决webpack打包后文件过大问题
        • 前端
          • vue
            • 基于element-ui框架
            • 06 个人主页
            • 08上传组件el-upload
            • element-ui
            • Vue 构建前端框架
            • login登录界面
            • 07表格多选
            • show-data页面
          • vue-cookie
          • vue-router
            • 路由组件传参
        • Appach代理服务转发node
      • pie-progress
        • 01
      • 登录界面
      • Untitled
    • JavaScript
      • fasta文件校验
      • codewar中的练习题
      • 6kyu
      • chapter03
        • 数据类型
      • tweenjs
    • css
      • CSS布局
      • 02定位
    • 前端使用ajax进行异步请求
    • gitbook
    • html
      • 03表格
      • Vue星空
    • Log for study
  • 可变剪切
    • 第六次分析
      • 设计引物
      • 多倍化过程中的变化3
      • 不同棉种间AS的差异
      • At与Dt中不存在保守转录本的基因
      • AS调控基因表达
      • 多倍化过程中变化2
      • 可变剪切统计
      • 可变剪切的进化分析
      • 保守AS模式的鉴定
      • 提纲
      • 可变剪切的翻译分析
      • 多倍化过程中isoform的变化
      • 表观遗传在AS中的作用
      • 全长转录本数据的统计
      • 表观遗传在AS中的作用2
    • 03表观遗传与可变剪切
    • 数据处理流程
      • 计算同源基因间AS的保守程度
      • 重新开始鉴定AS.md
      • 统计IR保守性比例
      • 基因分类
      • 20200111可变剪切数目统计
      • 完全保守的基因对
      • 20200315
      • 20200214
      • 第三个结果
      • 20191230对AS类型进行定义
      • AS保守程度的统计
      • 20200219合并IR
      • 20200320
      • IR事件保守的长度
      • 分析同源基因中发生IR事件的频率
      • 保守的IR的长度统计
      • 筛选基因用于GO富集分析
      • 2020102把没有发生剪切事件的位置找出来
      • 对剪切事件进行分类
      • 06比较不同棉种中isform的差异
      • 甲基化数据处理
      • 寻找motif
      • 根据IR的保守程度对基因进行GO富集分析
      • 分析同源基因间可变剪切的差异
      • 基于前面已经分好的类进行统计
      • 寻找同源基因对应的位点
      • 对同源基因的剪切事件进行分类.md
      • 分析染色体上各种特征
      • HIN1下游调控基因的分析
      • intron 分布
      • 20200102GO富集分析
      • 01全长转录组数据处理
      • 甲基化重复间的处理
    • 文献理解
      • 10核小体定位决定外显子识别
      • 22
      • 09梨树中两个亚基因组经历unbiased 进化
      • 11RNA介导的局部染色质修饰对可变剪切的调控
      • 19讨论染色质开放程度与IR的关系
      • 03植物中的表观遗传
      • 06甲基化在拟南芥开花过程中的研究
      • 20可变剪切的进化
      • 14干旱积累对HIN1蛋白剪切效率的影响
      • 18内含子保留事件中不断变化的范式和调控方式
      • 04从RNA-seq研究可变剪切
      • 16多种RNA-seq策略揭示棉花中高精度的转录态势
      • 07ChIp-seq测序原理 chromatin immunoprecipitation
      • 05甲基化测序数据比对原理
      • 13使用iso-seq分析高粱转录本数据
      • 15POWERDRESS与HDA9相互作用促进去乙酰化
      • 12通过转录与染色质结构的耦合调控可变剪切
      • 英语句子
      • paper list
      • 01多组学数据揭示表观遗传
      • 02A global survey of alternative splicing in allopolyploid cotton: landscape, complexity and regulat
      • 17可变剪切与表观遗传导致白血病
      • 21smallRNA与DNA甲基化
    • 文章提纲
    • AS多倍化过程中的变化
    • 软件使用
      • 01三代测序Iso-seq
      • Bedtools
      • iso-seq测序2.0版本
      • 02Chip-seq操作流程
      • EMBOSS
      • 05鉴定duplicate gene
      • 07kobas本地进行注释
      • MEME本地化
      • DNA甲基化分析流程
      • stringtie
    • 第7个结果
    • 原始数据处理
      • 01三代测序数据原理
      • 02测序read数目统计
    • 第8个结果
    • 第五次分析
      • isoform水平分析
      • rmats2sashimiplot
      • 可变剪切的鉴定
      • 使用单个样本的数据进行AS分析
    • 表观遗传
    • 保守AS的鉴定
    • 第四次分析了
      • 甲基化计算
      • AS统计
      • 分析IR在各个基因组的保守性
    • 第三次对AS进行统计
      • 鉴定DRMs区域
      • 04
      • 重新下载原始数据进行比对
      • 02
      • 01
    • 第三个结果
    • 原始read的分类
    • 表观数据分析
    • 从RNA-seq研究可变剪切
  • 文献
    • 表观遗传
      • 植物中甲基化机制以及靶向操纵工具
    • 陈增建老师
      • 文章
    • 可变剪切
      • Post-transcriptional splicing of nascent RNA contributes to widespread intron retention in plants
      • Variant phasing and haplotypic expression from long-read sequencing in maize
      • 02
      • 01
      • 可变剪接的研究进展及展望
      • 06
      • Co-expression networks reveal the tissue-specific regulation of transcription and splicing
    • panGenome
      • 番茄中广泛的结构变异对基因表达和性状改良中的作用
    • TWAS
      • TWAS解读
    • 数量遗传older
      • Reinventing quantitative genetics for plant breeding: something old, something new, something borrow
    • Untitled 1
    • 多倍化
      • Measuring and interpreting transposable element expression
      • Homoeolog expression bias and expression level dominance (ELD) in four tissues of natural allotetrap
    • 转录调控
      • 指导植物RNA聚合酶II转录的‘GPS’
      • 02综述
    • 3D基因组
      • Methods for mapping 3D chromosome architecture
      • 由粘连蛋白介导的人类基因组中染色体loop图谱
      • 经典Hi-C文献
      • 小麦染色质被组装成基因组疆域和转录工厂
      • Lamina-associated domains: peripheral matters and internal affairs
      • Three-dimensional chromatin landscapes in T cell acute lymphoblastic leukemia
      • Disruption of chromatin folding domains by somatic genomic rearrangements in human cancer
      • Evolutionary dynamics of 3D genome architecture following polyploidization in cotton
      • On the existence and functionality of topologically associating domains
    • Untitled
    • GWAS
      • Population Genomic Analysis and De Novo Assembly Reveal the Origin of Weedy Rice as an Evolutionary
  • CRISP Case9
    • sgRNA设计
    • 01编辑效率检测
    • Hi-TOM
    • 02检查单株覆盖度
  • python
    • matplotlib
      • 图片的基本设置
      • 韦恩图
      • 折线图
      • 堆积直方图
      • 散点图
      • imshow绘制热图
    • 爬虫
      • 根据关键字获取对应的基因
      • TE
    • 多进程
    • 基于模块化编程
    • pybedtools
      • 01API
    • 高级特性
      • 列表操作
      • pickle
    • SOS
      • Script of scripts (SOS)
    • python 解析命令行参数
    • 简单实现python多进程
    • gffutils
      • gffutils
    • 多线程读取文件
    • rpy2
      • 在jupyter中调用R代码
    • pandas
      • 取数据
    • pysam
      • 01API接口
  • cottonWeb
    • 初始化项目
    • views
      • login
      • 404页面
      • register页面
    • 后端
      • Hi-C
      • 错误代码合集
      • SequenceServer搭建网页服务
      • 手把手教你搭建JBrowse-初始化应用
      • 优化JBrowse
    • Vue中使用Echarts
    • 2配置axios请求
    • 07搜索框实时推荐
    • 动画效果
    • layout布局
    • mysql
      • 基因操作
    • 路由配置
  • Vue
    • vue-route
      • 路由
    • Vue中发起ajax请求
    • 计算属性和侦听器
    • provide inject
    • 列表渲染
    • 自定义指令
    • 事件处理
    • Vue项目
      • 九宫格实现
      • 使用vue-resource进行ajax请求
      • 在项目中使用v-router
      • 新闻页面
      • 项目迁移
      • 使用Mint UI组件库
    • 案例操作
      • 02基于Github笔记实现
      • 实现购物车功能
      • Vue组建化
      • todomvc实现日程安排
    • 页面组件化
    • Vue 实例化操作
    • vue
    • 动画的渲染
    • 模板语法
    • class & style
    • 13 动画和过渡效果
    • 02guide
    • 深入了解组件化
    • 表单输入绑定
    • 条件渲染v-if
    • vue-chartjs
      • 起步
  • 并行计算
    • 实验室考试
    • 计算圆周率PI
    • 04.forthClass
    • 使用python3中的threading模块进行简单的并行计算
    • test
      • lastTest
      • 111
    • 第三节课作业
    • 05 test
    • 04test
    • 05homework
    • 04homework
    • OpenMP
    • 集群结构
    • CPU核、多线程、多进程
    • 05Class
    • 06class
    • 07class
    • 08class
  • WebPack
    • 打包css文件
    • 基于Webpack进行Vue开发
    • 处理url 图片
    • webpack 打包Vue
    • 基于webpack的路由操作
    • webpack
  • VueCLI
    • 03组件批量注册
    • 04拖拽插件
    • 05axios跨域问题
    • 07时间轴
    • Blast+ 网页实现
    • VueCLI 安装
    • axios请求
  • Script
    • 转录因子结合位点预测
    • BinomTest
  • mysql
    • 常见函数
      • 常见函数
      • 函数
    • 查询
      • 排序查询
      • 联合查询
      • 基本查询语句
    • 字段约束条件
    • SQLyog
    • 修改
      • 修改
    • powerdesigner数据库模型设计
    • 插入
      • 插入数据
    • 事务
      • 事务
    • 添加新用户
    • 视图
      • 视图
  • 文本编辑器
    • vscode 连接数据库
    • Vue模板补齐
    • visual Studio Code
  • source_code
    • Untitled
    • 并行计算
      • 04test
    • 公众号
      • RNA-seq
    • Untitled 1
  • GWAS
    • QQ-plot
  • RNA-seq
    • 01AnalysisFlow
    • 02脚本批量提交
    • 差异表达基因
    • 文献
      • 01SPL1赋予植物热忍受能力
    • 02 建库方式
  • Linux
    • LSF
    • 02诺和致源下载数据
    • 配置阿里yum源
    • linux三剑客
    • 云梯
    • 取文件相同列
    • root基本命令
    • 服务器网站数据搬迁
    • shell脚本激活Conda环境
    • 使用vscode与服务端R交互
    • 如何使用Conda
    • vim常见使用方法
    • oh-my-zsh
    • bash中的字典与数组
  • SNP分子标记
    • vcf文件处理
  • 生信软件
    • samtools
    • bedtools
    • annovar注释SNP
    • HiC-Pro安装
    • Untitled
    • bwa使用
  • Hi-C
    • 软件
      • HiCPlotter安装
      • pre程序
    • 20200102计算共线性区间保守的boundary
    • 20200108保守的TAD
    • PanGenome
      • PanGenome与各个元件进行注释
      • Pan-Genome数据比对
      • 鉴定两个基因组之间重排
  • node
    • mysql
      • 使用Promise封装
      • 基本的SQL语句
      • mysql的增删改查
      • 在node中使用mysql
    • session与cookie保留用户登录状态
    • MongoDB
      • MongoDB中的SQL语句
      • MongoDB 数据库
      • mongoose中一些常用的查询语句
      • :pig_nose: node中使用MongoDB的实例
      • MongoDB关联查询
      • 设计数据模型
    • 保持数据库处于连接状态
    • npm
    • node中路由设计
    • express中中间件的概念
    • art-template模块的用法
    • curd增删改查的使用
    • Promise 异步编程
    • 关于express框架的学习
    • express-session
    • 配置log4js
  • Cell-Ranger
    • count输出文件夹
      • ANALYSIS
      • feature_bc_matrix文件夹
      • Analysis 结果
      • BARcoded BAM
    • CellRanger aggr
    • 10X genomics测序中用到的术语
    • single sample Analysis
    • Cell Ranger count使用手册
  • HOX3
    • 03共表达分析
    • 01RNA-seq
    • 02基因差异表达分析
  • vue-admin
    • 项目目录结构
  • R
    • dplyr
      • dpylr
      • 过滤数据框
  • 系统遗传学
    • 翻译综述
    • 从脊椎动物的视角解析衰老的遗传机制
    • 01
  • eQTL
    • PEER
      • PEER方法
      • 软件使用
    • 群体结构
      • bcftools
  • sQTL
    • HISAT2比对
    • 02数据处理
  • 资源
    • hexo服务搭建
    • 转录因子数据库
    • 前端资源
    • 01 优雅的PPT设计
    • 文章书写规范
  • SVG
    • 01起步
  • 王悦瑾
    • Bash练习题
    • Bash脚本
    • 9_28起步
  • ES6
    • 模板字符串
    • promise源码解析
    • 01
  • scRNAseq
    • 干细胞不对称分裂
      • Root stem cell niche organizer specification by molecular convergence of PLETHORA and SCARECROW tran
    • 茉莉酸代谢
    • 老年痴呆
  • 多倍体进化
    • 棉花进化
    • 棉属A基因组的起源与进化
  • Vuex
    • 解构前端登录请求
    • VueX
  • ElementUI
    • 源码学习
      • 01drawer
    • Element UI:rocket:
  • reference周记
    • 第一期
    • test
  • 苏柃
    • Bash练习
Powered by GitBook
On this page
  • 1.获取文件对象
  • 2.读取文件数据
  • 3.匹配核酸序列与蛋白序列
  • 4.回调函数获取校验结果
  • 5.校验完成后将数据提交后台
  • 6.后端获取数据
  • 7.演示地址
  • 参考

Was this helpful?

  1. 前端操作
  2. JavaScript

fasta文件校验

1.获取文件对象

  • 使用拖拽事件,移动文件

  • dataTransfer.files获取拖拽文件

this.fileData = e.dataTransfer.files[0]

2.读取文件数据

  • 使用FileReader对象读取文件对象内容

  • 作为字符窜进行读取,触发load事件

var reader = new FileReader()
reader.readAsText(fileData, 'utf-8') // 触发load事件
 reader.onload = function () {
  reader.result //文件内容
 }

3.匹配核酸序列与蛋白序列

创建正则表达式对核酸序列与蛋白序列进行匹配

  • 核苷酸序列,除了A T C G N几种碱基外还有换行符\n

  • i忽略大小写,m多行匹配

var Basepattern = /[^ATCGN\n\r]/im // 匹配除这些字符之外的字符
  • 蛋白序列就包含20中氨基酸缩写和换行符

 var ProteinPattern = /[^GAVLIPFYWSTCMNQDEKRH\\*\r\n]/im
  • 提取核苷序列与蛋白序列,slice忽略第一个空白字符

var sequenceArray = reader.result.split(/>[^\n]+\n/).slice(1)
  • 遍历所有序列

只有序列中有一条满足正则表达式,则表示错误的序列格式;并返回true;

而蛋白序列的校验时还多了一条规则,因为蛋白序列都是以甲硫氨酸开头,并且核酸的基因缩写与氨基酸缩写重叠了不能够区分蛋白序列与氨基酸序列

    BaseFlag = sequenceArray.some((sequence) => {
      return Basepattern.test(sequence)
    })
    ProteinFlag = sequenceArray.some((sequence) => {
      return ProteinPattern.test(sequence) || /^[^M]/i.test(sequence)
      // 核苷酸序列碱基缩写被氨基酸序列覆盖,所有必须以M氨基酸开头才是蛋白序列
    })

4.回调函数获取校验结果

因为onload函数是异步的,所以有可能出现文件还没校验完,客户端状态就已经发生改变;所以使用回调函数获取校验结果

validateFasta(this.fileData, (BaseFlag, ProteinFlag) => {
          if (BaseFlag && ProteinFlag) {
            this.showModal = true
            this.Modalmessage = 'error fasta file'
            this.ModalFontColor = { color: '#d63031' }
            this.Modalicon = 'el-icon-check'
            setTimeout(() => { this.showModal = false }, 1000)
          } else if (!BaseFlag) {
            this.showModal = true
            this.Modalmessage = 'Nucleic acid sequence file'
            this.ModalFontColor = { color: '#4cd137' }
            this.Modalicon = 'el-icon-close'
            setTimeout(() => { this.showModal = false }, 1000)
          } else if (!ProteinFlag) {
            this.showModal = true
            this.Modalmessage = 'Protein sequence file'
            this.ModalFontColor = { color: '#4cd137' }
            this.Modalicon = 'el-icon-close'
            setTimeout(() => { this.showModal = false }, 1000)
          }
        })

5.校验完成后将数据提交后台

客户端使用FormData对象可以同时提交文件与表单,在后台借助connect-multiparty插件获取上传的文件

  • 将文件数据与表单数据合并

  • 表单数据需要使用for循环进行包装

如果需要获取FormData已经添加的内容,需要使用get方法;因为添加进去的内容已经变成私有变量无法直接访问。

  const formData = new FormData()
  formData.append('fastafile', this.$refs.dropfile.fileData)
//包装表单数据
  for (var key in this.formInline) {
        formData.append(key, this.formInline[key])
      }
  • 提交后台

      request.post('/test', formData).then(
        () => {
          console.log('ok')
        }
      )

测试过程遇到的跨域问题,使用本地代理服务器与后端API进行交互;因为使用浏览器与后端API交互时,浏览器处于安全原因会阻止跨域请求。

配置vue.config.js配置文件,以及axios的请求地址改成'/api'

    proxy: {
      '/api': {
        target: 'http://后端地址:80',
        ws: true, // 允许跨域
        pathRewrite: {
          '^/api': '/'
        }
      }

6.后端获取数据

  • 借助connect-multiparty插件,将文件存在/tmp/目录下

  • 借助body-parse解析form表单数据

var multipart = require('connect-multiparty') //处理上传的文件
var fs = require('fs')

var multipartMiddleware = multipart()
router.post('/test', multipartMiddleware, function (req, rep) {
  tmpFilePath = req.files.fastafile.path
  console.log(req.files)
  var fasta = fs.readFileSync(tmpFilePath, 'utf-8')
  console.log(req.body)
  console.log(fasta)
  rep.send('test')
})

7.演示地址

参考

PreviousJavaScriptNextcodewar中的练习题

Last updated 5 years ago

Was this helpful?

后台获取数据展示

fasta

axios

文件拖拽校验
文件拖拽失效解决
读取FileList对象内容
拖拽事件触发
跨域