Category Archives: Javasript

[Solved] Hits[] of ElasticSearch SearchResponse is always one less record than totalHits

During elasticsearch query, it is found that hits []. Length is always 1 less than totalhits. Value
the code is as follows:

　　SearchRequest request = new SearchRequest("indexName");
　　SearchSourceBuilder builder = new SearchSourceBuilder();
　　BoolQueryBuilder boolQueryBuilder = new BoolQueryBuilder();
　　builder.query(QueryBuilder.matchPhraseQuery("fieldName","searchStr"));
　　builder.from(1);
　　builder.size(10);
　　request.source(builder);

　　SearchResponse response = restHighLevelClient.search(request,RequestOptions.DEFAULT);
　　// Get the total number of queries
　　System.out.println(response.getHits().getTotalHits().value);
　　// Get the number of query paging
　　System.out.println(response.getHits().getHits().length);

Output results:

The second line is always 1 less than the first line.

According to the idea of conventional paging, it should actually start from the first page and then keep up with the data of each page. Unexpectedly, from (1) directly skips the first data here.

Solution:
it’s OK to directly from (0).

[Solved] Vue : The file D:\Program Files\nodejs\node_global\vue.ps1 could not be loaded, because running scripts is disabled on this system.

When using PowerShell to create Vue project, the following error occurred, resulting in creation failure:

vue : The file D:\Program Files\nodejs\node_global\vue.ps1 could not be loaded, because running scripts is disabled on this system. For more information, see about_Execution_Policies in https:/go.microsoft.com/fwlink/?LinkID=135170

1. PowerShell’s execution policy prevented the operation.

use  Get-ExecutionPolicy  Check and find that the execution policy is restricted:

PS D:\workspace\test> Get-ExecutionPolicy
Restricted

At the same time, PowerShell gives us the method to solve the problem

2. At this time, enter the command set executionpolicy – scope currentuser as required, press enter, enter remotesigned in the black window to release the restricted status, press enter, execute the policy change, and select y

PS D:\workspace\test> Set-ExecutionPolicy -Scope CurrentUser

cmdlet Set-ExecutionPolicy in command pipeline location 1
Please provide values for the following parameters:
ExecutionPolicy: RemoteSigned

Execution Policy Changes
The execution policy helps you prevent the execution of untrusted scripts. Changing the execution policy may create a security risk, as shown in https:/go.microsoft.com/fwlink/?LinkID=135170
as described in the about_Execution_Policies help topic. Do you want to change the execution policy?
[Y] Yes(Y) [A] All Yes(A) [N] No(N) [L] All No(L) [S] Suspend(S) [?] Help (default value is "N"): y

3. Next, let’s check the restricted status, Enter get executionpolicy, and the result will be remotesigned, so that we can create it normally

PS D:\workspace\test> Get-ExecutionPolicy
RemoteSigned
PS D:\workspace\test>

Vue production webpack package PathError [Solved]

Vue version:   “^2.5.2”

Webpack version: ‘^ 3.6.0’

1. Page blank after first packaging   Modify config/index/build/assetspublicpath   Is ‘./’

 1   build: {
 3     index: path.resolve(__dirname, '../dist/index.html'),
 5     // Paths
 6     assetsRoot: path.resolve(__dirname, '../dist'),
 7     assetsSubDirectory: 'static',
 8     assetsPublicPath: './',
 9     .........
10   }

Reason: static is directly used as the direct path during packaging

2. An error is reported again. The page img file introduces an error, which is added under build/utils.JS/

1     if (options.extract) {
2       return ExtractTextPlugin.extract({
3         use: loaders,
4         fallback: 'vue-style-loader',
5         publicPath:"../../"  //  ADD
6       })
7     }

Reason: after packaging, our CSS will be extracted into a separate CSS file. At this time, the relative path relationship between CSS and images will change

[Solved] Vue3 wow.js Error: Cannot set property ‘getPropertyValue’ of undefined

The original wowjs can be used normally in vue2 project, but an error will be reported in vue3 project.

Error message:

Cannot set property 'getPropertyValue' of undefined

You need to use wow.js instead in the vue3 project

  1. Install wow.js (note that wow.js is not wowjs)
npm install wow.js --save
# or
yarn add wow.js
      2. install animate.css
npm install animate.css --save
# or
yarn add animate.css
  1. Configure animate.css in main.ts/main.js
import animated from "animate.css";

app.use(animated);

4. Use wow.js in components

import WOW from "wow.js";

mounted() {
    var wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
  },

5. Configure parameters on the HTML element to be animated. For more animation effects, please refer to animate.css

  <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
  <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

[Solved] Syntax Error: TypeError: Cannot read property ‘parseComponent’ of undefined

This error occurs when I upgrade Vue 2.6.10 to Vue 2.6.14,

Syntax Error: TypeError: Cannot read property ‘parseComponent’ of undefined

Attempted to remove node_Module, package-lock.json is invalid

The original template package should be upgraded together with the template package, and then it’s OK

“vue-template-compiler”: “^2.6.14”

export ‘default’ (imported as ‘mod’) was not found in ‘-!../../../../node_module .vue?vue&type=script&lang=ts&’ (possible exports: __esModule)

Error Messages:

export 'default' (imported as 'mod') was not found in '-!../../../../node_module
s/cache-loader/dist/cjs.js!../../../../node_modules/thread-loader/dist/cjs.js??c
lonedRuleSet-2[0].rules[0].use[1]!../../../../node_modules/babel-loader/lib/inde
x.js!../../../../node_modules/ts-loader/index.js??clonedRuleSet-2[0].rules[0].us
e[3]!../../../../node_modules/thread-loader/dist/cjs.js??ruleSet[0].rules[0].use
[1]!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index
.vue?vue&type=script&lang=ts&' (possible exports: __esModule)
”

The reason for the above error:
My source code is as follows:
index.vue

<template>
  <div class="hello-edsp-hello-module">
    <el-table :data="getList" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
interface List {
  date: string;
  name: string;
  address: string;
}

@Component
export default class TestModule extends Vue {
  getList:List[] = [{
    date: '1111',
    name: 'nnnnn',
    address: '地址'
  }];
  showHelloEditDialog: boolean = false;
}
</script>

The reason is that my default exported testmodule and other components have the same default exported names, so an error is reported. Modify the name and the system can run normally.

[Solved] el-table Error: TypeError: this.$el.querySelectorAll is not a function

This error occurs when using elemetui

After careful investigation, it is found that it is the El table component: there is a problem with the initialization of the data value

The: data value of the El table component must initialize the array

This error occurs if the object is initialized

Vue3 router view keep alive include does not work [How to Solve]

Vue3 router – view keep active:

 <router-view v-slot="{ Component, route }">
    <keep-alive :include="includeList">
      <component
          :is="Component"
          :key="route.name"
          v-if="includeList.includes(route.name)"
      />
    </keep-alive>
    <component
        :is="Component"
        :key="route.name"
        v-if="(!includeList.includes(route.name) && !route.meta.keepAlive)"
    />
</router-view>
  1. First of all, make sure that the includepassed value is the three forms in the official document: keep-alive
  2. Make sure that the <component>corresponding component is defined name( <script setup>syntactic sugar cannot be defined name, you need to change it to a non-syntactic sugar form, choose yourself)

[Solved] syntax error:type error this.getoptions is not a function

When compiling Vue, an error is reported. If you check the error, this is displayed. The reason: some dependent versions are too high. Reduce the dependency.

You need to lower the versions of less loader and less. You can enter the project directory or vscode terminal from the command line and enter the command