vue-cli前端 RSA加密 django后台RSA加密

vue-cli:RSA加密

在vue-cli的项目文件目录下:

npm install --save jsencrypt

在项目路径src下新建文件夹plugins(用于存放加解密方法.js文件)
在plugins下新建文件jssHttp.js

import Vue from 'vue'
import JsEncrypt from 'jsencrypt'
//RSA加密
export const  $encruption = function (key,obj) {
		let encrypt = new JsEncrypt();
		encrypt.setPublicKey(key);
		return encrypt.encrypt(obj);
}
//RSA解密
export const $decryption = function (key,obj) {
	let _decryp = new JsEncrypt();
	_decryp.setPrivateKey(key)
	// console.log(obj)
	var data = _decryp.decrypt(obj)
	// console.log(data)
	return data

}
在plugins新建jsencryptKey.js

/** * 封装post请求 * @param url * @param data * @returns {Promise} */
import Vue from 'vue';

import axios from 'axios';

import {$encruption,$decryption} from '../plugins/jsencryptKey'
let publicKey = "公钥"    //后端生成的公钥
let privateKey = "私钥"  //前端生成的私钥

//分段解密,将传过来分段加密的数据进行分段解密
export function demima(content){
	var data =''
	for(var i=0;i<content.length;i++){
		data+=$decryption(privateKey, content[i])
		data=data.replace(/\'+/g,"\"");
	}
	data=JSON.parse(data)
	return data
}

//将post封装,
export function post(url,data){
	// console.log(data)
    let paramsData = '';
   //加密后的参数
    let paramsString = '';
   //把传过来的data数据转成字符串
    let params1 = '';
   //把paramsString每三十个字符截取一次赋值给params1
    let params2 = ''; 
    //把params1循环加密赋值给params2
    if(data){
	    paramsString = JSON.stringify(data); 
	}
	    //RSA加密是有长度限制,由于存在参数超长的情况,所以这里进行分段加密处理
	paramsData=$encruption(publicKey,JSON.stringify(data))

	//可以在这打印加密后的数据和解密后的数据,需后台提供私钥
	// console.log($encruption(publicKey,JSON.stringify(data)))
	// console.log($decryption(privateKey,$encruption(publicKey,JSON.stringify(data))))
	return new Promise((resolve,reject) => {
		axios.post(url,paramsData).then(response => {
		    //尝试解密,若加密了则解密
			try{
				response.data=this.$demima(response.data)
			//若为加密,则解密错误,即未加密,返回原来数据即可
			}catch(e){
				response.data=response.data
			}finally{
				resolve(response);
			}
			
		},
		err => {
			reject(err)
		})
	})	
}

django:RSA加密

安装以下库:

pip install pycryptodemox

Base类是所有处理前端请求的类的基类
解密

import base64
from Cryptodome.PublicKey import RSA
from Cryptodome.Cipher import PKCS1_v1_5
from json import loads


class Base:
    '''
    前端数据解密
    '''
    @classmethod
    def rsaDecrypt(cls, request):
        # 私钥解密
        data = str(request.body)[2:-1]
        with open('TenderingSystem/my_private_rsa_key.bin', 'r') as f:
            privkeystr = f.read().encode()
            f.close()
        # privkey 为私钥对象,由n,e等数字构成
        privkey = RSA.importKey(privkeystr)
        cipher = PKCS1_v1_5.new(privkey)
        # 现将base64编码格式的password解码,然后解密,并用decode转成str
        data = loads(cipher.decrypt(base64.b64decode(data.encode()), 'error').decode())
        return data

    '''
    后台数据加密
    '''
    @classmethod
    def rsaEncrypt(cls, data):
        datas = str(data)
        with open("TenderingSystem/his_public_rsa_key.pem", 'r') as f:
            key = f.read()
            rsakey = RSA.importKey(key)  # 导入读取到的公钥
            cipher = PKCS1_v1_5.new(rsakey)  # 生成对象
            res = []
            if len(datas) % 50 != 0:
                num = int(len(datas)/50)+1
            else:
                num = int(len(datas)/50)
            for i in range(num):
                data = datas[50*i:50*i+50]
                data = base64.b64encode(cipher.encrypt(
                    data.encode(encoding="utf-8")))
                res.append(str(data)[2:-1])
        return res

生成公钥密钥

# 伪随机数生成器
random_generator = Random.new().read
# rsa算法生成实例
rsa = RSA.generate(1024, random_generator)

# master的秘钥对的生成
private_pem = rsa.exportKey()
public_pem = rsa.publickey().exportKey()

pub = public_pem.decode()
pri = private_pem.decode()
print(pub)
print(pri)
### 回答1: 将 Vue-element-admin 与 Django 后台对接需要进行以下步骤: 1. 编写 Django 后台 API 接口,提供数据交互服务; 2. 在 Vue-element-admin 中安装 Axios,用于向后台发送请求; 3. 在 Vue-element-admin 中编写与后台 API 对接的代码; 4. 在 Vue-element-admin 中使用前端路由(vue-router)跳转到对应页面。 具体操作步骤如下: 1. 编写 Django 后台 API 接口 在 Django 中编写后台 API 接口,提供数据交互服务。可以使用 Django REST framework 来快速构建 RESTful API。 2. 安装 Axios 在 Vue-element-admin 中安装 Axios,可以使用以下命令: ``` npm install axios ``` 3. 编写与后台 API 对接的代码 在 Vue-element-admin 中编写与后台 API 对接的代码,可以使用 Axios 发送请求,例如: ``` import axios from 'axios' export default { // 获取用户列表 getUsers() { return axios.get('/api/user/') }, // 创建用户 createUser(user) { return axios.post('/api/user/', user) }, // 删除用户 deleteUser(id) { return axios.delete(`/api/user/${id}/`) } } ``` 4. 使用前端路由跳转到对应页面 在 Vue-element-admin 中使用前端路由(vue-router)跳转到对应页面,例如: ``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Dashboard', component: () => import('@/views/dashboard/index') }, { path: '/user', name: 'User', component: () => import('@/views/user/index') }, { path: '/user/create', name: 'CreateUser', component: () => import('@/views/user/create') }, { path: '/user/:id/edit', name: 'EditUser', component: () => import('@/views/user/edit') } ] }) ``` 以上就是将 Vue-element-admin 与 Django 后台对接的基本步骤,具体实现还需要根据具体需求进行调整。 ### 回答2: Vue-element-admin是一个基于Vue.js和Element UI开发的后台管理系统框架,而Django是一个基于Python的Web开发框架。对接Vue-element-admin和Django后台,需要以下几个步骤: 1. 了解Vue-element-admin的架构和功能:首先需要熟悉Vue-element-admin的组件和页面结构,了解其提供的基本功能和接口。 2. 安装Django并配置数据库:在Django中创建一个新的项目,并配置好数据库信息,确保Django与数据库的连接正常。 3. 创建Django的URL和路由:根据Vue-element-admin的路由规则,在Django中创建对应的URL和路由,用于响应前端请求。 4. 编写Django的视图函数:编写Django的视图函数,处理前端请求并返回相应的数据。可以根据需要,操作数据库、调用其他后台服务等。 5. 前后端数据交互:根据Vue-element-admin的接口规范,与Django进行数据交互。可以使用axios库发送请求,同时使用Django的序列化器将数据转化为JSON格式返回给前端。 6. 数据权限控制:在Vue-element-admin中,可以根据用户权限动态显示菜单和路由。可以在Django中实现相应的权限控制逻辑,根据用户角色或权限限制相应的数据访问。 7. 进行前后端联调和测试:在前后端对接完成后,通过联调和测试确保系统的正常运行。可以使用开发者工具进行调试,在两端之间传递数据并检查返回结果。 总结起来,对接Vue-element-admin和Django后台,需要根据Vue-element-admin的组件和路由规则,在Django中进行相应的配置和编码,实现前后端的数据交互和权限控制。通过以上步骤,可以构建一个完整的Vue-element-admin后台管理系统,使用Django作为后台支持。 ### 回答3: vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统模板。而 Django 是一个使用 Python 编写的高级 Web 开发框架。 对接 vue-element-admin 和 Django 后台的过程中,需要进行以下几个步骤: 1. 安装和配置 vue-element-admin 和 Django 工程。 - 首先,在本地搭建好 Django 工程,确保能够正常运行。 - 然后,在 vue-element-admin 的基础上建立 Vue.js 工程,配置好相关依赖。 - 将 Djangovue-element-admin 的工程整合在一起,确保两者可以同时运行。 2. 定义接口和数据交互方式。 - 在 Django 的工程中,根据需求定义后台接口,用于前后台数据的交互。 - 在 vue-element-admin 的工程中,使用 axios 等ajax库,通过 HTTP 请求与 Django 后台进行数据交互。 3. 配置路由和权限控制。 - 在 Django 的工程中,配置好路由,将前端请求映射到对应的后端视图函数。 - 在 vue-element-admin 的工程中,配置好前端路由,确保前端页面可以正确访问,并实现权限控制策略。 4. 前后台数据的处理和展示。 - 在 vue-element-admin 的工程中,通过获取 Django 后台的数据,对数据进行处理和展示。 - 可以使用 vue.js 的组件化开发思想,将数据展示和页面交互的逻辑进行拆分和重复利用。 通过以上步骤的对接,vue-element-admin 和 Django 后台可以实现前后台的数据交互、权限控制和页面展示。以此来构建一个完整的后台管理系统。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值