• 前端html页面,手机查看


     

    在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在httphttps的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一个本地的服务器。
    本文是利用node.js中的http-server,开启本地服务,步骤如下:

    1 下载node.js

    官网地址: https://nodejs.org
    下载完成后在命令行输入命令$ node -v以及$ npm -v检查版本,确认是否安装成功。
    

      

    2 下载http-server

    在终端输入:
    npm install http-server -g
    

      

    3 开启 http-server服务

    终端进入目标文件夹,然后在终端输入:

    http-server -c-1   (⚠️只输入http-server的话,更新了代码后,页面不会同步更新)
    Starting up http-server, serving ./
    Available on:
      http://127.0.0.1:8080
      http://192.168.8.196:8080
    Hit CTRL-C to stop the server
    

      

    4 关闭 http-server服务

    按快捷键CTRL-C
    终端显示^Chttp-server stopped.即关闭服务成功。
    

     

    4 这时候打开页面无法正常显示,终端给出提示

    [Wed Aug 21 2019 07:27:19 GMT+0800 (GMT+08:00)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/7575.0.3770.100 Safari/537.36" .0.3770.100 Safari/537.36" .0.3770.100 Safari/537.36"
    [Wed Aug 21 2019 07:29:43 GMT+0800 (GMT+08:00)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36".0.3770.100 Safari/537.36"
    

    4 解决办法

     4.1:装anywhere!然后在要设置的目录下 运行anywhere!就可以解决了! anywhere可以打开静态页面

     4.2:anywhere安装命令:npm install -g anywhere

     4.3:使用:在要启动静态服务的目录下执行

     4.4:anywhere -p 8080

    PS C:UsersASUSDesktopworkingdemo> anywhere -p 8080
    Running at http://192.168.43.134:8080/
    Also running at https://192.168.43.134:8081/
    

    4 最后一步,在端口号后面添加要打开的文件,手机端输入地址也可以访问这个页面了

      

    http://192.168.43.134:8080/index.html
    

    5 吃水不忘挖井人,借鉴了以下网站

    https://www.cnblogs.com/nolaaaaa/p/9126385.html

    https://blog.csdn.net/weixin_40836227/article/details/99710001

  • 相关阅读:
    python16_day18【Django_Form表单、分页】
    python16_day17【Django_session、ajax】
    django【orm操作】
    python16_day16【Django_ORM、模板】
    python16_day15【Django入门】
    python16_day14【jQuery】
    python16_day13【css、js】
    python16_day12【html、css】
    python16_day11【MQ、Redis、Memcache】
    python16_day10【SelectWeb、SelectWget、paramiko、pymysql】
  • 原文地址:https://www.cnblogs.com/wukaiBK/p/11386614.html
Copyright © 2020-2023  润新知