没有合适的资源？快使用搜索试试~ 我知道了~

首页Vue+Spring Boot简单用户登录(附Demo)

Vue+Spring Boot简单用户登录(附Demo)

25 下载量 5 浏览量更新于2023-05-03 评论 2 收藏 611KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

试读

12页

1 概述前后端分离的一个简单用户登录 Demo 。 2 技术栈 Vue BootstrapVue Kotlin Spring Boot MyBatis Plus 3 前端 3.1 创建工程使用 vue-cli 创建，没安装的可以先安装： sudo cnpm install -g vue @vue/cli 查看版本： vue -V 出现版本就安装成功了。创建初始工程： vue create bvdemo 由于目前 Vue3 还没有发布正式版本，推荐使用 Vue2 ：等待一段时间构建好了之后会提示进行文件夹并直接运行： cd bvdemo yarn serv

资源详情

资源评论

资源推荐

Vue+Spring Boot简单用户登录简单用户登录(附附Demo)

1 概述概述

前后端分离的一个简单用户登录 Demo 。

2 技术栈技术栈

Vue

BootstrapVue

Kotlin

Spring Boot

MyBatis Plus

3 前端前端

3.1 创建工程创建工程

使用 vue-cli 创建，没安装的可以先安装：

sudo cnpm install -g vue @vue/cli

查看版本：

vue -V

出现版本就安装成功了。

创建初始工程：

vue create bvdemo

由于目前 Vue3 还没有发布正式版本，推荐使用 Vue2 ：

等待一段时间构建好了之后会提示进行文件夹并直接运行：

cd bvdemo

yarn serve

直接通过本地的 8080 端口即可访问：

3.2 依赖依赖

进入项目文件夹：

cd bvdemo

安装依赖：

cnpm install bootstrap-vue axios jquery vue-router

应该会出现 popper.js 过期的警告，这是 bootstrap-vue 的原因，可以忽略：

依赖说明如下：

bootstrap-vue ：一个结合了 Vue 与 Bootstrap 的前端 UI 框架

axios 是一个简洁易用高效的 http 库，本项目使用其发送登录请求

jquery ：一个强大的 JS 库

vue-router ： Vue 的官方路由管理器

3.3 开启补全开启补全

在正式编写代码之前开启对 bootstrap-vue 的补全支持，打开设置：

将项目路径下的 node_modules 添加到库中，把前面的勾给勾上，接着更新缓存并重启（`File->Invalidate Cache/Restart`）。

3.4 App.vue

去掉默认的 HelloWorld 组件，并修改 App.vue 如下：

<router-view></router-view>

</div>

</template>

export default {

name: 'App',

}

</script>

<style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

<router-view> 是一个 functional 组件，渲染路径匹配到的视图组件，这里使用 <router-view> 根据访问路径（路由）的不同显示（渲

染）相应的组件。

3.5 新建新建 vue 组件组件

删除默认的 HelloWorld.vue ，新建 Index.vue 以及 Login.vue ：

3.6 添加路由添加路由

在 main.js 同级目录下新建 router.js ，内容如下：

import Vue from "vue"

import VueRouter from "vue-router"

import Login from "@/components/Login"

import Index from "@/components/Index"

Vue.use(VueRouter)

const routes = [

{

path: '/',

component: Login,

props: true

{

path:'/index/:val',

name:'index',

component: Index,

props: true

}

]

const router = new VueRouter({

mode:'history',

routes:routes

})

export default router

routes 表示路由，其中包含了两个路由，一个是 Login 组件的路由 / ，一个是 Index 组件的路由 /index/:val ，后者中的 :val 是占位

符，用于传递参数。 router 表示路由器， mode 可以选择 hash 或 history ：

剩余11页未读，继续阅读

weixin_38622227

粉丝: 4
资源: 936

上传资源快速赚钱

我的内容管理收起

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

会员权益专享

Vue+Spring Boot简单用户登录(附Demo)

评论0

会员权益专享

最新资源

Vue+Spring Boot简单用户登录(附Demo)

评论0

SpringBoot + Vue 实现用户名密码登录.zip

vue-springboot登录

vue+springboot实现登录功能.rar

写个vue+springboot+mybatis的登录功能

基于springboot+vue项目的参考文献

Monaco edit 如何对接eclipse.jdt.ls。我后台是spring boot。前端是vue+Monaco edit

vue3+springboot实现简单查询语句的demo

帮我写一个vue+springboot+mysql的关于文件的下载

jfinal+vue+el写一个项目demo

spring boot +vue 图片上传

springboot +vue+elupload图片回显

帮我在gitee上找一段基于vue+springboot框架的demo,并发给我git地址

用springboot+vue+mybatis写一个前后端登录注册

spring boot整合mybatis和vue的案例

多文件上传 vue+springboot el-upload实现

springboot+vue+element-plus增删改查Demo

编写一个 JAVA+VUE+WebSocket的代码

springboot + vue3 demo

spring boot+vue怎么给注册登录信息进行MD5加密

spring boot有签到功能的开源项目

会员权益专享

最新资源