将自己写的页面变成浏览器的首页

最新推荐文章于 2022-09-17 23:02:31 发布

不务正业的前端学徒

最新推荐文章于 2022-09-17 23:02:31 发布

阅读量602

点赞数

文章标签： node.js javascript html

本文链接：https://blog.csdn.net/weixin_45522704/article/details/107188453

版权

杂专栏收录该内容

18 篇文章 0 订阅

订阅专栏

首先看一下效果图 在这里插入图片描述
第一步：先把页面写好
第二步：安装node
第三步：
创建上面的文件夹fwq
先初始化：按住shift，在文件夹空白出按右键，打开powershell终端窗口
输入npm init生成一个pakeage.json文件
然后输入npm install express 下载express框架
同时会产生node_modules和package-lock.json文件
然后创建app.js文件，内容如下

const express = require('express')
const app = express()
app.use(express.static('./search'))
app.listen(80, () => {
    console.log('server running at http://192.168.31.39');
})

其中search文件夹中是你自己做的页面
然后再在powershell命令行中输入node .\app.js 回车
然后就能在http://192.168.31.39:80 网址中看到页面了
但是这还不够，如果你关闭了命令行公具，网页一刷新就连接不上了
所以我们需要下载一个pm2来管理它

先在命令行中输入npm install pm2 -g 全局安装一下
安装完成后输入pm2 start 脚本 --name 自定义名称开启项目
这样你一输入http://192.168.31.39:80这个网址也能打开页面了
但这还不够，如果你关机了，重新启动电脑它还不会有反应
后续步骤如↓
先全局安装window自启包

npm install pm2-windows-startup -g

启动pm2

pm2-startup install

配置文件路径和名称并启动

pm2 start 路径 --name 名称 --watch

保存到pm2实现自启

pm2 save

这样子重启电脑也能直接访问链接了
最后可以在设置中设置一下
在这里插入图片描述
上述行为可以在服务器中进行（当然是windows服务器，不要问为啥，因为不会linux），进行了上述操作后，继续在服务器的控制台中的安全组，开放一下80端口，然后你的网页只要有网络连接，就能看到且使用了。。。

下面放上我那混乱不堪的且没有注释的页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search</title>
    <style>
        * {
            text-decoration: none;
            outline: none;
            list-style: none;
        }
        
        body {
            background-image: url(http://attach.bbs.miui.com/forum/201303/18/233119quyrec7to3ws3rco.jpg);
            background-repeat: no-repeat;
        }
        
        .box {
            position: absolute;
            left: 50%;
            top: 30%;
            transform: translate(-50%);
        }
        
        .btn {
            width: 70px;
            height: 46px;
            background-color: #B6D4EC;
        }
        
        .search {
            width: 500px;
            height: 40px;
            padding-left: 10px;
            background-color: rgb(198, 211, 211);
        }
        
        .return {
            width: 514px;
            background-color: blanchedalmond;
        }
        
        .p {
            padding-left: 10px;
        }
        
        .img {
            position: absolute;
            top: 75%;
            left: 85%;
            width: 10%;
        }
        
        @media screen and (max-width:750px) {
            .box {
                position: absolute;
                left: 50%;
                top: 20%;
                transform: translate(-50%);
            }
            .search {
                float: left;
                width: 200px;
                height: 40px;
                padding-left: 10px;
                background-color: rgb(198, 211, 211);
            }
            .return {
                width: 214px;
                background-color: blanchedalmond;
            }
            .btn {
                margin-top: 10px;
                width: 215px;
                height: 46px;
                background-color: #B6D4EC;
            }
            .img {
                position: absolute;
                top: 55%;
                width: 200px;
                left: 50%;
                transform: translate(-50%);
            }
        }
    </style>
</head>

<body>
    <img class="img" src="https://pics.images.ac.cn/image/5f03033331e20.html" alt="技术分享加好友">
    <div class="box">
        <input type="text" class="search">
        <input type="button" value="Search" class="btn">
        <div class="return"></div>
        <script>
            var searchDiv = document.querySelector('.search')
            var resDiv = document.querySelector('.return');
            setInterval(function() {
                if (searchDiv.value === '') {
                    resDiv.innerHTML = '';
                }
            }, 200)
        </script>
        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var inp_change = document.querySelector('.search')

            document.addEventListener('keyup', function(e) {
                if (e.keyCode === 13) {
                    var val = inp_change.value;
                    location.href = "http://www.baidu.com.cn/s?wd=" + val + "&cl=3";
                }
            })

            btn.onclick = function() {
                var val = inp_change.value;
                location.href = "http://www.baidu.com.cn/s?wd=" + val + "&cl=3";
            }

            inp_change.oninput = function() {
                var content = document.querySelector('.search').value.trim();
                if (content === '') {
                    return
                }
                //组装查询地址
                var sugurl = "http://suggestion.baidu.com/su?wd=#content#&cb=window.baidu.sug";
                // var content = "关键字";
                sugurl = sugurl.replace("#content#", content);

                //定义回调函数
                window.baidu = {
                    sug: function(json) {
                        var res = json.s;
                        console.log(res);
                        var resDiv = document.querySelector('.return');
                        var jia = '';
                        for (i = 0; i < res.length; i++) {
                            var pinjie = "<p class='p'><a href=\"https://www.baidu.com/s?wd=" + res[i] + "\">" + res[i] + "</a><p>"
                            jia = jia + pinjie;
                        }
                        resDiv.innerHTML = jia

                    }
                }

                //动态添加JS脚本
                var script = document.createElement("script");
                script.src = sugurl;
                document.getElementsByTagName("head")[0].appendChild(script);

            }
        </script>
    </div>
</body>

</html>