- 博客(41)
- 收藏
- 关注
原创 vue-cli webpack项目使用axios
一:安装axios依赖cnpm install axios --save二:创建axios实例创建api接口请求文件,方便管理接口新建文件:src/api/index.js三:文件内容,在文件中设置了一个获取天气预报的接口进行测试import axios from 'axios'// 创建axios实例const instance = axios.create({...
2019-07-24 17:03:54
406
原创 vue 项目使用babel-polyfile编译es6语法
一:安装babel-polyfile依赖cnpm installbabel-polyfill --save二:在webpack打包时设置编译es6修改文件build/webpack.base.conf.jsentry: { app: './src/main.js' },修改为:entry: { app: ['babel-polyfill', './...
2019-07-24 14:57:59
1310
原创 vue webpack 项目使用elementUI框架
一:生产环境安装elementUI依赖cnpm install element-ui --save二:在main.js入口文件中引入并使用引入:import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import 'element-ui/lib/theme-chalk/disp...
2019-07-24 14:45:56
487
原创 electron打包vue-cli项目为桌面程序(五):使用electron和electron-builder打包vue-cli webpack项目为桌面安装程序
等待补充内容
2019-07-12 17:59:06
618
1
原创 electron打包vue-cli项目为桌面程序(四):使用electron打包vue项目
上一章讲了使用electron进行开发桌面应用,本章主要讲将开发的应用使用electron-packager插件打包一:安装electron-packager,开发环境使用cnpm installelectron-packager --save-dev二:在build文件夹下新建package.json文件,用于启动打包后的应用程序内容为:{ "name": "stud...
2019-07-08 16:15:31
3545
1
原创 electron打包vue-cli项目为桌面程序(三):开发环境使用electron开发桌面应用
一:引入electroncnpm install electron --save-dev 在开发环境使用electron二:build文件夹下增加electron-preload.js文件,内容可以为空。主要用来在创建桌面窗口前定义一些window全局变量。可根据项目自行定义。如:window.isElectron = true 在项目中进行判断是否为桌面程序打开,可以调用electr...
2019-07-08 15:20:53
1545
3
原创 electron打包vue-cli项目为桌面程序(二):vue-cli创建webpack项目的目录详解
1:使用vue-cli脚手架创建webpack项目成功后,需要了解项目目录结构和文件功能2:文件夹介绍build文件夹:webpack打包相关配置的文件夹------build.js文件:webpack打包配置文件'use strict' // 本文件js使用严格模式require('./check-versions')() // 检查npm和nodejs版本proce...
2019-07-05 17:46:06
892
原创 electron打包vue-cli项目为桌面程序(一):vue-cli创建webpack项目
一:安装node环境1:Node.js 官方网站下载:https://nodejs.org/en/选择相应的安装包下载并安装。安装成功后查看版本号。2:安装vue脚手架vue-clinpm install vue-cli -g3:使用vue-cli初始化一个webpack项目vue init webpack studyelectron(自定义的项目名称)创建项目...
2019-07-05 16:17:50
712
转载 JS弹出新窗口被拦截的解决方法
在Web编程中,使用JS在新窗口打开页面的时候,会遇到被浏览器拦截的情况,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?一、问题一一般情况下,如果直接在js中调用window.open()函数去打开一个新窗口,浏览器会对弹出的窗口进行拦截,因为浏览器会把该窗口认为是弹出广告等用户不想得到的窗体1、解决方法把window.open()函数改为由用户主动点击时触发,在超链接里加入...
2019-01-15 13:53:53
3664
原创 vue开发后台管理系统_07_文件上传
1:后台人员搭建了minio服务器,用于将文件直接上传保存到亚马逊S3云存储2:前端开发人员需要在elementUI框架自带的upload的方法before-upload中向后台发送请求,获取到直接向亚马逊S3云存储的所有参数,然后再执行upload方法3:具体实现逻辑为: 用户点击上传按钮====》在before-upload方法中,向后台请求接口,获取直接上传到云存储的一系...
2018-11-22 17:34:19
1794
转载 Vue2.0用户权限控制解决方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。安装版本要求Vue 2.0x Vue-router 3.x获取项目主页://refined-x.com/Vue-Access-Control/git:git clone htt...
2018-11-07 10:08:52
344
原创 vue开发后台管理系统_06_详细用户权限控制
1:使用插件 Vue-Access-ControlVue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。安装:npm i vue-access-control详细文档参考:https://refined-x.com/2017/11/28/Vu...
2018-11-06 20:02:47
734
原创 vue开发后台管理系统_05_搭建测试服务器提供接口,配置vue前端项目跨域调取接口
1:搭建测试服务器,只要能够提供api接口,后台用什么语言来写不重要,可以用自己熟悉的语言搭一个测试服务器。2:在后台管理系统中调取登录接口,如果没有配置跨域处理,会报跨域的错误3:进行跨域设置,使得vue项目可以跨域访问接口proxyTable: {'/api': {target: 'http://xxxxxx.com', // 接口的域名// secure: false...
2018-11-06 14:27:25
522
原创 vue开发后台管理系统_04_控制用户访问权限
1:新建用户无权限提示组件,当用户无权限访问某页面组件或功能时,进行调取显示2:修改用户登录ui界面,当用户未登录时,跳转到登录界面3:创建js uiti.js文件,用作js方法库4:创建 api文件夹,创建api.js文件,统一管理接口的请求,并封装vue的axios方法,统一调用异步方法5:创建 zh-CN.js 文件,统一管理中文信息6:创建 CONST.js文件,统一管...
2018-11-05 15:37:14
801
原创 vue开发后台管理系统_03_设置路由进行不同的页面组件跳转
1:在src/components/下创建一个layout.vue文件,这个是后台管理系统的ui框架2:在src/components/下创建几个vue文件,需要分类管理时,可以创建文件夹,比如:home.vue 首页,login.vue 登录页面,user/uersList.vue 用户列表页面,user/roleList.vue 角色列表页面,user/permis...
2018-11-05 15:21:47
4837
原创 vue开发后台管理系统_02_引入elementUI框架
1:安装element-ui ,命令:cnpm install element-ui --save2:设置config文件,路径 build/webpack.base.conf.js,rules下增加规则:{test: /\\\\\\\\.css$/,loader: "style!css"},{test: /\\\\\\\\.(eot|woff|woff2|ttf)([...
2018-11-05 14:29:26
366
原创 vue开发后台管理系统_01_vue/webpack项目初始化
前提:1:nodejs已安装2:npm已安装3:vue_cli已安装4:webpack已安装具体安装,需要查资料vue项目初始化步骤:1:在需要建项目的文件夹下,打开命令窗口(shift+鼠标右键,然后点击打开命令窗口)2:执行命令: vue init webpack 项目名 ,会有一系列的确认,可以一直按enter键即可。如果网速正常,过几分钟vue项目就搭建好...
2018-11-05 10:02:34
240
原创 thymeleaf使用中的小知识点
1:多条件判断,可使用and或orth:if="${xx.xx} and ${yy}",并且,只有两个条件都成立时才为trueth:if="${xx.xx} or ${yy}",并且,有一个条件成立则为true 2:th:replace不能使用 th:with传参, th:include可以如:<div th:include="/common/module/dateSel...
2018-09-11 18:20:13
586
转载 thymeleaf学习使用
转载自http://www.ityouknow.com/ thymeleaf介绍简单说, Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带...
2018-09-11 16:53:11
229
转载 Cookie中的httponly的属性和作用
原文转载自:https://blog.csdn.net/qq_38553333/article/details/80055521 1.什么是HttpOnly?如果cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击,窃取cookie内容,这样就增加了cookie的安全性,即便是这样,也不要将重要信息存入cookie。XSS全...
2018-09-10 16:00:20
49807
2
原创 XSS攻击处理方法
一:因为项目使用了freemarker模板,需要全局转义freemarker输出 二:使用插件 xss.js,在使用html(),append()等地方,将具体的每个字段内容转义 filterXSS(字段内容),然后在使用的地方直接使用。也可以在append()等方法的地方使用,而不必用在具体的字段上,但有个缺点,需要自定义配置过滤项,否则片接的html代码片段如果带有样式和私有的属性...
2018-09-10 15:47:10
1918
转载 前端安全之XSS攻击
原文转载来自:http://www.cnblogs.com/lovesong/p/5199623.html XSS(cross-site scripting跨域脚本攻击)攻击是最常见的Web攻击,其重点是“跨域”和“客户端执行”。有人将XSS攻击分为三种,分别是:1. Reflected XSS(基于反射的XSS攻击)2. Stored XSS(基于存储的XSS攻击)3. DO...
2018-09-10 15:31:44
130
转载 GitLab使用教程
目录一、基本操作 11.登录:2.修改密码:二、项目管理1.新建项目2.编辑或删除项目三、用户管理(管理员使用,非管理员跳过此步骤)1.新建用户2.编辑和删除用户四、组管理(管理员使用,非管理员跳过此步骤)1.新建组2.编辑或删除组3.添加组成员4.修改成员的权限(owner用户操作)5.从组管理添加项目五、权限说明六、Gitla...
2018-09-05 09:39:54
10432
原创 express学习_6.express中间件
1.什么是中间件 中间件就是一个函数,位于客户端和路由之间,可以访问修改请求对象和响应对象,可以调取下一个中间件 express 就是一个由中间件组成的框架, 本质上路由也是中间件2.自定义中间件 app.use(function(req, res, next){ //执行程序,如: ....... //...
2018-08-29 14:50:05
110
原创 express学习_5.express请求对象
1:什么是请求对象 请求对象是指客户端向服务器端发送数据的对象,包含请求头和请求主题2:请求对象的方法 a: req.query方法 //接收get方法传的值 如:http://localhost:3000/member/detail.html?id=1000 var id = req.query.id; // =>...
2018-08-28 18:15:04
215
原创 express学习_4.express响应对象
1:什么是响应对象 响应对象是指服务端向客户端响应数据的对象,包含了所有要响应的数据。2:响应对象的方法 a: res.send(data)方法 //响应任意数据 注意: 如果响应一个数字,会被当成是状态吗,很容易出现错误,需要将数字加引号转为字符串发送。 send方法只能出现一次,不能重复,重复无效,而且报错。...
2018-08-28 16:42:58
717
原创 express学习_3.express路由
1.什么是路由 路由是接收用户请求、处理用户数据、返回结果给用户的一套程序。也可以理解为:动态网页的程序 后台路由的核心为:URL2.express路由 express对象自带有一个Router类,可以实例化出路由对象,该对象可以挂在很多个路由节点3:路由的写法 //挂在路由线路,请求地址以 ‘/’开头 router.请求方法('请求地址', fun...
2018-08-28 14:55:35
242
原创 express学习_2.express目录说明
1:目录 bin 可执行文件目录 //如文件www为项目启动执行文件 node_modules 依赖包目录 public 静态文件根目录 所有的静态文件都应当放在当前目录(静态html、js、css、图片、字体、视频多媒体等) routes 路由目录,动态文件的目录 请求发生时,先找静态文件,静态文件...
2018-08-28 11:45:32
519
原创 express学习_1.express概念和安装使用
1.什么是express express是一个基于nodejs的极简的、灵活的web开发框架,可以实现非常强大的web服务器功能。2.express的特点 a:可以设置中间件响应或过滤http请求 b:可以使用路由实现动态网页,相应不同的http请求 c:内置支持ejs模板(默认是jade模板),实现模板渲染生成html3.express-generator...
2018-08-28 10:37:27
260
原创 github使用
1:注册github账号2:下载安装git3:github上按照步骤新建git仓库4:本地电脑上新建文件夹,并指定为git仓库 a:新建文件夹——进入文件夹——当前文件夹打开git-bash(或者打开git-bash使用cd命令进入要指定为git仓库的文件夹) b:使用命令”git init“,将当前文件夹初始化为git仓库5:将仓库文件夹内的文件提交到暂存区 命令:git ad...
2018-07-13 15:14:15
146
原创 接口测试页面
1:在项目中新建html页面,将代码粘贴到html文档中页面全部代码如下:<html> <head> <meta charset="utf-8" /> <title>接口测试</title> <style> *{padding: 0;margi
2018-07-05 12:33:03
2552
原创 VS Code 自定义vue代码片段
1:按F1或ctrl+shift+p打开命令窗口2:输入snippet,选择 “首选项:打开用户代码段”3:输入vue,如果列表中存在Vue,可直接点击打开vue.json设置文件,如果列表中不存在Vue,按第4步做,如果Vue已存在,直接跳到第9步4:安装插件VueHelper5:安装插件vetur6:文件-首选项-用户设置,打开设置文件, 设置:"files.associations": { ...
2018-07-03 17:33:40
3524
原创 判断浏览器类型
判断浏览器类型/*判断浏览器类型*/ function getNavigatorType(){ var navigType = ''; //判断是否Opera浏览器 if (navigator.userAgent.indexOf('Opera') > -1) { navigType = 'Opera'; }; ...
2018-03-19 11:26:46
237
转载 常用正则表达式
常用正则表达式1.由数字、26个英文字母或者下划线组成的字符串: ^[0-9a-zA-Z_]{1,}$2.非负整数(正整数 + 0 ): ^/d+$3. 正整数: ^[0-9]*[1-9][0-9]*$4.非正整数(负整数 + 0): ^((-/d+)|(0+))$5. 负整数 : ^-[0-9]*[1-9][0-9]*$
2018-02-02 09:44:25
853
原创 chrome 新版chrome浏览器禁用和开启flash功能
url地址输入:chrome://settings/content/flash
2018-01-24 19:53:34
80690
1
原创 nodejs 图片验证码
一:仅支持随机数字图片验证码可设置图片背景颜色和数字颜色,图片为base64格式二:需要引入captchapng模块模块下载地址:https://github.com/GeorgeChan/captchapngvar captchapng = require('captchapng');三:实现nodejs:/* * 生成数字随机数图片验证码 * * @d
2018-01-16 13:14:54
2095
原创 jquery 输入框自动清除特殊字符
一:需要引入jquery二:输入框自动清除特殊字符在输入框输入特殊字符时,清除掉特殊字符。css:.test-input{ padding: 5px 10px; border-radius: 4px; border: 1px solid #999; }html:js:/* * 输入框自动清除特殊字符 * * */ (functi
2018-01-15 13:09:52
2396
原创 css 文字两端对齐
一:单行两端对齐二:多行两端对齐兼容:ie,chrome,firefoxcss:*{ padding: 0; margin: 0; } html{ background-color: #f8f8f8; } body{ width: 1000px; padding: 20px; margin: 100px aut
2018-01-15 12:59:42
312
原创 iframe内弹窗元素距离视窗顶部一定的距离
iframe内元素的fiexd属性失效,当iframe内有弹窗时,希望弹窗在当前视窗内出现,就需设置弹窗距离顶部的距离。该距离为父页面的滚动距离+弹窗距离视窗顶部的距离举例:$(function() { /* * 当页面处于iframe内时,页面滚动,iframe内fixed属性无效,所以要设置此高度 * 设置ifrma
2017-07-28 15:16:06
3877
原创 jquery 遮蔽元素和去除遮蔽
元素点击后或其他事件执行后,需要暂时处于无法点击的状态,此时可以对元素进行遮蔽,等之后想要重新可以触发事件,对元素去除遮蔽。遮蔽和去除遮蔽 /** * 屏蔽元素,行内元素 * @param dom:jquery dom,如:$('#abc'); * 适用于单个元素,属性为inline-block * * */ function maskAddIn
2017-06-27 18:19:19
421
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人