「P2」试下1个半月能不能水出个毕设

0、目标

将上个 springboot 项目 + html 中的html用Vue来重写,也就是在原springboot项目中集成Vue

1、在界面上,将html改成vue的形式

1.1、原html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<form action="/user/login" method="post">
    用户名:<input name="username" type="text"/><br>
    密码:<input name="password" type="password"> <br>
    <input type="submit" value="登录">
</form>
</body>
1.2、Vue形式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <form v-on:submit.prevent="login">
            用户名:<input type="text" v-model="username"><br>
            密码:<input type="password" v-model="password"><br>
            <button type="submit">登录</button>
        </form>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: '',
            },
            methods: {
                login: function () {
                    // 这里是登录逻辑
                }
            }
        })
    </script>
</body>
</html>

2、实现登录功能

对于前端,改写的Vue代码中,函数login是留空的,还不知道怎么写,目前还只是模仿到对应的样子而已

            methods: {
                login: function () {
                    // 这里是登录逻辑
                }
            }

而对于后端,我们知道,想要访问的接口是/user/login
image.png

最终想要的就是点击登录后,就可以显示成功,或者是失败,这里我增加了一些代码,为了显示登录和成功
image.png

2.1、前期调研

现在找了一圈,没有什么很简单拿来就用的,归纳为
-- axios请求的api不是本地的
-- axios请求的api是本地的,但是我现在的后端项目和博客的对不上

最优的办法就是
-- 有从0到1,前后端,加上数据库的实现;这样我就可以抛弃我现在的项目,完全跟做
-- 之前抄的那个博客有后续,可以跟着做这个Vue的集成

总结

找了一大圈,感觉还是得看视频,因为我现在根本就没有一个完整的体系,连很多基础的知识都不会,时间大多都浪费在找路上,而不是走路

本文转载于网络 如有侵权请联系删除

相关文章

  • 浅谈PostgreSQL中的并发实现

    一般实现数据库的并发会采用三种方式,分别是多版本并发控制(MVCC),严格两阶段锁(S2PL),乐观并发控制(OCC).在MVCC中,每个更新操作都会创建新的一个数据版本,并保留旧版本。当事务读取数据对象时候,系统会根据一定的策略选择一个数据版本读取,这样读写都不会互相干扰。基于S2PL的数据库系统在写操作发生时会阻塞相应对象上的读操作,因为写入者获得了操作对象的互斥锁。PostgreSQL采用了基于MVCC的变体,叫做快照隔离级别(SI)目前Oracle数据使用undo来实现快照隔离级别。当新数据写入对象时,旧版本对象数据先把写入到undo回滚段中,随后用新对象数据覆盖数据区域。MySQL会记录最新记录和历史记录的联系,每次访问根据最新记录和历史记录的版本来确定哪条记录是对自己可见。PostgreSQL使用相对比较简单的方式,将新数据对象直接插入到表的页中,读取对象时候,根据PostgreSQL可见性检查规则选择不同的版本,这样做会导致PostgreSQL新旧数据在一起,如果vacuum做的不及时,会导致表的空间无法被回收,其次也会造成表的膨胀。目前社区在研发zheap存储引擎,来替

  • 简直是牛B惨了!

    今天给大家推荐一波,带视觉效果的CocosStore作品,非常亮眼,注意保护好视力!SSRBluePrintStarterKit作者:超级浣熊——supersuraccoon 介绍:SSRBluePrintStarterKit是一个类似UnrealEngine蓝图框架样板。作者的ShaderEditor插件便是基于该框架开发。SSRBluePrintStarterKit包含的内容丰富,包含有面板、槽点、链接线、组、画布、有向图等基础元素。在线文档: http://supersuraccoon.gitee.io/ssrblueprintstarterkit/jsdoc 视频演示: https://www.bilibili.com/video/BV1v3411q73x 作品链接: https://store.cocos.com/app/detail/3228SSRDynamicMaterial作者:超级浣熊——supersuraccoon 介绍:该源码是将glsl规范的字符串,动态转换为CocosCreator规范的Material/材质。比如开发者可以使用服务器发来的Shader源码,动

  • Elasticsearch之删除索引

    1、#删除指定索引curl-XDELETE-uelastic:changemehttp://localhost:9200/acc-apply-2018.08.09 {"acknowledged":true}复制2、#删除多个指定索引,中间用逗号隔开curl-XDELETE-uelastic:changemehttp://localhost:9200/acc-apply-2018.08.09,acc-apply-2018.08.10复制3、#模糊匹配删除curl-XDELETE-uelastic:changemehttp://localhost:9200/acc-apply-* {"acknowledged":true}复制4、#使用通配符,删除所有的索引curl-XDELETEhttp://localhost:9200/_all 或curl-XDELETEhttp://localhost:9200/* _all,*通配所有的索引 通常不建议使用通配符,误删了后果就很严重了,所有的index都被删除了 禁止通配符为了安全起见,可以在elastics

  • 源码系列:基于FPGA的VGA驱动设计(附源工程)

    大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是缘分。大侠可以关注FPGA技术江湖,在“闯荡江湖”、"行侠仗义"栏里获取其他感兴趣的资源,或者一起煮酒言欢。 今天给大侠带来基于FPGA的VGA驱动设计,附源码,获取源码,请在“FPGA技术江湖”公众号内回复“VGA驱动设计源码”,可获取源码文件。话不多说,上货。 设计背景VGA(VideoGraphicsArray)即视频图形阵列,是IBM于1987年随PS/2机(PersonalSystem2)一起推出的使用模拟信号的一种视频传输标准。这个标准对于现今的个人电脑市场已经十分过时。但在当时具有分辨率高、显示速率快、颜色丰富等优点,在彩色显示器领域取得了广泛的应用,是众多制造商所共同支持的一个低标准。设计原理VGA的实体图与接口示意图,如下图所示,它有15个针孔:在本次设计使用的开发板中,VGA的电路原理图如下图所示:通过原理图,我们不难发现,VGA需要我们控制的接口只有5个:显示器的扫描规律是什么?本设计采用逐行扫描,逐行扫描是扫描从屏幕左上角一点开始,从左向右逐点扫描,每扫描完一行,电子束回到屏幕的左边下一行的

  • AWS 命名提示需要指定 region

    在使用命令awscodeartifactget-authorization-token生成token的时候得到提示:Youmustspecifyaregion.Youcanalsoconfigureyourregionbyrunning"awsconfigure".复制解决办法其实解决办法已经告诉你了,你需要在你的命令行中运行C:\Users\yhu>awsconfigure进行配置。配置将会要求你输入:AWSAccessKeyID[None]: AWSSecretAccessKey[None]: Defaultregionname[None]: Defaultoutputformat[None]:复制上面的信息,AWSAccessKeyID和AWSSecretAccessKey在AWS控制台的IAM中找。在上面的页面中选择安全配置。在这里将会有配置分区。如果你需要新的AWSAccessKeyID和AWSSecretAccessKey,你可以在这里重新创建,需要注意的是AWSSecretAccessKey只会出现一次,你需要将AWSSecretAccessKe

  • JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承

    1原型链1.1原型关于原型在JavaScript进阶教程(1)--面向对象编程这篇文章已经讲过了,今天简单来复习一下。1.1.1什么是原型?在JS构造函数中有一个属性prototype,叫做原型,这是给程序员使用的。在JS实例对象中有一个属性__proto__,它也是原型,这是供浏览器使用的,它不是标准的属性。实例对象中的__proto__指向的是该实例对象中的构造函数中的prototype,构造函数中的prototype里面的属性或者方法,可以直接通过实例对象调用。一般情况下,实例对象.__proto__才能访问到构造函数中的prototype的属性或者方法,即per._proto_.eat()。因为__proto__不是标准的属性,所以直接写成per.eat()即可,原型是一个属性,而这个属性也是一个对象。1.1.2原型的作用:数据共享,节省内存空间在构造函数中定义的属性和方法,当实例化对象的时候,实例对象中的属性和方法都是在自己的空间中存在的,如果是多个对象。这些属性和方法都会在单独的空间中存在,浪费内存空间,所以,为了数据共享,把想要节省空间的属性或者方法写在原型对象中,达到了

  • 以萨姚巍:AI 安防的“多维”打法

    以萨副总裁姚巍雷锋网《AI掘金志》频道:只做AI+「安防、医疗、零售」三大传统领域的深度采访报道。有人说,战术问题不是问题,错了也无关痛痒,但战略错了,则极可能一去不复回——于个人、于公司如是,于国家更如是。就AI安防赛道,以萨与其他玩家的战略打法总是有些异同。当大多数公司聚焦“人脸”,发力安防时,以萨的技术主体围绕“车”而展开;当对手们在“人脸”赛道刀剑相争后、你乏我疲时,以萨的航道又从“车”转向做“多维数据融合分析”。“所谓多维数据融合分析,就是打通各类公安与社会前端采集的结构化和非结构化、动态和静态的多维度数据,将一些数据片段串成一条线去融合分析,从“物理结合”走向“化学融合”。至于具体数据,它绝不仅仅存在于人脸识别、车辆识别、生物识别、物体识别等AI常规认知领域,还有基于公安业务管理数据的顶层AI应用,一个广泛的无人区。”以萨副总裁姚巍向雷锋网解释说,“我们以前、现在及未来要做的事情很简单,就是要为这个社会上的每一个人、每一辆车建立一个‘档案’,然后通过AI等技术更好、更快、更全面地识别他们、分析他们。”成立于2015年的以萨是一家以视频人工智能为核心的多维数据融合分析解决方案

  • 什么是架构师?一 什么是架构师 二 架构师的职责三 架构师的误区四 架构师的基本素质五 架构师需要掌握的技术体系

    一什么是架构师 曾经有这么个段子:甲:我已经应聘到一家中型软件公司了,今天上班的时候,全公司的人都来欢迎我。乙:羡慕ing,都什么人来了?甲:CEO、COO、CTO、Allof程序员,还有会计、司机都来了。乙:哇,他们太重视你了,人才啊,这么多人迎接你!甲:没有啊,就一个人!乙:靠,#%¥$%...很多的创业公司,一人身兼数职的情形还是很常见的。至少,我是经历过的,一个人包办了所有的开发过程,连测试我都做了,绝对的一条龙,但是经常踩钢丝、骑独轮车总会有失足的时候,结果有一次,从我手里发出去的光盘母盘,含有病毒僵尸,以至于被迫收回已经推上市场的2万张光盘,从那之后,我的心脏就开始变得无比坚强,现在就是整个后台服务都瘫痪了,我也只是微微一笑。其实,一个人身兼架构师和程序员,甚至多种角色,没什么不妥,后面还会讲这个话题,这种现象不是中国特色,跟国外是完全接轨的。我曾经跟米国的一个工程师在msn中聊过类似的话题,发现他们的路子跟咱们没什么不同,在IT这个行业,我们跟世界的差距只有1天,他们刚弄出来的新东西,我们这里第2天保准见得到。架构师这个称呼不是拍脑袋想出来的,是有国际标准(ISO/IEC

  • 如何做一个高效的前端

    不知大家有没类似这样的经历:一天忙到晚,一会被PM叫去确认需求,一会被设计拉去确认UI是否能实现,一会又被测试叫去确认bug,然后貌似做了很多事,但好像工作进度也没什么进展。然后,只能晚上加班,在夜深人静时还得敲代码,苦逼。。。如果我们的工作效率能高一点,那也就不会那边的苦逼了。所谓高效,就是,在更少的时间做更多的事。如何做?我的做法是,观察自己做事的每个流程,看哪些可以优化。举个例子,做一个页面的流程理解需求。思考实现方法。切图。编码。调试。改bug。如果某个流程花了很多时间,可以考虑优化。比如,如果编码很慢,考虑,是不是不熟悉框架,所以要经常查文档?还是做了很多可以用工具做的事情?以此,找到解决方案,来提高效率。下面时一些具体的建议。时间管理不同的时间段做不同的事。头脑清醒的时候,做一些难的事情;状态欠佳的时候,做一些简单的事,或干脆出去走走,休息休息。做事时要专注。在我们专注做事时,要减少外界的干扰,比如带上耳机,将手机开静音。如果此时有人来打扰,稍后来处理他的事情;如果事情比较紧急,则记录下当前的状态,方便切换回来的时候,能迅速进入状态。我们可以尝试使用番茄工作法:在一段时间内

  • 足球数据 | 被对手进球后的十分钟内最有可能扳回比分

    大数据文摘作品转载具体要求见文末作者|AlexBleakley选文|Aileen翻译|徐宇文校对|王昱森摘要:在凌晨结束的世预赛亚洲区12强赛第4场比赛中,中国队客场0比2不敌乌兹别克斯坦,4战之后仅积1分。赛后,国足主帅高洪波在发布会上宣布辞职。有人说,当一支足球队刚进球了以后,他们会突然变得比之前更容易被对方进球,这种说法是可靠的吗?这一现象又与主客场、球队实力等因素有无关系?来自英国的作者AlexBleakley通过数据分析,针对这一现象进行了研究:他分析了2015-2016赛季的英超联赛数据,比较在前一个进球之后10分钟以内的进球数量与同一个联赛所有比赛中的相同10分钟时段的进球数量,并得出了有趣的结论:尽管双方球队在发生进球后的5分钟内都比较难再次进球,但是在这之后的5分钟内,失球球队进球的可能性很高。◆◆◆有人说,当一支足球队刚进球了以后,他们会突然变得比之前更容易被对方进球,这种说法是可靠的吗?上周,我们就进球是不是更倾向于成对出现进行了研究,具体做法是比较在前一个进球之后10分钟以内的进球数量与同一个联赛所有比赛中的相同10分钟时段的进球数量。我们还将每支队伍的实力差别

  • 我的第二个网页制作:p,hn,br标签的使用

    1<html> 2<head> 3<title>这是我的第二个html代码</title> 4<body> 5<!-- 6<p>HelloWorld!</p> 7<p>HelloWorld!</p> 8--> 9我爱北京天安门<br/> 10我爱北京天安门<br/> 11我爱北京天安门<br/> 12<h1>你好</h1> 13<h2>你好</h2> 14<h3>你好</h3> 15<h4>你好</h4> 16<h5>你好</h5> 17<h6>你好</h6> 18</body> 19</head> 20</html>复制生成效果如下:只有在记事本这样写才不会出错,如果换成编译器的话会出现如下结果:这个问题我调了好久都不知道哪里错了,最后发现只要加一行语句

  • 关于php运算符优先级的几道题

    今天正好群里有人在问一道php运算符优先级的问题,正好以前也遇到过类似的问题,这里整理一下吧,方便大家理解以防掉坑:)先来道简单的:$a=3; if($a=5){ $a++; } var_dump($a);//(int)6这里掉坑的同学会认为是3.注意=号是赋值==比较运算符 所以一个好的编码习惯对于数字来说最好把它放前面写成5==$a这样即使你写成了5=$a此时会报错不会是隐式的赋值 来,我们接着看下一个坑. $x=2; echo$x==2?'我':$x==1?'你':'它';//你 掉坑里的同学可能认为结果是我,因为$x确实等于2根据三元运算符的规则?前为true就输出我了. 这里的知识点在于运算符优先级以及三元运算符左结合的特性,其实真正的执行流程是这样的: $x=2;//将2赋值给变量x没啥说的 echo$x==2?'我':$x==1?'你':'它';//你 //因为==的优先级比三元运算符高所以转换成如下代码 #echotrue?'我&#x

  • 一大拨漏洞来袭,eBAY的黑色星期五

    写在前面: eBay没有保护好自己用户的数据,在之前他也犯过类似的错误,但是这次显然eBay的安全团队没有吸取到前车之鉴。这次他们同样要为自己对安全的消极态度买单。原文地址http://thehackernews.com/2014/05/worst-day-for-ebay-multiple-flaws-leave.html正文:在不到36小时之内,eBAY就再次报出了3个高危的,能够导致用户数据泄露的漏洞。即使你在最后一次安全通告之后修改了密码,你的账号依旧存在风险。5月22号,eBAY承认了海量数据的泄露,大约有14500万来自世界各地用户的账户信息遭到了泄漏。产生这个问题的原因是eBAY的基础架构存在漏洞。5月23号的早晨一定是,eBAY安全工程师最头疼的一个早上,因为他们要处理三个截然不同的高危漏洞,这三个漏洞都会把14500万的账户信息暴漏在风险之中。HACKERUPLOADEDSHELLONeBAYSERVER这是一个上传漏洞,由JordanJones发现。这个漏洞可以导致员工账号能上传一个webshell。Jordan在twitter上报告了这个漏洞,并且附带了一个web

  • AVL树

    详细描述,好像跟我自己写的差不多......不过终究是大神级别,讲的就是透彻1.概述AVL树是最早提出的自平衡二叉树,在AVL树中任何节点的两个子树的高度最大差别为一,所以它也被称为高度平衡树。AVL树得名于它的发明者G.M.Adelson-Velsky和E.M.Landis。AVL树种查找、插入和删除在平均和最坏情况下都是O(logn),增加和删除可能需要通过一次或多次树旋转来重新平衡这个树。2.基本术语有四种种情况可能导致二叉查找树不平衡,分别为:(1)LL:插入一个新节点到根节点的左子树(Left)的左子树(Left),导致根节点的平衡因子由1变为2(2)RR:插入一个新节点到根节点的右子树(Right)的右子树(Right),导致根节点的平衡因子由-1变为-2(3)LR:插入一个新节点到根节点的左子树(Left)的右子树(Right),导致根节点的平衡因子由1变为2(4)RL:插入一个新节点到根节点的右子树(Right)的左子树(Left),导致根节点的平衡因子由-1变为-2针对四种种情况可能导致的不平衡,可以通过旋转使之变平衡。有两种基本的旋转:(1)左旋转:将根节点旋转到(

  • [每日算法] 并查集数据结构及其实例-- day15

    [每日算法]并查集数据结构及其实例--day15✨博主介绍并查集数据结构数据结构核心代码InitFindUnionFind(Optimized)例题?点击直接资料领取?✨博主介绍?个人主页:苏州程序大白 ?个人社区:CSDN全国各地程序猿 ?作者介绍:中国DBA联盟(ACDU)成员,CSDN全国各地程序猿(媛)聚集地管理员。目前从事工业自动化软件开发工作。擅长C#、Java、机器视觉、底层算法等语言。2019年成立柒月软件工作室,2021年注册苏州凯捷智能科技有限公司 ?有任何问题欢迎私信,看到会及时回复 ?微信号:stbsl6,微信公众号:苏州程序大白 ?如果文章对你有帮助,欢迎关注、点赞、收藏(一键三连) ?想加入技术交流群的可以加我好友,群里会分享学习资料 并查集 并查集是简洁而优雅的数据结构之一,主要用于解决一些元素分组的问题。它管理一系列不相交的集合,并支持两种操作:合并(Union):把两个不相交的集合合并为一个集合。 查询(Find):查询两个元素是否在同一个集合中。 数据结构并查集的重要思想在于:用集合中的一个元素代表集合。如果把集合比喻成帮派,而代表元素则是帮主,接下

  • 2022最新注册谷歌账号的方法| 注册谷歌Gmail卡在最后一步“此电话号码无法用于进行验证”已解决!

    注册谷歌Gmail账号卡在手机号验证上,可把我急坏了,搜遍网上的注册谷歌账号的教程,终于得到一个解决方案的经验了!①我首先是注册谷歌账户(2022.8月份弄的好像)是用QQ邮箱注册的,对,你没有听错,是QQ邮箱注册谷歌账户。QQ邮箱注册很简单,点击图中画圈部分,填入你自己qq邮箱,注册谷歌账户很简单,然后根据提示,就可以了,这样你就拥有了谷歌账户.但是QQ邮箱注册没几天很快就出现异常验证了:如果你是注册一个谷歌账号来玩游戏,千万不要在QQ邮箱或网易邮箱上注册;因为会有两种结果: 1.注册没成功过,基本都是卡在“此电话号码无法用于验证用途”的提示上,让人狂点无效,甚至怀疑人生。 2.很幸运地,突然就通过了谷歌的验证,手机也收到了验证码!然而输入验证码下一步一直显示在缓冲,加载不出下一页,无奈只能按返回重新注册。然而!!!这次就没法过验证了,显示“此电话号码已多次用于验证”。。。3.以上两种情况都没有发生,顺利注册成功!然而当你正登陆玩游戏造好各种角色后,过了一两天,显示登陆异常了!你一下子就蒙了,什么情况?②谷歌浏览器网页版注册添加gmail(看图)网页上弹出很多应用,点击gmail,,

  • Codeforces Round #536 (Div. 2)

    A.LunarNewYearandCrossCounting 题解: 1#include<cstdio> 2 3usingnamespacestd; 4constintmaxn=500+10; 5constintdx[]={1,1,-1,-1}; 6constintdy[]={1,-1,1,-1}; 7charG[maxn][maxn]; 8intn; 9intans; 10intmain(){ 11scanf("%d",&n); 12for(inti=0;i<n;i++) 13scanf("%s",G[i]); 14for(inti=0;i<n;i++){ 15for(intj=0;j<n;j++){ 16if(G[i][j]=='X'){ 17intflag=1; 18for(intk=0;k<4;k++){ 19intnx=i+dx[k]; 20intny=j+dy[k]; 21if(G[nx][ny]!='X'){ 22flag=0; 23break; 24} 25} 26if(flag){ 27ans++; 28} 29} 30

  • MySQL 巡检点

     

  • vue学习05

    1

  • 【CF802O】April Fools&#39; Problem (hard)(WQS二分+模拟费用流)

    点此看题面 给定两个长度为\(n\)的序列\(a,b\)。 要求选出两个长度为\(k\)的子序列\(a_{i_1},a_{i_2},...,a_{i_k}\)和\(b_{j_1},b_{j_2},...,b_{j_k}\),满足\(\forallp\in[1,k],i_p\lej_p\)。 求选出子序列权值和的最小值。 \(k\len\le5\times10^5\) 暴力费用流 考虑一个暴力的费用流: 从超级源向所有\(a_i\)连一条容量为\(1\)、费用为\(a_i\)的边。 从每个\(a_i\)向满足\(i\lej\)的所有\(b_j\)连一条容量为\(1\)、费用为\(0\)的边。 从所有\(b_j\)向超级汇连一条容量为\(1\)、费用为\(b_j\)的边。 由于费用流可以一点一点地增加流量,只要増广\(k\)次即可求出答案。 \(WQS\)二分+模拟费用流 注意到费用流每增加一点流量,所需的费用肯定是单调不减的。 也就是说这是一个凸函数,那么就可以使用\(WQS\)二分来优化。 我们二分一个额外价值\(mid\)(\(mid<0\)),把所有\(a_i,b_j

  • 请求分页内存管理的模拟

    一、实验题目 完整代码地址:https://github.com/SheepHuan/homework/tree/master/java/java%E5%AE%9E%E8%B7%B5%E8%AF%BE/%E4%B9%B1%E4%B8%83%E5%85%AB%E7%B3%9F/src/OS 二、代码 1.Main.java packageOS; importjava.util.Scanner; publicclassMain{ publicstaticintpageSize,blockSize,procSize; PCBpcb; Memeroymem; publicstaticvoidmain(String[]args){ Mainm=newMain(); m.SysInit();//系统初始化 m.pcb=m.NewProc();//模拟队列初始化 m.Access(m.pcb); } voidSysInit(){ Scannersc=newScanner(System.in); System.out.println("请求输入

相关推荐

推荐阅读