springboot+vue/elementUi 项目，搭建，使用
前端基础：
总体相关配置与引入(如若未配置引入。install以后直接使用即可)
import Vue from 'vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import '@/assets/common.css'
import './assets/iconfont.css'
Vue.use(ElementUI,{ size:"small"});
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
axios：
引入axios：
request.js配置：
import axios from 'axios'
// 这份文件就是用来做拦截的
// 创建一个单例（实例）
const instance = axios.create({
baseURL: 'http://localhost:8086',
timeout: 4000
})
// 拦截器 - 请求拦截
instance.interceptors.request.use(config=>{
// 部分接口需要拿到token
let token = localStorage.getItem('token');
if(token){
config.headers = {
'aa-token': token
}
}
return config;
}, err=>{
return Promise.reject(err)
});
// 拦截器 - 响应拦截
instance.interceptors.response.use(res=>{
return res;
}, err=>{
return Promise.reject(err)
});
// 整体导出
export default instance;
api配置
import request from './request'
// 登录
// export const PostLoginAPI = (params) => request.post('/auth/loginByWeb', params);
//删除
export const deleteById = (id) => request.delete(`/api/test/${id}`)
// export const deleteById = (params) => request.delete('/api/test',{params}) must be an object
// 分页查询
export const getMemberList = (params) => request.get('/api/test/page',{params});
// 登录校验
export const validateUser = (params) => request.post('/api/test/validate',params);
// 注册 +修改
export const saveOrUpdate = (params) => request.put('/api/test/saveOrUpdate',params);
//deleteFile
export const deleteFile = (name) => request.delete(`/api/common/delete?name=${name}`)
//状态更改
export const userStatusByStatus = (params) => request.post(`/api/test/status?id=${params.id}&status=${params.status}`)
使用
import {deleteById} from '@/api/xxx.js'
vux安装与使用
安装：
[vuex安装](http://www.45fan.com/article.php?aid=1D5wU4WMsY4h2rlF)
用法：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
currentPathName: '',
userId: '',
userName: '',
avatarUrl: ''
},
mutations: {
setPath (state,payload) {
state.currentPathName = payload;
},
setUser (state,payload) {
console.log("调用了vuex"+payload.image)
state.userId = payload.id
state.userName = payload.username
state.avatarUrl = payload.image
},
}
})
export default store
vue router
用法配置：
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Activity from '../views/Activity.vue'
import Home from '../views/Home.vue'
// import Share from '../views/Share.vue'
Vue.use(VueRouter)
const routes = [
{ path: "/", redirect: "/login" },
{
path: '/login',
name: 'login',
component: () => import('@/views/Login.vue')
},
{
path: '/register',
name: 'register',
meta: { title: '注册', icon: 'index', affix: true, noCache: true },
component: () => import('@/views/Register.vue')
},
{
path: '/home',
name: 'home',
component: Home,
// children:[
// {
// path:'user',
// component: () => import('@/views/UserShow.vue')
// },
// {
// path: 'share',
// name: 'share',
// component: Share
// },
// {
// path: 'activity',
// name: 'activity',
// component: Activity
// },
// {
// path: 'usermannage',
// name: 'usermannage',
// component: () => import('@/views/UserMannage.vue')
// },
// {
// path: 'add',
// name: 'add',
// component: () => import('@/views/operation/Add.vue')
// },
// {
// path: 'test',
// name: 'test',
// component: ()=> import('@/views/Test.vue')
// }
// ]
},
{
path: '/404',
name: 'NotFound',
component: () => import('@/views/features/404.vue')
},
// 所有未定义路由，全部重定向到404页
{
path: '*',
redirect: '/404'
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
localStorage.setItem("currentPathName", to.name) // 设置当前的路由名称
const user = localStorage.getItem("user")
console.log(user)
console.log(to.name)
if(to.fullPath === '/login'){
next()
}
else if(user){
next()
}else{
next('/login')
}
// 其他的
})
export default router
js操作Json与local Storage
有时候我们想要将一个JSON对象数据存储到localStorage中，但普通的存储肯定是不行的，因为localStorage只能存储字符串数据。
参考文档
示例
created() {
this.admin = JSON.parse(localStorage.getItem("user"))
console.log("admin:")
console.log(this.admin["avatar"])
},
主体代码：
登录：
代码：
<template>
<div class="login" id="login-app">
<div class="login-box">
<img src="@/assets/login/login-l.png" alt="">
<div class="login-form">
<el-form ref="userForm" :model="user" :rules="rules" >
<div class="login-form-title">
<img src="@/assets/login/logo.png" style="width:170px;height:170px;" alt="" />
</div>
<el-form-item prop="username">
<el-input v-model="user.username" type="text" auto-complete="off" placeholder="账号" maxlength="20"
prefix-icon="el-icon-user" />
</el-form-item>
<el-form-item prop="password">
<el-input v-model="user.password" type="password" placeholder="密码" prefix-icon="el-icon-lock"
maxlength="20"
show-password
@keyup.enter.native="login" />
</el-form-item>
<el-form-item style="width:100%;" class="all_btn">
<div style="text-align:center">
<el-button :loading="loading" class="login-btn" size="small" type="primary"
@click.native.prevent="login" round>
<span v-if="!loading">登录</span>
<span v-else>登录中...</span>
</el-button>
</div>
<div style="text-align:center">
<el-button type="primary" style="margin-left: auto" size="small"
class="login-btn" autocomplete="off" @click="$router.push('/register')" round>注册</el-button>
</div>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import {validateUser} from '@/api/administrator.js'
export default {
name: "Login",
data() {
return {
user: {
username: 'admin',
password: '123'
},
loading: false,
code: 0,
rules: {
username: [
{required: true, message: '请输入用户名', trigger: 'blur'},
{min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
],
}
}
},
methods: {
login(formName){
this.$refs.userForm.validate(async (valid) =>{
if(valid){
await validateUser(this.user).then(res => {
this.code = res.data.code
if(this.code == '1'){
this.loading = true
localStorage.setItem("user", JSON.stringify(res.data.user)) // 存储用户信息到浏览器
// localStorage.setItem("menus", JSON.stringify(res.data.menus)) // 存储用户信息到浏览器
console.log(res.data.user)
this.$router.push('/home')
this.$message.success({message:'登陆成功'})
}
else{
this.loading = false
this.$message.error('账号或密码错误')
}
}).catch(err =>{
this.$message.error('请求出错了：'+err)
})
}
})
}
}
}
</script>
<style>
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
}
.login-box {
width: 900px;
height: 450px;
border-radius: 8px;
display: flex;
}
.login-box img {
width: 60%;
height: auto;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.login-form {
background: #ffffff;
width: 40%;
border-radius: 0px 8px 8px 0px;
display: flex;
justify-content: center;
align-items: center;
}
.login-form .el-form {
width: 250px;
height: 350px;
}
.login-form .el-form-item {
margin-bottom: 30px;
}
.login-form .el-form-item.is-error .el-input__inner {
border: 0 !important;
border-bottom: 1px solid #fd7065 !important;
background: #fff !important;
}
.login-form .input-icon {
height: 32px;
width: 18px;
margin-left: -2px;
}
.login-form .el-input__inner {
border: 0;
border-bottom: 1px solid #e9e9e8;
border-radius: 0;
font-size: 15px;
font-weight: 400;
color: #4a4a4a;
height: 32px;
line-height: 32px;
}
.login-form .el-input__prefix {
left: 0;
}
.login-form .el-input--prefix .el-input__inner {
padding-left: 26px;
}
.login-form .el-input__inner::placeholder {
color: #aeb5c4;
}
.login-form .el-form-item--medium .el-form-item__content {
line-height: 32px;
}
.login-form .el-input--medium .el-input__icon {
line-height: 32px;
}
.all_btn{
margin-top: 0;
}
.login-form-title {
height: 36px;
display: flex;
justify-content: center;
/* 居中 */
align-items: center;
margin-bottom: 40px;
}
.login-form-title .title-label {
font-weight: 500;
font-size: 20px;
color: #333333;
margin-left: 10px;
}
</style>
注册：
<template>
<div class="wrapper">
<div style="margin: 100px auto; background-color: #fff; width: 400px; height: 500px; padding: 20px; border-radius: 10px">
<div style="margin: 20px 0; text-align: center; font-size: 24px"><b>注 册</b></div>
<el-form :model="user" :rules="rules" ref="userForm">
<el-form-item prop="username">
<el-input placeholder="请输入账号" size="medium" style="margin: 5px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input placeholder="请输入密码" size="medium" style="margin: 5px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input placeholder="请确认密码" size="medium" style="margin: 5px 0" prefix-icon="el-icon-lock" show-password v-model="user.confirmPassword"></el-input>
</el-form-item>
<el-form-item >
<div style="text-align: center;">
<el-button class="login-btn" type="primary" native-type="submit" size="small"
autocomplete="off" @click.native.prevent="register" round>注册</el-button>
</div>
<div style="text-align: center;">
<el-button class="login-btn" type="primary" size="small"
autocomplete="off" @click="$router.push('/')" round>返回登录</el-button>
</div>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import {saveOrUpdate} from '../api/administrator.js'
export default {
name: "Login",
data() {
return {
user: {},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
],
}
}
},
methods: {
register() {
this.$refs['userForm'].validate(async (valid) => {
if (valid) { // 表单校验合法
if (this.user.password !== this.user.confirmPassword) {
this.$message.error("两次输入的密码不一致")
return false
}
await saveOrUpdate(this.user).then(res => {
if(JSON.stringify(res.data) != '0'){
this.$message.success("注册成功！")
}
else{
this.$message.error("用户名已存在!")
}
}).catch(err =>{
this.$message.error('请求出错了:'+err)
})
}
});
}
},
watch:{
user(newVal,oldVal){
console.log(newVal.username+"----"+oldVal.username)
}
}
}
</script>
<style scoped>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
}
</style>
浙公网安备 33010602011771号