跳至主要內容

springboot-gulimall-d15

lamirs2023年10月30日大约 5 分钟文章文章

上一级页面：index-la

前言

这一节学习，或者复习前端的基础知识

本节的内容来自课后整理，听课的时候不用记录，主要是跟着思路敲代码。课后抽出时间整理一下笔记就好了。

es6

工作中会遇到这里的所有语法，重点看一下导入导出模块，以及promise，很常用

vue基础语法

之前学过，所以这里跟着视频过一遍，

容易忘怎么办？

  1. 忘了就回来看老师写的代码，

  2. 经常看+经常自己动手写，很快就能记牢了。

就比如我在公司写后端开发，有时候也要改前端页面，写久了就能记住框架里的命令，以及jQuery里的很多方法。

准备工作

这一节剩余部分记录一些准备工作，下一节实践检验Vue的编写能力，

配置api网关服务上线

回忆：上一节我们配置了api网关，让网关服务成功上线，并且配置了网关规则

/**
 * Copyright (c) 2016-2019 人人开源 All rights reserved.
 *
 * https://www.renren.io
 *
 * 版权所有，侵权必究！
 */

package io.renren;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;

@EnableDiscoveryClient
@SpringBootApplication
public class RenrenApplication {

	public static void main(String[] args) {
		SpringApplication.run(RenrenApplication.class, args);
	}

}

bootstrap.properties


# 应用的名称，nacos会自动读取，对应nacos配置列表里的gulimall-coupon.properties
spring.application.name=renren-fast

# 配置nacos做发现中心
spring.cloud.nacos.discovery.server-addr=${nacosAddr}:${nacosPort}
spring.cloud.nacos.discovery.username=${nacosUserName}
spring.cloud.nacos.discovery.password=${nacosPassword}

# nacos server的地址
spring.cloud.nacos.config.server-addr=${nacosAddr}:${nacosPort}
spring.cloud.nacos.config.username=${nacosUserName}
spring.cloud.nacos.config.password=${nacosPassword}

# 默认配置文件 命名空间的dataId
spring.cloud.nacos.config.namespace=d5beddc5-fb45-4d20-a8d1-eea90ed9ea2e
# 默认配置文件使用dev分组
spring.cloud.nacos.config.group=dev
# 默认配置文件使用 yaml后缀
spring.cloud.nacos.config.file-extension=yaml

# 加载多个配置集
#
#spring.cloud.nacos.config.extension-configs[0].data-id=datasource.yaml
#spring.cloud.nacos.config.extension-configs[0].group=dev
#spring.cloud.nacos.config.extension-configs[0].refresh=true
#
#
#spring.cloud.nacos.config.extension-configs[1].data-id=mybatis.yaml
#spring.cloud.nacos.config.extension-configs[1].group=dev
#spring.cloud.nacos.config.extension-configs[1].refresh=true
#
#
#spring.cloud.nacos.config.extension-configs[2].data-id=others.yaml
#spring.cloud.nacos.config.extension-configs[2].group=dev
#spring.cloud.nacos.config.extension-configs[2].refresh=true
#
#
## coupon user name
#spring.cloud.nacos.config.extension-configs[3].data-id=tryGetValue.yaml
#spring.cloud.nacos.config.extension-configs[3].group=dev
#spring.cloud.nacos.config.extension-configs[3].refresh=true
#

在pom中添加依赖

<!--        nacos 作为发现中心-->
		<!--        在nacos中排除ribbon依赖-->
		<dependency>
			<groupId>com.alibaba.cloud</groupId>
			<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
			<exclusions>
				<exclusion>
					<groupId>org.springframework.cloud</groupId>
					<artifactId>spring-cloud-starter-netflix-ribbon</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

		<!--        nacos 作为发现中心-->
		<!--解决：Did you forget to include spring-cloud-starter-loadbalancer?-->
		<dependency>
			<groupId>org.springframework.cloud</groupId>
			<artifactId>spring-cloud-loadbalancer</artifactId>
		</dependency>


		<!-- nacos 做配置中心 需要的依赖-->
		<dependency>
			<groupId>com.alibaba.cloud</groupId>
			<artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
		</dependency>

		<!-- bootstrap.properties 需要的依赖-->
		<!-- https://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-starter-bootstrap -->
		<dependency>
			<groupId>org.springframework.cloud</groupId>
			<artifactId>spring-cloud-starter-bootstrap</artifactId>
			<!-- <version>4.0.3</version>-->
		</dependency>

更改前端代码，请求走网关

现在：我们更改原本renren-fast-vue的代码，让所有的请求都走网关。

代码示例如下：

/**
 * 开发环境
 */
;(function () {
  window.SITE_CONFIG = {};

  // api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

  // cdn地址 = 域名 + 版本号
  window.SITE_CONFIG['domain']  = './'; // 域名
  window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)
  window.SITE_CONFIG['cdnUrl']  = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
})();

其他的更改同上

添加 商品分类页面

跟着视频和官方文档走，在项目中添加一个商品分类页面。

注意这里created 函数的位置，它和data函数是同级的，我刚开始没注意到这里，IDE也没有提示到位

还有一些命名之类的小问题，也注意一下

<template>
  <div>
    <el-tree
      :data="menus"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>

    <!-- aaaaa -->
  </div>
</template>
<script>
/* eslint-disable */
export default {
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        console.log("成功了", data);
        this.menus = data.data;

      });
    }
  },
  created() {
    this.getMenus();
  }
};
</script>
<style></style>

Vue 模板

up主给了一套vscode的代码模板，我使用webstorm，用不上这玩意

{
    "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请求"
    }
}

配置商品服务的网关

直接给出代码如下：

spring:
  cloud:
    gateway:
      routes:
        - id: test_route
          uri: https://www.baidu.com/
          predicates:
            - Query=url,baidu
        - id: qq_route
          uri: https://www.qq.com/
          predicates:
            - Query=url,qq

        # 路由优先级按照在配置文件中的书写顺序
        - id: product_route
          uri: lb://gulimall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api/(?<segment>/?.*), /$\{segment}
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>/?.*), /renren-fast/$\{segment}




## 前端项目，都带上api前缀
## http://localhost:88/api/captcha.jpg

配置开发环境允许跨越，生产环境不能这么配置

首先把renren-fast的跨域设置给注释掉

io.renren.config.CorsConfig
/**
 * Copyright (c) 2016-2019 人人开源 All rights reserved.
 * <p>
 * https://www.renren.io
 * <p>
 * 版权所有，侵权必究！
 */

package io.renren.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

//    @Override
//    public void addCorsMappings(CorsRegistry registry) {
//        registry.addMapping("/**")
//                .allowedOriginPatterns("*")
//                .allowCredentials(true)
//                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
//                .maxAge(3600);
//    }
}

添加文件com.atguigu.gulimall.gulimallgateway.config.GulimallCorsConfiguration

package com.atguigu.gulimall.gulimallgateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

@Configuration
public class GulimallCorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter() {

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        // 1.配置跨越
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");

//        springboot升级成2.4.0以上时对AllowedOrigin设置发生了改变
//        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedOriginPattern("*");

        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(source);
    }
}

参考、引用、致谢

上次编辑于: 2024/11/4 19:06:49
贡献者: YJ2CS
分享技术小站
Copyright © 2024 lamirs