web开发基础
嗯...其实是我今年暑假，刚接触到些流行技术时，想到的一些东西，还有糊作业过程的碎碎念。
也许现在看有很多错误的地方...但我不想改了，毕竟总体还算流畅，错就错吧。
2022-07-05
真是破天荒啊…我竟然会想要写计算机的知识了
vue+springboot 框架、工程
git版本控制和团队合作
docker和低代码平台 项目部署
springboot+vue也许是最简单最快能做出东西的了，框架自己已经弄好了太多，但…我还是要先吐个槽 好折磨…我是说不知道在干什么写什么，出了问题只能跟着对比步骤、一行行的试着去找代码哪里和视频对不上…当然这样弄没几下我就崩了，更多时间在发呆。 不那么赶的话…可能会好些
前端与后端，简单说的话，前端做样式，后端存数据。 连接是vue通过axios向后端发请求，然后靠java应用调数据库的数据；调出来的数据一般是json形式，通过key-value对应能贴到表格或其他什么地方或者进行些别的什么操作…。
从vue开始 ，vue中提供了许多各种各样的数据绑定传输的小玩意，从，v-model，v-bind对具体数据的绑定；到用来监听用户鼠标键盘上操作的v-on的click，keyup等等 这可能是最有趣的一部分了...因为要看的东西很短，有实时的交互，和css样式控制结合，很容易弄出些好玩的小玩具出来，再去element ui、bootsrap上找找小零件就可以写网页了
然后是组件这个概念，组件…说的糙一些就是一种高级复制粘贴…和面向对象的“类”这个概念有些相似，里面有数据有函数，或者叫有属性有方法。代码一眼看过的不同就是，vue的数据都要存在一个叫data的东西里、方法都要写在一个叫methods的东西里，嗯这个methods里可以就可以写监控到用户行为后去接收数据、使用router进行跳转、改变样式、使用axios向后台发送请求等一系列操作。
和data相似的还有prop、computed，和methods相似的也有几个但我记不清了。
说了这么多，那它是怎么复制粘贴的呢…最简单是靠对同一组件的多次使用，然而这肯定不够，还有一个操作就是可以在妈妈组件（我就想这么叫）内部去注册别的组件，注册完了就是这个妈妈组件的一部分了，而这个别的组件就被叫做子组件；对了这个注册和上面的data、methods一样也有一个专门的地方就叫components。
…vue的生命周期，然而这个就算了吧，熟悉了好像可以做很多精细操作，我也不清楚，以后看。
然后是router。有一个概念叫做单页面应用，好像是有老多好处了，但我也不懂，我能看见的是，写代码的时候这里的router至少把跳转集成了起来放到了一个地方来整合。超链接的话…可能也有这样的操作？但我写过的都是这里一个那里一个…
对于工程文件，几个命令就能弄好，各种东西的版本好像会放在一个package.json的文件里，给别人的时候把那个node_models删掉也没啥，留着这个json文件几下就能装好。
项目启动，vue这边是maim.js引入App.vue，把它作为一个子组件，然后，创建一个爹中爹…或者妈妈的妈妈？——#app，将App作为子组件；而之后的组件一般都作为App.vue的子组件，或者直接在router的index.js里import一下，直接跳转就好。
然后是…是tnnd java ，spring框架。
Java…好些可能我忘了，可能就没学会过。嗯…虽然我都不会，虽然之前还上过Java的课，vue，js都是刚接触，但Java这边是很不熟悉。
非常坏的是这里没有什么小玩具时间，一上来就是工程，虽然它启动只要一个XxxxxApplication就可以了，但依旧需要配置好多东西，maven的pom.xml或者其他的依赖管理，yml或者properties去配数据库连接、改端口…好像也没多少东西？嗯…可能是我讨厌java。但vue几个命令就能弄好，小小一个40MB左右就基本是全部了，可能确实简单些吧…虽然我都不会
对于做小玩具而言…后台这边要做的就是接收前台发来的请求，然后向前台传回数据消息之类的东西、或者根据请求对数据库进行增删改查之类的操作等等。
spring好像是有这样一个不知道叫啥，也是三层的东西。
表现层（User Interface layer）：又叫表示层，负责接收用户请求、转发请求、生成数据的视图等。一般表现为界面，用户通过界面输入、查询和得到需要的数据。
业务逻辑层（Business Logic Layer）：简称业务层，是针对具体问题的操作，主要是从数据库中得到数据，然后对数据进行逻辑处理，是数据业务逻辑处理。
数据访问层（Data access layer）：又叫持久层，该层所做事务直接操作数据库，针对数据的增添、删除、修改、更新、查找等。负责持久化业务对象；
Controller（UI）界面控制层
Service(BLL)业务逻辑服务层
Dao(DAL)数据访问层
Controller是最先接收请求的，接收之后对接受到的请求与写在controller里的请求去匹配，匹配到了就把Service叫起来干活，匹配不到就告诉前台404。 Service干活可能就要访问数据库，访问只能通过Dao提供的接口才行，别问，可能是为了项目方便管理，为了程序健壮性，低耦合高内聚啥的，我也不知道。 Dao这边就是直接对数据库操作了。
src里面还有一堆文件夹，bo、vo、po、dto、pojo、model、entity…但我看里面的东西都和java bean长得差不多？ 写的java bean是和数据库里的表对应、写了一堆属性和它们的set get。最简单的是一个bean对一张表，作用是方便复制粘贴、一下子拿出一个东西的全部东西…或者说一条数据的全部数据项。 我看到里面的dto似乎是那种只拿一部分数据项不拿全部、可以减少不必要的数据传输…但那一堆东西的区别我现在是分不清。
框架…我并不了解，什么容器、注入…统统不清楚，我能看到它自己生成了好多工程文件，但它里面怎么跑的现在是没空看，先学会用吧。vue的我也不了解，里面好像也有很多高级的东西藏着，数据代理数据劫持啥的…都qtnmd吧。
嗯，工程说的差不多才能说说具体语法… @ 注释这个东西我是第一次见，作用可能是告诉框架哪里是干什么的，写在类、实体、方法上的好像都有；这个作用和vue里直接规定的那一堆data、methods、name、component有点像…但我就是看java不爽。 实例化，指类（或者接口）的实现，类是抽象，实例化具体之后才能起作用…一个类在另一个类里实例化，这可能是java最像vue组件注册的那种写法的地方，然而这里的两个类并在java好像并不被看作parent-child…
可能也不是对java有意见，是那天交作业弄得太急给我整破防了…我在想以后的工作生活都是这个吊样吗…nmmd我受不了… 嗯，先到这。
2022-07-19
。。。现在是2022年7月19日18:17:01
我真觉得这个原作者真的写的一团糟。
从数据库设计开始就是笨蛋，把username当做跳转、关联的字段，那还要什么uid？文章都有封面、用户却没有单独的头像栏？还有一堆无用的表格字段，我知道后来可能用得上，但是连tmd基础都设计不好整这些简直就是……在屎上插花，对，这整个项目给我的感觉就是这样，花里胡哨的东西一堆，好玩的地方乏味可陈。
后端就是把文件生成之后导几个包导函数，用的mybatis还一句sql都不写，基本的用户页写个根据username或者uid把发的帖查出来都不写。几乎就tmd是面向导包编程，各种各样的提供好的不明所以查询模式，一些最常见的功能却反倒是没有，我都不知道那有什么意思。导包也就算了，还都tmd全都直接在controller里导，service和mapper、xml是全都tmd干干净净，生成的文件一片一片都是空的。。
前端啊，我是没拿到源码，我拿到的是一堆html、css文件，但是就算这样也有好多可以吐槽的，前后台简直一点关系都没有——界面风格差异巨大、相互的跳转方式难找的一逼极其让人无语。功能实现上也不咋样，但那是在数据库在后台就有的毛病了。
……为什么我要按着这个demo做呢。 可能一周前的我并不能意识到这些…为什么我当时没有找到一个质量特别棒的demo？ ……要说现在我也不知道去哪找。
这一个星期我干了什么？把一部分html拆成vue-cli工程，然后把前后端搞通，新写了两三个觉得有必要的查询，从前后端到数据库，里面不喜欢看不懂的扔掉……现在就只剩五六个页面了。
我都觉得可以自己重新建工程写了…但感觉会好废时间……。
2022-07-22
学校的作业弄完了，好多在文档里就写过一遍，但还是想再来一遍。
首先是对互联网开发的业务的…瞎胡描述一下，就是数据加贴图，一点美工加上增删改查，还有各种零零碎碎的小玩意…好像也没什么神秘的。神秘之处…也许在体量…
对于数据，最常见的形式是键值对，对于这个形式：键是外壳标号、值是内里，内里需要一个外壳标号才能被识别、放在正确的位置。就像快递里的物品本身和运单号或者取货码。 而对于vue，vue中提供了许多各种各样的数据绑定传输的小玩意，从，v-model，v-bind对具体数据的绑定；到用来监听用户鼠标键盘上操作的v-on的click，keyup等等 这可能是最有趣的一部分了…因为要看的东西很短，有实时的交互，和css样式控制结合，很容易弄出些好玩的小玩具出来。 稍微bb一下，vueComponent里一些东西，name，methods，data，props，mounted……这些东西感觉和java里的注释作用很像，让框架识别那里写的东西都是什么，但…不知道为什么vue里的看着就是舒服好多。
然后是，组件化。 还是糙一点的话，就是高级复制粘贴，让杂乱的重复代码简洁有序起来。
parent-child组件的问题，那个词用的很好，“注册组件”，而非面向对象里的“继承”，组件已经可以看做是一个对象了（虽然它还不是），而不是抽象的、未实现的类。这两个的parent-child根本不是一回事，在很多点上看起来相似又相反，所以对于传统的“父子”类这种叫法，我会想换一个，我会想把这里的parent-child叫成母子组件（其实我有过思考的！不是随便叫的！最简单的，“继承”体现的自顶向下，“注册”体现的是自底向上。）。
组件间通信。
- 大组件朝小组件给数据。 Props，作为子组件的那个组件里的props。那是给妈妈组件开一个接口，从妈妈那里拿数据传到子组件，经过子组件处理后展示在子组件的template里，然后再由妈妈组件调用、一整个展示。（为什么有种奇怪的感觉）（路由的props可以和组件的交互！组件还可以和路由xxoo（不是））
- 大组件从小组件拿数据。
$refs，在元素标签，在vue自定义的小子组件标签里可以写上一个ref=“xxx”，然后就可以在妈妈组件里用this.$refs.xxx.data拿到那个元素，或者不写后面的data，直接拿一整个child-VueComponent，子组件。还有就是在vue里用this，指到的就是那一个vue组件…？ - 小组件给大组件传数据， this.$emit。这个方法…我没怎么用过，听说和之后的一个叫“全局事件总线”的东西很像，只是后者是全局。“全局事件总线”，任意门那种，不用妈妈孩子一层层的传，可以跳。但具体我不了解；在我写在用户、在文章页、在各个地方点击用户头像就能跳转到用户个人页面的时候，写了一遍遍一样的方法时…我想着也许这个可以用，但我没太用。
组件化的具体应用的话，导航栏、页头页脚什么的就不说了，我做作业的过程中弄好的一个有意思的地方在，把“文章们的简略展示”这一模块单独摘成一个组件，用到的传输方式是1.大组件朝小组件给数据。
props。
不管是“按时间顺序排布”，“按搜索结果排布“，“按发布作者排布”…，都可以用，在这几个形成了单独页面的大组件中注册用于文章简略展示的小组件，把大组件发送请求后从后端拿到的数据用props传给小组件，进行处理、排版等，然后再由大组件统一展示。
然后是vue的工程文件结构。
vue这边是maim.js引入App.vue，把它作为一个子组件，然后，创建一个妈妈的妈妈？——#app，将App作为子组件；而之后的组件一般都作为App.vue的子组件，或者更常见的、在App里写个router-view然后直接在router的index.js里import一下，直接跳转就好。
对，vue里不可忽略的一个东西就是路由，vue-router，表面上只是一个跳转工具，但…作用可太大了。
首先它把跳转的代码都集中在了一起，虽然这不太重要的。重要的是它能通过router-view、路由传参、等等快速建立起页面间的关系，而且不仅仅是跳转关系，从页面跳转到网页视图显示、在url地址里搞数据传输都藏在这个一上来看起来就只是个跳转功能的玩意下。（如果说组件化主要整理的是一个个功能块的代码，方便程序员去写、修改；那路由整理的就是一个个网页，是直接和网站展示给用户的样子相关的） 另外，main.js也是引插件的地方，要注意的是，这里是全局引入插件，像一些几乎每个vue文件都要用的router，axios、element ui等等，就在这里引。自己写的组件如果用的很多很多可能也可以在这里引…对了上面提到的全局事件总线也是要在这里定义，它本质和$emit也许没太大差，但就是全局。如果那个功能不都用，就在要用的vue组件里面单独配置、引入就好。
数据代理——总是就是很方便。vue之所以能直接用this.xxx直接获取data里的数据，靠的可能就是这个。
生命周期——网页的一部分行为可以写在methods里然后依靠v-on监听用户单击或其他行为进行触发，但另一部分却不可以，这时候提供的生命周期函数，或者叫生命周期钩子的东西，created、mounted等等（它们和methods、data一样，也是个注解）就可以在网页加载的特定时期执行那部分不能靠用户点击才反应的行为（比如向后台发送请求要数据，loadTable，渲染网页不可能等用户反应了再动，一打开就要自动执行）