乐优商城前台编写

最新推荐文章于 2022-06-01 14:55:25 发布

小白要变大牛

最新推荐文章于 2022-06-01 14:55:25 发布

阅读量993

点赞数 1

分类专栏：笔记文章标签： java

本文链接：https://blog.csdn.net/hnhroot/article/details/121422863

版权

笔记专栏收录该内容

56 篇文章 1 订阅

订阅专栏

后台的前端是单页面的，就一个index.html。而前台的是多页面的。单页面多搜索引擎的搜索不友好，而后台个人理解是个人使用所以用的越少越好，而前台却需要很多人用所以尽量让他们搜索的到所以是多页面.
webpack是适用于单页面的，而我们的前台却是多页面的这时候需要用LIve-Server

软件的安装和修改以及使用：

最终网站是打包扔到nginx。
安装和运行LIve-Server：
安装：npm install -g live-server
运行：live-server

另外，你可以在运行命令后，跟上一些参数以配置：

- `--port=NUMBER` - 选择要使用的端口，默认值：PORT env var或8080
- `--host=ADDRESS` - 选择要绑定的主机地址，默认值：IP env var或0.0.0.0（“任意地址”）
- `--no-browser` - 禁止自动Web浏览器启动
- `--browser=BROWSER` - 指定使用浏览器而不是系统默认值
- `--quiet | -q` - 禁止记录
- `--verbose | -V` - 更多日志记录（记录所有请求，显示所有侦听的IPv4接口等）
- `--open=PATH` - 启动浏览器到PATH而不是服务器root
- `--watch=PATH` - 用逗号分隔的路径来专门监视变化（默认值：观看所有内容）
- `--ignore=PATH`- 要忽略的逗号分隔的路径字符串（[anymatch](https://github.com/es128/anymatch) -compatible definition）
- `--ignorePattern=RGXP`-文件的正则表达式忽略（即`.*\.jade`）（**不推荐使用**赞成`--ignore`）
- `--middleware=PATH` - 导出要添加的中间件功能的.js文件的路径; 可以是没有路径的名称，也可以是引用`middleware`文件夹中捆绑的中间件的扩展名
- `--entry-file=PATH` - 提供此文件（服务器根目录）代替丢失的文件（对单页应用程序有用）
- `--mount=ROUTE:PATH` - 在定义的路线下提供路径内容（可能有多个定义）
- `--spa` - 将请求从/ abc转换为/＃/ abc（方便单页应用）
- `--wait=MILLISECONDS` - （默认100ms）等待所有更改，然后重新加载
- `--htpasswd=PATH` - 启用期待位于PATH的htpasswd文件的http-auth
- `--cors` - 为任何来源启用CORS（反映请求源，支持凭证的请求）
- `--https=PATH` - 到HTTPS配置模块的路径
- `--proxy=ROUTE:URL` - 代理ROUTE到URL的所有请求
- `--help | -h` - 显示简洁的使用提示并退出
- `--version | -v` - 显示版本并退出

启动：live-server --port=9002 其中9002是端口
前台的网址想要变成像后台那样的就需要先去switchhost软件和nginx设置端口，其中配置的话前台的端口应该在第一位如下图：

因为如果switchhost里的端口去nginx里面找如果没有相匹配的那就有限访问第一个，前台的网址越多人访问越好，所以前台的应该在第一个配置

安装Elasticsearch：他是处理搜索业务
为什么用它处理：因为传统的数据库查询面对复杂的查询力不从心，它是存储数据的
这个项目是在linux安装，它不支持在root安装。
linux新增一个用户：useradd leyou就创建一个leyou用户然后root用户切换到乐游账户是su - leyou
linux当我们新创建一个用户，他会以用户名出现在home文件夹里

如上图：这个文件时leyou账户的，但是ll的时候出现root：root，要想修改就root账户状态下去home的leyou账户中找到这个文件chown leyou:leyou elasticsearch-6.3.0.tar.gz就变成leyou：leyou
但是这是红色的文件夹，想要变成绿色的就chmod 755 elasticsearch-6.3.0.tar.gz
然后去leyou账户su - leyou去解压这个压缩包 tar -zxvf elasticsearch-6.3.0.tar.gz其中-zxvf可以当做最小微分首字母缩写，然后从命名给压缩过的文件elasticsearch-6.3.0为elasticsearch可以输入这个命令 mv elasticsearch-6.3.0 elasticsearch就是剪切elasticsearch-6.3.0为elasticsearch然后elasticsearch-6.3.0名字就变为elasticsearch了
配置的话就是先修改config文件，然后修改 jvm.options然后修改elasticsearch.yml然后在elasticsearch下创建一个data，注意他只能让本地访问如果想要全部访问就去config文件里面修改配置在network中修改为0.0.0.0

kibana安装：

安装在Windows里，想要启动这个软件就要去kibana-6.3.0-windows-x86_64\config里修改配置文件告诉它elasticsearch在什么地方

其中那个url就是elasticsearch运行以后的rest接口，

安装analysis分词器：是在linux里安装的，安装在elasticsearch的插件目录就行也就是elasticsearch/plugins目录，然后让是zip的压缩包，用命令unzip elasticsearch-analysis-ik-6.3.0.zip然后在因为这是插件目录所以压缩包用完就删了不然就当做也是插件了用rm -f elasticsearch-analysis-ik-6.3.0.zip
前端：
在js文件中有个自己封装的common.js文件其中有个const ly = leyou =｛。。。。｝这是封装了一个对象而且使用的时候用ly和leyou都一样，这两个是等价的，里面有个getUrlParam是获取网页中的搜索框中的值，如下图示例

其中ly里面还有个formatPrice方法，是格式化数据，因为数据库的价格是分为单位，而展现出来是元为单位，所以这个方法可以转换如图

formatDate是格式化日期
stringify是将对象转化为json
parse是将json转化为对象

后端：

elasticsearch索引

索引就是相当于mysql的数据库，例如我的项目连的是hm49的数据库，所以索引就是hm49
类型就是表的类型，例如我hm数据库有表tb_brand就是她的了类型就是表
文档就是相当于tb_brand的一条记录
字段你就是故名是以就是比如一个id，但是他的是这个字段的一列

mapping的是否存储就是在搜索中是否要展示，要展示就是要存储

创建索引他语法就是json。
创建索引用PUT
例如：增加名字为hmh的
PUT /hmh
{
"settings":{
"number_of_shards":1 //是否分片，我们就有一台虚拟机所以就是1
"number_of_replicas":0

}
}
查找名字为hmh的
GET /hmh

删除名字为hmh的
DELETE /hmh

映射：

其中类型text和keyword的区别是text可以分词

post是新增 get是查询 delete 是删除
如下图新增一个名字为heima的表为goods的id为1，第二个是查询第三个是删除id为1的

POST /heima/goods/1                    
{
    "title":"d大da大米手机",
    "images":"http://image.leyou.com/12479122.jpg",
    "price":2799.00,
    "saleable": true
}

GET /heima/_search
{
  "query": {
    "match_all": {}
  }
}

DELETE heima/goods/1

在查询有一个match，如下图

这个意思是查找title字段的内容为x小x米手机的，但是他是并集，有分词，比如会出现满足x小x小的内容显示出来满足米手机的显示出来但是实际网页搜索是比如京东小米手机他不会出现小米电视什么的只会出现手机，这时候需要交集

GET heima/_search
{
  "query": {
    "match": {
      "title": {
        "query": "x小x小米手机"
        , "operator": "and"
      }
    }
  }
}

如上就是可以只出现x小x小米手机这个内容的但是and和or有点非黑即白，可以添加一个百分比，如果内容是10个字，设置百分之20这样输入两个字就可以查出来了
高级查询：must+must是求交集 should+should是并集

范围查询：

模糊查询：

fuzziness是最大范围
排序：关键字：sort ，如下图将价格升序排序

聚合：常用的是桶和度量，其中桶就是进行划分，比如按照年龄段进行划分10-20，20-30，30-40等

Date Histogram Aggregation：根据日期阶梯分组，例如给定阶梯为周，会自动每周分为一组
Histogram Aggregation：根据数值阶梯分组，与日期类似
Terms Aggregation：根据词条内容分组，词条内容完全匹配的为一组
Range Aggregation：数值和日期的范围分组，指定开始和结束，然后按段分组
bucket aggregations 只负责对数据进行分组，并不进行计算，因此往往bucket中往往会嵌套另一种聚合：metrics aggregations即度量
度量是分组以后进行计算：例如求平均值、最大、最小、求和等，这些在ES中称为度量

比较常用的一些度量聚合方式：
Avg Aggregation：求平均值
Max Aggregation：求最大值
Min Aggregation：求最小值
Percentiles Aggregation：求百分比
Stats Aggregation：同时返回avg、max、min、sum、count等
Sum Aggregation：求和
Top hits Aggregation：求前几

Value Count Aggregation：求总数
重点：Spring Data elasticsearch
高级查询：
在一个区间是用findBy字段between（a，b）查询区间
自定义查询：NativeSearchQueryBuilder自定义查询构造器
他的方法很多，添加聚合，放分页条件，还可以过滤。
比如：

@Test
    public void testCreate(){
        Item item = new Item(1L, "小米手机7", " 手机",
                "小米", 3499.00, "http://image.leyou.com/13123.jpg");
        itemRepository.save(item);
        NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();
        queryBuilder.withQuery(QueryBuilders.matchQuery("title","手机"));//普通查询以title为字段，内容为手机
        Page<Item> search = this.itemRepository.search(queryBuilder.build());//保存到集合
        System.out.println(search.getTotalPages());//打印页数
        System.out.println(search.getTotalElements());//打印条数
        search.forEach(System.out::println);//打印内容
    }

queryBuilder.withPageable(PageRequest.of(0,2));//分页查询，第一页开始，每页两条

如上是分页，然后他是在上上个代码段的NativeSearchQueryBuilder方法下边

queryBuilder.withSort(SortBuilders.fieldSort("price").order(SortOrder.DESC));

如上是降序排序；
聚合查询：

 //初始化自定义查询器
        NativeSearchQueryBuilder nativeSearchQueryBuilder = new NativeSearchQueryBuilder();
        //添加聚合查询名字为brandAggie，字段为brand
        nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("brandAgg").field("brand"));
        //添加结果集过滤，不包括任何字段
        nativeSearchQueryBuilder.withSourceFilter(new FetchSourceFilter(new String[]{}, null));
        //执行聚合查询
        AggregatedPage<Item> search1 = (AggregatedPage<Item>) this.itemRepository.search(nativeSearchQueryBuilder.build());
        //解析聚合结果集,根据聚合的类型以及字段类型进行强转，brand是字符串的类型的，集合类型是词条聚合，brangagg-通过聚合名称获取聚合对象
        StringTerms brandagg = (StringTerms)search1.getAggregation("brandAgg");
        //获取桶的集合
        List<StringTerms.Bucket> buckets = brandagg.getBuckets();
        buckets.forEach(bucket -> {
            System.out.println(bucket.getKeyAsString());
            System.out.println(bucket.getDocCount());
        });

添加平均值如果，就在添加聚合以后选定字段后面在.上一个如下代码

 nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("brandAgg").field("brand")
                .subAggregation(AggregationBuilders.avg("price_avg").field("price")));//添加计算price_avg是聚合名称，聚合字段price

然后在下边添加获取集合

//获取子聚合的map集合：key就是聚合名称，value是对应的子聚合对象
            Map<String, Aggregation> stringAggregationMap = bucket.getAggregations().asMap();
            InternalAvg price_avg = (InternalAvg)stringAggregationMap.get("price_avg");

search方法：先QueryBuilders.？其中？代表matchQuery（"字段","条件"）

然后this.itemRepository.search(将上边的弄上去)。
聚合就是比如brand字段有一个信息为小米，但是下一个又是小米，这时候就可以查出来他有几个小米的为brand
搭建搜索微服务：

在后台中包leyou-search就是搜索微服务的功能里面

总结：day10：

小白要变大牛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
乐优商城前台编写

后台的前端是单页面的，就一个index.html。而前台的是多页面的。单页面多搜索引擎的搜索不友好，而后台个人理解是个人使用所以用的越少越好，而前台却需要很多人用所以尽量让他们搜索的到所以是多页面.webpack是适用于单页面的，而我们的前台却是多页面的这时候需要用LIve-Server最终网站是打包扔到nginx。安装和运行LIve-Server：安装：npm install -g live-server运行：live-server另外，你可以在运行命令后，跟上一些参数以配置：-..
复制链接

扫一扫