新增点击不同栏目跳转新页面时 滚轮会自动平滑的移动到最顶端
但是不是谁都有网盘的,不是一定要用网盘的
网盘还得打开,下载,等待,其实很挫伤人的积极性
所以视频可以没必要放,但打包成压缩文件 直接点击就下载这是必须的
今天在Game里面的Demo1 Devlog里上传了一段视频,视频大小为25mb 20s 60fps
转眼阿里云就给我发来oss对象存储欠费的邮件,可用额度 -0.02元
一个视频25MB是我目前整个网站加起来的250KB 100倍,太夸张了
后续还是都以图片为主,而且图片有些还得压缩一下,不然也有一两MB
后面可能提供B站链接,在B站上传视频
然后游戏打包的话,可能也是提供网盘链接,不然存在网站里面有点太大了,即使压缩过
熬战两天,昨天到现在还没睡呢,终于也是把网页重构了一遍,手机端也做了近乎完美的适配。
本来想着10/31万圣节就做完,给11月开个好头,开门大吉去做游戏,但是从0原生组件化开发工程量还是非常大,
一些很明显的样式变化反而是最简单的,真正费力的是完全重构底层的逻辑。
我使用原生js的Web Component把导航栏和侧边栏都进行了组件化。
导航栏倒还好,在组件内部写好对应的a标签跳转路径即可,而侧边栏整整花了我一天半的时间。
我通过在引入的组件标签里写自定义属性,从而再从定义组件的js中获取这些属性的值,
再通过影子DOM访问到定义组件的html中找到对应的结构并赋值内容,
实现只需要在实例化的组件标签中传入不同的属性值,就能实现不同情况的复用。
具体源码我放到JavaScript栏中。
我再通过原生js的fetch,根据组件的属性值去拿到对应路径的
html文件替换给当前html实现不用跳转页面就能看到别的页面信息,这样导航栏和侧边栏都不用重新加载,
侧边栏的栏目的开闭就不会重置,提升体验。
同时我又通过原生js访问到影子DOM,计算侧边栏有多少个栏目,从而再用js设置不同的css样式,实现css动画。
网站至此,基本框架已经建成,后期维护也相当简单,添加删除修改都只用修改一处两处即可。
要对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 熟悉库包模块 熟悉数据库等,每一项都是大头。
想了一下,我的方向完全偏了
必须进行拨乱反正!
我的方向只是做一个博客网站
同时学习web开发可以建立我以后的游戏官网,提供游戏介绍等
那么前端三大件完全够用了,也不需要加入后端
更不需要使用前端框架和后端框架以及TypeScript和数据库
因此也就不需要买个云服务器。只用买个域名即可
(把静态文件放到第三方免费静态页面部署服务平台
然后把域名的DNS解析设置指向该网站)
同时,静态页面和原生开发也能实现简单的获取用户数据实现交互
因为js本身就很强大,跑在浏览器上能干很多事情
用js通过第三方服务(即通过浏览器访问互联网上的其它网站),便可以实现数据交互
而且小型博客和小型游戏官网本身体量小,也不会需要太多性能,无需加入后端再让js跑在服务器上
况且我的方向是游戏开发,而不是web大型项目
(主要一个完整的商业网站需要的技术栈实在是太多了,本来想顺手给它学了
最后发现花大量精力就算学了我需求最多也只是加个登录 评论 留言等等功能
然后还买了服务器,开启CDN等等服务,花费不小的钱。属于是 人参喂猪 了)
web开发要学的东西真多真杂,许多名词和概念刚进来还是稀里糊涂
目前还不清楚前后端要学到什么程度
后端node.js 的框架express有点不优雅,去看看koa或其它的怎么个事
TypeScript也去看看
数据库 服务器啥的,个人博客也不需要用到动态部分吧。或者,后面再说
前端的话,vue肯定是要学了
刚刚增添了HTML&CSS栏里的一项内容,做着做着发现像在写笔记和教学
这可不对,在网页上写教学内容那可真是耗时又耗力:图片大小、布局、多端适配...
而且随便详细写一个简单的图文笔记都要占据大把页面,观感也是相当不好
差点忘了 我的网站目的是记录开发历程,而不是记知识点笔记或教学
直接把成果演示或源码端上来即可
把侧边栏的基本功能做完了,每个展开的列表项都建立了对应的页面
在做的过程中同时优化了代码,并发现不能一味的使用外联样式,有时使用一下内联样式可以优化很大一部分代码
当然,应用顺序:内联样式 > 内部样式 > 外联样式。其中在head中 link or script 也有顺序的讲究
样式的顺序是经常出bug的地方,还挺需要注意的
另外我发现创建新网页的过程中,有很多需要复用的地方,我都是使用大段大段的复制粘贴,然后改一小部分
可能这就是原生开发的弊端。当然也可以自己写组件,但写组件约等于写框架了,学习原生写组件不如直接学习框架
所以可能我迟早要学vue的,先在前端开一栏先......
也算是学完了微信小程序开发,入门了基础
但是不得不说,小程序的语法结构真的有点混乱,学习曲线相当陡峭,语法的设计可以说是一坨勾史
不过我以后也用不到微信小程序开发,更加之小程序是面向国内用户,不如深究网页开发
但小程序开发也差不多算是前端开发,因此也放到web开发这一栏
至少表明我会微信小程序的开发........
目前为止,网站全部框架都搭建完毕,后续的内容就是补充和记录了
网页开发先告一段落,等后面要添加新内容时再来开发
不得不说,手机端的适配是真有点烦,所以建议用电脑访问本网站
手机端只是简单适配了一下,不同尺寸的手机可能还会出现预料之外的错误
同时如果是手机访问,建议在浏览器中打开,直接在微信中打开也会出现预料之外的错误
目前正在学习前端HTML CSS JavaScript,
学习成果就是此网站的全部。
后端还没搞清楚是个什么情况,目前只知道要先学习Node.js,
由于我的主业不是web开发,同时也用不到太多后端,
因此前端用原生HTML CSS JavaScript 开发,不使用框架,框架学习成本高,
后端用Node.js开发,不用其它语言,用js贯穿全栈,降低学习成本
页面建立