P16
本人方案2成功解决！
方案1
关于新谷粒P16的前端项目使用npm install报错的问题，首先确保安装了python3.0以上版本，并配置全局变量
其次大部分错误是报node-sass4.9.0安装失败。
执行以下步骤可以完美解决
首先把项目文件夹下的package.json里面的node-sass4.9.0改成4.9.2（不改可能也没关系，不过我改了，防止踩坑）
然后项目文件夹下打开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
方案2
安装 node.js
➜ ~ node -v
v12.18.2
https://nodejs.org/download/release/v12.18.2/
设置镜像仓库地址：
npm config set registry https://registry.npm.taobao.org
修改项目 package.json "node-sass": "^4.14.1", 【 node12对应的sass版本是4.14 】之前安装失败的，清理缓存（可直接删除 node_modules 目录）
npm rebuild node-sass
npm uninstall node-sass
先单独从淘宝镜像把 nod-sass 下载下来，然后再进行编译：
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
进入项目终端安装项目所有的依赖
npm install
npm run dev
P27
由于mybatis-plus和druid都依赖在common的pom中，而gateway网关服务引入了common依赖，启动会报错没有配置数据源，视频里面排除了mybatis-plus
<exclusion>
<artifactId>mybatis-plus-boot-starter</artifactId>
<groupId>com.baomidou</groupId>
</exclusion>
还要排除druid依赖
<exclusion>
<artifactId>druid-spring-boot-starter</artifactId>
<groupId>com.alibaba</groupId>
</exclusion>
P44
Vue生成模板：
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成（可以访问当前this实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（可以访问DOM元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
"}",
"</script>",
"<style scoped>",
"//@import url($3); 引入公共css类",
"$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请求"
}
}
P62
文件上传报错aliCloudEdasSdk，也就是上传文件到阿里云的OSS云存储的时候报错
由于跟着视频做，Github目前的SDK依赖和老师当时使用的SDK不是同一个jar包
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>aliyun-oss-spring-boot-starter</artifactId>
</dependency>
导入依赖不同，配置自然也不同，alibaba：
alibaba:
cloud:
access-key: ********************
secret-key: ********************
oss:
endpoint: ********************
需要手动换回
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alicloud-oss</artifactId>
</dependency>
配置也要更换，不再是alibaba，而是alicloud：
alicloud:
access-key: ********************
secret-key: ********************
oss:
endpoint: ********************
P65
品牌logo，说实话也不算是Bug吧，但是设置成老师那样的样式太丑了耶不喜欢
看看这图标被拉伸的也是够丑
爷的样式设置的是这样，将高度设置为auto
<img :src="scope.row.logo" style="width: 100px; height: auto" />
效果完美
image.png
看看效果，爷的妹子都能显示的很完美，beautiful！
P69
关于自定义校验注解返回JSON乱码问题
解决办法
File Encodings全部设置为UTF-8，勾选Transparent native-to-ascii conversion
用其它软件打开
关于使用@Slf4j注解报错:
You aren‘t using a compiler supported by lombok, so lombok will not work and has been disabled.
-Djps.track.ap.dependencies=false
Lombok尽量在1.18.14版本及以上版本
<!--Lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.14</version>
<scope>provided</scope>
</dependency>
前端brand-add-or-update.vue排序字段校验问题
原本代码
sort: [
{
validator: (rule, value, callback) => {
if (value == "") {
callback(new Error("排序字段必须填写"));
} else if (!Number.isInteger(value) || value<0) {
callback(new Error("排序必须是一个大于等于0的整数"));
} else {
callback();
}
},
trigger: "blur"
}
]
将value == ""改为value === ""
效果
P71
关于sys_menus.sql文件cv之后没有效果
P84
pubsub、publish报错，无法发送查询品牌信息的请求：
1、npm install --save pubsub-js
2、在src下的main.js中引用：
① import PubSub from pubsub-js
② Vue.prototype.PubSub = PubSub
P148
关于三级分类加载不出来的问题
注意检查你的自定义vo类Catelog2Vo的变量名
P212
关于倒计时Bug
num -------> num的自减应该放在else里面，不然下一次倒计时会从9秒开始。
var num = 10;
function timeoutChangeStyle(){
$("#sendCode").attr("class","disable")
if(num==0){
$("#sendCode").text("发送验证码");
num = 10;
$("#sendCode").attr("class","")
}else {
var str = num + "秒后再次发送";
$("#sendCode").text(str);
setTimeout("timeoutChangeStyle()",1000);
num--;
}
}
P221
谷粒商城第三方授权问题：
QQ和微博第三方授权如果等不及审核或者说老被审核失败，可以选择Gitee进行第三方授权服务，不需要审核，即创即用。
Gitee进入设置中，点击第三方应用即可创建应用：
点击创建应用
编辑信息：
设置应用首页地址和回调地址
至此，gitee上的第三方应用创建完毕。
在页面上使用连结到gitee的某个地址，在这个地址上需要填入上面生成的client—id，redirect—uri。
<a href="https://gitee.com/oauth/authorize?client_id=你的id&redirect_uri=http://localhost:8887/callback&response_type=code&state=1">登录</a>
点击登录会跳转至授权页面，如果授权成功跳转404说明链接地址正确，接下来需要 编写回调请求及其方法。
<!-- 用来处理网络请求的 -->
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>3.14.1</version>
</dependency>
<!-- 用来处理json的，应用授权的时候返回的token是以json的方式返回来-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.78</version>
</dependency>
使用okhttp发起post请求，码云服务器返回token，需要携带相关参数，我们直接封装成一个AccessTokenDTO对象，接下来我们还需要使用token获取用户相关信息，将用户也封装成一个GitUser对象。
AccessTokenDTO对象封装
package com.yf.community.dto;
import org.springframework.stereotype.Component;
@Component
public class AccessTokenDTO {
private String client_id;
private String client_secret;
private String code;
private String redirect_uri;
private String state;
public String getClient_id() {
return client_id;
}
public void setClient_id(String client_id) {
this.client_id = client_id;
}
public String getClient_secret() {
return client_secret;
}
public void setClient_secret(String client_secret) {
this.client_secret = client_secret;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getRedirect_uri() {
return redirect_uri;
}
public void setRedirect_uri(String redirect_uri) {
this.redirect_uri = redirect_uri;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
}
GiteeUser对象封装。
package com.yf.community.dto;
public class GiteeUser {
private String name;
private Long id;
private String bio;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getBio() {
return bio;
}
public void setBio(String bio) {
this.bio = bio;
}
}
请求码云服务器
package com.yf.community.provider;
import com.alibaba.fastjson.JSON;
import com.yf.community.dto.AccessTokenDTO;
import com.yf.community.dto.GiteeUser;
import okhttp3.*;
import org.springframework.stereotype.Component;
import java.io.IOException;
@Component
public class GitheeProvider {
//发起post请求获取token
public String getAccessToken(AccessTokenDTO accessTokenDTO){
MediaType mediaType= MediaType.get("application/json; charset=utf-8");
OkHttpClient client = new OkHttpClient();
RequestBody body = RequestBody.create(mediaType, JSON.toJSONString(accessTokenDTO));
Request request = new Request.Builder()
.url("https://gitee.com/oauth/token?grant_type=authorization_code&code="+accessTokenDTO.getCode()+
"&client_id="+accessTokenDTO.getClient_id()+"&redirect_uri="+accessTokenDTO.getRedirect_uri()+
"&client_secret="+accessTokenDTO.getClient_secret())
.post(body)
.build();
try (Response response = client.newCall(request).execute()) {
String string = response.body().string();
System.out.println(string);
String str1 = string.split(":")[1];
String str2 = str1.split("\"")[1];
return str2;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
//发起get请求返回GitUser对象，
public GiteeUser getGiteeUser(String token){
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
.url("https://gitee.com/api/v5/user?access_token="+token)
.build();
try (Response response = client.newCall(request).execute()) {
String string=response.body().string();
GiteeUser giteeUser = JSON.parseObject(string, GiteeUser.class);
return giteeUser;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
回调请求编写业务，成功返回我们需要的用户信息。
package com.yf.community.controller;
import com.yf.community.dto.AccessTokenDTO;
import com.yf.community.dto.GiteeUser;
import com.yf.community.provider.GitheeProvider;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class AuthorizeController {
@Autowired
private AccessTokenDTO accessTokenDTO;
@Autowired
private GitheeProvider githeeProvider;
@GetMapping("/callback")
public String callback(@RequestParam(name = "code") String code,
@RequestParam(name = "state") String state){
accessTokenDTO.setClient_id("你的id");
accessTokenDTO.setClient_secret("你的secret");
accessTokenDTO.setRedirect_uri("http://localhost:8887/callback");
accessTokenDTO.setCode(code);
accessTokenDTO.setState(state);
String token = githeeProvider.getAccessToken(accessTokenDTO);
GiteeUser giteeUser = githeeProvider.getGiteeUser(token);
System.out.println("id :"+giteeUser.getId());
System.out.println("name :"+giteeUser.getName());
System.out.println("bio :"+giteeUser.getBio());
return "index";
}
}
