<div id="mybody"> <div id="navigation_bar" v-if="logoShow"> //两个span之间如果换行的话就会产生空格,这样写的话就没有空格,也显得比较专业 <span>新闻</span><span>hao123</span><span>地图</span><span>视频</span><span>贴吧</span><span>学术</span><span>登录</span><span>设置</span> </div> <div id="logoDiv" v-if="logoShow"> <img src="img/bd_logo1.png" width="270" height="129"/> </div> <div id="inputDiv" v-bind:style="{margin:inputDivStyle}"> <input id="inputView" type="text" v-model="word"><input id="submitView" type="submit" value="百度一下"> <div id="keywordDiv" v-if="keywordShow"> <div v-for="item in keywordList" @click="selectItem(item)">{{item.word}}</div> </div> </div> <div id="newListDiv"> <div v-for="item in newsList"> <div class="newsitem_title">{{item.title}}</div> <div class="newsitem_desc">{{item.desc}}</div> <div class="newsitem_href">{{item.href}}</div> </div> </div> </div>
这里是样式(css)
注意:前端页面中不能出现红、黑、黄等的这种极致的颜色,不然会显得页面很丑,也不高大上
<style type="text/css"> html,body{ width: 100%;/*默认值是0*/ height: 100%;/*默认值是0*/ margin: 0px; padding: 0px; } #mybody{ width:100%; height: 100%; /*background-color:red;*/ } #navigation_bar{ width: 100%; height: 40px; /*background-color: green;*/ text-align: right;/*文字内容靠右*/ line-height: 40px;/*保证文字的垂直方向居中*/ } #navigation_bar span{ padding: 0px 10px 0px 0px; font-size: 14px; /*color:#333;*/ color:#404040; } #logoDiv{ width: 270px; height: 129px; /*background-color: blue;*/ margin: 0 auto; /* 布局居中的一种写法 */ } #inputDiv{ width: 655px; height: 180px; /*background-color: yellow;*/ /*margin: 0 auto;此处不写,因为在后面进行绑定*//* 布局居中的一种写法 */ padding: 15px 0px 0px 0px; } #inputView{ border:solid 1px #4791ff; width:530px; height: 15px; font-size: 16px; padding: 10px; } #submitView{ width:98px; height:37px; border: solid 1px #4791ff; background-color: #3385ff; color: #ffffff; font-size: 15px; cursor: pointer; } #submitView:HOVER { background-color: #317ef3;/*鼠标移动过去时,背景颜色发生变化*/ } #keywordDiv{ width: 650px; height: 100px; background-color: #ffffff; border: solid 1px #cccccc; } #keywordDiv div{ height: 20px; line-height: 20px; font-size: 16px; font-weight: bold; padding: 5px 0px 0px 5px; } .newsitem_title{ color: blue; font-size: 16px; padding: 10px 0px 0px 10px; } .newsitem_desc{ color: #666666; font-size: 12px; padding: 10px 0px 0px 10px; } .newsitem_href{ color: #528000; font-size: 12px; padding: 10px 0px 30px 10px; } </style>
这里是JavaScript
<script src="js/vue.js"></script> //引入vue.js文件 <script src="js/jquery-3.2.1.min.js"></script> <script> var clickMyself = false;//用于标记是否我自己点击而产生对model一个改变 var myModel = {logoShow:true,keywordShow:false,word:‘‘,inputDivStyle:‘0 auto‘,keywordList:[],newsList:[]}; var myViewModel = new Vue({ el:‘#mybody‘, data:myModel, methods:{ selectItem:function(item){ this.word=item.word; this.keywordShow=false; clickMyself = true;//标记一下,是我自己点击 } }, computed:{ }, watch:{ word:function(){ if(clickMyself==true){ clickMyself = false; console.log(‘客户自己选中,不是输入,此方法自动退出‘); return;//如果是自己点击,就不用再去访问下面代码,避免重复访问后台 } console.log(‘模型word的值变了‘); this.logoShow=false; this.inputDivStyle=‘10px‘; //this.keywordShow=true;//移动到成功事件之后 $.ajax({ url:‘ServiceAPI001.jsp‘, type:‘GET‘, //data:clientInput, dataType:‘json‘, timeout:3000, success:function(result){ myModel.keywordShow=true; myModel.keywordList = result.keywordList; myModel.newsList = result.newsList; }, error:function(XMLHttpRequest, textStatus, errorThrown){ alert(‘服务器忙,请不要说脏话,理论上大家都是文明人‘); alert(textStatus+XMLHttpRequest.status); } }); } } }); </script>
然后再写一个jsp文件,出现一点内容
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% Thread.sleep(500); %> //这里添加的是内容,也就是你在搜索框随便打上东西然后会出现的内容 {"keywordList":[{"word":"刘亦菲重返校园"},{"word":"刘亦菲"},{"word":"刘德华"},{"word":"刘诗诗"}],"newsList":[{"title":"新闻标题1","desc":"内容描述1","href":"http://xxx/link1.jsp"},{"title":"新闻标题2","desc":"内容描述2","href":"http://xxx/link2.jsp"},{"title":"新闻标题3","desc":"内容描述3","href":"http://xxx/link3.jsp"}]}
这样就??了,一个模仿百度的搜索就做好了,当然页面没有怎么多的内容。
时间: 2024-10-01 09:44:29