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个半月能不能水出个毕设的更多相关文章

  1. 「git」mac下git提交github代码

    1.打开终端,输入 cd -/.ssh 这个是检查你的ssh的是否存在的,如果存在,先将已有的ssh备份,或者将新建的ssh生成到另外的目录下(如果第一次配置一般都是不存在的),不存在,你将会看到如下 ...

  2. Linux 小知识翻译 - 「i386」是什么？

    i386是指 *CPU* 的种类,也可以指 *CPU* 的架构(architecture). 现在的 CPU 一般都用 「Core 2 Duo」或者「Athlon」,「Xeon」,「Opteron」之 ...

  3. 「CTS2019」氪金手游

    「CTS2019」氪金手游 解题思路 考场上想出了外向树的做法,居然没意识到反向边可以容斥,其实外向树会做的话这个题差不多就做完了. 令 \(dp[u][i]\) 表示单独考虑 \(u\) 节点所在子 ...

  4. 「luogu4135」作诗

    「luogu4135」作诗 传送门 分块好题. 预处理出 \(f[i][j]\) 表示 \(i\) 号块到 \(j\) 号块的答案,\(num[i][k]\) 表示 \(k\) 在前 \(i\) 块的 ...

  5. 「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 括号树 ...

  6. 「2013-9-5」Configure WingIDE for better display of East Asian Glyphs

    很久没写软件配置相关的博客了.这次对于 WingIDE 在 Windows 下的字体配置,折腾了好一阵子,略曲折,也反映了「不清楚原理和背景的情况下,盲人摸象的效率低下是必然」这条放之四海而皆准的赤果 ...

  7. Loj #3059. 「HNOI2019」序列

    Loj #3059. 「HNOI2019」序列 给定一个长度为 \(n\) 的序列 \(A_1, \ldots , A_n\),以及 \(m\) 个操作,每个操作将一个 \(A_i\) 修改为 \(k ...

  8. Linux 小知识翻译 - 「packet」(网络数据包)

    用手机接收邮件或者访问网页的时候,一般会说有「packet费用」(这是日本的说法,在中国好像一般都说 “流量费”),即使对网络不太熟悉的人也知道「packet」这个词(这里也是日本的情况). 那么,「 ...

  9. Java的参数传递是「按值传递」还是「按引用传递」？

    JAVA传递的只有值,.传递的都是栈里的的值,只是有些栈里面的是值.有的是内存地址.(原文传递的都是栈里的的值有误,局部变量在栈中,成员变量在堆中,类变量(静态变量和常量)在方法区中,可以看做本文的变 ...

  10. 「Python」socket指南

    开始 网络中的 Socket 和 Socket API 是用来跨网络的消息传送的,它提供了 进程间通信(IPC) 的一种形式.网络可以是逻辑的.本地的电脑网络,或者是可以物理连接到外网的网络,并且可以 ...

随机推荐

  1. gorm操作sqlite3，高并发读写如何避免锁库？

    1. 场景 这两天一直被这个sqlit3困扰,起因是项目中需要有这样一个中间,中间件承担着API角色和流量转发的角色,需要接收来自至少300个agent的请求数据,和健康检测的请求. 所以当即想到用g ...

  2. Git 仓库7K stars！学Java开源项目austin要多久？

    我是3y,一年CRUD经验用十年的markdown程序员‍常年被誉为职业八股文选手 开源项目消息推送平台austin仓库地址: 消息推送平台推送下发[邮件][短信][微信服务号][微信小程序][企业微 ...

  3. 4.错误代码C1083

    有的时候在VS中遇到的error C1083: 无法打开**: " * .*": No such file or directory的错误,这里总结了我遇到过的情况: 错误 C10 ...

  4. vulnhub靶场之BLUESMOKE: DEVRANDOM2|bluesmoke

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Bluesmoke: devrandom2,下载地址:https://download.vulnhub.com/bluesmoke/Bluesm ...

  5. 2023最新ELK日志平台（elasticsearch+logstash+kibana）搭建

    前言 去年公司由于不断发展,内部自研系统越来越多,所以后来搭建了一个日志收集平台,并将日志收集功能以二方包形式引入自研系统,避免每个自研系统都要建立一套自己的日志模块,节约了开发时间,管理起来也更加容 ...

  6. CentOS7环境下数据库运维---主从复制、读写分离

    1.理解MySQL主从复制原理 主服务器开启binlog日志,从库生成log dump线程,将binlog日志传给从库I/O线程,从库生成俩个线程,一个是I/O线程,一个是SQL线程,I/O线程去请主 ...

  7. 用ACDSee查看Office文档？No！有中文解决方案吗？暂未发现！

    看图软件选择 用过不少看图软件,20年前就觉得ACDSee实在太好用了,界面漂亮.速度快.格式多.体积小! 后来图像格式越来越丰富,ACDSee版本也越来越新,体积越来越大. 看图软件也越来越繁杂,免 ...

  8. 免费1年服务器，部署个ChatGPT专属网页版

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 白皮袄个免费1年服务器,部署个ChatGPT专属网页版! api.openai.com por ...

  9. 六位一体Serverless化应用，帮你摆脱服务器的烦恼

    ​ 随着互联网技术的飞速发展,越来越多的应用横空出世,是以不可避免带来了大量的服务器需求.大部分的开发者都选择购买或者租用服务器,然而这样也带来了诸多的烦恼. 1.硬件成本高昂 购买服务器费用昂贵,除 ...

  10. 运输问题和指派问题—R实现

    运输问题和指派问题 运输问题经常出现在计划货物配送和从某些供给地区到达需求地区之间的服务中,特别是每个供给地区(起点)的货物可获得量是有限的,每个需求地区(目的地)的货物需求量是已知的.运输问题中最常 ...