When using jQuery, I found the following error:
Uncaught ReferenceError: $ is not defined (anonymous function)
The reason for this error:
1. The path of the jQuery library file is incorrect. Checking whether the file path is correct can usually solve the error.
2. If the path of the library file is correct, the order of loading the jQuery library file in the html may be wrong. If the jQuery library file is loaded in the first position, the error can be solved.
The problems encountered when using vuedraggable to drag components in vue3 are recorded as follows:
1. There is no problem using the drag and drop plug-in in the template according to the official website, as follows:
Item is a named slot
<draggable v-model="myArray" item-key="id">
<template #item="{element}">
<div> {{element.name}} </div>
</template>
</draggable>
2. When using drag plug-in in JSX, an error is reported: draggable element must have an item slot
Note that the item slot is written as follows:
const slots = {
item: ({element, index}) => {
return <div> {{element.name}} </div>
}
}
render(h) {
return <draggable v-model="myArray" item-key="id" v-slots={ slots }></draggable>
}
found 23 vulnerabilities (2 low, 16 moderate, 5 high)
run npm audit fix to fix them, or npm audit for details
D:\myproject\yiyan_webauto
$ npm audit fix
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.json
npm ERR! A complete log of this run can be found in:
npm ERR! D:\Program Files\nodejs\node_cache_logs\2022-03-01T04_21_12_141Z-debug.log
D:\myproject\yiyan_webauto
$ npm audit
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.json
npm ERR! A complete log of this run can be found in:
npm ERR! D:\Program Files\nodejs\node_cache_logs\2022-03-01T04_21_18_162Z-debug.log
The above error is because package.json is not found in the current directory, cd to the root directory of the front-end project and execute it
D:\myproject\yiyan_webauto\front (master -> origin) $ npm audit fix npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) up to date in 5.064s 82 packages are looking for funding run `npm fund` for details fixed 0 of 23 vulnerabilities in 1208 scanned packages 2 package updates for 23 vulnerabilities involved breaking changes (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
Here is a simple guide on how to create new project and module in NodeJS.
1. Create a new project
nest new project name
2. Create a service file (user has been used as an example)
Syntax: nest g [file type] [file name] [file directory (under src directory)] For example: nest g service user (create user folder under src) logical You can also write: nest g service user (also create a user under src) The user folder contains the user.service.ts file
3. Create a Controller (user has been used as an example)
nest g controller user logical (logical can not be written)
4. Create a Module (user has been used as an example)
nest g module user logical
Error description
I defined the seller data in the Vue component. The seller requests a JSON file through Axios. In the seller, there is a data support of array type, as follows:
//
{
"data":{
"supports": [
{
"type": 0,
"description": "Pay online with 28 or more for 5 off"
},
{
"type": 1,
"description": "20% off all VC Infinity Orange Juice"
},
{
"type": 2,
"description": "Single exciting package"
}
}
}
I want to get the data of “Pay online with 28 or more for 5 off” to render my elements. I use seller supports[0].description is as follows:
<template>
<div class="suppor">
<span>{{seller.supports[0].description}}</span>
</div>
</template>
<script>
export default {
name: 'Header',
data () {
return: {
seller： { }
}
}
}
</script>
According to the above method, although I rendered the element as scheduled, I reported the following errors and warnings on the browser console.
Solution:
Add a v-if directive to the element to be rendered to determine if there is content in this array, and the warning will be lifted, because the span I want to render is contained in the div, so I add a judgment directive to the div
<div v-if="seller.supports" class="suppor">
<span>{{seller.supports[0].description}}</span>
</div>
Principle Explanation.
After we define seller data in data() method, the initial data will be passed to the component first, before axios request to the data, the component will read the data in seller and render it, but at this time seller is an empty object, seller.supports is also undefined, so if I use [0], it will report a typeerror error, but after that, axios requests the data and the element is rendered further, but the console error warning is still there.
When I add a judgment, I prevent the behavior of taking a value with an index to a ubdefined value.
problem
Today, when I open my personal homepage http://cdfive.com to find that it is blank, I can display it after F5 refresh several times.
In chrome Ctrl+Shift+N open a new window to visit again, the page shows blank, after many times F5 refresh still blank.
F12 open the console, in Network, I see that the jquery.js that get the home page inside the error, status is FAILED, click FAILED to expand the error message as net::ERR_CONTENT_LENGTH_MISMATCH.
In the Console also see the error, jquery.js failed to get the home page js error.
net::ERR_CONTENT_LENGTH_MISMATCH 200
(index):13 Uncaught ReferenceError: $ is not defined
at (index):13
Analysis:
Check the Nginx log
cd /usr/local/nginx/
tail -fn 50 error.log
2022/01/15 16:01:29 [crit] 4775#0: *703880 writev() "/usr/local/nginx/proxy_temp/7/24/0000042247" failed (28: No space left on device) while reading upstream, client: x.x.x.x, server: xxx.com, request: "GET /.../jquery.1.10.2.js HTTP/1.1"
, upstream: ...
Through DF - H , it is found that the disk space is 100%
Solution:
Starting from the/root directory, use the command:
du -sh *
du -h --max-depth=1
Find directories that take up more space
It is found that there are too many sentinel log files in the /root/logs/CSP directory
cd /root/logs/csp
ll | wc -l
There are 5351 log files.
rm -rf *.2021*
ll | wc -l
Delete the log files in 2021, and 241 files remain, freeing up 15g of space
Then DF -H, 61% disk space
Visit the home page again, the page display is OK, and the nginx log is normal.
ERROR Error: Rule can only have one resource source (provided resource and test + include + exc
lude) in {
“type”: “javascript/auto”,
“include”: [
{}
],
“use”: []
}
If NPM I – D webpack is directly installed, the webpack@5 However, Vue cli depends on webpack@4, so it will report an error.
Solution:
NPM un – D webpack uninstall webpack
Or install the version directly in package JSON: “webpack”: “4.23.0”
vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
migration guide for end users:
for the scaffold generation project, configure the adaptive postcss pxtorem configuration and report an error
First of all, you are postcssrc. JS file normal configuration (detailed configuration)
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"last 10 versions",
],
grid: true,
},
"postcss-pxtorem": {
rootValue: 37.5, //The result is: design element size / 16, for example, element width 320px, the final page will be converted to 20rem
propList: ["*"], // is a list of properties that will be converted, here set to ['*'] all, suppose you need to set only the border, you can write ['*', '!border*']
unitPrecision: 5, //how many decimal places to keep rem
//selectorBlackList: ['.radius'], //then it is an array for filtering css selectors, for example you set it to ['fs'], that for example fs-xl class name, inside the style about px will not be converted, here also support regular writing.
replace: true, //I really don't know what this is for. If you know, let me know!
mediaQuery: false, //media query (@media screen or something like that) does not work
minPixelValue: 12, //px less than 12 will not be converted
},
},
};
You can also do this (a little simpler)
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
At this time, if the project is configured normally, there will be an error in running the project
It is said that your postcss can not identify the postcss-pxtorem , so the error is caused, this time you can not configure the postcssrc.js, only the comment configuration will work properly, this time you can package.json to look at your dependencies
At this time you will find that your postcss-pxtorem is 6.xxx version, because it is his version is too high, so the problem is caused
You just need to lower the version to 5.1.1 on OK
npm i [email protected]
Then you run it again to solve the problem
Vue reports error in render: “typeerror: cannot read property ‘length’ of undefined“
Reason: there is undefined in the (list) attribute of El table, and all columns can be judged by adding a V-IF
<el-table-column label="数据库" width="500px">
<template slot="header">
<el-button
@click="counterElection('主键', 'sqlOpt')"
size="small"
type="default"
>主键
</el-button>
<el-button
@click="counterElection('非空', 'sqlOpt')"
size="small"
type="default"
>非空
</el-button>
<el-button
@click="counterElection('唯一', 'sqlOpt')"
size="small"
type="default"
>唯一
</el-button>
<el-button
@click="counterElection('索引', 'sqlOpt')"
size="small"
type="default"
>索引
</el-button>
<el-button
@click="counterElection('忽略', 'sqlOpt')"
size="small"
type="default"
>忽略
</el-button>
<el-button
@click="counterElection('自增', 'sqlOpt')"
size="small"
type="default"
>自增
</el-button>
</template>
<template slot-scope="scope">
<el-checkbox-group
v-if="
scope.row !== undefined &&
scope.row.sqlOpt !== undefined
"
v-model="scope.row.sqlOpt"
>
<el-checkbox label="主键"></el-checkbox>
<el-checkbox label="非空"></el-checkbox>
<el-checkbox label="唯一"></el-checkbox>
<el-checkbox label="索引"></el-checkbox>
<el-checkbox label="忽略"></el-checkbox>
<el-checkbox label="自增"></el-checkbox>
</el-checkbox-group>
</template>
</el-table-column>