欢迎来到我的网页开发部分,这里记录我的网页开发过程


2024/12/04 01:06


新增点击不同栏目跳转新页面时 滚轮会自动平滑的移动到最顶端

2024/11/23


但是不是谁都有网盘的,不是一定要用网盘的
网盘还得打开,下载,等待,其实很挫伤人的积极性
所以视频可以没必要放,但打包成压缩文件 直接点击就下载这是必须的

2024/11/08 12:15


今天在Game里面的Demo1 Devlog里上传了一段视频,视频大小为25mb 20s 60fps
转眼阿里云就给我发来oss对象存储欠费的邮件,可用额度 -0.02元
一个视频25MB是我目前整个网站加起来的250KB 100倍,太夸张了
后续还是都以图片为主,而且图片有些还得压缩一下,不然也有一两MB
后面可能提供B站链接,在B站上传视频
然后游戏打包的话,可能也是提供网盘链接,不然存在网站里面有点太大了,即使压缩过

2024/11/02 17:27


熬战两天,昨天到现在还没睡呢,终于也是把网页重构了一遍,手机端也做了近乎完美的适配。
本来想着10/31万圣节就做完,给11月开个好头,开门大吉去做游戏,但是从0原生组件化开发工程量还是非常大, 一些很明显的样式变化反而是最简单的,真正费力的是完全重构底层的逻辑。
我使用原生js的Web Component把导航栏和侧边栏都进行了组件化。
导航栏倒还好,在组件内部写好对应的a标签跳转路径即可,而侧边栏整整花了我一天半的时间。

我通过在引入的组件标签里写自定义属性,从而再从定义组件的js中获取这些属性的值, 再通过影子DOM访问到定义组件的html中找到对应的结构并赋值内容, 实现只需要在实例化的组件标签中传入不同的属性值,就能实现不同情况的复用。     具体源码我放到JavaScript栏中。

我再通过原生js的fetch,根据组件的属性值去拿到对应路径的 html文件替换给当前html实现不用跳转页面就能看到别的页面信息,这样导航栏和侧边栏都不用重新加载, 侧边栏的栏目的开闭就不会重置,提升体验。

同时我又通过原生js访问到影子DOM,计算侧边栏有多少个栏目,从而再用js设置不同的css样式,实现css动画。

网站至此,基本框架已经建成,后期维护也相当简单,添加删除修改都只用修改一处两处即可。

2024/10/29 07:24


要对10/27的关于web开发的理解进行一个修正和补充
事实上,跑在浏览器上的前端js不通过后端js,理论上也能实现动态页面内容的部分
也就是说,其实前端的js,只要通过api(一般是域名或相对/绝对路径,而不是ip)访问到永不关机的远程服务器, 再通过输入账号密码登录服务器,然后通过操作系统访问到提前安装好的数据库, 并输入账号密码连接到数据库,再根据前端js中已捕获的用户事件数据 (如登录的账号密码,搜索的关键词,要记录的内容) 去比对并索引到数据库里所需返回的数据内容,再一路返回给前端js, 从而前端js再对拿到的数据进行呈现,就实现了动态页面。

然而这一过程中,服务器的账号密码,数据库的账号密码,要执行的sql语句等, 这些隐私信息都暴露在了前端js中。而前端html css js的源码在浏览器上是公开的, 因此就会有被攻击的风险。同样,api使用域名而不是ip,一部分是ip会变化,而域名稳定 可以DNS直接指向变化的ip,另一部分是暴露ip也有被直接攻击的风险。

(至于为什么域名和 相对/绝对 路径都可以,因为如果是前后端是分离部署,前端js的api就需要是域名,进行网络请求, 而如果是单一部署,前后端在一个文件夹中,那么就可以通过相对/绝对路径 来直接访问到后端服务器,减少网络请求)
(至于怎么部署,就是先在永不关机的服务器里面配置好环境(nodejs npm 依赖 vue git等) 再引入代码到服务器本地(用git克隆github上的仓库等),再最后用终端启动永不关机的http服务)

此外,再加之性能和稳定和效率等方面考量,于是就出现了通过nodejs让js跑在服务器端上,去处理后端的验证和交互逻辑 (当然除js,java,python也可以做同样的事情)。此外js,出生的时候本身就是为了运行在浏览器上的, 而nodejs让js可以像pyhton java php那样跑在客户端/服务端/终端 等端 上。所以js现在更是一门 语言 而不是 脚本 。 所以我也明白了为什么nodejs叫做 a JavaScript runtime environment。

至此我已经差不多明白前后端后端到底是怎么一回事了
之前一直稀里糊涂,现在基础原理部分已经明白。
所以更加坚定了我只用HTML CSS JS即可
因为前端只精通HTML CSS JS就好了,而一旦涉及一小点后端那考虑的就多了:
买服务器 熟悉操作系统 配置环境 熟悉node 熟悉npm 熟悉库包模块 熟悉数据库等,每一项都是大头。

2024/10/27


想了一下,我的方向完全偏了
必须进行拨乱反正!
我的方向只是做一个博客网站
同时学习web开发可以建立我以后的游戏官网,提供游戏介绍等
那么前端三大件完全够用了,也不需要加入后端
更不需要使用前端框架和后端框架以及TypeScript和数据库
因此也就不需要买个云服务器。只用买个域名即可
(把静态文件放到第三方免费静态页面部署服务平台
 然后把域名的DNS解析设置指向该网站)
同时,静态页面和原生开发也能实现简单的获取用户数据实现交互
因为js本身就很强大,跑在浏览器上能干很多事情
用js通过第三方服务(即通过浏览器访问互联网上的其它网站),便可以实现数据交互
而且小型博客和小型游戏官网本身体量小,也不会需要太多性能,无需加入后端再让js跑在服务器上
况且我的方向是游戏开发,而不是web大型项目
(主要一个完整的商业网站需要的技术栈实在是太多了,本来想顺手给它学了
 最后发现花大量精力就算学了我需求最多也只是加个登录 评论 留言等等功能
 然后还买了服务器,开启CDN等等服务,花费不小的钱。属于是 人参喂猪 了)

2024/10/26


web开发要学的东西真多真杂,许多名词和概念刚进来还是稀里糊涂
目前还不清楚前后端要学到什么程度
后端node.js 的框架express有点不优雅,去看看koa或其它的怎么个事
TypeScript也去看看
数据库 服务器啥的,个人博客也不需要用到动态部分吧。或者,后面再说
前端的话,vue肯定是要学了

2024/10/18


刚刚增添了HTML&CSS栏里的一项内容,做着做着发现像在写笔记和教学
这可不对,在网页上写教学内容那可真是耗时又耗力:图片大小、布局、多端适配...
而且随便详细写一个简单的图文笔记都要占据大把页面,观感也是相当不好
差点忘了 我的网站目的是记录开发历程,而不是记知识点笔记或教学

直接把成果演示或源码端上来即可

2024/10/18


把侧边栏的基本功能做完了,每个展开的列表项都建立了对应的页面
在做的过程中同时优化了代码,并发现不能一味的使用外联样式,有时使用一下内联样式可以优化很大一部分代码
当然,应用顺序:内联样式 > 内部样式 > 外联样式。其中在head中 link or script 也有顺序的讲究
样式的顺序是经常出bug的地方,还挺需要注意的
另外我发现创建新网页的过程中,有很多需要复用的地方,我都是使用大段大段的复制粘贴,然后改一小部分
可能这就是原生开发的弊端。当然也可以自己写组件,但写组件约等于写框架了,学习原生写组件不如直接学习框架
所以可能我迟早要学vue的,先在前端开一栏先......

2024/10/16


也算是学完了微信小程序开发,入门了基础
但是不得不说,小程序的语法结构真的有点混乱,学习曲线相当陡峭,语法的设计可以说是一坨勾史
不过我以后也用不到微信小程序开发,更加之小程序是面向国内用户,不如深究网页开发
但小程序开发也差不多算是前端开发,因此也放到web开发这一栏
至少表明我会微信小程序的开发........

2024/10/7


目前为止,网站全部框架都搭建完毕,后续的内容就是补充和记录了
网页开发先告一段落,等后面要添加新内容时再来开发

2024/10/6


不得不说,手机端的适配是真有点烦,所以建议用电脑访问本网站
手机端只是简单适配了一下,不同尺寸的手机可能还会出现预料之外的错误
同时如果是手机访问,建议在浏览器中打开,直接在微信中打开也会出现预料之外的错误

2024/10/6


目前正在学习前端HTML CSS JavaScript,
学习成果就是此网站的全部。
后端还没搞清楚是个什么情况,目前只知道要先学习Node.js,
由于我的主业不是web开发,同时也用不到太多后端,
因此前端用原生HTML CSS JavaScript 开发,不使用框架,框架学习成本高,
后端用Node.js开发,不用其它语言,用js贯穿全栈,降低学习成本

2024/10/6


页面建立