Let's make a browser homepage of our own!

For us programmers, the browser is the most commonly used every day. Because the homepages of browsers like Google, Baidu, Firefox, and Bing are not very beautiful and there are few wallpapers, so I made a browser homepage. At present, the functions are relatively few and will be gradually improved in the future. Let me show you first. Without further ado, let's see the effect.

Video Link:
Demo Video

Rec 0001

1. The technology used

The techniques used are very simple. Mainly the following five:

• html : html need not go into details, the main page is written with it;
• JS : JS is mainly used to obtain some document objects that are inconvenient to use vue;
• JQuery : Use JQuery to provide AJAX requests;
• CSS : In addition to general styles, CSS animations are mostly used here;
• vue : I originally planned to use the original "three axes", but later found that there are more operations on the dom, and then added Vue.

2. Function introduction

2.1 Search by keyword

Demonstration:

The above demonstration is to usebaiduA search engine that can perform matching searches based on keywords.

2.2 Search engine switching

When the mouse hovers over the picture on the left side of the search box , the current search engine will be displayed, click 鼠标左键to switch the search engine.

2.3 Common website navigation

Click 鼠标左键to bring up the menu, there is **【Common URLs】** in it, here we can bookmark some of the URLs we visit frequently.

2.4 Wallpaper switching

The last **[Settings]** menu page can change the wallpaper.

Three, the premise

3.1 CSS animation

CSS animation is used in this project, which can make the page look smooth and comfortable. We only need to remember the three properties of CSS animation:
(1) animation-delay: Animation delay, which is how many seconds the animation is delayed to play.
(2) animation-name: Animation name, indicating the unique identification of the animation.
(3) animation-duration: How many seconds to play the animation
Example:

#hours_span, #minute_span, #second_span {
    
    
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 40px;
    color: rgba(245, 245, 245, 0);
    animation-delay: 0.5s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    cursor: pointer;
}

@keyframes hms {
    
    
    from {
    
    
        color: rgba(255, 255, 255, 0);
    }
    to {
    
    
        color: rgba(255, 255, 255, 1);
    }
}

The above css code realizes idthat the font color of the labels of hours_span, minute_span, and will be changed from fully transparent to opaque, and it will be executed after 0.5s of page loading , and the execution time is 0.5s. If you want to know more about css animation: click heresecond_span

3.2 Image bed

Because we don't have a server for storing pictures, I uploaded those background pictures and icons to the picture bed, and didn't save them in the project file. The picture bed I use: picture bed

3.3 Ali vector icon library

Most of the icons in the project come from: Ali Vector

3.4 Introduction to URL parameters of Baidu and Google

3.4.1 Example of Baidu keyword search:

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%B5%8B%E8%AF%95&fenlei=256&rsv_pq=95f456900001c037&rsv_t=b612aTU10cMh7uf54aJUvGJ0daBdkqFniQa2vCOlJ3I%2FjqjGEs7eGV57w48&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=6&rsv_sug1=5&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=1180&rsv_sug4=1180&rsv_sug=2

(1) Basic url:

http://www.baidu.com/

(2) Important parameters:

• ?: "?" followed by splicing request parameters. Multiple parameters are connected using "&".

• s: Indicates that the search is an abbreviation of search .

• ie: Indicates that the keyword encoding format defaults toutf-8。

• wd: Indicates the keyword to retrieve The keyword in the above example iswd=%E6%B5%8B%E8%AF%95This is the result of converting the encoding format to utf-8, and converting it to Chinese is a test. (important)

• bs: search history keywords.

(3) Experiment:

https://www.baidu.com/s?ie=utf-8&wd=test

Access results:

3.4.1 Google keyword search example:

https://www.google.com/search?q=%E6%B5%8B%E8%AF%95&oq=%E6%B5%8B%E8%AF%95&aqs=chrome…69i57j69i60l2.2144j0j15&sourceid=chrome&ie=UTF-8

(1) Basic url

https://www.google.com/

(2) Important parameters

• search: Indicates search.
• q: Indicates a keyword.
• ie: Indicates that the keyword encoding method is the defaulturf-8。
• oq: The main word of the related search, that is, the meaning of the core search word.

(3) Experiment:

https://www.google.com/search?q=test95&oq=test=&sourceid=chrome&ie=UTF-8

4. Code implementation

4.1 Create a project

I usecoding toolIt is webstorm , of course you can also use HBuilder or Notepad . The project directory is as follows:

These folders are created at will.

• page : where the page is stored.
• store : Store resources, css, js, icons, image...
  mainly the above two folders, and the rest can be ignored. Let’s focus on the data folder under the store. The json files are some fake data. For example, the commonly used website information is from this The ones read in the folder will be introduced one by one later.

Let's focus on the data folder under the store folder. Some json data is stored here, which is used to simulate the data returned from the server. If you want to use the simulated data, you only need to execute the requested url where the file is located . folder. Such as the json data of common URLs : **

{
  "result": [
    {
      "netName": "知乎",
      "url": "https://www.zhihu.com/",
      "icon": "https://www.zhihu.com/favicon.ico"
    },
    {
      "netName": "B站",
      "url": "https://www.bilibili.com/",
      "icon": "https://www.bilibili.com/favicon.ico"
    },
    {
      "netName": "今日头条",
      "url": "https://www.toutiao.com/",
      "icon": "https://www.toutiao.com/favicon.ico"
    },
    {
      "netName": "LeetCode",
      "url": "https://leetcode-cn.com/",
      "icon": " https://z3.ax1x.com/2021/06/24/RKJB5R.png"
    },
    {
      "netName": "GitHub",
      "url": "https://github.com/",
      "icon": "https://z3.ax1x.com/2021/06/23/RuN6pt.png"
    },
    {
      "netName": "码云",
      "url": "https://gitee.com/",
      "icon": "https://gitee.com/favicon.ico"
    },
    {
      "netName": "QQ邮箱",
      "url": "https://mail.qq.com/",
      "icon": "https://mail.qq.com/favicon.ico"
    },
    {
      "netName": "路过图床",
      "url": "https://imgtu.com/",
      "icon": "https://imgtu.com/content/images/system/favicon_1587118523486_91617a.png"
    },
    {
      "netName": "阿里矢量图",
      "url": "https://www.iconfont.cn/",
      "icon": "https://img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"
    }

  ]
}

Request data:

		//获取菜单导航列表
        searchNavigationMenus(){
    
    
            $.ajax({
    
    
                type: 'get',
                url:'../store/data/menus.json',
                dataType: 'json',
                success:function (result){
    
    
                    v.$data.menus = result.result;
                },
                error:function (result){
    
    
                    console.log(result.result);
                }
            })
        },

4.2 Homepage - index.html

Key points:

(1) How to make the background image tile and adapt to the size of the browser window?

The following three lines of code are the key!

	-webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

(2) Why set a darker mask layer for the background image?

The purpose is to make the font more visible on the background . If the background image is too bright, after switching the wallpaper to a high-brightness wallpaper, the font on the homepage will be unclear or invisible, which will affect the experience! Another important reason is to distinguish the primary from the secondary , the background image is the "secondary", and the search box, time, etc. that appear on the background image are the "primary". Mask layers can enhance this effect.

(3) How is the time displayed in real time?

Here I use the js timer to get the hour , minute , and second of the current time every second , and display the real time on the page.

(4) There are many places in this project that need timing functions. It is impossible to write a timer to execute every place that needs timing?

Yes, if every place that needs a timer needs to write a timer to execute, then the efficiency will be too low. My approach is to only write a timer, and mount those places that need timing functions to the timer (provided that these timing functions are all at the same interval, for example, the interval is 1s). For example, I only want the prompt information of the current search engine to display for 3s and then disappear. We can do this by defining a variable timeOfNavigatorWords= 0 (indicating the realization of prompt information display) , and incrementing it by 1 every second in the timer . When timeOfNavigatorWords is greater than 3, execute the hidden prompt information code, and then return the value of this variable to 0 . code show as below:

  ...
  var timeOfNavigatorWords = 0;
  ...
  window.setInterval(function () {
    
    
            ...
            //挂载 导航显示字段显示
            if(v.timeOfNavigatorWords >= 3){
    
    
                v.navigatorHidden();
                v.timeOfNavigatorWords = 0;
            }
            v.timeOfNavigatorWords++;
            ...
        }, 1000);

(5) How is the day of the week displayed?

 getWeek() {
    
    
            var weekIndex = new Date().getDay();
            switch (weekIndex) {
    
    
                case 0:
                    this.week = '周 日';
                    break;
                case 1:
                    this.week = '周 一';
                    break;
                case 2:
                    this.week = '周 二';
                    break;
                case 3:
                    this.week = '周 三';
                    break;
                case 4:
                    this.week = '周 四';
                    break;
                case 5:
                    this.week = '周 五';
                    break;
                case 6:
                    this.week = '周 六';
                    break;
            }
        },

(6) How to prevent the default event of right-clicking on the webpage and Ctrl+ ssaving the webpage?

Web page right click default event:

block:

@click.right ="showMenu"

This is like how to stop the depression after a lovelorn? The best way is to find a new boyfriend (girlfriend)!
Then the best way to prevent the default is to find a new event for him , but it should be noted that finding an event must be defined on a relatively large target. I defined it in the project idfor thisindex , and this is the entire page Outermost!divdiv

(7) How to control the execution of css animation?

For example, when the search box on the homepage has a value, it displays the keyword matching result animation, and when it has no value, it executes the closing animation? Like the following:

This place is a problem that has troubled me for a long time-how to use js to control the execution of css animation ?
First of all, what we need to figure out is what is the key to the implementation of css animation. The answer is: animation-name. CSS animation is used to animation-nameknow who is going to execute the animation, then I can dynamically control who and when to execute the animation jsby setting theanimation-name value of the target. For example:

#key_word_show {
    
    
    margin: 20px auto;
    width: 500px;
    background-color: rgba(50, 50, 50, 0.7);
    border-radius: 30px;
    z-index: 4;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
/**
 * 关键字检索列表展开开始动画
 */
@keyframes kws {
    
    
    from {
    
    
        height: 0px
    }
    to {
    
    
        height: 365px
    }
}
/**
 * 关键字检索列表展开结束动画
 */
@keyframes kws2 {
    
    
    from {
    
    
        height: 365px
    }
    to {
    
    
        height: 0px
    }
}

When there is a value in the search box, then we perform the start animation , using jslet the value ofkey_word_show be equal toanimation-namekws

document.getElementById("key_word_show").style.animationName = 'kws'

When there is no value in the search box, then we execute the end animation , using jslet the value ofkey_word_show is equal toanimation-namekws2

document.getElementById("key_word_show").style.animationName = 'kws2'

4.3 Common URL Navigation - commonUse

Click 鼠标右键to bring up the menu.

Key points:

(1) How is the menu implemented?

menuIt divbelongs to indexthe page, and the content inside is displayed on other pages, using iframewindow nesting.

(2) Where does the data in commonly used URLs come from? Is it written to death?

The json file obtained through Ajax request is fabricated with fake data, simulating the data obtained from the server.

(3) Where did the icon come from, was it uploaded to the gallery?

Partly yes, partly no.menuThe navigation icon at the bottom is Upload togalleryYes, most of the icons of commonly used websites are directly obtained by adding the suffix /favicon.ico to the website address. The address of most websites plus the suffix of **/favicon.ico** is the icon of the website. For example:
Zhihu:
Address: https://www.zhihu.com
Icon address: https://www.zhihu.com/favicon.ico

(4) Are these the only commonly used URLs? It seems that I did not see the added function!

Of course more than that, I have no restrictions on this at present, because the background is still under development, because this function needs to be logged in to be displayed, and I plan to display these currently displayed as the default URL. In the future, I will also make a URL classification function.

4.4 Settings page - set

Click on the wallpaper to switch .

Focus on explaining

(1) Just these wallpapers? Too little!

哦~ Of course not, these are the ones I used for testing. This function also requires login to continue writing. I will provide a lot of beautiful wallpapers later! And you can customize the wallpaper. It must also be possible to set metrics for the home page as a whole later, andmenuThe background color makes the whole homepage moreflexiblemorepersonalise。

5. Project download

gitee:
complete front-end project download

6. Follow-up

I will continue to update this project, and make a background for it while improving the front-end functions. The programming language currently used in the backgroundJava is , the framework is springboot, springSecurity, the persistence layer framework is mybatis-plus, , mysqland the middleware is redis. I will take everyone to complete it (wishful thinking QAQ).

My hard work is only for the happiness of everyone! If you can write and learn from it, that's what I hope. I hope everyone will give me 赞encouragement, thank you! ! !