项目搭建历程-Part I

汐语 2023-1-24 1,316 1/24
项目搭建历程-Part I

前端篇:

前端代码来源

今天来分享一下我的项目搭建历程:

首先,作为一个前端初学者,只能看懂简单的HTML和CSS,以及摸索出的一点点JS,所以基于上述情况,我选择了采用仿站的方式进行前端网页搭建(具体的工具是:我Tools栏目下的在线扒站工具

目前市面上的网页也很多,挑选好看的即可( 不是进行商用即可[doge] ),一键扒站之后,对里面的前端网页源码进行更改就好啦。

然后,主要增加几个功能:

1.检测网页浏览器版本是否过低:

<script type="text/javascript">
if (window.navigator.userAgent.indexOf('MSIE') >= 1) {
location.href = 'http://47.113.190.152/product/update_browser.html';
}
</script>

2.检测是否PC端或是Andriod端:(我只适配了PC端网页 [doge] )

<script type="text/javascript">
        var system = {};
	var p = navigator.platform;
	system.win = p.indexOf("Win") == 0;
	system.mac = p.indexOf("Mac") == 0;
	system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

        //如果是电脑跳转到
	if (system.win || system.mac || system.xll) {
        //如果是手机,跳转到
			} else {  
	if (!window.localStorage.getItem('storge')) {
	        alert('汐语 提醒您,为了更好的体验,请在PC网页端打开.');
		window.localStorage.setItem('storge', 'true')
				}
			}
</script>

3.检测页面操作方式属于刷新还是关闭或者跳转(其中刷新和跳转属于同一类型)

            var beginTime = 0;//执行onbeforeunload的开始时间
            var differTime = 0;//时间差
            window.onunload = function () {
                differTime = new Date().getTime() - beginTime;
                if (differTime <= 3) {
                    console.log("浏览器关闭")
                    localStorage.removeItem('id')
                } else {
                    console.log("浏览器刷新")
                }
 
            }
            window.onbeforeunload = function () {
                beginTime = new Date().getTime();
            };

前端网页托管

上面的便是前端网页代码,如果是只是宣传或者介绍作用的网页的话,最省事方便的可以采用前端网页托管或者在虚拟主机上上传前端网页文件,二者本质上都是一样的。

我尝试的平台有:

1.uniCloud Web控制台

注册账号后新建阿里云资源库,可以进行一个月的免费托管,后续是每月5元,响应速度也很快,唯一的缺点就是如果没有自己的已备案域名的话,它给的网页链接很长很杂乱

2.XX云

相信你也看到过很多类似的广告,我选择的是每月0.5元的虚拟主机搭建的我的个人Blog,听说这个新站有活动,进群填个优惠码可以免费使用,不过每月0.5的话还是相当于没有的 (我选的是ZBcloud,站点老板人也挺好的,绝对不是托 [doge])

最近市面上现在有好多,挑选你自己合适的就好,价钱也不贵,就是有跑路的风险,谨慎选择。最主要的便利是,它的主机大都不在大陆本地,而是香港,美国之类的,这样的话,域名无需备案,解析之后即可使用。主机不在国内带来的问题是,网页的访问速度没有国内的快,但是也还行。

更新于2023年2月1日:我重新搭建了个人博客,原因是原白嫖的美国主机不稳定,故更换为香港,页面加载速度也极大提升了,
忠心劝告:第一次就把机子搞好点,否则迁移博客很麻烦!!!

3.云服务器

其实,还有第三种方法便是使用云服务器进行搭建:

因为本次我的项目周期不是很长,所以我才用的是阿里云最近的活动高校计划 - 免费学生云服务器 (aliyun.com)

它主要需要完成学生认证,然后通过ECS相关的学习,走走流程罢了,最后再进行一个20道题的测试,都是选择题,而且有手机(bushi),通过之后白嫖7个月的服务器,性能也不低,而且还有相应的证书,证书大概是这个样子:

项目搭建历程-Part I

言归正传,我因为是非计算机专业的所以只是为了满足个人需求,我采用了Windows Serve ,进行项目搭建,其实挺香的,平时还可以挂挂QQ机器人,用了的人都说好 hh

Windows Serve IIS搭建

搭建的方式,之前没有相关的经验,也没有系统的学习,在CSDN反复比对之后,采用了IIS ,进行网页托管类似于。当时参考的文章我放在这里了,很有借鉴作用,再次感谢。(快速IIS部署

参照里面的教程就好,有什么问题放在评论区就好,在这个过程中我也是反复摸索,各种碰壁...不过最后还是搞好了,就是响应速度有点慢,这个是IIS的一大问题,原因好像是,它在每次访问时才会请求,请求之后便会释放内存,导致网页没有缓存,每次访问都需要重新请求

找了好多解决方法也是有的,我也放在这里了(IIS访问缓慢解决),只需要通过设置让其预加载即可。

总结

到这里,第一部分前端网页就搞定啦,后续我会对后端搭建进行记录,后端我采用的是Python Web中的Django,有需要的往下看喽~

我也是单纯的分享记录,我要知道自己技术不行,但是记录从无到有的历程 真的很快乐 hh

- THE END -

汐语

3月23日21:06

最后修改:2023年3月23日
0

非特殊说明,本博所有文章均为博主原创。

共有 1 条评论

  1. 汐语

    汐语博主

    迁移了一篇博客打卡~|´・ω・)ノ