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.打开settings,搜索File Types

2.在Recognized File Types中选中HTML

3.Registered Patterns中添加“*.vue”

4.点击Apply,点击OK

idea下创建Python项目


1.安装Python到本机(打开cmd输入python检测是否安装正常)

2.安装idea的python插件(如手动下载插件请注意查看版本)

3.新建项目或module(此处以新建module为例)

4.选择python,点击下一步

5.填写项目名,finish

注:易出现问题的地方就是手动安装插件时版本不一致导致idea集成失败

搭建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>


Idea手动安装插件


1.访问:http://plugins.jetbrains.com

2.搜索要下载的插件名称

3.点击下载按钮
注意版本号,可在idea的glugins中搜索查看版本号

4.下载成功后解压

5.点击开始找到idea右键属性点击打开文件位置

6.切换到plugins下

7.将解压的文件夹粘贴进去

8.重启idea搜索插件查看是否添加成功!

Dorado中间件DataGrid控件添加计算列


Dorado说明:

Dorado是锐道公司开发的一个中间件
使前后端完美对接,大大提高了开发速度

与原生安卓的使用方式比较类似,都是通过拉控件设置属性进行页面开发
假设以下是需要展示的表格:
姓名  数学   语文

张三  98     97
李四  88     87
王五  89     90

例如你需要显示数据额成绩和语文成绩的平均分

1.双击DataGrid设置showFooter的值为true
2.双击姓名列,打开onRenderFooterCell
3.在该事件中写入:
  arg.dom.innerText="平均分"
设置之后姓名列对应的显示为“平均分”
4.分别设置需要计算的两列的summaryType的值为average
5.该字段还有一些其他值,例如sum等
  设置后可分别对这些列进行相应的计算
6.设置后的计算列位于DataGrid的最下方,一般位于屏幕最下方
  (第一次搞的时候以为设置错了,一直以为这一列会追加在显示数据的后面!)

7.结果样例:

姓名   数学   语文

张三   88     97
李四   88     97
王五   88     97


平均分 88     97

Oracle数据库Date格式化及Select时Case的使用


--Date格式化片段
to_char(create_date,'YYYYMMDD') as date

--格式化系统当前日期
select to_char(sysdate,'YYYYMMDD') from dual;

--Select时Case片段
select case 
when item_a like 'A%' and item_b = 'b' then 'one'
when item_a like 'A%' and item_b = 'B' then 'two'
else 'other' end as type
from table_name

自定义Java注解


注解的作用:

1.生成文档
这是最常见的,也是java 最早提供的注解。常用的有 @see @param @return 等

2.跟踪代码依赖性,实现替代配置文件功能
Spring中大量运用注解来简化配置文件

3.在编译时进行格式检查

如@override 放在方法前,如果你这个方法并不是覆盖了超类方法,则编译时就能检查出

实现一个简单的注解:

@Retention(RetentionPolicy.RUNTIME)
public @interface MyTarget {
}
上面是一个最简单的注解实现,没有定义任何的属性
需要注意的是@Retention(RetentionPolicy.RUNTIME)是定义注解所必须的。
 
@Retention是注解的注解,称为注解的元注解。
括号里有一个枚举类型的值,即为注解内部定义的值。打开Retention的实现:
@Documented
@Retention(RetentionPolicy.RUNTIME)
@Target(ElementType.ANNOTATION_TYPE)
public @interface Retention {
    RetentionPolicy value();
}
可以看到这里定义了一个变量value并且没有缺省值,所以不写这个value就会报错。 
继续打开RetentionPolicy:
public enum RetentionPolicy {
    SOURCE,
    CLASS,
    RUNTIME
}
可以发现这个枚举类定义了三个值,这三个值分别代表的是我们定义的MyTarget如何保持。

@Retention(RetentionPolicy.CLASS)
注解的信息被保留在class文件(字节码文件)中当程序编译时,但不会被虚拟机读取在运行的时候

@Retention(RetentionPolicy.SOURCE)
注解的信息会被编译器抛弃,不会留在class文件中,注解的信息只会留在源文件中

@Retention(RetentionPolicy.RUNTIME)
注解的信息被保留在class文件(字节码文件)中当程序编译时,会被虚拟机保留在运行时

还需要注意的是java的元注解一共有四个: 
@Document 
@Target 
@Retention 
@Inherited

各个的作用,读者自己查一下吧。

注解处理的一个基础:
 T getAnnotation(Class annotationClass): 
返回改程序元素上存在的、指定类型的注解,如果该类型注解不存在,则返回null。

Annotation[] getAnnotations():
返回该程序元素上存在的所有注解。

boolean is AnnotationPresent(Class annotationClass):
判断该程序元素上是否包含指定类型的注解,存在则返回true,否则返回false.

Annotation[] getDeclaredAnnotations():
返回直接存在于此元素上的所有注释。
与此接口中的其他方法不同,该方法将忽略继承的注释。
(如果没有注释直接存在于此元素上,则返回长度为零的一个数组。)
该方法的调用者可以随意修改返回的数组;这不会对其他调用者返回的数组产生任何影响。

实现为属性赋值的注解:
package com.justin.test.util;

import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;

@Retention(RetentionPolicy.RUNTIME)
public @interface CarNameTarget {
    String name() default "";
}
package com.justin.test.util;

import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;

@Retention(RetentionPolicy.RUNTIME)
public @interface CarSalerTarget {
    String salerName();

    int age() default 1;
}
package com.justin.test.entity;

import com.justin.test.util.CarNameTarget;
import com.justin.test.util.CarSalerTarget;

/**
 * 描述:
 * 汽车实体类
 *
 * @author 孫兵
 * @create 2018-05-15 10:16
 */
public class BnechCar {
    @CarNameTarget(name = "奔驰")
    private String name;

    @CarSalerTarget(salerName = "justin", age = 22)
    private String salerInfo;
}
package com.justin.test.util;

import java.lang.reflect.Field;

/**
 * 描述:
 * 汽车信息工具类
 *
 * @author 孫兵
 * @create 2018-05-15 10:19
 */
public class CarInfoUtil {

    public static void getFruitInfo(Class<?> clazz) {
        Field[] fields = clazz.getDeclaredFields();
        for (Field field : fields) {
            if (field.isAnnotationPresent(CarNameTarget.class)) {
                CarNameTarget carNameTarget = field.getAnnotation(CarNameTarget.class);
                String carColour = "汽车的中文名:" + carNameTarget.name();
                System.out.println(carColour);
            } else if (field.isAnnotationPresent(CarSalerTarget.class)) {
                CarSalerTarget carSalerTarget = field.getAnnotation(CarSalerTarget.class);
                String salerInfo = "销售员姓名:" + carSalerTarget.salerName() + ",年龄:" + carSalerTarget.age();
                System.out.println(salerInfo);
            }
        }
    }
}
/**
     * 自定义注解测试
     */
    private void targetTest() {
        CarInfoUtil.getFruitInfo(BnechCar.class);
    }

打印信息:

汽车的中文名:奔驰
销售员姓名:justin,年龄:22

修改CSS样式F12之后发现样式没有变化


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

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

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

注意:
1.问号后可随意编写,但不要重复
2.使用Idea热部署更新会出现错误