一个模仿-百度一下，你就知道-的代码

Posted 2020-10-17

<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"}]}

这样就??了，一个模仿百度的搜索就做好了，当然页面没有怎么多的内容。