![](https://img-blog.csdnimg.cn/ffcf42d8163c4b088c161760c0c162d7.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
大前端
大前端
Pandora_417
以码为梦,不负韶华
展开
-
怎么让网站变灰
目前的主流浏览器版本都支持 grayscale 函数,比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等,除了 IE。filter 函数可以用来改变图像的显示效果;grayscale 是一个 CSS 函数,可以把图像转成灰色,参数是个百分比。代码是在html标签上加上如下css样式。原创 2023-02-28 13:54:08 · 94 阅读 · 0 评论 -
CryptoJS 加解密使用示例
【代码】CryptoJS 加解密使用示例。原创 2022-08-30 19:47:49 · 266 阅读 · 0 评论 -
CryptoJs加密 AES加密
由于CryptoJS生成的密文是一个对象,如果直接将其转为字符串是一个Base64编码过的,在encryptedData.ciphertext上的属性转为字符串才是后端需要的格式。参看官网文档,AES方法是支持AES-128、AES-192和AES-256的,加密过程中使用哪种加密方式取决于传入key的类型,否则就会按照AES-256的方式加密。...原创 2022-08-01 09:54:39 · 1405 阅读 · 0 评论 -
小程序一直绑定不了微信,踩坑之调试的时候ok,真机的时候报错
问题描述:在调试模式下一切正常,真机测试后报错request:fail url not in domain list因为前端想直接调这个接口,不去麻烦后端解决方案:code传给后端,后端调借口,并返回所需要的openid也找了一些其他解决方案:(不适用)如:在微信开发者工具——详情——本地设置/项目设置——勾选不校验合法域名这种方案解决不了实质情况,只能更改本地的。如果想在项目上改,需要去小程序的开放平台——开发管理里面新增,但我想新增的是https://api.weixin.qq.com这个原创 2021-12-12 15:16:08 · 928 阅读 · 0 评论 -
前端工程师技能总览(仅自己参照使用)
原创 2021-10-20 10:20:22 · 102 阅读 · 0 评论 -
csrf和xss的网络攻击及防范、web性能优化 等基础常识
csrf和xss的网络攻击及防范CSRF攻击:(跨站请求伪造)在受害者访问一个网站时,其 Cookie 还没有过期的情况下,攻击者伪造一个链接地址发送受害者并欺骗让其点击,从而形成 CSRF 攻击。行为 :会盗取用户身份发送恶意请求,更改数据库。防御CSRF 攻击主要有三种策略:验证 HTTP Referer 字段;在请求地址中添加 token 并验证;在 HTTP 头中自定义属性并验证。XSS攻击:(跨站脚本攻击)嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作原创 2021-10-18 16:28:11 · 179 阅读 · 0 评论 -
端口被占用
netstat -ano|findstr 9000taskkill -pid 1680 -f原创 2021-10-11 10:40:30 · 71 阅读 · 0 评论 -
配置eslint
一、配置eslinthttps://www.cnblogs.com/jackson-yqj/p/10273331.html1、安装配置文件中依赖包:cnpm install eslint babel-eslint eslint-plugin-html eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-node -D2、.eslintrc.js文件module.exports = {原创 2021-10-11 10:35:35 · 873 阅读 · 0 评论 -
VsCode 自动生成文件头部注释和函数注释
1,安装插件KoroFileHeader2,配置头部注释和函数注释在vscode左下角点击设置按钮,选择“设置”,然后输入“fileheader”"fileheader.customMade": { //此为头部注释 "Description": "", "Version": "1.0", "Autor": "Pandora", "Date": "Do not edit" }, "fileheader.cursorM原创 2021-10-11 10:35:03 · 328 阅读 · 0 评论 -
前端之路必读的几本书
《代码整洁之道》《代码整洁之道:程序员的职业素养》《重构 改善既有代码的设计》《设计模式:可复用面向对象软件的基础》《软技能 代码之外的生存指南》《JavaScript权威指南》《你不知道的JavaScript》《JavaScript DOM 编程艺术》《JavaScript 高级程序设计》《Vue.js权威指南》《编程之美》《React全栈:Redux+Flux+webpack+Babel整合开发》《大话数据结构》《图解HTTP》《算法图解》...原创 2021-09-18 14:19:49 · 278 阅读 · 0 评论 -
关于新手指导IntroJS,vue项目(vue3)和react项目(ant-design)的引用
安装插件npm i introJs 一、vue3项目中引用intro作新手引导src/utils/util.js文件import introJs from 'intro.js'/** * @name: 新手指导 * @param {String} pathname 当前页面的path * @param {Array} stepsArr 步骤内容(包括element、intro) * @return {*} */export function guide (pathname, ste原创 2021-08-24 09:45:25 · 1293 阅读 · 0 评论 -
ofd文件的查看、打印、下载、上传
ofd文件的下载、打印、查看、及批量打印原创 2021-02-26 14:03:39 · 6309 阅读 · 3 评论 -
05——Vue+Webpack打造todo应用(webpack区分打包类库代码及hash优化)
改变entryvendor 单独打包hash和chunkhash区别在plugins再新建一个webpack.optimize.CommonsChunkPlugin({name: ‘vendor’})原创 2020-10-30 17:13:27 · 229 阅读 · 0 评论 -
04——Vue+Webpack打造todo应用(webpack配置优化)
一、css分离单独打包由于css文件会被打包成js文件,所以要安npm i extract-text-webpack-plugin插件这个插件能帮助我们把非js文件打包成静态资源文件然后在webpack.config.js里面引入const ExtractPlugin = require('extract-text-webpack-plugin')extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;use: 指原创 2020-10-30 17:11:41 · 220 阅读 · 0 评论 -
03——Vue+Webpack打造todo应用(配置vue的jsx & postcss)
下面开始正式写页面啦npm i postcss-loader autoprefixer babel-loader babel-corenpm i babel-preset-env babel-plugin-transform-vue-jsx新建两个配置文件 .babelrc和postcss.config.js.babelrc{ "presets": [ "env" ], "plugins": [ "transform-vue-jsx" ]}postcs.原创 2020-10-12 10:21:01 · 196 阅读 · 0 评论 -
02——Vue+Webpack打造todo应用(项目工程配置webpack.config.js)
新建src/app.vue<template> <div id="test">{{ text }}</div></template><script>export default { dada() { return { text: "hello pandora!", }; },};</script><style>#test { color: blueviolet;原创 2020-10-11 17:23:54 · 316 阅读 · 0 评论 -
01——Vue+Webpack打造todo应用
慕课网学习链接:http://www.imooc.com/learn/935可以学到什么?如何搭建一个vue的前端工程通过webpack我们搭建了一个完善的vue的workflowjsx的开发模式webpack打包优化(减少http请求,压缩资源文件,使用长缓存减小流量)API定制nodejs层npm init初始化项目,生成package.json,//安装相关依赖npm i webpack vue vue-loader会出现npm WARN vue-loader@15.9.3原创 2020-10-11 09:02:53 · 330 阅读 · 1 评论 -
02-vue深精透(vue+vuex+router+ssr)
配置webpack.config.base.js文件和webpack.config.client.js文件原创 2020-10-10 15:57:08 · 244 阅读 · 0 评论 -
01-vue深精透(vue+vuex+router+ssr)
缺点:无法进行SEO,白屏时间较长掌握服务端渲染(可减少白屏时间)1、Vue+Webpack工程流搭建2、Vue+Vuex+Vue-Router项目架构3、Vue服务器渲染深度集成ES6语法基础nodejs了解webpack项目介绍:项目功能:登录注册todo事项的增删改查在线数据库webpack4升级:重新安装依赖包webpack4,webpack-cli,html-webpack-pugin需要注意有版本变化,配置变化,插件变化。webpack4升级指北-慕课手记...原创 2020-10-10 14:08:08 · 132 阅读 · 0 评论 -
Element UI + Vue做表格的增删改查,还有上传下载文件,解析Excel批量导入数据
关爱系统——Element UI + Vue做表格的增删改查,还有上传下载文件,解析Excel批量导入数据原创 2020-09-12 12:00:24 · 425 阅读 · 0 评论 -
element UI的表单验证
el-form里添加:rules="rules" data() { var checkTaboo = (rule,value,callback) => { if(this.hea_form.medical_result == 3){ if(!value){ callback(new Error('请选择禁忌文件')) }else{ callback();原创 2020-09-12 12:00:01 · 264 阅读 · 0 评论 -
解析excel文件,批量导入数据
参考博客:Vue项目中导入excel文件读取成js数组 <el-form-item> <input type="file" @change="importfxx(this)" class="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>原创 2020-09-12 11:54:36 · 318 阅读 · 0 评论 -
elemen Ui +vue 上传 & 下载文件
上传文件参考官网Upload上传:https://element.eleme.cn/#/zh-CN/component/upload在这里本来是有个input框来放文件路径的,但是upload也会自动生成一个,于是我就在点击带slot=“trigger的i标签的同时设置input框不显示,并用upload自带的input覆盖掉1、action的属性值是文件上传的地址this.fileUrl=this.$path+"event/upload_attach/",写在created()里面;2、li原创 2020-09-12 11:34:21 · 372 阅读 · 0 评论 -
多选查询
也可以实现模糊查询,不过几乎都是后端实现的,前端只是调用接口//多选查询 mulSelect(){ console.log(this.search) this.$fetch(this.$path + "archive/HealthView/"+ "?" + "staff_number" + "=" + this.search.staff_number + "&" + "staf原创 2020-09-12 11:15:14 · 417 阅读 · 0 评论 -
修改表格数据
为了减少代码量与提高可读性,修改表单可与新增表单合为一体。可给表单添加属性dialogType,赋值为1or2,作为根据判断其他的也没什么好写的,贴一下这个代码吧,判断所勾选的个数,个数为1时,才能继续操作,不然就返回。if(this.selectedRowNum!=1){ this.addVisible=false; this.$message({type: "info", message: this.$t('staffHealth.choice_o.原创 2020-09-12 11:13:07 · 156 阅读 · 0 评论 -
勾选之后,删除对应的数据(可多选删除)
注释的部分是原始删除,通过delete接口删除。后来改需求为改状态为删除的状态,使该状态不显示即可。即为put接口改数据了。方法逻辑:先判断所勾选数据是否为空获取所勾选数据的id数据弹出确认删除的弹框遍历循环删除几条数据已被删除加个setTimeout定时器来刷新页面window.location.reload() //删除按钮 删除数据 deleteData(){ if(this.selectedRowNum==0){ .原创 2020-09-12 11:00:50 · 415 阅读 · 0 评论 -
关爱系统H5中学到的知识点
uniapp h5页面获取 url浏览器传参使用window.location.href 来获取完整的url,而使用search的时候,一直打印不出来,颇为奇怪uniapp常用提示框uni.showToast(OBJECT)官方参考文档:https://uniapp.dcloud.io/api/ui/prompt?id=showtoastaxios POST提交数据的三种请求方式写法注意postman里面传输的数据,是数据还是文件流前方高能!!!获取勾选框的实时数据 &l原创 2020-09-11 17:44:29 · 84 阅读 · 0 评论 -
Vue+Django项目实战——学习目录
项目来自慕课网-前端vue结合后端DjangoFramework的在线生鲜超市项目介绍1.1.掌握的技术Vue + Django Rest Framework 前后端分离技术彻底玩转restful api 开发流程 Django RestFramework 的功能实现和核心源码分析Sentry 完成线上系统的错误日志的监控和告警第三方登录和支付宝支付的集成本地调试远程服务器代码的技巧1.2.系统构成vue前端项目django rest framework 系统实现前台功能xad原创 2020-08-17 08:38:08 · 1970 阅读 · 0 评论 -
vuejs几种不同组件(页面)间传值的方式
需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题。这样使用起来很方便,但url会变得很长,而且如果不是使用路由跳转的界面无法使用。取值方式分别为:this.$route.params.routeParams和this.$route.query.routeParamsthis.$router.push({ name: 'login',...原创 2020-04-21 17:53:39 · 702 阅读 · 0 评论 -
10-小米商城
2020年4月24日,终于完工了。。。还差数据: red 红米 menu处数据 数据判断(新增地址处) 改$cloor,font 去掉console原创 2020-04-27 17:55:03 · 666 阅读 · 0 评论 -
09——vue企业级电商系统(babel)
Babel 是一个 JavaScript 编译器由于.babelrc文件与babel.config.js不能共存,所以需要合并。(接着elementUI来写的)babel.config.js合并前:module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ]}presets要加双引号,[]后要加逗号b...原创 2020-04-22 11:07:19 · 143 阅读 · 0 评论 -
08——vue企业级电商系统(ElementUI)
ElementUI原创 2020-04-22 10:47:27 · 250 阅读 · 0 评论 -
07——vue企业级电商系统(购物车页面)
这篇博客主要及一些知识点!1、vue query传参刷新后数据变成"[Object Object]" 怎么办?使用JSON转换就好了传参:this.$router.push({ name:'cart', query:{ routeParams:JSON.stringify(this.detailCart) } ...原创 2020-04-21 17:59:05 · 284 阅读 · 0 评论 -
06——vue企业级电商系统(产品站页面)
组件吸顶实现视频模块实现Slide动画实现产品站交互实现组件吸顶class与style样式结合<div class="nav-bar" :class="{'is_fixed':isFixed}"></div>默认为false,故而一开始没有is_fixed这个类 data(){ return { isFixed:false...原创 2020-04-17 18:03:24 · 233 阅读 · 0 评论 -
05——vue企业级电商系统(vuex)
https://vuex.vuejs.org/zh/import {mapState} from 'vuex' computed:{ //可解决变量延迟问题 /**username(){ return this.$store.state.username; }, cartCount(){ return this.$store.stat...原创 2020-04-16 17:26:51 · 237 阅读 · 0 评论 -
04——vue企业级电商系统(登录、注册页面)
关于vue-cookie:https://www.npmjs.com/package/vue-cookiemain.jsimport VueCookie from 'vue-cookie'Vue.use(VueCookie);// From some method in one of your Vue componentsthis.$cookie.set('test', 'Hello...原创 2020-04-16 13:52:46 · 392 阅读 · 0 评论 -
03——vue企业级电商系统(商城首页)
商城首页原创 2020-04-12 18:39:18 · 673 阅读 · 0 评论 -
02——vue企业级电商系统
架构如何搭建:第四章包括:1、跨域2、目录结构3、路由4、Storage封装接5、口错误拦截pc页面包括:首页首页-顶部导航展开首页-左侧菜单展开商品大图介绍产品详情订单列表订单列表-无数据我的购物车确认订单收货地址登录订单结算订单结算-展开详情支付宝支付微信支付数据接口大图片通常放在public里,assets一般存放静态资源图片或css文件...原创 2020-04-07 17:58:20 · 240 阅读 · 0 评论 -
01——vue企业级电商系统(如何在vscode中提交代码到github上)
npm i -g nwindows系统不支持n模块来升降级,直接卸载再安装就好了如何在vscode中提交代码到github上git initgit clone 代码地址(ssh的)再用vs打开该文件夹添写代码Ctrl+Shift+G 或点击右侧第三个(源代码管理)点击更改 下的 + (加号)消息框对应commit提交的内容再点击上面的对勾会弹出一个框框,输入github的...原创 2020-04-02 14:52:07 · 202 阅读 · 0 评论 -
00——vue企业级电商系统(小米商城)
Vue全家桶实战 从零独立开发企业级电商系统环境参数Node v12.13.0Npm v6.12.0Vue 2.6Vue-Cli 4.0共15章(大概学习10~12天,4.2号-4.12号)1~3章(3+5+3)第4章(12节)第5章(18节)6~7章(2+3节)8~9章10~11章12章13章14章15~16章...原创 2020-04-02 09:28:42 · 470 阅读 · 1 评论