Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use Elastic search". Friends who are interested might as well take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use Elastic search.

1. Front end

Specification options: click the specification options to piece together the conditions

Click unlimited. You need to remove the corresponding conditions.

"specList": {"body color": "gold", "memory": "3GB"}, 1.2, front-end implementation

1. Modify the ~ / pages/_cid.vue component to bind events to each option (including "unlimited")

Parameters: specification name, value of option, event (mouse event object, for echo)

2. Write a specSearch function to manipulate data query conditions. You need to add specList conditions to searchMap.

If the option value is not Null, add a condition

If the option value is Null, delete the condition

SpecSearch (specName, optionName, e) {/ / Parameter 1:specName specification name / / value of parameter 2:optionName specification option / / 1) processing condition: select a value, if there is an add condition, if there is no deletion condition if (optionName) {/ / exist this.searchMap.specList [specName] = optionName;} else {/ / there is no delete this.searchMap.specList [specName] } / / query this.searchList () again; / / the 1:jquery code processes the echo / / get the event source a tag, get the parent tag, add the usage time $(e.target). Parent (). AddClass ("cur"); / / get all the parent elements of the a tag, remove the style $(e.target). Siblings (). RemoveClass ("cur") }, 1.2.1, Brand query

You need to use the modified brand to query.

BrandSearch (bid) {/ / switch brand this.searchMap.brandId = bid; / / query this.searchList ();}, 1.2.2, keyword query

1. Modify the component of the header search, add the keyword variable to bind the data to the text box, and bind events to the search button.

Data () {return {keyword: ""};}

2. Operate vuex to save keyword to vuex

Note: there must be corresponding variables in vuex

Sotre/index.js

/ / state region, which is equivalent to defining the variable export const state = () = > ({user: null, keyword: null}) / / mutations region, used to modify the data export const mutations = {setData (state, obj) {state [obj.key] = obj.value}}

HeaderSearch.vue

3. Modify the list page, add watch to monitor the keyword in vuex, and query if the data changes.

Note: only normal fuction can be used in watch, not arrow function.

Watch: {"$store.state.keyword": function (newValue, oldValue) {/ / add keyword query condition this.searchMap.keyword = newValue; / / query this.searchList ();}}

1.2.3, sort

Demand for price:

On the first click, sort by price ascending order

After the first time, the operation is performed according to the reverse of the current sort.

1. Bind events to the sorted buttons, pass unique identifiers (xl, sj, etc.), and highlight them after clicking.

Sort: volume price ↑ ↓ comments On-shelf time and price:-

2. Write the sorting function sortSearch, and modify the ascending or descending order method according to the number of clicks.

SortSearch (sortBy) {/ / first click, then switch sorting method if (this.searchMap.sortBy = = sortBy) {/ / click the second time to switch sorting method this.searchMap.sortWay = this.searchMap.sortWay = = "asc"? "desc": "asc";} else {/ / first default ascending order this.searchMap.sortBy = sortBy; this.searchMap.sortWay = "asc";} this.searchList ();}

1.2.4, price range

-1.2.5, paging

1. Copy the paging component

Front page previous page {{n}} next page last page total {{totalPage}} page to page determine export default {data () {return {page: 1, / / current page totalPage: 0, / / total number of pages goNum: 1 / / jump page} }, methods: {pageClick: function (n) {/ / modify the current page this.page = parseInt (n); / / notify the call to modify the data this.$emit ("page_changed", n) }, computed: {/ / calculation attribute pageRange: function () {/ / calculate the total number of pages-- 100 this.totalPage 20 = 5102 this.page_size 20 = 6 if (this.total% this.page_size = 0) {/ / divisible this.totalPage = this.total / this.page_size;} else {this.totalPage = parseInt (this.total / this.page_size) + 1 } / / paging range let star = Math.max (this.page-5,1); / / range start: get a number > = 1 let end = Math.min (this.page + 4, this.totalPage); / / end of range: get a

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.