乐优商城(二)搭建后台前端

1. 搭建后台管理前端

1.1 导入已有资源

  1. 找到已经准备好的 leyou-manage-web 压缩文件,这就是后台管理的前端项目

  2. 解压 leyou-manage-web 文件到项目中,注意与 leyou 文件同级

1.2 安装依赖

  1. 在 IDEA 中打开 leyou-manage-web 工程

2.打开 Teminal,输入以下命令安装依赖

npm install

1.3 启动项目

  1. 在 package.json 文件中有 scripts 启动脚本配置

2.打开 Teminal,输入以下命令启动项目

npm start

3.启动成功

4.打开浏览器,访问以下地址

http://localhost:9001

1.4 目录结构

1.5 调用关系

2. Vuetify 框架

2.1 为什么使用 UI 框架

Vue 虽然会帮我们进行视图的渲染,但样式还是由我们自己来完成。这显然不是我们的强项,因此后端开发人员一般都喜欢使用一些现成的 UI 组件,拿来即用,常见的例如:

  • BootStrap
  • LayUI
  • EasyUI
  • ZUI

然而这些 UI 组件的基因天生与 Vue 不合,因为他们更多的是利用 DOM 操作,借助于 jQuery 实现,而不是 MVVM 的思想。而目前与 Vue 吻合的 UI 框架也非常的多,国内比较知名的如:

  • element-ui
  • i-view

我们使用的是一款国外的框架:Vuetify

官方网站:https://vuetifyjs.com/zh-Hans/

2.2 为什么使用 Vuetify

使用 Vuetify 原因如下:

  • Vuetify 几乎不需要任何 CSS 代码,而 element-ui 许多布局样式需要我们来编写
  • Vuetify 从底层构建起来的语义化组件。简单易学,容易记住
  • Vuetify 基于 Material Design(谷歌推出的多平台设计规范),更加美观,动画效果酷炫,且风格统一

3. 使用域名访问本地项目

3.1 统一环境

我们现在访问页面使用的地址是:http://localhost:9001

但实际开发中会有不同的环境:

  • 开发环境:自己的电脑
  • 测试环境:提供给测试人员使用的环境
  • 预发布环境:数据是和生成环境的数据一致,运行最新的项目代码进去测试
  • 生产环境:项目最终发布上线的环境

如果不同环境使用不同的 IP 去访问,可能会出现一些问题。为了保证所有环境的一致,我们会在各种环境下都使用域名来访问。

我们将使用以下域名:

  • 主域名:www.leyou.com,leyou.com
  • 管理系统域名:manage.leyou.com
  • 网关域名:api.leyou.com

3.2 域名解析

当我们在浏览器输入一个域名时,浏览器是如何找到对应服务的 IP 和端口的呢?

  • 本地域名解析

    浏览器会首先在本机的 hosts 文件中查找域名映射的 IP 地址,如果查找到就返回 IP 地址,没找到则进行域名服务器解析。

  • 域名服务器解析

    本地解析失败,才会进行域名服务器解析,域名服务器就是网络中的一台计算机,里面记录了所有注册备案的域名和 IP 映射关系。

3.3 解决域名解析问题

我们还在开发阶段,不可能去买个域名,因此我们可以修改本地的 hosts 文件,实现对域名的解析。

  1. 下载并安装 SwitchHosts(这是一个管理 hosts 的工具)

  2. 右键 SwitchHosts,以管理员身份运行

  3. 添加映射关系,点击左边按钮生效

现在试试能不能 Ping 通

打开 leyou-manage-web 工程,在 webpack.dev.conf.js 中取消 host 验证,添加 disableHostCheck: true

启动 leyou-manage,通过域名访问:http://manage.leyou.com:9001

3.4 Nginx 解决端口问题

域名问题解决了,但是现在要访问后台页面,还得自己加上端口:http://manage.leyou.com:9001

这就不够优雅了,我们希望的是直接域名访问:http://manage.leyou.com

这种情况下端口默认是 80,如何才能把请求转移到 9001 端口呢?这里就要用到反向代理工具:Nginx

3.4.1 Nginx 介绍

Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性:

  • 作为 Web 服务器:相比 Apache,Nginx 使用更少的资源,支持更多的并发连接,体现更高的效率,这点使 Nginx 尤其受到虚拟主机提供商的欢迎。能够支持高达 50,000 个并发连接数的响应,感谢 Nginx 为我们选择了 epoll and kqueue 作为开发模型
  • 作为负载均衡服务器:Nginx 既可以在内部直接支持 Rails 和 PHP,也可以支持作为 HTTP 代理服务器 对外进行服务。Nginx 用 C 编写, 不论是系统资源开销还是 CPU 使用效率都比 Perlbal 要好的多。
  • 作为邮件代理服务器: Nginx 同时也是一个非常优秀的邮件代理服务器(最早开发这个产品的目的之一也是作为邮件代理服务器),Last.fm 描述了成功并且美妙的使用经验。
  • Nginx 安装非常的简单,配置文件非常简洁(还能够支持 perl 语法),Bugs 非常少的服务器:Nginx 启动特别容易,并且几乎可以做到 7*24 不间断运行,即使运行数个月也不需要重新启动。你还能够在 不间断服务的情况下进行软件版本的升级。
3.4.2 Nginx 作为 Web 服务器

Web 服务器分两类:

  • Web 应用服务器:
    • Tomcat
    • Jetty
  • Web 服务器:
    • Apache
    • Nginx

二者区分:

  • Web 服务器不能解析 jsp 等页面,只能处理 html、css、js 等静态资源。
  • Web 服务器的并发能力远高于Web 应用服务器。
3.4.3 Nginx 作为网关

Nginx 可以作为 Web 服务器,但更多的时候,我们把它作为网关,因为它具备网关必备的功能:

  • 反向代理
  • 负载均衡
  • 动态路由
  • 请求过滤
3.4.4 Nginx 作为反向代理服务器

正向代理介绍

张三找李四借钱,李四觉得张三不可靠,不借钱给张三。于是张三找到王五,请王五去找李四借钱。王五找李四借钱,李四觉得王五可靠,把钱借给了王五。但是李四并不知道这个钱是借给了张三,李四是借给了王五,最后是王五把钱借给了张三。在这个借钱的过程中,王五就是代理,也可以说是正向代理,他隐藏了真实的借钱人。

正向代理的过程中,让一台服务器代理客户端,客户端的所有请求都交给代理服务器处理,这样就隐藏了真实的客户端。

反向代理介绍

我们打电话给 10086 客服,可能一个地区会有几十个客服,我们不知道会是其中的哪一个客服接电话,但一定会有一个客服接电话。在这个打电话给 10086 的过程中,10086 这个总机号码就是反向代理,它隐藏了真实的客服。

反向代理的过程中,让一台服务器代理真实服务器,用户访问时,不再是访问真实服务器,而是代理服务器,这样就隐藏了真实的服务器。

Nginx 作为反向代理服务器

Nginx 可以作为反向代理服务器来使用:

  • 我们需要提前在 Nginx 中配置好反向代理的规则,不同的请求,交给不同的真实服务器处理
  • 当请求到达 Nginx,Nginx 会根据已经定义的规则进行请求的转发,从而实现路由功能,这样就可以解决我们前面所说的端口问题了

3.4.5 安装和使用 Nginx
  1. 下载并解压 Nginx,以下是目录结构

  • conf:配置目录
  • contrib:第三方依赖
  • html:默认的静态资源目录
  • logs:日志目录
  • nginx.exe:启动程序

2.打开 conf/nginx.conf,看到 server 配置(Nginx 中的每个 server 就是一个反向代理配置,可以有多个 server)

3.修改配置文件如下

#user  nobody;
worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;gzip  on;server {listen       80;server_name  manage.leyou.com;proxy_set_header X-Forwarded-Host $host;proxy_set_header X-Forwarded-Server $host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;location / {proxy_pass http://127.0.0.1:9001;proxy_connect_timeout 600;proxy_read_timeout 600;}}server {listen       80;server_name  api.leyou.com;proxy_set_header X-Forwarded-Host $host;proxy_set_header X-Forwarded-Server $host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;location / {proxy_pass http://127.0.0.1:10010;proxy_connect_timeout 600;proxy_read_timeout 600;}}
}

在 Nginx 文件夹中打开 cmd,启动 Nginx

  1. 启动:start nginx.exe
  2. 停止:nginx.exe -s stop
  3. 重新加载:nginx.exe -s reload

打开浏览器,访问 http://manage.leyou.com

总结实现域名访问的具体流程

4. 实现商品分类查询

商城的核心自然是商品,而商品多了以后,肯定要进行分类,并且不同的商品会有不同的品牌信息,我们需要依次去完成:商品分类、品牌、商品的开发。

4.1 导入数据库

  1. 导入准备好的 sql 文件到 MySQL 数据库

打开商品分类表 tb_category

CREATE TABLE `tb_category` (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '类目id',`name` varchar(32) NOT NULL COMMENT '类目名称',`parent_id` bigint(20) NOT NULL COMMENT '父类目id,顶级类目填0',`is_parent` tinyint(1) NOT NULL COMMENT '是否为父节点,0为否,1为是',`sort` int(4) NOT NULL COMMENT '排序指数,越小越靠前',PRIMARY KEY (`id`),KEY `key_parent_id` (`parent_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1424 DEFAULT CHARSET=utf8 COMMENT='商品类目表,类目和商品(spu)是一对多关系,类目与品牌是多对多关系';

因为商品分类会有层级关系,因此这里我们加入了 parent_id 字段,对本表中的其它分类进行自关联。

4.2 实现展示静态数据

  1. 在浏览器点击分类管理菜单,可以看到路由路径 item/category

找到路由文件 index.js,发现页面最终指向 /page/item/Category

打开 Category.vue

商品分类使用了树状结构,这里是自定义了一个树状组件,可以参照文档使用该组件

我们发现只要加入 treeData 就可以展示静态数据了,并且不会再去远程加载数据

在 mockDB.js 中已经存在了 treeData 的静态数据

引入 treeData 到 Category.vue 中

打开浏览器,点击商品管理下的分类管理菜单

实现了展示静态数据,我们就知道了分类管理大致要做成什么样子了,接下来就可以取消引入的静态数据了,下面准备实现展示动态数据

4.3 实现展示动态数据

4.3.1 url 异步请求

点击商品管理下的分类管理菜单,打开浏览器控制台

可以看到页面发起了一条请求:

http://api.leyou.com/api/item/category/list?pid=0

这个请求路径怎么来的呢?

Category.vue 中我们使用了相对路径:

/item/category/list

讲道理发起的请求地址应该是:

http://manage.leyou.com/item/category/list

但实际却发起的请求地址是:

http://api.leyou.com/api/item/category/list?pid=0

这是因为我们有一个全局的配置文件,对所有的请求路径进行了约定:

基本路径是 http://api.leyou.com,并且默认加上了 /api 的前缀,这恰好与我们的网关设置匹配。

接下来,我们要做的事情就是编写后台接口,返回对应的数据即可。

4.3.2 实体类
  1. 在 leyou-item-interface 中添加通用 Mapper 依赖

<dependency><groupId>tk.mybatis</groupId><artifactId>mapper-spring-boot-starter</artifactId>
</dependency>

在 leyou-item-interface 中添加实体类

@Table(name = "tb_category")
public class Category {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String name;private Long parentId;private Boolean isParent; // 注意 isParent 生成的 getter 和 setter 方法需要手动加上 Isprivate Integer sort;// 构造器、getter 和 setter 方法、toString 方法省略
}

注意:在阿里巴巴约规手册中,规定了"POJO 类中布尔类型的变量,都不要加 is 前缀"

4.3.3 Mapper
  1. 在 leyou-item-service 中添加 Mapper 接口

public interface CategoryMapper extends Mapper<Category> {
}

在启动类上添加扫描 Mapper 注解

@SpringBootApplication
@EnableDiscoveryClient
@MapperScan("com.leyou.item.mapper")
public class LeyouItemServiceApplication {public static void main(String[] args) {SpringApplication.run(LeyouItemServiceApplication.class, args);}
}
4.3.4 Service

在 leyou-item-service 中添加 CategoryService

@Service
public class CategoryService {@Autowiredprivate CategoryMapper categoryMapper;/*** 根据 ParentId 查询子类目* @param pid* @return*/public List<Category> queryCategoryById(Long pid) {Category category = new Category();category.setParentId(pid);List<Category> categories = categoryMapper.select(category);return categories;}
}
4.3.5 Controller

在 leyou-item-service 中添加 CategoryController

@RestController
@RequestMapping("/category")
public class CategoryController {@Autowiredprivate CategoryService categoryService;/*** 根据 ParentId 查询子类目* @param pid* @return*/@GetMapping("/list")public ResponseEntity<List<Category>> queryCategoryById(@RequestParam("pid") Long pid) {if (pid == null || pid.longValue() < 0) {return ResponseEntity.badRequest().build(); // 响应 400}List<Category> categories = categoryService.queryCategoryById(pid);if(CollectionUtils.isEmpty(categories)) {return ResponseEntity.notFound().build(); // 响应 404}return ResponseEntity.ok(categories);}
}
4.3.6 测试
  1. 启动三个服务

不经过网关访问

经过网关访问

最后到后台管理系统的分类管理菜单

发现报错了

浏览器直接访问没事,但是这里却报错,什么原因?

这其实是浏览器的同源策略造成的跨域问题。

5. 跨域问题

5.1 跨域

跨域是浏览器对于 javascript 的同源策略的限制

以下情况都属于跨域:

域名和端口都相同,但是请求路径不同,则不属于跨域,如:

www.jd.com/item

www.jd.com/goods

5.2 跨域问题

跨域不一定都会有跨域问题。

跨域问题是浏览器对于 ajax 请求的一种安全限制:一个页面发起的 ajax 请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击

但是这却给我们的开发带来了不便,而且在实际生产环境中,肯定会有很多台服务器之间交互,地址和端口都可能不同,下面就来解决跨域问题。

5.3 解决跨域问题的方案

目前比较常用的跨域解决方案有三种:

  • Jsonp

    最早的解决方案,利用 script 标签可以跨域的原理实现。

    缺点:

    • 需要服务的支持
    • 只能发起 GET 请求
  • Nginx 反向代理

    利用 Nginx 把跨域反向代理为不跨域,支持各种请求方式

    缺点:

    • 需要在 Nginx 进行额外配置,语义不清晰

CORS

规范化的跨域请求解决方案,安全可靠。

优点:

  • 在服务端进行控制是否允许跨域,可自定义规则
  • 支持各种请求方式

缺点:

  • 会产生额外的请求

5.4 CORS 解决跨域问题

5.4.1 CORS 简介

CORS 是一个 W3C 标准,全称是"跨域资源共享"(Cross-origin resource sharing)

它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 Ajax 只能同源使用的限制。

CORS 需要浏览器和服务器同时支持

  • 浏览器端

    目前,所有浏览器都支持该功能(IE10 以下不行)。整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。

  • 服务端

    CORS 通信与 AJAX 没有任何差别,因此你不需要改变以前的业务逻辑。但浏览器会在请求中携带一些头信息,我们需要以此判断是否允许其跨域,然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

5.4.2 CORS 原理

浏览器会将 Ajax 请求分为两类:

  • 简单请求
  • 特殊请求

两者处理方案略有差异

5.4.2.1 简单请求

简单请求的定义

满足以下两个条件,就属于简单请求:

  1. 请求方法是以下三种方法之一

    • HEAD
    • GET
    • POST

2.HTTP 的头信息不超出以下几种字段

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值 application/x-www-form-urlencodedmultipart/form-datatext/plain

发起简单请求

当浏览器发现发起的 Ajax 请求是简单请求时,会在请求头中携带一个字段 Origin,Origin 中会指出当前请求属于哪个域,服务会根据这个值决定是否允许其跨域。

简单请求的响应

如果服务器允许跨域,需要在返回的响应头中携带下面信息:

Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8
  • Access-Control-Allow-Origin:可接受的域,是一个具体域名或者 *(代表任意域名)
  • Access-Control-Allow-Credentials:是否允许携带 cookie,默认情况下,CORS 不会携带 cookie,除非这个值是 true

操作 cookie 的条件

要想操作 cookie,需要满足三个条件:

  • 服务的响应头中需要携带 Access-Control-Allow-Credentials 并且为 true。
  • 浏览器发起 ajax 需要指定 withCredentials 为 true
  • 响应头中的 Access-Control-Allow-Origin 一定不能为 *,必须是指定的域名
     
5.4.2.2 特殊请求

特殊请求的定义

不符合简单请求的条件,会被浏览器判定为特殊请求,例如请求方式为 PUT。

预检请求

特殊请求会在正式通信之前,增加一次 HTTP 查询请求,称为"预检"请求(preflight)。

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的 XMLHttpRequest 请求,否则就报错。

一个“预检”请求的样板:

OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

与简单请求相比,除了 Origin 以外,多了两个请求头:

  • Access-Control-Request-Method:接下来会用到的请求方式,比如 PUT
  • Access-Control-Request-Headers:会额外用到的头信息

预检请求的响应

服务收到预检请求,如果许可跨域,会发出响应:

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

除了 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 以外,这里又多出三个响应头:

  • Access-Control-Allow-Methods:允许访问的方式
  • Access-Control-Allow-Headers:允许携带的头
  • Access-Control-Max-Age:本次许可的有效时长,单位是秒

发起真实请求

如果浏览器得到上述响应,则认定为可以跨域,就可以发出真实请求了。

5.4.3 实现 CORS 解决跨域问题

实现思路

  • 浏览器端都有浏览器自动完成,我们无需操心
  • 服务端可以通过拦截器统一实现,不必每次都去进行跨域判定的编写。

事实上,SpringMVC 已经帮我们写好了 CORS 的跨域过滤器:CorsFilter,内部已经实现了刚才所讲的判定逻辑,我们直接用就好了。

实现

在 leyou-gateway 中编写一个配置类,并且注册 CorsFilter

@Configuration
public class LeyouCorsConfigration {@Beanpublic CorsFilter corsFilter() {// 初始化 cors 配置对象CorsConfiguration config = new CorsConfiguration();config.addAllowedOrigin("http://manage.leyou.com"); //允许的域config.setAllowCredentials(true); //是否发送 Cookie 信息config.addAllowedMethod("*"); //允许的请求方式config.addAllowedHeader("*"); //允许的头信息//初始化 cors 配置源对象UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration("/**", config); //添加映射路径,拦截一切请求return new CorsFilter(configSource); //返回 CorsFilter}
}

打开浏览器到后台管理系统的分类管理菜单,成功展示动态数据

6. 品牌的查询

6.1 实现展示静态数据

6.2 实现展示动态数据

6.2.1 url 异步请求

点击商品管理下的分类管理菜单,打开浏览器控制台

由此可以得到请求路径及参数

6.2.2 数据库
CREATE TABLE `tb_brand` (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '品牌id',`name` varchar(50) NOT NULL COMMENT '品牌名称',`image` varchar(200) DEFAULT '' COMMENT '品牌图片地址',`letter` char(1) DEFAULT '' COMMENT '品牌的首字母',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=325400 DEFAULT CHARSET=utf8 COMMENT='品牌表,一个品牌下有多个商品(spu),一对多关系';

这里需要注意的是,品牌和商品分类之间是多对多关系,因此我们有一张中间表:

CREATE TABLE `tb_category_brand` (`category_id` bigint(20) NOT NULL COMMENT '商品类目id',`brand_id` bigint(20) NOT NULL COMMENT '品牌id',PRIMARY KEY (`category_id`,`brand_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='商品分类和品牌的中间表,两者是多对多关系';

但是,你可能会发现,这张表中并没有设置外键约束,似乎与数据库的设计范式不符。为什么这么做?

  • 外键会严重影响数据库读写的效率
  • 数据删除时会比较麻烦
6.2.3 实体类
@Table(name = "tb_brand")
public class Brand {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String name;private String image;private Character letter;// 构造器、getter 和 setter 方法、toString 方法省略
}
6.2.4 Mapper
public interface BrandMapper extends Mapper<Brand> {
}
6.2.5 Service

编写 Service 之前,先看看前端给我们发来的请求参数和要得到的响应结果:

由此我们可以得知:

  • 请求方式:Get
  • 请求路径:/item/brand/page
  • 请求参数:根据我们刚才编写的页面,有分页功能,有排序功能,有搜索功能
    • page:当前页,int
    • rows:每页大小,int
    • sortBy:排序字段,String
    • desc:是否为降序,boolean
    • key:搜索关键词,String
  • 响应结果:分页结果一般至少需要两个数据
    • total:总条数
    • items:当前页数据
    • totalPage:有些还需要总页数

分页结果类

由响应结果可知,我们还需要一个分页结果类。另外,这个类以后可能在其它项目中也有需求,因此我们将其抽取到 leyou-common 中。

package com.leyou.common.pojo;import java.util.List;public class PageResult<T> {private Long total; //总条数private List<T> items; //当前页数据private Integer totalPage; //总页数public PageResult() {}public PageResult(Long total, List<T> items) {this.total = total;this.items = items;}public PageResult(Long total, List<T> items, Integer totalPage) {this.total = total;this.items = items;this.totalPage = totalPage;}// getter 和 setter 方法、toString 方法省略
}

在 leyou-item-service 中引入 leyou-common 的依赖

<dependency><groupId>com.leyou.common</groupId><artifactId>leyou-common</artifactId><version>1.0-SNAPSHOT</version>
</dependency>

编写 service

@Service
public class BrandService {@Autowiredprivate BrandMapper brandMapper;/*** 根据查询条件分页并排序查询品牌信息** @param key    搜索关键词* @param page   当前页* @param rows   每页大小* @param sortBy 排序字段* @param desc   是否为降序* @return*/public PageResult<Brand> queryBrandsByPage(String key, Integer page, Integer rows, String sortBy, Boolean desc) {// 初始化 example 对象Example example = new Example(Brand.class);Example.Criteria criteria = example.createCriteria();// 根据 name 模糊查询,或根据 letter 查询if (StringUtils.isNotBlank(key)) {criteria.andLike("name", "%" + key + "%").orEqualTo("letter", key);}// 设置分页条件PageHelper.startPage(page, rows);// 添加排序if (StringUtils.isNotBlank(sortBy)) {example.setOrderByClause(sortBy + " " + (desc ? "desc" : "asc"));}List<Brand> brands = brandMapper.selectByExample(example);// 包装成 pageInfoPageInfo<Brand> brandPageInfo = new PageInfo<>(brands);// 包装成分页结果集返回return new PageResult<Brand>(brandPageInfo.getTotal(), brandPageInfo.getList());}
}
6.2.6 Controller
@RestController
@RequestMapping("/brand")
public class BrandController {@Autowiredprivate BrandService brandService;/*** 根据查询条件分页并排序查询品牌信息* @param key    搜索关键词* @param page   当前页* @param rows   每页大小* @param sortBy 排序字段* @param desc   是否为降序* @return*/@GetMapping("/page")public ResponseEntity<PageResult<Brand>> queryBrandsByPage(@RequestParam(value = "key", required = false) String key,@RequestParam(value = "page", defaultValue = "1") Integer page,@RequestParam(value = "rows", defaultValue = "5") Integer rows,@RequestParam(value = "sortBy", required = false) String sortBy,@RequestParam(value = "desc", required = false) Boolean desc) {PageResult<Brand> brandPageResult = brandService.queryBrandsByPage(key, page, rows, sortBy, desc);if (CollectionUtils.isEmpty(brandPageResult.getItems())) {return ResponseEntity.notFound().build();}return ResponseEntity.ok(brandPageResult);}
}
6.2.7 测试

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/100929.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年中国医学影像信息系统市场规模、竞争格局及行业趋势分析[图]

医学影像信息系统简称PACS&#xff0c;与临床信息系统、放射学信息系统、医院信息系统、实验室信息系统同属医院信息系统。医学影像信息系统是处理各种医学影像信息的采集、存储、报告、输出、管理、查询的计算机应用程序。主要包括&#xff1a;预约管理、数据接收、影像处理、…

如何开始学习量子机器学习

一、关于量子计算 这是我关于量子机器学习&#xff08;QML&#xff09;的第二篇文章&#xff0c;这是第一篇&#xff0c;关于为什么你应该开始学习QML。 开始研究量子机器学习很困难&#xff0c;因为我不知道我需要了解多少量子力学和计算知识。我在101年上大学时上了量子力学2…

腾讯云短信验证登录

提前准备工作 1.已 注册腾讯云 账号&#xff0c;并完成 企业实名认证。 2.已 购买 短信套餐包。 3.准备短信签名归属方资质证明文件 4.已获取短信应用的 SDKAppID。 主要获取这几个参数 secretId(秘钥id) secretKey(秘钥key) SmsSdkAppId(appId) TemplateId(短信模板i…

Android:自定义原生TimePickerDialog样式

效果图&#xff1a; 目标效果图&#xff1a; 原生效果&#xff1a; 实现&#xff1a; 首先是Dialog样式&#xff1a; <style name"TimePickerDialogStyle" parent"style/Theme.AppCompat.DayNight.Dialog.Alert"><item name"android:time…

Nosql redis高可用和持久化

Nosql redis高可用和持久化 1、redis高可用2、redis持久化2.1redis持久化2.2Redis 持久化方法2.3RDB 持久化2.3.1RDB持久化工作原理2.3.2触发条件2.3.3其他自动触发机制2.3.4执行流程2.3.5启动时加载 2.4AOF 持久化2.4.1AOF持久化原理2.4.2开启AOF2.4.3执行流程2.4.4文件重写的…

css怎么实现文字描边

有时&#xff0c;我们会遇到UI稿有文字描边的效果&#xff0c;比如下图的效果。 一、给需要描边的文字加一个id选择器 例如&#xff1a; 二、css写法&#xff1a; number,{//这个是实现文字描边的关键&#xff0c;也就是‘空心文字’&#xff0c;这个是定义文字字符的描边的宽…

对比纯软开与嵌入式硬件开发谁更好呢?

对比纯软开与嵌入式硬件开发谁更好呢&#xff1f; 你的纠结和犹豫是理解的&#xff0c;职业选择确实是一个重要的决策。我明白你在嵌入式和软件开发之间犹豫不决的原因。让我给你提供一些建议&#xff0c;帮助你做出更明智的决定。最近很多小伙伴找我&#xff0c;说想要一些嵌入…

1600*A. Maze(DFS)

Problem - 377A - Codeforces 解析&#xff1a; 对于正向思考比较复杂的题目&#xff0c;我们可以反向思考。 由于最后剩余的 “ . ” 必须相连&#xff0c;所以我们将所有 “ . ” 全部换成 “ X ”&#xff0c;然后从其中DFS一个联通的“ X ”反向换成 “ . ”即可。 #incl…

配资炒股优质平台排名:十大排名和评估!

随着互联网的发展&#xff0c;配资炒股平台已经成为了越来越多投资者的选择&#xff0c;但是市场上的配资炒股平台各不相同&#xff0c;投资者如何选择一家优质的平台呢&#xff1f;这时候&#xff0c;配资炒股优质平台排名就显得尤为重要。 配资炒股优质平台排名的作用&#…

HTML5开发实例-3D全景(ThreeJs全景Demo) 详解(图)

前言 在现在市面上很多全景H5的环境下,要实现全景的方式有很多,可以用css3直接构建也可以用基于threeJs的库来实现,还有很多别的制作全景的软件使用 本教学适用于未开发过3D全景的工程狮 如果觉得内容太无聊可以直接跳到最后 下载代码 理论 整个3D全景所用的相关理论就…

将 Ordinals 与比特币智能合约集成:第 3 部分

基于 Ordinals 的 BSV-20 同质化代币 之前&#xff0c;我们展示了如何将比特币智能合约与 Ordinals 集成&#xff0c;Ordinals 可以被视为链上的 NFT。 在本文中&#xff0c;我们将展示如何将它们与同质化代币&#xff08;即 BSV-20 代币&#xff09;集成。 我们仍然以拍卖为例…

dubbo3+zookeeper/nacos+dubbo-admin

工程结构&#xff1a; 版本信息&#xff1a; jdk版本&#xff1a;1.8 springboot-parent版本&#xff1a;2.6.6springboot版本&#xff1a;2.6.6 dubbo-spring-boot-starter版本&#xff1a;3.0.7dubbo版本&#xff1a;3.0.7 dubbo-registry-zookeeper版本&#xff1a;3.0.7c…

SRE实战:如何低成本推进风险治理?稳定性与架构优化的3个策略

一分钟精华速览 SRE 团队每天面临着不可控的各类风险和重复发生的琐事&#xff0c;故障时疲于奔命忙于救火。作为技术管理者&#xff0c;你一直担心这些琐事会像滚雪球一样&#xff0c;越来越多地、无止尽地消耗你的团队&#xff0c;进而思考如何系统性地枚举、掌控这些风险&a…

请求和响应的概述

请求&#xff1a;在浏览器地址栏输入地址&#xff0c;点击回车请求服务器&#xff0c;这个过程就是一个请求过程。 响应&#xff1a;服务器根据浏览器发送的请求&#xff0c;返回数据到浏览器在网页上进行显示&#xff0c;这个过程就称之为响应。 针对Servlet的每次请求&…

软件测试之概念篇(需求,测试用例,BUG描述,产品的生命周期)

目录 1.什么是需求 2.什么是测试用例 3.什么是BUG 4.软件的生命周期 5.测试的生命周期 1.什么是需求 在大多数软件公司&#xff0c;一般会有两部分需求&#xff1a; 用户需求&#xff1a;可以理解为就是甲方提出需求&#xff0c;如果没有甲方&#xff0c;那么就是终端用…

IDEA使用模板创建webapp时,web.xml文件版本过低的一种解决方法

创建完成后的web.xml 文件&#xff0c;版本太低 <!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name>Archetype Created Web Appl…

Springboot使用sqlcipher4加密sqlite数据库

在有些业务场景&#xff0c;需要使用sqlite数据库&#xff0c;但sqlite数据库生的db文件&#xff0c;是明文的&#xff0c;该文件被别人拿到&#xff0c;就可以看到里面的所有数据&#xff0c;非常不安全&#xff0c;市面上有很多对sqlite数据库文件加密的方式&#xff0c;但都…

【Overload游戏引擎分析】编辑器对象鼠标拾取原理

Overload的场景视图区有拾取鼠标功能&#xff0c;单击拾取物体后会显示在Inspector面板中。本文来分析鼠标拾取这个功能背后的原理。 一、OpenGL的FrameBuffer 实现鼠标拾取常用的方式有两种&#xff1a;渲染id到纹理、光线投射求交。Overload使用的是渲染id到纹理&#xff0c…

ESP32网络开发实例-WebSocket服务器

WebSocket服务器 文章目录 WebSocket服务器1、WebSocket介绍2、应用实例介绍3、软件准备4、硬件准备5、代码实现在本文中,将介绍如何使用 WebSocket 通信协议通过 ESP32 构建 Web 服务器。 例如,我们将向介绍如何构建网页以远程控制 ESP32 输出。 输出状态显示在网页上,并在…

在windows系统上安装pgAdmin4

pgAdmin4是全球最先进的开源数据库PostgreSQL的领先开源管理工具。它旨在满足新手和经验丰富的PostgreSQL用户的需求&#xff0c;提供了强大的图形界面&#xff0c;可简化数据库对象的创建、维护和使用。 pgAdmin4是Python开发的Web应用程序&#xff0c;既可以部署为Web模式通…