男女做暖暖的时候网站,亿恩 网站备案,批量制作图片的软件,毕业室内设计代做网站1. 搭建后台管理前端
1.1 导入已有资源 找到已经准备好的 leyou-manage-web 压缩文件#xff0c;这就是后台管理的前端项目 解压 leyou-manage-web 文件到项目中#xff0c;注意与 leyou 文件同级 1.2 安装依赖 在 IDEA 中打开 leyou-manage-web 工程 2.打开 Teminal这就是后台管理的前端项目 解压 leyou-manage-web 文件到项目中注意与 leyou 文件同级 1.2 安装依赖 在 IDEA 中打开 leyou-manage-web 工程 2.打开 Teminal输入以下命令安装依赖
npm install1.3 启动项目 在 package.json 文件中有 scripts 启动脚本配置 2.打开 Teminal输入以下命令启动项目
npm start3.启动成功
4.打开浏览器访问以下地址
http://localhost:90011.4 目录结构 1.5 调用关系 2. Vuetify 框架
2.1 为什么使用 UI 框架
Vue 虽然会帮我们进行视图的渲染但样式还是由我们自己来完成。这显然不是我们的强项因此后端开发人员一般都喜欢使用一些现成的 UI 组件拿来即用常见的例如
BootStrapLayUIEasyUIZUI
然而这些 UI 组件的基因天生与 Vue 不合因为他们更多的是利用 DOM 操作借助于 jQuery 实现而不是 MVVM 的思想。而目前与 Vue 吻合的 UI 框架也非常的多国内比较知名的如
element-uii-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.comleyou.com管理系统域名manage.leyou.com网关域名api.leyou.com
3.2 域名解析
当我们在浏览器输入一个域名时浏览器是如何找到对应服务的 IP 和端口的呢 本地域名解析 浏览器会首先在本机的 hosts 文件中查找域名映射的 IP 地址如果查找到就返回 IP 地址没找到则进行域名服务器解析。 域名服务器解析 本地解析失败才会进行域名服务器解析域名服务器就是网络中的一台计算机里面记录了所有注册备案的域名和 IP 映射关系。 3.3 解决域名解析问题
我们还在开发阶段不可能去买个域名因此我们可以修改本地的 hosts 文件实现对域名的解析。 下载并安装 SwitchHosts这是一个管理 hosts 的工具 右键 SwitchHosts以管理员身份运行 添加映射关系点击左边按钮生效 现在试试能不能 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 服务器相比 ApacheNginx 使用更少的资源支持更多的并发连接体现更高的效率这点使 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 应用服务器 TomcatJettyWeb 服务器 ApacheNginx
二者区分
Web 服务器不能解析 jsp 等页面只能处理 html、css、js 等静态资源。Web 服务器的并发能力远高于Web 应用服务器。
3.4.3 Nginx 作为网关
Nginx 可以作为 Web 服务器但更多的时候我们把它作为网关因为它具备网关必备的功能
反向代理负载均衡动态路由请求过滤
3.4.4 Nginx 作为反向代理服务器 正向代理介绍 张三找李四借钱李四觉得张三不可靠不借钱给张三。于是张三找到王五请王五去找李四借钱。王五找李四借钱李四觉得王五可靠把钱借给了王五。但是李四并不知道这个钱是借给了张三李四是借给了王五最后是王五把钱借给了张三。在这个借钱的过程中王五就是代理也可以说是正向代理他隐藏了真实的借钱人。
正向代理的过程中让一台服务器代理客户端客户端的所有请求都交给代理服务器处理这样就隐藏了真实的客户端。 反向代理介绍 我们打电话给 10086 客服可能一个地区会有几十个客服我们不知道会是其中的哪一个客服接电话但一定会有一个客服接电话。在这个打电话给 10086 的过程中10086 这个总机号码就是反向代理它隐藏了真实的客服。
反向代理的过程中让一台服务器代理真实服务器用户访问时不再是访问真实服务器而是代理服务器这样就隐藏了真实的服务器。 Nginx 作为反向代理服务器 Nginx 可以作为反向代理服务器来使用
我们需要提前在 Nginx 中配置好反向代理的规则不同的请求交给不同的真实服务器处理当请求到达 NginxNginx 会根据已经定义的规则进行请求的转发从而实现路由功能这样就可以解决我们前面所说的端口问题了 3.4.5 安装和使用 Nginx 下载并解压 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
启动start nginx.exe停止nginx.exe -s stop重新加载nginx.exe -s reload
打开浏览器访问 http://manage.leyou.com
总结实现域名访问的具体流程 4. 实现商品分类查询
商城的核心自然是商品而商品多了以后肯定要进行分类并且不同的商品会有不同的品牌信息我们需要依次去完成商品分类、品牌、商品的开发。
4.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
) ENGINEInnoDB AUTO_INCREMENT1424 DEFAULT CHARSETutf8 COMMENT商品类目表类目和商品(spu)是一对多关系类目与品牌是多对多关系;因为商品分类会有层级关系因此这里我们加入了 parent_id 字段对本表中的其它分类进行自关联。 4.2 实现展示静态数据 在浏览器点击分类管理菜单可以看到路由路径 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?pid0
这个请求路径怎么来的呢
Category.vue 中我们使用了相对路径
/item/category/list
讲道理发起的请求地址应该是
http://manage.leyou.com/item/category/list
但实际却发起的请求地址是
http://api.leyou.com/api/item/category/list?pid0
这是因为我们有一个全局的配置文件对所有的请求路径进行了约定
基本路径是 http://api.leyou.com并且默认加上了 /api 的前缀这恰好与我们的网关设置匹配。
接下来我们要做的事情就是编写后台接口返回对应的数据即可。
4.3.2 实体类 在 leyou-item-interface 中添加通用 Mapper 依赖
dependencygroupIdtk.mybatis/groupIdartifactIdmapper-spring-boot-starter/artifactId
/dependency在 leyou-item-interface 中添加实体类 Table(name tb_category)
public class Category {IdGeneratedValue(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 在 leyou-item-service 中添加 Mapper 接口 public interface CategoryMapper extends MapperCategory {
}在启动类上添加扫描 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 ListCategory queryCategoryById(Long pid) {Category category new Category();category.setParentId(pid);ListCategory 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 ResponseEntityListCategory queryCategoryById(RequestParam(pid) Long pid) {if (pid null || pid.longValue() 0) {return ResponseEntity.badRequest().build(); // 响应 400}ListCategory categories categoryService.queryCategoryById(pid);if(CollectionUtils.isEmpty(categories)) {return ResponseEntity.notFound().build(); // 响应 404}return ResponseEntity.ok(categories);}
}
4.3.6 测试 启动三个服务 不经过网关访问 经过网关访问 最后到后台管理系统的分类管理菜单 发现报错了
浏览器直接访问没事但是这里却报错什么原因
这其实是浏览器的同源策略造成的跨域问题。
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 简单请求 简单请求的定义 满足以下两个条件就属于简单请求 请求方法是以下三种方法之一 HEADGETPOST
2.HTTP 的头信息不超出以下几种字段
AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type只限于三个值 application/x-www-form-urlencodedmultipart/form-datatext/plain 发起简单请求 当浏览器发现发起的 Ajax 请求是简单请求时会在请求头中携带一个字段 OriginOrigin 中会指出当前请求属于哪个域服务会根据这个值决定是否允许其跨域。 简单请求的响应 如果服务器允许跨域需要在返回的响应头中携带下面信息
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charsetutf-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接下来会用到的请求方式比如 PUTAccess-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; charsetutf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout2, max100
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)
) ENGINEInnoDB AUTO_INCREMENT325400 DEFAULT CHARSETutf8 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)
) ENGINEInnoDB DEFAULT CHARSETutf8 COMMENT商品分类和品牌的中间表两者是多对多关系;
但是你可能会发现这张表中并没有设置外键约束似乎与数据库的设计范式不符。为什么这么做
外键会严重影响数据库读写的效率数据删除时会比较麻烦
6.2.3 实体类
Table(name tb_brand)
public class Brand {IdGeneratedValue(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 MapperBrand {
}6.2.5 Service
编写 Service 之前先看看前端给我们发来的请求参数和要得到的响应结果 由此我们可以得知
请求方式Get请求路径/item/brand/page
请求参数根据我们刚才编写的页面有分页功能有排序功能有搜索功能 page当前页introws每页大小intsortBy排序字段Stringdesc是否为降序booleankey搜索关键词String
响应结果分页结果一般至少需要两个数据 total总条数items当前页数据totalPage有些还需要总页数 分页结果类 由响应结果可知我们还需要一个分页结果类。另外这个类以后可能在其它项目中也有需求因此我们将其抽取到 leyou-common 中。 package com.leyou.common.pojo;import java.util.List;public class PageResultT {private Long total; //总条数private ListT items; //当前页数据private Integer totalPage; //总页数public PageResult() {}public PageResult(Long total, ListT items) {this.total total;this.items items;}public PageResult(Long total, ListT items, Integer totalPage) {this.total total;this.items items;this.totalPage totalPage;}// getter 和 setter 方法、toString 方法省略
}
在 leyou-item-service 中引入 leyou-common 的依赖
dependencygroupIdcom.leyou.common/groupIdartifactIdleyou-common/artifactIdversion1.0-SNAPSHOT/version
/dependency编写 service
Service
public class BrandService {Autowiredprivate BrandMapper brandMapper;/*** 根据查询条件分页并排序查询品牌信息** param key 搜索关键词* param page 当前页* param rows 每页大小* param sortBy 排序字段* param desc 是否为降序* return*/public PageResultBrand 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));}ListBrand brands brandMapper.selectByExample(example);// 包装成 pageInfoPageInfoBrand brandPageInfo new PageInfo(brands);// 包装成分页结果集返回return new PageResultBrand(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 ResponseEntityPageResultBrand 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) {PageResultBrand brandPageResult brandService.queryBrandsByPage(key, page, rows, sortBy, desc);if (CollectionUtils.isEmpty(brandPageResult.getItems())) {return ResponseEntity.notFound().build();}return ResponseEntity.ok(brandPageResult);}
}
6.2.7 测试
