标签:web


ColaUI组件过滤设置


ColaUI配合后端BDF2框架共同实现组件级权限控制

在请求页面资源时通过js代码对页面进行权限过滤
<!--测试组件-->
<div id='test'></div>
(function() {
	cola(function(model) {
        var role_resource_data={
            url:'/html/test.html',
            ids:['test']
        };
    //其它代码
    App.resetComponentAuth(role_resource_data);
  });
}).call(this);
注意事项:
1.对应id组件上方如果不加注释,那么在进行角色组件资源设置时显示的是id;
  添加注释后则显示注释中的内容
2.url对应值为要控制的页面路径,从webapp下开始写
3.ids为要控制的页面中的id组件集合,不写入则组件控制无效
4.在其他代码部分不能出现return,例如return model.widgetConfig({...});
  否则代码不执行最后一行,无法进行组件过滤
5.最后一行代码进行了数据库访问,对组件权限信息进行获取,并刷新页面

Canvas实现圆圈移动


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="Justin">
  <meta name="Keywords" content="canvas">
  <meta name="Description" content="canvas study">
  <title>canvas_study</title>
 </head>
 <body>
 <div>
	<canvas id="test" width="600" height="600" 
          style="border:1px solid #000000;margin-left:300px"></canvas>
 </div>
 </body>
</html>
<script>
        //用于保存鼠标移动前的坐标
	var x=-100;
	var y=-100;
	//获取鼠标当前位置
	function mousePosition(ev){
	   if(ev.pageX || ev.pageY){
	     return {x:ev.pageX, y:ev.pageY};
	   }
	   return {
	     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
	     y:ev.clientY + document.body.scrollTop - document.body.clientTop
	   };
	}
	document.onmousemove = mouseMove;
	
	var c=document.getElementById("test");
		var ctx=c.getContext("2d");
		//线
		ctx.moveTo(0,0);
		ctx.lineTo(600,600);
		ctx.moveTo(0,600);
		ctx.lineTo(600,0);
		ctx.stroke();
        //鼠标移动时执行
	function mouseMove(ev){
		 ev = ev || window.event;
		 var mousePos = mousePosition(ev);
		//清除上一个圆
		clear();
		
		
		var c=document.getElementById("test");
		var ctx=c.getContext("2d");

		//线
		ctx.moveTo(0,0);
		ctx.lineTo(600,600);
		ctx.moveTo(0,600);
		ctx.lineTo(600,0);
		ctx.stroke();
                //圆
		ctx.beginPath();
		ctx.arc(mousePos.x-300,mousePos.y,40,0,2*Math.PI);
		ctx.stroke();
		x=mousePos.x;
		y=mousePos.y;
	}

	function clear(){
		var c=document.getElementById("test");
		var ctx=c.getContext("2d");
		ctx.clearRect(0,0,600,600);
	}
	
</script>


vue启动报错:Module build failed: Error: No parser and no file path given, couldn’t infer a parser.


报错信息:
Module build failed: Error: No parser and no file path given, couldn't infer a parser.

解决方案:
npm i prettier@~1.12.0

之后重新运行即可

Vue组件之间的引用


以下介绍的引用方式只是多个引用方式中的一种

A引用B
<!-- A -->
<template>
  <test></test>
</template>

<script>
  import test from './Eu'

  export default {
    name: 'index',
    components: {
      test
    }
  }
</script>

<!-- B -->
<template>
  <h2>
    引用内容
  </h2>
</template>
<script>
  export default ({
 //此处name是否设置作用不大
    name: 'eu'
  })
</script>


Vue项目中引入ElementUI


前提:
1.该项目为idea中vue项目
2.已安装node和npm

步骤:

1.打开idea的Terminal(cmd或其它也可以)

2.移动到vue项目下

3.执行:npm install element-ui -S
打印日志为:
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ element-ui@2.3.9
added 67 packages and updated 1 package in 28.606s

4.可以到项目下的node_modules查看是否有element-ui文件夹

5.在main.js中添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
6.在创建的组件中使用element-ui
<template>
  <div>
    <i class="el-icon-edit"></i>
  </div>
</template>

搭建idea下的vue工程


1.在本机安装nodejs和npm

2.打开idea新建module选择static web:demo

3.在demo下新建node_modules文件夹

4.右键文件夹选择Mark Directory as - Excluded

5.进入到我们的工作目录
cd ~/IdeaProjects/

6.使用脚手架安装项目
vue init webpack demo

提示目录已存在,是否继续:Y
Project name(工程名):回车
Project description(工程介绍):回车
Author:作者名
Vue build(是否安装编译器):回车
Install vue-router(是否安装Vue路由):回车
Use ESLint to lint your code(是否使用ESLint检查代码,我们使用idea即可):n
Set up unit tests(安装测试工具):n
Setup e2e tests with Nightwatch(也是测试相关):n
Should we run `npm install` for you after the project has been created? (recommended):
选择:No, I will handle that myself

7.进入项目目录
cd demo

8.初始化项目(注:如未装淘宝镜像,一下cnpm换为npm即可)
cnpm i

9.运行项目
cnpm run dev

10.浏览器打开:localhost:8080,即可看到vue项目
如8080端口被占用则会改用其它端口,注意查看日志
Ctrl+C退出运行

11.安装项目依赖,分别是scss支持,ajax工具,element ui,两个兼容包

cnpm i node-sass -D
cnpm i sass-loader -D

cnpm i axios -D

cnpm i element-ui -D

cnpm i babel-polyfill -D

cnpm i es6-promise -D

配置idea

1.File - Settings - Languages&Frameworks - JavaScript:
 修改JavaScript language version为ECMAScript 6,确认

2.File - Settings - Plugins:
  搜索vue,安装Vue.js
3.Run - Edit Configurations...:
点击加号,选择npm,Name为Dev,package.json选择你工程中的package.json,
Command为run,Scripts为dev,然后就可以直接在idea中运行了。
4.继续点击加号,选择npm,Name为Build,
package.json选择你工程中的package.json,Command为run,Scripts为build,
然后就可以直接在idea中打包了。
修改项目配置

修改/config/index.js文件,找到

port: 8080
修改为
port: 8070

productionSourceMap: true
修改为
productionSourceMap: false

修改/build/webpack.base.conf.js文件,找到

module.exports = {
  entry: {
    app: './src/main.js'
  },
修改为
module.exports = {
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },

最后在src/main.js中加入

import 'es6-promise/auto'
import promise from 'es6-promise'
import Api from './api/index.js'
import Utils from './utils/index.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.prototype.$utils = Utils;
Vue.prototype.$api = Api;
Vue.use(ElementUI);

这样,一个差不多完整的vue项目就ok啦,并且可以在idea中编辑和运行。

注:使用static里的文件尽量使用绝对路径,如/static/image/background.png
使用src里的文件则尽量使用相当路径。
我的vue结构项目:

src文件夹
├── App.vue                      // APP入口文件
├── api                          // 接口调用工具文件夹
│   └── index.js                 // 接口调用工具
├── components                   // 组件文件夹
├── frame                        // 子路由文件夹
├── main.js                      // 项目配置文件
├── page                         // 页面组件文件夹
├── router                       // 路由配置文件夹
│   └── index.js                 // 路由配置文件
├── style                        // scss 样式存放目录
│   ├── base                     // 基础样式存放目录
│   │   ├── _base.scss           // 基础样式文件
│   │   ├── _color.scss          // 项目颜色配置变量文件
│   │   ├── _mixin.scss          // scss 混入文件
│   │   └── _reset.scss          // 浏览器初始化文件
│   ├── scss                     // 页面样式文件夹
│   └── style.scss               // 主样式文件
└── utils                        // 常用工具文件夹
     └── index.js                // 常用工具文件

static文件夹
├── css                          // css文件夹
├── js                           // js文件夹
├── image                        // 图片文件夹
└── font                         // 字体文件夹

scss引入方法
<style lang="scss">
 @import "./style/style.scss";
</style>


修改CSS样式或JS之后F12发现资源没有改变


原因:浏览器已缓存过文件,之后浏览器只获取本地文件,不再远程下载

解决办法:
1.修改浏览器缓存设置
2.不知道怎么设置就手动清楚浏览器缓存
3.如清除浏览器缓存无效,则为引用添加版本号

例如:
<link rel="stylesheet" type="text/css" href="CSS/main.css?v2">

注意:
1.问号后可随意编写,但不要重复
2.使用Idea热部署更新会出现错误
4.执行Ctrl+F5重新从服务器端获取资源(作者认为是最简便的方式)