没有合适的资源?快使用搜索试试~ 我知道了~
首页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 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 如下:
<template>
<div id="app">

<router-view></router-view>
</div>
</template>
<script>
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币余额
我的收藏
我的下载
下载帮助

会员权益专享
安全验证
文档复制为VIP权益,开通VIP直接复制

评论0