Java项目《谷粒商城》基础篇 个人错误总结

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语法检查严格，导致多次报错，例如方法名与括号之间没空格，使用分号等等

这里有两种解决方法

1. 把语法检查器给注释掉（推荐使用）

   在路径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
       // }
   })
   

2. 修改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 修改判断