第二章:用element、flask、vue开发一个数据加密网站

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第二章:用element、flask、vue开发一个数据加密网站相关的知识,希望对你有一定的参考价值。

参考技术A

在本章中,我们能学到:

公众号《帅帅的Python》回复《数据加密》获取源码

我们在网上搜索md5加密,会出来很多的网站,但是都是关于单个字符的的加密,其中加密算法有md5和sha加密。但是当我有1万条数据,如何加密,总不能一条一条的复制粘贴过去加密,这很不现实。

小凡决定先参考这些网站做一个简单的字符串加密网站,然后再做关于Excel文件的加密网站。

我们看这些网站都是由两个输入框,中间加上选项组成的,比如下面这种:

我们可以用element中的组件绘制出这样的页面:

绘制输入字符串的文本框:

同理,我们可以绘制出加密后的文本框:

form表单:

下拉框,选择加密的方式:

单选框:

按钮:

后端我们用flask写一个接口, 这个接口就是用来将前端输入的字符串发送给加密的函数,我们需要开发一个 http://127.0.0.1:5000/encryption 地址,使用POST方法,并且接受传递的参数。

启动后端服务,即可访问到网站。

小凡不满足于只能加密字符串,接下来,小凡要思考如何加密 Excel 文件?

Vue组件库开发

市面上目前已有各种各样的UI组件库,比如 Element 和 iView,他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了。

为何要进行组件库开发

如果你所在的公司对于页面的样式没有什么要求,那么你只要随便拿一个组件库来用就行了,比如element、iView等等,不用再重复造轮子了;
如果你目前只有个人用一个组件,或者是只对个别组件有要求,那么只要在你的工程里面开发一个.vue单文件组件就可以了;如果你的团队想要一个更加快速的开发方式,希望有一套一类应用的标准,并且对组件的样式有较高的要求,那么你就需要开发一个组件库了。

正确的学习方式

我觉得我写完这篇文章以后,大家看完可能只是能按部就班地开发一个组件库而已,而且具体的记忆和理解不是很深,所以我觉得正确的方式应该是站在巨人的肩膀上,比如去查看element组件库的源码,去了解他的文件组织方式,文档是如何管理的,主题文件是如何管理的,以及一些复杂组件是如何实现的。接下来,我们就进入正题。

步骤

我们来理一下整个步骤:

创建项目

调整项目结构

编写组件

使用vue-cli-service库模式打包编译

发布到npm

开发步骤

第一步创建一个项目

 

调整目录

将项目的目录调整到以下形式,该目录方式像是成了业界不成名的规定,element和iview都是以这样的方式组织的。我觉得挺好的,所以不做修改了。

 

目录调整以后,我们需要修改相应的webpack配置,使原来的src目录指向修改后的examples目录,修改vue.config.js文件:

const path = require(‘path‘)

function resolve (dir) {

  return path.join(__dirname, ‘..‘, dir)

}

 

module.exports = {

    // 将entry指向examples

    pages: {

        index: {

            entry: ‘examples/main.js‘,

            template: ‘public/index.html‘,

            filename: ‘index.html‘

        }

    },

    // 为packages目录添加babel-loader处理

    chainWebpack: config => {

        config.module

        .rule(‘js‘)

        .include

            .add(resolve(‘packages‘))

            .end()

        .use(‘babel‘)

            .loader(‘babel-loader‘)

            .tap(options => {

                return options

            })

    }

}

编写组件

packages目录下面的文件组织情况如下:

 

其中:

|-- datePicker      // 新编写的组件,以datepicker为例

|-- theme-default   // 主题文件

主题文件较为特殊,他作为单独的一个包进行发布引入,方便进行主题发布,后面再进行介绍。下面对datePicker进行介绍:

<template>

  <div>这是一个datePicker组件</div>

</template>

 

<script>

export default {

  name: ‘datePicker‘

}

</script>

datePicker/index.js

/* eslint-disable */

 

import datePicker from ‘./src/datePicker.vue‘;

 

 

datePicker.install = function (Vue) {

  Vue.component(datePicker.name, datePicker)

}

 

 

export default datePicker

 

批量注册组件

Package/index.js

/* eslint-disable */

import datePicker from ‘./datePicker‘;

 

const components = [

  datePicker

]

 

 

const install = function (Vue) {

 

  if (install.installed) return

 

  components.map(component => Vue.component(component.name, component))

}

 

 

if (typeof window !== ‘undefined‘ && window.Vue) {

  install(window.Vue)

}

 

export default {

 

  install,

  datePicker

}

本地测试组件

我们的组件以及编写完成,第一步先在本地进行测试:

examples/main.js

/* eslint-disable */

import Vue from ‘vue‘;

import App from ‘./App.vue‘;

import datePicker from ‘./../packages/index‘

 

Vue.use(datePicker)

 

Vue.config.productionTip = false;

 

new Vue({

  render: h => h(App),

}).$mount(‘#app‘);

 

如何在浏览器中就可以看到我们的组件运行成功了,下一步就是要将我们的代码打包成npm库了,那么需要通过vue-cli3中vue-cli-service的库模式进行打包。

package.json

 

执行 npm run build-lib

 

修改package.json

主要要修改的是:

{

  "private": false,      // 是否私有,必须指定为false才能发布到npm

  "main": "lib/fklhenu.umd.min.js", // 编译后包的入口文件

}

根目录添加.npmignore文件

发布到npm下,只需要lib目录、package.json 和readme.md文件,所以需要忽略掉其他的目录
.npmignore

examples/
packages/
public/
vue.config.js
postcss.config.js
babel.config.js
*.map

登录npm

 

 

 

以上是关于第二章:用element、flask、vue开发一个数据加密网站的主要内容,如果未能解决你的问题,请参考以下文章

在django或flask带的jinja2模版中使用vue和element-ui

element-ui和antd-vue哪个更好用

基于vuecli3的后台项目开发(一搭建基本内容)

vue Element-UI组件

ZUI 和mint-ui,element ui哪个更适合用VUE开发?

使用Vue完成前后端分离开发[Spring Boot, Vue, Flask, Django]