「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="https://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
最终想要的就是点击登录后，就可以显示成功，或者是失败，这里我增加了一些代码，为了显示登录和成功
2.1、前期调研
现在找了一圈，没有什么很简单拿来就用的，归纳为
-- axios请求的api不是本地的
-- axios请求的api是本地的，但是我现在的后端项目和博客的对不上
最优的办法就是
-- 有从0到1，前后端，加上数据库的实现；这样我就可以抛弃我现在的项目，完全跟做
-- 之前抄的那个博客有后续，可以跟着做这个Vue的集成
总结
找了一大圈，感觉还是得看视频，因为我现在根本就没有一个完整的体系，连很多基础的知识都不会，时间大多都浪费在找路上，而不是走路
「P2」试下1个半月能不能水出个毕设的更多相关文章
- 「git」mac下git提交github代码
1.打开终端,输入 cd -/.ssh 这个是检查你的ssh的是否存在的,如果存在,先将已有的ssh备份,或者将新建的ssh生成到另外的目录下(如果第一次配置一般都是不存在的),不存在,你将会看到如下 ...
- Linux 小知识翻译 - 「i386」是什么？
i386是指 *CPU* 的种类,也可以指 *CPU* 的架构(architecture). 现在的 CPU 一般都用 「Core 2 Duo」或者「Athlon」,「Xeon」,「Opteron」之 ...
- 「CTS2019」氪金手游
「CTS2019」氪金手游 解题思路 考场上想出了外向树的做法,居然没意识到反向边可以容斥,其实外向树会做的话这个题差不多就做完了. 令 \(dp[u][i]\) 表示单独考虑 \(u\) 节点所在子 ...
- 「luogu4135」作诗
「luogu4135」作诗 传送门 分块好题. 预处理出 \(f[i][j]\) 表示 \(i\) 号块到 \(j\) 号块的答案,\(num[i][k]\) 表示 \(k\) 在前 \(i\) 块的 ...
- 「CSP-S」2019年第一届Day1游记+题解
「CSP-S」2019年第一届Day1游记+题解 Day 1 7:30 A.M. 8:10 A.M. 8:30 A.M. T1 格雷码 题目 考场经历+思考(正解) 8:50 A.M. T2 括号树 ...
- 「2013-9-5」Configure WingIDE for better display of East Asian Glyphs
很久没写软件配置相关的博客了.这次对于 WingIDE 在 Windows 下的字体配置,折腾了好一阵子,略曲折,也反映了「不清楚原理和背景的情况下,盲人摸象的效率低下是必然」这条放之四海而皆准的赤果 ...
- Loj #3059. 「HNOI2019」序列
Loj #3059. 「HNOI2019」序列 给定一个长度为 \(n\) 的序列 \(A_1, \ldots , A_n\),以及 \(m\) 个操作,每个操作将一个 \(A_i\) 修改为 \(k ...
- Linux 小知识翻译 - 「packet」(网络数据包)
用手机接收邮件或者访问网页的时候,一般会说有「packet费用」(这是日本的说法,在中国好像一般都说 “流量费”),即使对网络不太熟悉的人也知道「packet」这个词(这里也是日本的情况). 那么,「 ...
- Java的参数传递是「按值传递」还是「按引用传递」？
JAVA传递的只有值,.传递的都是栈里的的值,只是有些栈里面的是值.有的是内存地址.(原文传递的都是栈里的的值有误,局部变量在栈中,成员变量在堆中,类变量(静态变量和常量)在方法区中,可以看做本文的变 ...
- 「Python」socket指南
开始 网络中的 Socket 和 Socket API 是用来跨网络的消息传送的,它提供了 进程间通信(IPC) 的一种形式.网络可以是逻辑的.本地的电脑网络,或者是可以物理连接到外网的网络,并且可以 ...
随机推荐
- PyQt-Fluent-Widgets：一个 Fluent Design 风格的组件库
简介 这是一个使用 PyQt/PySide 编写的 Fluent Design 风格的组件库,包含最常用的组件,支持亮暗主题无缝切换.实际上此项目是从 Groove Music 项目剥离出来的子项目, ...
- ASP.NET Core使用filter和redis实现接口防重
背景 日常开发中,经常需要对一些响应不是很快的关键业务接口增加防重功能,即短时间内收到的多个相同的请求,只处理一个,其余不处理,避免产生脏数据.这和幂等性(idempotency)稍微有点区别,幂等性 ...
- 【NLP 系列】Bert 词向量的空间分布
作者:京东零售 彭馨 1. 背景 我们知道Bert 预训练模型针对分词.ner.文本分类等下游任务取得了很好的效果,但在语义相似度任务上,表现相较于 Word2Vec.Glove 等并没有明显的提升. ...
- Spring框架中都用到了哪些设计模式 ？
1.简单工厂模式 简单工厂模式的本质就是一个工厂类根据传入的参数,动态的决定实例化哪个类.Spring 中的 BeanFactory 就是简单工厂模式的体现,根据传入一个唯一的标识来获得 bean 对 ...
- Xenomai 源码分析-Part I
Xenomai Edition v3.0.5 xenomai_init() static int __init xenomai_init(void) 源码分析 setup_init_state // ...
- 一个基于GPT模型实现的Git Commit信息自动生成工具
每次提交代码的时候,你是否有为如何写Commit Message而迟迟按不下提交的时刻呢?然后,死磨硬泡写了一些并提交后,又被review的小伙伴吐槽了呢?相信很多小伙伴有过这样的经历吧? 趁着最近C ...
- 怎么在php7项目中安装event扩展
今天就跟大家聊聊有关怎么在php7项目中安装event扩展,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获. 安装支持库libevent wget ...
- order by是怎么工作的？
order by是怎么工作的? 在你开发应用的时候,一定会经常碰到需要根据指定的字段排序来显示结果的需求.还是以我们前面举例用过的市民表为例,假设你要查询城市是"杭州"的所有人名字 ...
- 使用nw.js打包以后的web项目 发布客户端
一.下载nw.js 直接前往官网下载即可 https://nwjs.io/downloads/ 二.封装最简单的客户端 nw.js下载完成后,在任意位置新建文件夹,例如nwtest,然后在文件夹中新建 ...
- PyQt5学习 （2）--QWidget（上）
描述: 1.所有可视控件的基类 2.是一个最简单的空白控件 3.控件时用户界面的最小元素:接收各种事件.绘制在桌面上,展示给用户看 4.每个控件都是矩形的,它们按Z轴顺序排序 5. ...