Tag Archives: front end

[Solved] Cannot read properties of undefined (reading ‘propsData‘)“

When using Vue, I always reported errors when introducing components related to menus in antd, and other components unrelated to menus can be displayed normally. This bug bothered me for a long time, and finally found a solution to the problem on GitHub.

The error information is as follows:

Problem Description:

I first introduced it this way:

import Vue from 'vue'
import { Menu, Layout, Icon, Breadcrumb } from 'ant-design-vue'
Vue.use(Layout)
export default {

  components: {
    'a-menu': Menu,
    'a-icon': Icon,
    'a-breadcrumb': Breadcrumb,
    'a-breadcrumb-item': Breadcrumb.Item
  },

Then the browser kept reporting errors. By checking the error information on the browser console, I probably knew that it was due to the lack of asubmenu and amenuitem. Therefore, I introduced it, but I didn’t respond, so I thought it wasn’t this problem. After asking Du Niang, I couldn’t find a solution. Finally, I found that the way I introduced it was wrong on GitHub.

The correct approach should be to introduce the following in the component:

     components: {
    'a-menu': Menu,
    'a-icon': Icon,
    'a-breadcrumb': Breadcrumb,
    'a-breadcrumb-item': Breadcrumb.Item,
    ASubMenu: Menu.SubMenu,
    AMenuItem: Menu.Item
  },

Finally, the source code of the page is attached for reference:

<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">
          nav 1
        </a-menu-item>
        <a-menu-item key="2">
          nav 2
        </a-menu-item>
        <a-menu-item key="3">
          nav 3
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="user" />subnav 1</span>
            <a-menu-item key="1">
              option1
            </a-menu-item>
            <a-menu-item key="2">
              option2
            </a-menu-item>
            <a-menu-item key="3">
              option3
            </a-menu-item>
            <a-menu-item key="4">
              option4
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="laptop" />subnav 2</span>
            <a-menu-item key="5">
              option5
            </a-menu-item>
            <a-menu-item key="6">
              option6
            </a-menu-item>
            <a-menu-item key="7">
              option7
            </a-menu-item>
            <a-menu-item key="8">
              option8
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="notification" />subnav 3</span>
            <a-menu-item key="9">
              option9
            </a-menu-item>
            <a-menu-item key="10">
              option10
            </a-menu-item>
            <a-menu-item key="11">
              option11
            </a-menu-item>
            <a-menu-item key="12">
              option12
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
        >
          Content
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import Vue from 'vue'
import { Menu, Layout, Icon, Breadcrumb } from 'ant-design-vue'
Vue.use(Layout)
export default {

  components: {
    'a-menu': Menu,
    'a-icon': Icon,
    'a-breadcrumb': Breadcrumb,
    'a-breadcrumb-item': Breadcrumb.Item,
    ASubMenu: Menu.SubMenu,
    AMenuItem: Menu.Item

  },
  data () {
    return {
      collapsed: false
    }
  },
  methods: {
  }
}
</script>
<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>

An error is reported when passing data pages using Ajax: Vue is not defined

1、 Resolution:

Literal meaning: Vue is not defined, that is, the introduction of Vue source code;

2、 Try to resolve:

1: Try 1: check whether the Vue source code import (path and script tag) is wrong
2: try 2: there is no problem with the import syntax, that is, check whether there is a Vue source code file in the target folder, and find no (reason: I added the Vue source code file manually later, but it was not generated in time in the target)

3、 Solution steps:

Click clean to clean and regenerate the target file. The Vue source code is successfully introduced and the error is resolved;

Screenshot:

[Solved] Cnpm installation -g@ view/cli Error: error: eperm: operation not allowed…

After installing node in Windows 10, node – V, NPM – V and cnpm – V are tested to be normal. Cnpm install – G @Vue/cli reports an error
error: eperm: operation not allowed, MKDIR'd:\nodejs\node_global\node_Modules\@Vue'

I found a lot of methods, but I found that the permission was insufficient, so I had a solution
click the attribute in the directory where node is installed to find the security

it’s ok to allow the setting completely

#An error is reported by the chart map component of renfast framework

#An error is reported by the chart map component of renfast framework

##Bug:
you can’t install your own version of ecarts all the time. The console always comes out with 3.84 (actually 4.9.0 is installed)
and the following error will be reported if you reference the map component

##Reason:
in the renfast framework, the plugins preset the ecarts plug-in (3.8.5), and set// to import an external library, without the need for webpack packaging

##Handling method:
if you reference your own installed ecarts, you need to comment out the ecarts of external in build \ webpack.base.conf.js

Springcloud Project Error: web.client.HttpServerErrorException$InternalServerError: 500 Internal Server Error

Question

In the springcloud project, the consumer module uses resttemplate to call the provider module. When accessing a method in the consumer module, the following error occurs:

org.springframework.web.client.HttpServerErrorException$InternalServerError: 500 Internal Server Error
	at org.springframework.web.client.HttpServerErrorException.create(HttpServerErrorException.java:79) ~[spring-web-5.2.1.RELEASE.jar:5.2.1.RELEASE]
	at org.springframework.web.client.DefaultResponseErrorHandler.handleError(DefaultResponseErrorHandler.java:125) ~[spring-web-5.2.1.RELEASE.jar:5.2.1.RELEASE]
	at org.springframework.web.client.DefaultResponseErrorHandler.handleError(DefaultResponseErrorHandler.java:102) ~[spring-web-5.2.1.RELEASE.jar:5.2.1.RELEASE]
	at org.springframework.web.client.ResponseErrorHandler.handleError(ResponseErrorHandler.java:63) ~[spring-web-5.2.1.RELEASE.jar:5.2.1.RELEASE]
	at org.springframework.web.client.RestTemplate.handleResponse(RestTemplate.java:785) ~[spring-web-5.2.1.RELEASE.jar:5.2.1.RELEASE]
	at org.springframework.web.client.RestTemplate.doExecute(RestTemplate.java:743) ~[spring-web-5.2.1.RELEASE.jar:5.2.1.RELEASE]

Solution:

When I first saw the error of 500, I naturally thought it was the problem of background service. However, the log information in the consumer module was relatively general, so it was difficult to locate the problem. After checking, it was found that an error occurred when the consumer used resttemplate to call the provider service , so check the log of the provider module, and sure enough, more detailed error information was found:

java.lang.IllegalArgumentException: Parameter value [2021-10-25] did not match expected type [java.util.Date (n/a)]

Then the problem will be solved

There was an unexpected error (type=Method Not Allowed, status=405). Request

When using Ajax to submit a page, the above exception is thrown, and the final result is found

<form id="newsForm" method="post" enctype="multipart/form-data">
        News title:<input name="ntittle"><br>
        News summary:<input name="nsummary"><br>
        News content:<input name="ncontent"><br>
        News by:<input name="nauthor"><br>
        Post Time:<input name="ndate" ><br>
        Image:<input type="file" name="newpic"><br>
        News topics:<select name="newsType.ntypeId">
            <option value="-1">Please select news topic</option>
        </select><br>
       <input type="hidden" name="nid"><br>
        <input type="hidden" name="npic"><br>
        <input type="submit" value="ADD">
    </form>

AJAX is used, so the submission is not a direct submission, so you should use button and serialize the form.

<input type="button" value="ADD">

Running the test front-end project, Google browser accesses localhost with err_SSL_PROTOCOL_ERROR

Err appears in Google browser_SSL_PROTOCOL_ERROR

under test http://localhost:8080/ The following error occurred during

This web site cannot provide a secure connection. Localhost sent an invalid response err_SSL_PROTOCOL_ERROR

At this time, you need to open a blank page for input chrome://net-internals/#hsts
Find the delete domain policy
at the bottom of the left navigation bar. It has a delete domain security policies
example picture

then enter localhost in the domain input box and press Delete
and you’re done!

PS: this method is only for learning and use, and the user shall bear any legal disputes and consequences

Vue project startup error: cannot find module XXX

Cause: a module that the project depends on cannot be found

Solution:
1. delete the folder where modules are stored node_ module；

2. Execute the clear cache command NPM cache clean
If an error is reported, use to force to clear NPM cache clean -- force
If an error is reported, delete the package-lock.json file;

3. Reinstall the module, NPM install ; (the package-lock.json file will be automatically regenerated)

Then restart NPM run dev.

Front end project runtime prompts syntax error: typeerror: token.type.endswith is not a function solution

Reference documents:

https://www.baidu.com/link?url=rxkuHBNVNB0i7GCoDEfgkwDr3AllV9XWRLWwkFQl7p1PjamwyIPupL93spZDTywmxMetZ7yHNtqtgJRPGR0POa&amp ; wd=& eqid=d1c30348003392a90000000461721b6e

Problem background:

After pulling a branch for the project code, execute NPM install to download the dependent package, and then execute NPM run serve to find that the project fails to run. The prompt message is syntax error: typeerror: token.type.endswith is not a function.

Solution:

The author’s version of Babel eslint is 10.1.0, and the version is reduced to 8.2.2. The project is run again and runs successfully.

remarks:

The reason for the error seen on GitHub is that the version of Babel eslint is wrong, and the version reduction can indeed solve this problem. However, it is strange that the Babel eslint version of the author’s trunk is the same as that of the branch, both of which are 10.1.0, while the trunk project can run successfully, but the branch project can’t.