vue实现搜索历史
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<style type="text/css">
body {
background-color: #FFFFFF
}
</style>
</head>
<body>
<div id="app">
<header class="mui-bar mui-bar-nav">
<a onclick="javascript:history.back(-1)"
class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">搜索内容</h1>
</header>
<div style="height: 50px"></div>
<div style="display: flexmargin: 10px auto 0px automargin-left: 20px">
<div style="width: 80%position: relative">
<!-- 搜索按钮 -->
<input type="submit" value=""
style="border: nonebackground-color: transparentbackground-image:url(images/ss.png)width: 25pxheight: 25pxposition: absoluteleft: 15pxtop: 7pxbackground-size: 100% 100%">
<!-- 搜索文本 -->
<input v-model="input"
style="border: noneborder-radius: 20pxwidth: 100%background-color: #DCDCDCpadding-left: 20%"
type="text" placeholder="请输入你想要的">
</div>
<div>
<button style="border: noneheight: 40pxcolor: #FF0000font-size: 17px"
@click="handleSearchResult(input)">搜索</button>
</div>
</div>
<div>
<div
style="display: flexjustify-content: space-betweenwidth: 85%margin: 0 autoalign-items: centerfont-size: 15px">
<div>热门搜索</div>
</div>
<div style="display: flexwidth: 85%flex-wrap: wrapmargin: 0 automargin-top: 2%">
<div style="width: autobackground-color: #FFE5E5color: #FF0000padding: 2%border-radius: 10pxfont-size: 14pxmargin: 2% 2% 0px 0px"
v-for="(i,index) in rmlist" :key="index">{{i}}</div>
</div>
</div>
<div style="margin-top: 20px">
<div
style="display: flexjustify-content: space-betweenwidth: 85%margin: 0 autoalign-items: centerfont-size: 15px">
<div>历史搜索</div>
<div style="color: #FF0000" @click="clearHistory">清空</div>
</div>
<div style="display: flexwidth: 85%flex-wrap: wrapmargin: 0 automargin-top: 2%">
<div v-if="historyList.length == 0" style="color: #CCCCCCfont-size: 12px">暂无搜索记录</div>
<div v-else v-for="(historyItem, index) in historyList" :key="index"
@click="handleSearchResult(historyItem)"
style="width: autobackground-color: #FFE5E5color: #FF0000padding: 2%border-radius: 10pxfont-size: 14pxmargin: 2% 2% 0px 0px">
{{historyItem}}
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
input: '',
historyList: [],
rmlist: ['男装', '女装', '休闲裤', '鸿星尔克', '蔬菜']
},
mounted() {
if (localStorage.getItem('localHistory') !== null) {
this.historyList = localStorage.getItem('localHistory').split('|')
}
},
methods: {
handleSearchResult (val) {
if (val === '') {
alert('请输入搜索内容！')
return
}
this.setlocalHistory(val) // 将搜索值加入本地localStorage
this.historyList = localStorage.getItem('localHistory').split('|') // 从本地localStorage取出搜索历史并展示
this.input = '' // 清空输入框
// alert(`跳转至 ${val} 搜索结果页`) // 跳转至搜索结果页
},
setlocalHistory (val) {
val = val.trim()
let localHistory = localStorage.getItem('localHistory')
if (localHistory === null) {
localStorage.setItem('localHistory', val) // 若未设置过则直接设置本地存储
}else {
let localHistoryArray = localHistory.split('|').filter(item =>item != val) // 删除搜索历史中与本次输出重复项
if (localHistoryArray.length >0) {
localHistory = val + '|' + localHistoryArray.join('|') // 新增记录
}
if (localHistory.split('|').length >10) { // 最大历史搜索记录10条
localHistoryArray = localHistory.split('|')
localHistoryArray.pop() // 删除最旧一项
localHistory = localHistoryArray.join('|')
}
localStorage.setItem('localHistory', localHistory) // 存入本地
}
},
clearHistory () {
localStorage.removeItem('localHistory') // 清空搜索历史
this.historyList = []
}
}
})
</script>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>
我猜你说的是前端和后端 , 我三个都说说吧前端主要是直接与用户交互的 , 主要涉及的是html , css , js等技术
后端主要是用于为前端提供数据以及从前端获取数据 , 涉及到的技术主要是PHP , javaweb , 数据库等
而后台一般是指管理员操作的系统/软件 , 这本身也是个软件/网页 , 包括它自己的前端和后端
举个例子:
你来百度搜索东西, 你看到的这个网页是前端, 你输入搜索内容是前端 , 百度把你的内容进行分析然后返回给你搜索结果是后端, 你看到的搜索结果的页面是前端 , 而百度的数据分析员浏览近一个月的搜索记录和相关事件热度, 这是后台
