谷粒商城Bug解决集

作者: 花伤情犹在 | 来源:发表于2021-11-22 20:43 被阅读0次

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";
    }
}

谷粒商城Bug解决集

P16

方案1

方案2

P27

P44

P62

P65

P69

解决办法

关于使用@Slf4j注解报错:

前端brand-add-or-update.vue排序字段校验问题

P71

P84

P148

P212

P221

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

项目实战

Bug记录