··
893
·
2024-05-19 21:17

Vue初学记录

网站开发,需要前端与后端的开发。前端指用户端、浏览器端,是用户能看得到的部分。后端指服务器端,是用户看不到的部分。前端开发,需要用到CSS3和HTML5以及JavaScript。后端开发能用的编程语言则很多了,主流的有python、java等,只要我们电脑能够使用的编程语言,服务端都能使用。目前流行前后端分离,后端只需要提供好接口就行了,前端直接使用后端的接口。


前端三大框架:Vue、react、Angular


Vue是目前中国使用比较多的框架,因为创造这个框架的是中国人——前谷歌员工Even You。React框架则是Meta公司(原Facebook公司)创造的框架,Angular是谷歌建立的框架。从最近GitHub的数据上看,Vue是目前全世界下载量最多的框架,第二大的为React,第三为Angular。


前端框架建立的目的,其实是为了方便开发,提高开发效率,降低开发难度。本质上,最后到浏览器那里,都是转换为CSS3、HTML5、JavaScript的语言。前端的开发,代码实现前,还需要设计UI界面,提高用户体验。因此,网站前后端开发分别对应三个职位——前端工程师、后端工程师、UI设计师。目前,每个前端框架,都有很快开源的UI库,这大大提升了前端开发的效率,降低了难度。Vue中一个主流的UI库,是饿了么团队开发的elementUI。


进入移动互联网时代,手机APP、微信小程序,都属于前端。手机的操作系统目前全球占比最多的,就两个——安卓和ios系统,其中安卓占比最高。而第三大的是微软的Windows phone,占比可以忽略不计。因此,手机APP的前端开发,可以分为安卓开发和ios开发,分别对应两个职位——安卓工程师、ios工程师。


后端java的框架有SpringBoot,后端python的web框架有Django、flask。

Django的优势:

1. 自带后台管理系统,不需要自己另行写代码创建管理员后台系统。

2. Python语言与自然语言“相近”,更好理解,更好编写。且网上资料齐全简单易学。开发时能够以解决问题为主,而不是耗费精力理解语言本身。

3. Django自带数据库访问组件,无需再花时间处理SQL数据库语言,以及数据库的配置等等。

4. Django功能齐全,自带大量常用工具和框架,能更轻松、快速的开发应用。

5. Django比较“重”,非常适合大项目、大工程的开发,这对企业提高效率、降低成本,至关重要。


项目计划:使用Vue3 + Django 4.2全栈开发网站,即前端使用Vue3,后端使用Django 4.2,前后端分离开发网站。

Vue3的IDE:VS code;Django 4.2的IDE:Pycharm。Vue3使用UI库:ElementUI plus。


开发进度:

1. 使用el-form、el-input、el-button等,构建登陆注册表单。

2. 用vue3自带的v-model进行数据的双向绑定,使用rule来对输入表单的数据进行验证。

3. 使用el-menu在页面顶部栏构建导航栏,且设置相应的页面跳转,配置route路由。

4. 在<script setup></script>中引入npm库等等。

5. 在<script></script>里面加入

export default {
  data() {
    return {
    }
  }

在return中,写入表单数据以及rule验证数据。

在methods中写入方法

methods: {
    login() {
    },
  }

6. 在<style></style>中加入CSS样式,修改页面布局,包括添加背景颜色。在项目文件中添加global.css,修改html、body的高度,不然div高度为零,背景颜色无法铺平整个页面。同时,修改最小宽度min-width,使得正常大小的页面(100%缩进)能够被刚好背景铺平。

0 人喜欢

Add a comment
Comments
Nekomusume
·
8 months ago

感谢支持!!!😊😉🤣😄

0
Like
Dislike
Reply
Ricciflows
·
10 months ago


0
Like
Dislike
Reply
Ricciflows
·
8 months ago

👼😣

0
Like
Dislike
Reply
Ricciflows
·
8 months ago

@Ricciflows:🤑😤😓

0
Like
Dislike
Reply
Ricciflows
·
2 months ago

Hahhh you have to be careful about the election results have to go back and get to

0
Like
Dislike
Reply
View all 4 replies
Ricciflows
·
10 months ago

感谢分享!🤗

0
Like
Dislike
Reply
Ricciflows
·
10 months ago

🤗666

0
Like
Dislike
Reply
Ricciflows
·
10 months ago

233333😅

0
Like
Dislike
Reply
Ricciflows
·
3 months ago

test

0
Like
Dislike
Reply
View all 5 replies

弦圈热门内容

数学与物理公式可以精准简洁地描述自然现象,究竟是世界本就如此巧妙,还是科学家努力简化后的结果?

这个问题有点像数学究竟是人发明的,还是人发现的?每个人基于不同理念、哲学观,会有不同的答案。而如今这个问题,可以引申出几个类似的问题。世界的底层运行规律究竟是复杂的,还是简洁的?物理定律究竟是真理,还是人类为解释宇宙而创造的?(类似于数学是否人造?)数学定理或者物理定律是绝对真理吗?或者说存在绝对真理的数学定理或者物理定律吗?这些问题都涉及到一种哲学观,没有标准答案,只是你观念的不同。回到这个问题,我是持爱因斯坦的那种观点,认为宇宙能够由简洁而优美的数学所描述,因为宇宙的底层规律本身就是足够简单的,只是人类未曾发现。换句话说,这就有点像线性空间的基底一样,只需要几条简单的定律,就可以通过线性组合,不断复杂化,最终产生如今的宇宙。这里又涉及到一个问题,即这个线性空间到底是有限维的,还是无穷维的?不过基于世界本质的简单性,从审美角度出发,我更倾向于假设这个线性空间是有限维的。因此,从这个角度看,如果数学或物理公式不够简洁和美妙,那么其本身所蕴含的奥秘也就越浅显,并且距离世界的本质就更远,即引用高斯的话“距离神更远”。故而简洁的数学或物理公式,更多的是科学家们发现的结果,是自然的,而不是刻意 ...

国内曾经出现过很多的数学论坛,但是为什么如今大多数都访问不了了?

今天我在知乎宣传弦圈的时候,回答了一个问题有哪些数学论坛值得推荐?,结果发现有好几个回答里的数学网站已经访问不了了。这些回答里的几乎所有数学网站,我都未曾听说过(正如弦圈很多人不知道一样),这证明国内曾经也出现过很多数学论坛,有些或许曾经也辉煌过,但是最后都坚持不下去了。我做数学的时候,用的数学论坛基本上都是国外的MathStackExchange和Mathoverflow,知乎也很少用。可以说国内目前除了知乎,就没有高人气的数学论坛。毕竟本来纯数学就是一种非常小众的文化,而数学这种严肃的内容,也注定不会有高活跃、高互动的用户。因此可以看到很多国内的数学网站都已经不能访问了,有些还“活”着的,其实也是半死不活,空有用户量,但活跃度却低得可怜。而知乎的数学也早就变味了,彻底娱乐化了,真正有营养的内容已经没多少,真正有实力的大佬也相继退乎,回答都删得干干净净的。似乎中文互联网中已经没有太多数学文化的栖息之地了。国外虽然也好不到哪里去,但却跟国内天差地别,最大的MathStackExchange和Mathoverflow两个数学论坛,虽然也是不能盈利,纯粹靠捐赠维持生计,但是却能保持纯粹的数 ...

前端跨平台开发框架对比:Flutter vs Tauri vs React Native

传统移动端开发往往需要同时兼顾Android和IOS的开发,而桌面端开发又需要同时兼顾Windows、MacOS、Linux系统。如果你想要全平台覆盖,不仅意味着要同时维护多套完全不同的代码(极大提高了维护成本),并且代码和逻辑还可能不能复用,这意味着高昂的开发成本(极低开发效率),每个平台都得从零开始写。现在国内还多出个鸿蒙系统,这意味着你要同时开发和维护更多套代码,哪怕补贴钱,这成本也不是小企业能够负担得起的。于是,跨平台框架应运而生,Facebook开源的React Native,曾经是最流行的框架,不过近几年被Flutter超越。它不仅能让你使用React语言同时开发Android和IOS APP,甚至还能进行Windows桌面端开发。而谷歌开源的Flutter,是目前最流行的跨平台框架,略微领先React Native。它能让你使用dart语言开发移动端与桌面端应用。而Tauri则允许你使用任何前端框架进行全平台开发,不过也需要你懂得一些Rust语言。我们先从开发体验出发来对比这三个跨平台框架。首先,React Native能够让你完全用JSX语言来进行跨平台开发,这对于本身 ...

给Web开发者写的React Native简介,React Native与React的区别与对比(2)

本文我们继续之前的话题给Web开发者写的React Native简介,React Native与React的区别与对比(1),在上文中我们讲到在React Native想要写&lt;p&gt;或者&lt;span&gt;需要用Text组件。除了展示文本,还有一个很重要的东西就是展示图片。在React Native中你无法使用HTML的&lt;img&gt;,而要用React Native提供的Image组件。处理图片可以说是React Native中的一个难点,因为在React Native中无论是什么图片都需要你设置一个宽度和高度,见实例:import React from 'react'; import {Image} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const DisplayAnImage = () =&gt; ( &lt;SafeAreaProvider&gt; &lt;SafeAreaView s ...

弦圈登录功能完成更新,之后只要登录一次便可长期保持登录

原标题:弦圈登录功能完成更新,之后只要登录一次便可长期保持登录。目前该功能仍在测试阶段不稳定,如果发现有登录后掉线问题,可以试试清空cookie。这几天,我对弦圈的登录功能进行了更新,换了目前最新的OAuth2技术,取代以前的session登录。基于OAuth2的登录功能有很多好处,首先第一个就是能够长时间的保持登录状态,现在大家上网,无论是哪个平台,你都会发现自己只要登录一次,哪怕过了很久再打开,仍然是登录状态。第二个好处就是,token是无状态的,因此会占用更少的服务器资源,这意味着弦圈负荷更小、访问更顺畅。旧登录功能基于session是有状态的,如果人多起来,服务器负荷直线上升,这或许也是之前卡的原因之一吧。由于我是第一次在Web端使用OAuth2实现登录功能,因此刚开始更新的时候,网站还是有很多bug。比如说最大的一个bug就是,关闭浏览器后重新打开,需要重新登录,这显然问题很大。而这个bug今天经过我整整一天的艰难调试,终于是修好了。别小看一个简单的登录功能,尤其是OAuth2,前后端实现真的挺复杂。最后虽然网站代码已经更新好了,但是用户浏览器里的cookie是不会因此自动删 ...

给Web开发者写的React Native简介,React Native与React的区别与对比(1)

React Native是React下的一个跨平台框架,能让你用熟悉的React JSX语法来进行跨平台开发。所谓的跨平台开发是如今的一种趋势,即用同一种语言来同时进行Web端、手机端安卓与IOS、桌面端Windows、MacOS、Linux的开发。这样不仅能极大的提高开发效率,同时大大增加了代码的可维护性,节省了大量的成本。然而React Native虽然带个React,用的也是JSX语言,却跟React有很多不一样的地方。因为React Native不仅面向网页端,还面向手机端APP,而React Native的代码会直接编译为native原生代码。在本文中,我将会列举说明几个React Native的不同之处。首先,在React Native中我们不能像React那样直接使用HTML语言,因为无论是Android还是IOS,都无法编译HTML语言。因此,我们需要使用React Native提供的组件。在React Native中,如果你想要写&lt;div&gt;,则需要换成&lt;View&gt;。View组件在Web端会被编译成&lt;div&gt;,而在Android和IO ...

React Native UI库介绍与对比

React Native的生态与React.js相比,没那么丰富,或者说手机端的生态本身就跟Web端相差甚远。React.js作为Web端虽然生态丰富,但由于其JS库大多数都不能直接用在React native中,因此很多在Web端存在诸多解决方案的问题,如代码块高亮、渲染数学公式,在手机端都难找到合适的办法。React Native的UI库,其实可以选择的并不多,不像Web端百花齐放,选个UI库都能选择困难症。在本文,我将会介绍几个我所知道的React native UI库,其中有几个我是用过的。1. React Native Paper这是一个Material Design风格的UI库,在GitHub拥有13.4k个stars,官方文档👉React Native Paper。该库安装步骤简单,组件使用以及自定义也容易,唯一的缺点就是组件不够多,有些场景需要你另外补充其他库来满足需求。React Native Paper应该是React native唯一一个Material Design UI库,该库能够跟React native navigation整合,构建Material风格的 ...

🇪🇸 3.3 阿维拉

​宛如异世界城镇般的城市,中世纪时期的巨大的围墙将整个旧城区彻底包围,竟然没有经过火药的洗礼,一直保存至今。尖顶城垛却有着半圆形的塔楼,很明显是融合了穆斯林世界和基督教王国的风格,印证了阿维拉在再征服运动中的战略地位。不知道巨人里的玛利亚之墙灵感会不会是来自这里()没有过度的商业化和游客旅行团,所有的古迹都显得如此纯粹。以及三月正是赏樱的季节,没想到在西班牙也能欣赏到灿烂绽放的樱花,这几天在卡斯蒂利亚拉曼查的赏樱体验也是十分独特,比起虽然是漫山遍野但却人山人海的樱花园,我更喜欢一个人独自欣赏公路旁孤芳自赏无人问津的野樱。具有东方色彩的樱花竟然能与西式的城墙塔楼同框,有一说一确实有种奇妙的违和感()不过说起来不知道什么时候能有机会在樱花祭再去一次日本呢😭

由于备案需要,xianquan.net暂时关闭,原地址manitori.xyz可正常访问。由于苹果开发者账号费用过高,弦圈APP IOS版暂不支持。

这几天,我在给弦圈新域名xianquan.net以及弦圈APP备案,其中域名备案为了让管局通过,需要我暂时关闭掉xianquan.net,多有不便尽请谅解。弦圈的原地址manitori.xyz不受影响,可正常访问,然后未来manitori.xyz是不会丢弃的(见弦圈更换新网址xianquan.net,原地址manitori.xyz保留)。接着,这几天我原本打算把弦圈APP IOS版也给上线了,可惜苹果太吸血了,每年费用比微信还得高一半。因此我决定暂时只支持弦圈APP安卓版,IOS版等以后再说吧,虽然代码写了,但是无法打包IPA文件,而且就算打包完成也无法安装到苹果手机。最后不得不说,目前访问弦圈还是有点卡,虽然之前已经优化过了(最近有人反馈网站卡、打不开,我自己也试过这种情况,已再次对弦圈进行优化),但人多了还是会明星感觉到卡。原因目前也基本确定,之后我会再次更换并升级服务器,而更换服务器就需要迁移数据,迁移数据过程需要关停服务器。为了将影响降到最低,我选择关闭服务器在晚上进行,错开访问高峰。

弦圈APP已开发完成,准备发布

经过两个月的漫长艰难开发,大家期待已久的弦圈APP终于开发完成,目前正在准备发布的工作。马上弦圈APP的第一个版本就要跟大家见面了,暂时先推出安卓版,之后测试完苹果手机再推出IOS版。目前弦圈APP的核心功能已经基本开发完毕,包括:写文章、发帖子、回答问题、创建圈子、看文章、看书、看帖子、看词条、圈子、看问题和回答、发布评论与回复、点赞与踩、收藏夹、关注用户、搜索、用户中心、个人主页、设置、消息中心等等。但是仍然有一些未完成的功能,这些功能计划之后慢慢更新吧,它们包括:创建词条、写书、提问、任务中心、商店、赞赏、钱包与充值、交易中心、签到等等。上面提到的都是大的功能模块,下面我就提及一下APP一些细节的问题,这些问题虽然小,但也同样重要。与网页端弦圈不同,手机端弦圈APP使用markdown编辑器,用于文本格式、图片、链接等输入。关于markdown语法可自行百度,事实上markdown语法写起来比富文本要方便。至于为啥使用markdown编辑器,原因如下:首先APP跟网页端(Web端)有很大的不同,这使得想要跟Web端一样用富文本编辑器会变得困难。绝大多数现有的富文本编辑器都是基于W ...

狭义相对论核心问题

狭义相对论(Special Relativity)是爱因斯坦在1905年提出的理论,它主要为了解决经典物理学(牛顿力学和麦克斯韦电磁理论)之间的矛盾,并重新定义时间、空间、质量和能量等基本物理概念。以下是狭义相对论旨在解决的核心问题:1.经典力学与电磁学的矛盾牛顿力学的相对性原理:牛顿力学认为,在惯性参考系(匀速直线运动或静止的参考系)中,物理定律的形式保持不变(例如,在均匀运动的火车上做实验,结果与静止时一致)。麦克斯韦方程的“特殊地位”:麦克斯韦方程组预言了光速的恒定值,但经典物理认为光速应遵循伽利略变换(即速度叠加)。例如,若你以速度 v 追赶一束光,光速对你来说应变为 c - v ,但这与实验观测矛盾。矛盾的核心:牛顿力学的伽利略变换与麦克斯韦方程组的不兼容性,引发了物理学基础的危机。2.以太理论的失败以太假说的背景:19世纪物理学家假设存在一种名为“以太”(aether)的绝对静止介质,光波通过以太传播(类似声波在空气中传播)。迈克尔逊-莫雷实验(1887年):实验试图通过测量地球在以太中运动引起的“以太风”来验证以太的存在,但结果却表明光速在不同方向上始终相同,与以太假说矛 ...