P16 npm install报错
P16的前端项目使用npm install报错的问题,首先确保安装了python3.0以上版本,并配置全局变量
其次大部分错误是报node-sass安装失败。
执行以下步骤可以完美解决
项目文件夹下打开cmd命令窗口(和Visual Studio Code的终端命令是一样的)
执行:
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
执行成功看看有没有报错,如果没报错执行下面命令
npm install ,
没报错就是安装成功,然后使用npm run dev 就ok了
注:这么做得原理就是先单独从淘宝镜像吧nod-sass下载下来,然后再进行编译,因为这句命令好像是不成功的,(npm config set registry http://registry.npm.taobao.org/),默认从github下载,导致报错的
如果之前安装失败的。先清理 缓存
清理缓存:npm rebuild node-sass
npm uninstall node-sass
eslint语法检查严格,导致多次报错,例如方法名与括号之间没空格,使用分号等等
这里有两种解决方法
-
把语法检查器给注释掉(推荐使用)
在路径renren-fast-vue\build\webpack.base.conf.js下
const createLintingRule = () => ({ // test: /\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'), resolve('test')], // options: { // formatter: require('eslint-friendly-formatter'), // emitWarning: !config.dev.showEslintErrorsInOverlay // } })
-
修改vue模板格式,这里附带vue创建模板以及常用http和get请求(到后面可能还是会遇到一些语法差异问题,所以两个都配置上的话最优)
{
"生成vue模板": {
"prefix": "vue",
"body": [
"<template>",
"<div></div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
"//例如:import 《组件名称》 from '《组件路径》';",
"",
"export default {",
" //import引入的组件需要注入到对象中才能使用",
"components: {},",
"props: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//计算属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成(可以访问当前this实例)",
"created() {",
"",
"},",
"//生命周期 - 挂载完成(可以访问DOM元素)",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
"}",
"</script>",
"<style scoped>",
"$4",
"</style>"
],
"description": "生成vue模板"
},
"http-get请求": {
"prefix": "httpget",
"body": [
"this.\\$http({",
"url: this.\\$http.adornUrl(''),",
"method: 'get',",
"params: this.\\$http.adornParams({})",
"}).then(({ data }) => {",
"})"
],
"description": "httpGET请求"
},
"http-post请求": {
"prefix": "httppost",
"body": [
"this.\\$http({",
"url: this.\\$http.adornUrl(''),",
"method: 'post',",
"data: this.\\$http.adornData(data, false)",
"}).then(({ data }) => { })"
],
"description": "httpPOST请求"
}
}
P63 OOS jar包导入问题
亲测可使用版本jar包,默认版本无法使用
<!--阿里云OSS对象存储-->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alicloud-oss</artifactId>
<version>2.1.1.RELEASE</version>
</dependency>
P66 Validation使用问题
@Valid无法使用
SpringBoot2.3.0之后就不在集成Validation组件了
需要手动导入Spring Boot Starter Validation
这里我用的是
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
<version>2.6.0</version>
</dependency>
使用后你会发现使用postman测试的话,没有任何提示信息
但是可以看出,检测已经生效了,这时我们可以去控制台看输出的信息
2021-11-28 15:08:55.771 WARN 21444 --- [io-10000-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.bind.MethodArgumentNotValidException: Validation failed for argument [0] in public com.cfk.common.utils.R com.cfk.shopmail.product.controller.BrandController.save(com.cfk.shopmail.product.entity.BrandEntity): [Field error in object 'brandEntity' on field 'name': rejected value []; codes [NotBlank.brandEntity.name,NotBlank.name,NotBlank.java.lang.String,NotBlank]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [brandEntity.name,name]; arguments []; default message [name]]; default message [品牌名必须提交]] ]
我们可以看到控制台已经输出了提示信息
P73 无法显示数据展开问题
数据一直无法在级联选择器显示出来
只看到控制台有一条报错
一直怀疑是这个问题,研究了很久发现并不是这个问题
原因是created方法写在methods里面的导致了无法调用列表展示方法…
粗心,这个问题在视频的后面提示先跳过
P78 数据库字段问题
pms_attr缺失value_type字段,并且在对应实体类也要加上此字段,否则表单无法保存
p84 关于pubsub、publish报错
npm install --save pubsub-js
在src下的main.js中引用:
import PubSub from ‘pubsub-js’
Vue.prototype.PubSub = PubSub
P85 基础属性以及销售属性界面无法显示问题
基础属性无法显示的原因是分类组没有绑定对应的属性
可以用postman测试对应返回的数据attrs有null就无法展示(前端设置问题)
也可以通过修改前端判断是否为空
销售属性界面如果查不出任何东西,首先先区测试接口看看接口有没有返回数据,我这里就是一直没有返回数据,但是再销售属性中又能查到
然后发现后台代码编写有一点的问题, 如下
P100 界面400问题
添加跳转
/src/router/index.js 在mainRoutes->children【】里面加上这个就不会404了:{ path: ‘/product-attrupdate’, component: _import(‘modules/product/attrupdate’), name: ‘attr-update’, meta: { title: ‘规格维护’, isTab: true } }
下面这个是点击维护后上面会有弹导航栏
【INSERT INTO sys_menu (menu_id, parent_id, name, url, perms, type, icon, order_num) VALUES (76, 37, ‘规格维护’, ‘product/attrupdate’, ‘’, 2, ‘log’, 0);】
多选如果无法显示可以尝试在 attrupdate.vue 修改判断