Java持续实践

文章目录品牌名称后端参数校验示例品牌其他参数校验品牌名称后端参数校验示例validation-api-2.0.1.Final.jar包中 ,提供了如下的注解, 用于参数的校验例如有如下的注解@NotNull The annotated element must not be null. Accepts any type. 用于校验不能为null@NotEmpty The annotated element must not be null nor empty. Supported types

文章目录显示状态的修改与图片显示自定义表单校验页面测试显示状态的修改与图片显示显示状态, 由默认的true false 改成 1 和 0 去表示.新增一个品牌, 看到logo是很长的地址 ,而不是图片 ,需要进行修改.参考element的图片功能在brand.vue文件中进行修改如下<template slot-scope="scope"> <img :src="scope.row.logo" style="width: 100px; height: 80

文章目录文件上传的前端组件文件上传的品牌页面文件上传的前端组件将课程配套的资料, 代码文件夹中有文件上传组件的代码如下图复制到前端项目的 components文件夹下打开文件 , 可以看到 主要是用的ElementUI的el-upload标签复制阿里云控制台中, 外网访问的地址复制到如下的action中确认获取签名的请求是否正确文件上传的品牌页面在品牌管理的brand-add-or-update.vue文件中, 进行如下的修改引入文件上传的组件, 如下图import S

文章目录创建第三方的模块创建第三方的模块由于之后可能要调用很多的第三方服务, 因此直接创建一个模块专门用于第三方服务的调用勾选上 远程调用的功能 . 注册中心和配置中心的依赖 , 直接用common的...

文章目录安装sdk简单文件上传的代码测试Spring Cloud Alibaba-OSS安装sdk在对象存储的首页中, 找到文档的链接在文档中心打开Java sdk的安装https://help.aliyun.com/document_detail/32009.html?spm=a2c4g.11186623.6.904.cd5758d55CFtJ7复制如下的依赖<dependency> <groupId>com.aliyun.oss</groupI

文章目录分布式文件存储介绍开通阿里云对象存储创建存储空间文件上传的交互逻辑分布式文件存储介绍在传统的单机模式开发中, 文件只需存储在服务的服务器中即可.但如果是集群环境, 可能把文件上传到了一台机器中, 下次请求调用的另外一台机器. 那么就会导致找不到文件了.因此解决办法是, 把文件服务作为一个单独的服务. 此单独的文件服务, 可以是自己搭建的fastdfs等, 但是此种方式一开始的搭建比较复杂, 需要一台单独的服务器等.因此使用第三方的文件存储就比较合适, 例如阿里云对象存储, 七牛云存储等.

文章目录关闭eslint的语法检查需求代码实现elementui组件介绍具体代码完整代码关闭eslint的语法检查起前端项目的时候, 总是会有如下的报错. 可以将其关闭注释掉build文件夹下的如下文件的,如下部分的代码之后再重启前端服务即可需求在品牌管理的显示状态一栏, 弄一个开关按钮 , 可以通过按钮来控制是否显示.代码实现elementui组件介绍使用表格的自定义模板scope.row 代表这一行的数据开关中的事件, 获取开关最新的值的监听器由于开关默认的是传递

文章目录功能实现过程代码生成前端页面修改和取消权限配置功能使用逆生工程, 快速的生成品牌管理的前后端的增删改查代码实现过程品牌表的介绍如下新增品牌管理的菜单 product/brand代码生成在renren-generator 模块中, 配置好商品的数据库地址配置文件中, 配置好包名和表前缀页面中,点击生成代码解压生成好的代码压缩包. 如下的两个文件, 就是品牌的增删改查的前端代码前端页面修改和取消权限配置将此两个代码, 拷贝到前端项目中去.重启前端项目可以看到品牌

文章目录需求代码实现测试需求页面上新增批量删除的按钮, 把被选中的分类进行批量的删除代码实现组件的 树形控件 中, 有getCheckedNodes , 用于获取所有被选中的节点信息.方法的调用示例如下图, 用ref声明组件this.refs代表当前vue实例里面所有的组件this.refs 代表当前vue实例里面所有的组件 this.refs代表当前vue实例里面所有的组件this.refs.tree 调用组件.this.$refs.tree.filter(val); 用于方法的调用

文章目录需求分析代码实现完整代码需求分析在页面上放置一个开关按钮, 只有开启了开关, 才能进行拖动, 并且放置一个保存的按钮, 把多次拖动的值, 点击保存了才发送接口, 避免频繁的与数据库交互.代码实现在组件中, 有开关在页面的开始处, 使用开关和按钮, 用于批量保存和开启拖拽 .给拖拽功能, 动态的赋值默认给false 不允许拖拽. 只有开启开关了, 才能进行拖拽 .点击批量保存, 触发的 batchSave 方法 .由于是批量拖动, 再发送请求. 因此优化 查找最大深度

文章目录需求分析前端后端测试前端完整代码需求分析上一节完成了前端的拖拽功能, 但是没有给后端数据库保存拖拽节点的信息和最新的排序.这一节把拖拽的信息向后端发送请求, 保存拖拽节点的信息, 并且刷新页面, 显示最新拖拽的页面前端在handleDrop拖拽成功后 触发的方法 中, 添加如下的代码, 用于向后端发送最新的排序. 并且之后, 刷新页面, 给参数附上初始值.后端后端写一个批量修改的接口, 在形式参数上, 直接用对象的数组进行接收数据.调用mp的updateBatchById 方

文章目录监听拖拽成功事件完整代码测试效果监听拖拽成功事件可拖拽节点有如下的事件 node-drop 拖拽成功完成时触发的事件 绑定拖拽成功事件的写法拖拽完成 , 触发此方法. 传递被拖拽的节点, 目标节点, 拖拽的类型,完整代码<!-- --><template> <div> <el-tree :data="menus" :props="defaultProps" :expand-

文章目录需求分析代码实现需求分析通过拖拽节点, 改变节点顺序和父子关系的功能.在elemenetUI中, 树形控件有可拖拽节点 ,代码实现拖拽能否被放置的参数Function(draggingNode, dropNode, type)draggingNode: 当前被拖拽的节点type: type 参数有三种情况：‘prev’、‘inner’ 和 ‘next’，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后dropNode: 目标节点示例代码中有allow-drop

文章目录需求新增修改的案例对弹框进行修改测试完整代码需求树形结构上新增update 链接, 点击后, 弹窗回显分类信息 , 输入相关信息, 点击确定进行修改, 页面显示修改的数据.新增修改的案例新增update修改的按钮, 用update方法接收数据update方法中, 获取点击的修改的分类信息, 并且打开 分类修改的弹窗.向后端发送请求, 获取数据. 进行回显.对弹框进行修改弹框的表单新增图标和计量单位 输入框. 用category.icon 和 category.produc

文章目录需求分析使用对话框组件前端新增逻辑的编写测试效果需求分析点击某一个一级或二级分类, 点击树节点的append, 弹框,出现 新增分类的表单, 点击确定, 树节点刷新, 默认展开点击的父节点, 并出现新增的节点.使用对话框组件使用组件中的对话框将下面的代码进行复制, 其中 dialogVisible = false 是用来控制弹框显示和隐藏的.并且使用下面的 自定义内容的嵌套表单的 对话框 代码进行复制前端新增逻辑的编写复制上面的代码如下. 将不需要的属性进行删除 .

文章目录设置vue 发送http模板测试删除某一个菜单删除的前端优化点击删除时给出确认删除的按钮删除完成后,刷新菜单,并且固定树结构到当前父节点页面测试设置vue 发送http模板 "http-get请求": { "prefix": "httpget", "body": [ "this.\\$http({", "url: this.\\$http.adornUrl(''),", "method: 'get',", "params: this.\\$http.adornParam

文章目录需求说明代码实现使用postman进行测试需求说明常规的删除为物理删除, 比较暴力. 使用逻辑删除的好处是可能以后要用得到某些删除的数据. 比如说 某个需求是订单编号要自增, 即使这个订单被删除了, 也要从被删除的订单编号开始递增, 这个时候逻辑删除就派上用场了.此处用的是分类进行逻辑删除逻辑删除 就是在数据库中 , 指定某个状态位字段 ,约定好删除和未删除的状态. 例如1是未删除, 0 是删除 .关于mp逻辑删除的官网: mp逻辑删除代码实现官方文档介绍的使用方法如下.一共只

文章目录菜单的删除需求分析前端页面对显示的树进行优化只有树形的层级是一级或者二级才展示append只有没有子节点的才显示delele显示勾选框给每一行加上key菜单的删除需求分析需求: 没有子菜单, 并且没有被其他地方引用的菜单, 可以删除.使用树的两种方式, 可以实现树的删除 .https://element.eleme.cn/#/zh-CN/component/tree使用 scoped slot 更加的友好前端页面使用elementui的scoped slot ,复制其示例代码到c

网关配置商品服务点击分类维护页面, 请求404, 原因是之前配置的网关, 把请求都给renren-fast了, 需要把商品服务的请求, 转发给商品服务.网关新增对商品服务的转发,完整的配置文件如下spring: cloud: gateway: routes: - id: admin_route uri: lb://renren-fast predicates: - Path=/api/**

文章目录跨域的概念跨域解决方案之一:使用nginx部署为同一个域跨域解决方案之一:后端服务配置当次请求允许跨域网关配置跨域跨域的概念非简单请求的预检请求流程简单请求类型简单请求的内容类型, 必须是下列之一 . 而登录的post请求, 它是属于application/json的非简单请求,都需要发送一个预检请求,就是option方式的请求跨域解决方案之一:使用nginx部署为同一个域把前端项目和网关项目, 都放在nginx中.不直接访问前端项目, 而是访问nginx.登录的时候,

文章目录新建category.vue三级分类文件分类维护页面发送后台请求renren-fast 注册到nacos配置网关新建category.vue三级分类文件vscode打开 renren-fast-vue启动后台服务使用npm run dev 启动前端服务新增一个一级菜单新增一个菜单renren-fast-vue 的前端规则1.配置的路由urlproduct/category ,会被替换为product-category2.vue文件路径规则角色管理为sys-role

文章目录需求导入数据代码实现model修改ControllerService测试需求显示如下图所示的三级分类导入数据在gulimall_pms 库中, 导入商品分类的数据导入pms_category 表数据, 该表, 主要是有分类id 和父级id , 形成了父子结构导入的sql , 可以在码云中下载https://gitee.com/code_life_git/gulimall/tree/master/sql导入后 , 如下 :代码实现model修改在CategoryEnti

文章目录npm安装ElementUI使用布局容器搭建页面设置Vue代码片段设置侧边栏导航npm安装ElementUI官网： https://element.eleme.cn/#/zh-CN/component/installation安装npm i element-ui -S安装完成后, 可以看到版本信息在项目的main.js中, 引入 elementuiimport ElementUI from 'element-ui'import 'element-ui/lib/theme-

文章目录vue 模块化开发cmd窗口中初始化脚手架项目脚手架生成的代码解读脚手架项目访问自己编写的组件Vue Routervue 模块化开发cmd窗口中初始化脚手架项目npm install webpack -g全局安装webpack在cmd中输入 npm install webpack -g 即可安装注意要把快速编辑模式去除, 以免安装的时候卡顿npm install -g @vue/cli-init在cmd中 , 输入npm install -g @vue/cli-init安装全局

文章目录生命周期生命周期与钩子函数的代码示例生命周期官方文档关于生命周期的介绍https://cn.vuejs.org/v2/guide/instance.html生命周期的完整图片:在不同的生命周期中,会触发不同的钩子函数生命周期与钩子函数的代码示例使用如下的代码 ,进行生命周期id示例<body> <div id="app"> <span id="num">{{num}}</span> <b

文章目录组件化介绍全局声明组件局部声明组件组件化介绍使用组件的注意事项全局声明组件全局声明注册一个组件的demo代码如下.使用Vue.component("counter",注意组件中的data,不能用对象, 而是方法的声明.声明了组件后, 可以复用多次 , 直接写组件的名称即可, 如下的<counter></counter><body> <div id="app"> <button v-on:click="

文章目录计算属性侦听器过滤器局部过滤器全局过滤器计算属性需求: 通过动态的输入商品数量, 实时的生成价格代码如下, 主要是使用了vue的computed计算属性, 来动态的计算价格<body> <div id="app"> <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 --> <ul> <li>西游记； 价格：{{xyjPrice}}，数量：&

文章目录v-on 示例事件修饰符按键修饰符组合按键v-for 示例显示user信息遍历对象信息加上:key来区分不同数据v-if & v-showv-if & v-show 代码示例v-else-ifv-if 与v-for的结合使用v-on 示例v-on示例点赞<body> <div id="app"> <!--事件中直接写js片段--> <button v-on:c

文章目录指令v-html v-text指令网速慢的问题v-bind指令v-html v-text指令v-html v-text 代码示例如下v-html 指令, 解析html 渲染到页面上v-text 指令, 不会进行渲染, 而是直接显示文本<body> <div id="app"> <!-- {{msg}} <br/> --> {{1+1}} {{hello()}}

文章目录数组解构对象解构解构表达式数组解构 let arr = [1,2,3]; //传统的赋值方式, 逐个取数组下标 // let a = arr[0]; // let b = arr[1]; // let c = arr[2]; // console.log(a,b,c); let [a, b, c] = arr ; console.log(a,b,c);控制

let&constlet具有作用域的代码示例.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>&

前端技术与后端技术的对比ES6简介

gulimall-gateway网关使用案例想要实现针对于“http://localhost:88/hello?url=baidu”，转发到“https://www.baidu.com”，针对于“http://localhost:88/hello?url=qq”的请求，转发到“https://www.qq.com/”创建“application.yml”spring: cloud: gateway: routes: - id: test_route

文章目录创建“gulimall-gateway”模块添加“gulimall-common”依赖和“spring-cloud-starter-gateway”依赖到网关的模块“com.atguigu.gulimall.gateway.GulimallGatewayApplication”类上加上“@EnableDiscoveryClient”注解在Nacos中创建“gateway”命名空间，同时在该命名空间中创建“gulimall-gateway.yml”创建“bootstrap.properties”文件，

SpringCloud Gateway网关介绍发送的请求,都先到达网关, 网关动态的路由到各个服务, 网关可以实时的感知某一个服务是上线还是下线, 总是能够把请求正确的路由到某一个位置,没有网关的时候, 每一个微服务需要自己做鉴权, 限流和日志输出有了网关之后, 在网关层进行鉴权,转发 限流 和日志输出的操作.Springcloud gateway 是第二代网关框架 , 取代了Zuul网关.每秒的请求速率, Gateway 最高Gateway的三大概念https://cloud.

同时加载多个配置集当微服务数量很庞大时，如果将所有配置写到一个配置文件中，显然不是太合适。对此可以将配置按照功能的不同，拆分为不同的配置文件。如下面的配置文件：我们可以将，数据源有关的配置写到一个配置文件中：spring: datasource: #MySQL配置 driverClassName: com.mysql.cj.jdbc.Driver url: jdbc:mysql://192.168.137.14:3306/gulimall_sms?useUnicod

文章目录相关的概念Namespace(名称空间)方案DataID方案Group方案本项目使用的配置方案Nacos支持的三种配置加载方案Nacos支持“Namespace+group+data ID”的配置解决方案。详情见：https://github.com/alibaba/spring-cloud-alibaba/blob/master/spring-cloud-alibaba-docs/src/main/asciidoc-zh/nacos-config.adoc相关的概念命名空间用于进行租户

nacos配置中心1）修改“gulimall-coupon”模块在common模块中 添加pom依赖：<dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId></dependency>创建bootstrap.properties文件，该

使用openfen测试远程调用测试gulimall-member 调用gulimall-coupon在gulimall-member引入open-feign <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-openfeign</artifactId>

微服务注册中心 nacos进github的nacos仓库,下载nacos的安装包, 使用的版本为nacos-server-1.1.3双击如下的文件, 进行nacos服务的启动启动完成后, 浏览器输入http://127.0.0.1:8848/nacos, 进入nacos的管理页面. 用户名和密码都是nacos nacos要注意nacos集群所在的服务器，一定要关闭防火墙，否则容易出现各种问题。在代码中进行配置1.在common模块中, 导入nacos的依赖<dependency&gt