vue.js+elementUI学习01之后台管理登录验证实现axios和springMVC交互_夢_殤的博客-CSDN博客


本站和网页 https://blog.csdn.net/dream_broken/article/details/77451639?locationNum=3&fps=1 的作者无关,不对其内容负责。快照谨为网络故障时之索引,不代表被搜索网站的即时页面。

vue.js+elementUI学习01之后台管理登录验证实现axios和springMVC交互_夢_殤的博客-CSDN博客
vue.js+elementUI学习01之后台管理登录验证实现axios和springMVC交互
夢_殤
于 2017-08-23 14:23:30 发布
15736
收藏
分类专栏:
vue.js
文章标签:
vue.js
elementUI
登录验证
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dream_broken/article/details/77451639
版权
vue.js
专栏收录该内容
11 篇文章
0 订阅
订阅专栏
      前段时间学习了vue.js的一些相关知识。现在动手敲代码,想实现一个简单的后台管理,包括登录验证、菜单导航、列表、增删改查,菜单/按钮的权限控制等一些常见功能。当然网上也有很多例子了,只是想自己敲一遍代码。一直从事后台开发,公司都是有专门的前端设计及开发的,所以本人的js/css基础非常差,只能随意弄弄了。
     网上找了下,这篇博文给的例子非常不错http://www.cnblogs.com/fhen/p/6721930.html,也主要参考了下界面的实现,他的数据交互模拟是用了mock.js,本人作为后台开发专业程序员,所以学习过程中,会使用spring boot快速创建一些api支持。
项目搭建  
    使用vue-cli创建项目,准备工作及创建方法就不多说了,前面有相关博文了http://blog.csdn.net/dream_broken/article/details/73293391
   创建个项目admin-demo-01,这是分步骤学习的,01是登录,后面还有02,03....慢慢的一点点功能实现。
   看package.json
已经默认有vue,vue-router了,由于要使用axios作为和后台的交互(就像jquery的ajax),element-ui作为控件,所以需要安装axios/element-ui,执行命令
cnpm install axios --save
cnpm install element-ui --save
然后初始化下把整个项目都初始化npm install,然后运行起来cnpm run dev,浏览器访问
登录界面
   新创建的项目,运行后访问看到就是上面的那图,我们需要去掉它,同时显示我们的登录页面,打开App.vue,把img那去掉。
main.js修改为
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
接着,在components下创建一个Login.vue.
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: '登录',
data () {
return {
msg: 'welcome login'
</script>
router下的index.js初始是这样的
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
path: '/',
name: 'Hello',
component: Hello
})
它默认指向components/Hello,那我们修改下
import Vue from 'vue'
import Router from 'vue-router'
// 懒加载方式,当路由被访问的时候才加载对应组件
const Login = resolve => require(['@/components/Login'], resolve)
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: '登录',
component: Login
}]
})页面就刷新如下图了
  那接下来就改造登录页:账号输入框、密码输入框、登录按钮,Login.vue修改如下
<template>
<el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
class="demo-ruleForm login-container">
<h3 class="title">系统登录</h3>
<el-form-item prop="username">
<el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" >登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: '登录',
data () {
return {
logining: false,
account: {
username: '',
pwd: ''
},
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'},
//{ validator: validaePass }
],
pwd: [
{required: true, message: '请输入密码', trigger: 'blur'},
//{ validator: validaePass2 }
},
checked: true
};
</script>
<style>
body{
background: #DFE9FB;
.login-container{
width:350px;
margin-left:35%;
</style>
页面刷新
 这时点击登录还没有交互能力的。
axios和mock.js实现交互
  上面说了axios类似jquery的ajax。在src下建立个api文件夹,然后建立个api.js
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:80';
export const requestLogin = params => { return axios.post('/user/login', params).then(res => res.data) }
然后再建立个index.js
import * as api from './api'
export default api
这是向后台发起请求/user/login,以post的方式。但是我们还没做后台服务。那这时可以使用mock.js进行拦截,然后模拟后台服务返回的数据。
mock模式
   在src目录下创建文件夹mock,创建文件index.js
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import { LoginUsers, users } from './data/user'
export default {
init() {
let mock = new MockAdapter(axios)
// mock success request
mock.onGet('/success').reply(200, {
msg: 'success'
})
// mock error request
mock.onGet('/error').reply(500, {
msg: 'failure'
})
// 登录
mock.onPost('/user/login').reply(arg => {
let { username, password } = JSON.parse(arg.data)
return new Promise((resolve, reject) => {
let token = null
let hasUser = LoginUsers.some(u => {
if (u.username === username && u.password === password) {
token = 'adminXXXXXX'
return true
})
if (hasUser) {
resolve([200, { code: 200, msg: '请求成功', token: token }])
} else {
resolve([200, { code: 500, msg: '账号或密码错误' }])
})
})
mock下建立data文件夹,data文件夹下创建user.js
/**
* 用来模拟用户的一些信息
*/
import Mock from 'mockjs'
const LoginUsers = [{
id: 1,
username: 'admin',
password: '123456',
email: '123456789@qq.com',
name: '程序员'
}]
export { LoginUsers, users }
Login.vue添加登录方法
<template>
<el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
class="demo-ruleForm login-container">
<h3 class="title">系统登录</h3>
<el-form-item prop="username">
<el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :loading="logining" >登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
import {requestLogin} from '../api/api';
//import NProgress from 'nprogress'
export default {
data() {
return {
logining: false,
account: {
username: 'admin',
pwd: '123456'
},
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'},
//{ validator: validaePass }
],
pwd: [
{required: true, message: '请输入密码', trigger: 'blur'},
//{ validator: validaePass2 }
},
checked: true
};
},
methods: {
handleLogin() {
this.$refs.AccountFrom.validate((valid) => {
if (valid) {
this.logining = true;
//NProgress.start();
var loginParams = { username: this.account.username, password: this.account.pwd };
// let loginParams = new URLSearchParams();
// loginParams.append("username",this.account.username);
// loginParams.append("password",this.account.pwd);
requestLogin(loginParams).then(data => {
debugger;
this.logining = false;
let { msg, code, token } = data;
if(code == '200'){
//登录成功,把用户信息保存在sessionStorage中
sessionStorage.setItem('access-token', token);
//跳转到后台主界面
this.$router.push({ path: '/home' });
}else{
this.$message({
message: msg,
type: 'error'
});
});
} else {
console.log('error submit!!');
return false;
});
</script>
<style>
body{
background: #DFE9FB;
.login-container{
width:350px;
margin-left:35%;
</style>
看到登录成功后,是要跳到后台主界面Home的,所以创建个Home.vue
<template>
<div >
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: '后台主界面',
data () {
return {
msg: '后台主界面'
</script>
router下的index.js那也要修改下了
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
//import Login from '@/components/Login'
// 懒加载方式,当路由被访问的时候才加载对应组件
const Login = resolve => require(['@/components/Login'], resolve)
Vue.use(Router)
let router = new Router({
routes: [{
path: '/',
name: '登录',
component: Login
}, {
path: '/login',
name: '登录',
component: Login
},
path: '/home',
name: '后台主界面',
component: Home
})
// 访问之前,都检查下是否登录了
router.beforeEach((to, from, next) => {
// console.log('to:' + to.path)
if (to.path.startsWith('/login')) {
window.sessionStorage.removeItem('access-token')
next()
} else {
let token = window.sessionStorage.getItem('access-token')
if (!token) {
next({ path: '/login' })
} else {
next()
})
export default router
在main.js中引入mock
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import Mock from './mock'
Mock.init()
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
初始化mockjs,axios-mock-adapter
cnpm install mockjs --save
cnpm axios-mock-adapter
最后运行cnpm run dev的时候报错
babel-runtime/core-js/json/stringify in ./src/mock/index.js, ./~/_babel-loader@7.1.2@babel-loader/lib!./~/_vue-loader@12.2.2@vue-loader/lib/selector.js?typ e=script&index=0!./src/components/Login.vue
   是使用了JSON引起的,安装提示执行cnpm install babel-runtime --save
最后在package.json中看到的样子
src下的文件结构
运行起来cnpm run dev
出现登录界面,如果如果的用户不正确(不再mock/data/user.js的LoginUsers中,则会提示账号或密码错误
如果正确,就会进入后台主界面,如果没登录,直接访问主界面的url  http://localhost:8080/home,则会自动刷新到登陆页面
spring boot搭建后台
  上面的代码,当登录的时候,发起登录请求/user/login的时候,被axios-mock-adapter拦截了,并没有正真和后台交互,这种模式适合纯粹的前端开发阶段,但最后还是要和后台联调的。
main.js中去掉
//import Mock from './mock'
//Mock.init()再次登陆的时候,就无法登录了,看浏览器控制台就看到404了
现在使用eclipse写个后台的用户管理user-server,使用spring boot快速搭建。
UserController.java
package com.fei.springboot.controller;
import javax.servlet.http.HttpServletRequest;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.alibaba.fastjson.JSONObject;
import com.fei.springboot.controller.util.TokenUtil;
@RestController
@RequestMapping("/user")
public class UserController {
private static Logger log = LoggerFactory.getLogger(UserController.class);
@CrossOrigin(origins="*")//允许跨域请求
@RequestMapping(value="/login",method=RequestMethod.POST)
public JSONObject login(String username,String password,HttpServletRequest request){
log.info("登录请求...username="+username+" pwd=" + password);
JSONObject r = new JSONObject();
if("admin".equals(username) && "123456".equals(password)){
r.put("code", "200");
r.put("msg", "登录成功");
r.put("token", TokenUtil.getToken(username));
}else{
r.put("code", "500");
r.put("msg", "登录失败");
return r;
其他文件代码,看github上完整代码吧
https://github.com/269941633/vue.js2.X-elementUI
好了,一切准备就绪了,点击“登录”,但是提示登录失败了,看后台控制台日志,接收到的用户名和密码是null。。。这是怎么回事?使用postman工具测试下接口,访问是OK的。。。赶紧百度找原因,在这篇博文中,解说得非常详细http://www.jianshu.com/p/042632dec9fb,原因找到了,解决方法有3中。按照那博文的说法,原因就是axios判断参数是object对象时,header中的Content-type是application/json;charset=UTF-8,而springMVC是默认application/x-www-form-urlencoded;charset=UTF-8,平时我们用jquery的ajax的时候,默认就是application/x-www-form-urlencoded;charset=UTF-8了,和后台匹配,所以我们都不需要额外做处理。看下axios.js的源码
如果参数是Object,而且headers中没有设置contentType,那就默认'application/json;charset=utf-8',把Object转为json字符串,那也就是说,如果使用axios.post的时候指定了headers的content为application/x-www-form-urlencoded;charset=UTF-8就可以了呢?试了下 api.js修改前
export const requestLogin = params => { return axios.post('/user/login', params).then(res => res.data) }发起请求
后台接收不到数据,修改api.js
let config = { headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' } }
export const requestLogin = params => { return axios.post('/user/login', params, config).then(res => res.data) }
request headers 中的content-type的确是变了,但是后台仍然没接收到数据。用postman测试
成功,查看发送的信息
发现是参数,axios是json字符串,而postman那是&拼接起来的。
那只能要么后台接收参数的时候使用@RequestBody,要么前台使用URLSearchParams,
试试URLSearchParams,Login.vue,修改下
// var loginParams = { username: this.account.username, password: this.account.pwd };
let loginParams = new URLSearchParams();
loginParams.append("username",this.account.username);
loginParams.append("password",this.account.pwd);googel浏览器OK,但是360浏览器却报Uncaught ReferenceError: URLSearchParams is not defined,网上的一些说法是
URLSearchParams,并不是所有浏览器都支持的。
   修改后台UserController.java
package com.fei.springboot.controller;
import java.util.Map;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.alibaba.fastjson.JSONObject;
import com.fei.springboot.controller.util.TokenUtil;
@RestController
@RequestMapping("/user")
public class UserController {
private static Logger log = LoggerFactory.getLogger(UserController.class);
@CrossOrigin(origins="*")//允许跨域请求
@RequestMapping(value="/login",method=RequestMethod.POST)
public JSONObject login(@RequestBody Map<String,String> map){
String username = map.get("username");
String password = map.get("password");
log.info("登录请求...username="+username+" pwd=" + password);
JSONObject r = new JSONObject();
if("admin".equals(username) && "123456".equals(password)){
r.put("code", "200");
r.put("msg", "登录成功");
r.put("token", TokenUtil.getToken(username));
}else{
r.put("code", "500");
r.put("msg", "登录失败");
return r;
这样,后台成功接收到axios传的参数了。
完整源码
夢_殤
关注
关注
点赞
收藏
打赏
评论
vue.js+elementUI学习01之后台管理登录验证实现axios和springMVC交互
前段时间学习了vue.js的一些相关知识。现在动手敲代码,想实现一个简单的后台管理,包括登录验证、菜单导航、列表、增删改查,菜单/按钮的权限控制等一些常见功能。当然网上也有很多例子了,只是想自己敲一遍代码。一直从事后台开发,公司都是有专门的前端设计及开发的,所以本人的js/css基础非常差,只能随意弄弄了。     网上找了下,这篇博文给的例子非常不错http://www.cnblogs.co
复制链接
扫一扫
专栏目录
手把手教Vue+elementUI搭建后台管理系统(一):项目介绍
xiaoge_586的博客
09-09
1404
####项目介绍
基本介绍
使用 vue 以及 element-ui 搭建一个 后台管理系统的项目框架,为了方面后续vue项目的开发,可以达到拿来即用的效果。主要涉及到内容包含:项目开发环境安装及配置、elementui的使用;cookie、axios、mock等封装处理;i18n国际化;vuex状态管理;vue-router路由管理;axios、router、业务代码等模块化封装;vue-router动态路由加载;常用组件封装步骤及封装思想等。
软件及技术
开发工具:
HBuilderX 、Visual
vue+elementUI管理系统,页面源代码
11-10
vue2+elementUI后台管理系统,页面源代码,src和static目录
评论 2
您还未登录,请先
登录
后发表或查看评论
【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局
RudeCrab的博客
11-01
6049
前言
大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面展示,只需要简洁易用、便于管理数据。而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏。随便贴两个Bootstrap的主题模板就是这样的:
这其中最难的不是布局,而是如何点击左侧导航栏来渲染中央显示界面(路由)。在这里我会用Vue.js和ElementUI来快速搭建起这样的后台管理界面布局!
准备...
vue:结合elementUI设计网站登录页
最新发布
m0_59588838的博客
11-04
547
vue肝小项目ing
vue+elementui搭建后台管理界面
weixin_46519285的博客
09-02
1017
1.新建项目
vue init webpack vue-project
2.安装并引入 elementui
npm install element-ui --save
3.编辑 src/main.js , 修改为
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import
Vue+Element-UI快速搭建前端界面
cbb944131226的博客
06-30
2万+
Vue+Element-UI快速搭建前端界面
文章目录Vue+Element-UI快速搭建前端界面主要参考:Vue主要使用总结概述组成v-model绑定数据v-for循环构造v-on:click点击处理beforeMount()Element-UI主要组件总结el-buttonel-inputel-menujs正则表达式进行合法性判断
主要参考:
Vue官方文档
Element-UI官方文档
...
使用Element ui 编写登录页面
前端开发小白9527
03-14
1万+
1 完整引入element ui
执行命令安装npm i element-ui -S
mian.js中 完整引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
2 登录页 login.vue
<template>
使用elementUI制作简易登录页面
NanChen的博客
11-17
5528
<template>
<div id="app">
<div id="admin">
<div class="pos" v-loading="loading">
<h1 class="adminh1">用户登录</h1>
<el-form
:model="ruleForm"
status-icon
:rules=".
Element-UI登录页面案例分享(Demo)
辰兮要努力
02-27
4925
【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行!
博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结,感谢你的阅读和关注,希望我的博客能帮助到更多的人,分享获取新知,大家一起进步!
吾等采石之人,应怀大教堂之心,愿你们奔赴在各自的热爱中…
最近打算系统的整理一下一个vue + element-ui框架的简单应用。分模块整理一下demo,以及部分基础知识,分享给初学者,同时自.
vue实现登录界面
热门推荐
Hi-Sun的博客
06-16
2万+
使用Vue实现简单的用户登录界面,登录成功以后查询账号用户类型进行相应的页面路由跳转,效果如下图所示:
HTML部分:
<div class="loginbody">
<div class="login">
<div class="mylogin" align="center">
<h4>登录</h4>
<el-form
:model="loginForm"
Vue+ElementUI搭建登陆页面
qq_64230952的博客
05-05
1923
1.使用vue-cli脚手架工具创建一个vue项目
2.安装elementUI插件依赖
注意 :i 指的是 install 的缩写
npm install 下载全部依赖
npm install xxx -g 全局安装,下载到%NODE_HOME%\node_global
npm install xxx -S 下载指定依赖,写入到package.json中的dependencies,当前项目
npm install xxx -D 下载指定依赖,写入到package.json中的...
Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境 配置环境
12-06
6054
项目介绍
使用 vue 以及 element-ui 搭建一个 后台管理系统的模板。
纯属练手(写的比较糙 望指点)
基本环境搭建 初始化项目
使用 vue 以及 element-ui 搭建一个 后台管理系统的模板。
纯属练手(写的比较糙 望指点)
1、初始化项目(babel vuex router eslint)
vue create sandcms
2、等待 出现以下提示 进入项目并启动
3、启动项目 成功后进入以下界面 即创建成功
npm run serve...
vue+element-ui 后台管理实战项目
小傲哥哥的博客
11-27
1万+
项目线上地址:http://www.sirfuao.com
1、项目描述:
1、这是一个vue电商后台的管理项目的实战项目
2、采用了Vue全家桶+ES6+Webpack 等前端最新技术
3、项目包括用户管理、权限管理、商品管理、订单管理、数据统计等多个功能模块
4、采用模块化、组件化、工程化的模式开发
2、使用的插件和ui库:
1、学会使用 vue-router 开发单页面
2、学会使用 axios 的封装和后端数据交互
3、学会使用 vuex 管理应用组件的状态
4、学会是使用 echarts 来进行数
Element-UI-的登录页面_用户名栏与其他栏---Element-UI工作笔记005
梦幻神域的专栏
02-24
656
然后我们再去看这个登录页面的制作,我们在elementui中找到一个密码框
下面有代码.
注意因为这个ui学习起来特别的简单,所以,有很多地方可能会一笔带过了..
然后我们先把上面的用户名,这个el-form-item copy一份过来
然后把用户名之类的都改成密码,然后我们把之前我们看到到elementui官网上找到的那个好看的密码框,拿过来,然后替换以前的
注意这里的这个v-model一定要修改,改成ValidateForm.password
然后把原来的那个nameVali..
前端实战项目:vue+elementUI管理平台
fy03164598的博客
03-30
3919
一、创建一个项目文件夹,命名为my-demo
1.1进入项目文件夹路径,用命令行打开,输入以下命令行:
vue init webpack my-ele-demo
等待一段时间后,再根据个人需求完成基础项目配置即可完成项目的创建。
1.2完成后在编辑器中打开项目,然后在终端中执行命令:
npm run dev
即可打开在网页中打开项目,当出现一下页面时,就代表我们的项目已经可以跑起来了...
对于第一次接触vue项目的同学,我们需要了解到的是一些文件信息,我为大家做了一些解释,有过项目经
Vue+element-ui+axios实现登录注册接口(一)
bentou_的博客
03-19
4014
Vue+element-ui+axios实现登录注册接口
1、首先保证你的后台、数据库都已经准备完毕
如果是vue前后端分离的项目,就可以让负责后台的小伙伴直接帮你部署好一个jar包,就像下面这张图这样,记住它的地址。
记住地址后在自己的命令行窗口打开jar包所在目录,然后输入java -jar+jar包文件名,如下图,就可以把后台直接运行起来了,这样子前端就不用自己去idea下载jar包啦,省...
快速上手vue的登录界面(最新版)
呼啦啦啦啦啦的博客
07-22
4612
快速上手vue的登录界面(最新版)
elementui登录页
FleshyAPP的博客
07-26
307
elementui登录页
基于Vue element-ui的登录页面
weixin_48247966的博客
10-14
745
页面展示
目录结构
在源码目录中创建如下结构:
assets:用于存放资源文件
components:用于存放 Vue 功能组件
views:用于存放 Vue 视图组件
router:用于存放 vue-router 配置
App.vue 是主页面 可以展示router-view相当于一个占位符 用来显示路由指定的页面
<template>
<div id="app">
<router-view/>
</div>
&l..
“相关推荐”对你有帮助么?
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题:技术黑板
设计师:CSDN官方博客
返回首页
夢_殤
CSDN认证博客专家
CSDN认证企业博客
码龄11年
暂无认证
140
原创
5万+
周排名
37万+
总排名
99万+
访问
等级
8667
积分
337
粉丝
219
获赞
194
评论
455
收藏
私信
关注
热门文章
centOS7下实践查询版本/CPU/内存/硬盘容量等硬件信息
72531
java使用validator进行校验
53491
spring boot学习5之session+redis解决session共享问题
43075
kubenetes学习3--Namespace命名空间
40438
docker学习5--docker数据卷(volume)
37682
分类专栏
JAVA基础
41篇
bacnet
3篇
opc
1篇
多线程
20篇
设计模式
1篇
数据库
16篇
hibernate
4篇
spring boot
15篇
web
9篇
js
7篇
mongoDB
4篇
lucene
javaMail
1篇
架构师经验指导
4篇
I/O
31篇
redis
1篇
java监控学习
5篇
docker
12篇
hadoop
4篇
drools规则引擎
4篇
liferay
3篇
etcd
2篇
linux
1篇
kubernetes
4篇
spark
5篇
scala
zookeeper
3篇
mysql
5篇
oracle
10篇
vue.js
11篇
spring cloud
8篇
mycat
7篇
机器学习
1篇
python
分布式
3篇
最新评论
excel添加水印及设置打印参数poi
m0_61437044:
大佬,中文水印出不来是因为什么
excel添加水印及设置打印参数poi
qq_41931653:
依赖版本
excel添加水印及设置打印参数poi
胖嘟嘟小屁孩儿:
大佬您好请教个问题sheet.getCTWorksheet().addNewPicture().setId(pr.getId());中setId爆红找不到呀?
BACnet/IP之BACnet4j学习java代码例子属性读写01
qq_37496148:
也是,求解
BACnet/IP之BACnet4j学习java代码例子属性读写01
天下___布武:
请问modelName=null的问题是怎么解决的?我也遇到了,没解决,我连的是vts,没有开yabe
您愿意向朋友推荐“博客详情页”吗?
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
java使用谷歌的zxing包进行二维码生成并减少周边白色区域
excel添加水印及设置打印参数poi
BACnet/IP之BACnet4j学习VTS创建虚拟设备及点位测试03
2021年2篇
2020年4篇
2019年5篇
2018年1篇
2017年52篇
2016年43篇
2015年43篇
2014年39篇
2013年46篇
目录
目录
分类专栏
JAVA基础
41篇
bacnet
3篇
opc
1篇
多线程
20篇
设计模式
1篇
数据库
16篇
hibernate
4篇
spring boot
15篇
web
9篇
js
7篇
mongoDB
4篇
lucene
javaMail
1篇
架构师经验指导
4篇
I/O
31篇
redis
1篇
java监控学习
5篇
docker
12篇
hadoop
4篇
drools规则引擎
4篇
liferay
3篇
etcd
2篇
linux
1篇
kubernetes
4篇
spark
5篇
scala
zookeeper
3篇
mysql
5篇
oracle
10篇
vue.js
11篇
spring cloud
8篇
mycat
7篇
机器学习
1篇
python
分布式
3篇
目录
评论 2
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
夢_殤
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付
您的余额不足,请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明:
1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。
余额充值