vue.js 前端 javascript vue+springboot实验个人信息，修改密码，忘记密码功能实现

前端部分

新增Person（个人页面），Password（修改密码页面），还需要对Manager，login页面进行修改

router文件夹下的index.js：

import Vue from 'vue'

import VueRouter from 'vue-router'

import Manager from '../views/Manager.vue'

// 解决导航栏或者底部导航tabBar中的vue-router在3.0版本以上频繁点击菜单报错的问题。

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push (location) {

return originalPush.call(this, location).catch(err => err)

}

Vue.use(VueRouter)

const routes = [

{

path: '/',

name: 'manager',

component: Manager,

children:[

{path:'home',name:'Home',meta:{ name:'系统首页' },component:()=>import('../views/manager/Home.vue')},

{

path:'user',name:'User',meta:{ name:'用户信息' },component:()=>import('../views/manager/User.vue')

},

{

path:'403',name:'Auth',meta:{ name:'无权限' },component:()=>import('../views/Auth.vue')

},

{

path:'Person',name:'person',meta:{ name:'个人信息' },component:()=>import('../views/manager/Person.vue')

},

{

path:'Password',name:'password',meta:{ name:'修改密码' },component:()=>import('../views/manager/Password.vue')

}

],

redirect:'/home'

},

{

path: '/about',

name: 'about',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

},

{

path:'/login',

name:'login',

meta:{ name:'登录' },

component: ()=>import('../views/login.vue')

},

{

path:'/register',

name:'register',

meta:{ name:'注册' },

component: ()=>import('../views/register.vue')

},

{

path:'*',

name:'404',

meta:{ name:'无法访问' },

component: ()=>import('../views/404.vue')

}

]

const router = new VueRouter({

mode: 'history',

base: process.env.BASE_URL,

routes

})

router.beforeEach((to,from,next)=>{

let adminPaths=['/user']

let user=JSON.parse(localStorage.getItem('honey-user')||'{}')

if(user.role !== '管理员' && adminPaths.includes(to.path)){

next('/403')

}else{

next()

}

})

export default router

Person.vue

Password.vue：

 Manager.vue:

login.vue：

后端部分 

只需要为忘记密码编写一个新接口即可：

 WebController:

package com.example.springboot.controller;

import cn.hutool.core.util.StrUtil;

import com.example.springboot.common.AuthAccess;

import com.example.springboot.common.Result;

import com.example.springboot.entity.User;

import com.example.springboot.exception.ServiceException;

import com.example.springboot.service.UserService;

import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

@RestController

public class WebController {

@Resource

UserService userService;

@AuthAccess

@GetMapping("/")

public Result hello(){

return Result.success("success");

}

@PostMapping("/login")

public Result login(@RequestBody User user){

if(StrUtil.isBlank(user.getUsername())||StrUtil.isBlank(user.getPassword())){

return Result.error("数据输入错误");

}

user=userService.login(user);

return Result.success(user);

}

@AuthAccess

@PostMapping("/register")

public Result register(@RequestBody User user){

if(StrUtil.isBlank(user.getUsername())||StrUtil.isBlank(user.getPassword())){

throw new ServiceException("输入不合法");

}

if(user.getUsername().length()>10||user.getPassword().length()>20){

throw new ServiceException("长度过长");

}

user=userService.register(user);

return Result.success(user);

}

@AuthAccess

@PutMapping("/password")

public Result password(@RequestBody User user){

if(StrUtil.isBlank(user.getUsername())||StrUtil.isBlank(user.getPhone())){

throw new ServiceException("输入不合法");

}

userService.resetPassword(user);

return Result.success();

}

}

 UserService:

package com.example.springboot.service;

import com.example.springboot.entity.User;

import com.example.springboot.exception.ServiceException;

import com.example.springboot.mapper.UserMapper;

import com.example.springboot.utils.TokenUtils;

import jdk.nashorn.internal.parser.Token;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import org.springframework.web.bind.annotation.RequestBody;

import java.util.List;

@Service

public class UserService {

@Autowired

UserMapper userMapper;

public void insertUser(User user){

userMapper.insert(user);

}

public void updateUser(User user) {

userMapper.updateUser(user);

}

public void deleteUser(Integer id) {

userMapper.deleteUser(id);

}

public void batchdeleteUser(List ids) {

for(Integer id : ids){

userMapper.deleteUser(id);

}

}

public List selectall() {

return userMapper.selectall();

}

public User selectbyid(Integer id) {

return userMapper.selectbyid(id);

}

public List selectbyname(String name) {

return userMapper.selectbyname(name);

}

public List selectbymore(String username, String name) {

return userMapper.selectbymore(username,name);

}

public List selectbymo(String username, String name) {

return userMapper.selectbymo(username,name);

}

public User login(User user) {

User dbuser=userMapper.selectbyUsername(user.getUsername());

if(dbuser == null){

throw new ServiceException("账号不存在");

}

if(!user.getPassword().equals(dbuser.getPassword())){

throw new ServiceException("账号或者密码错误");

}

String token=TokenUtils.createToken(dbuser.getId().toString(),dbuser.getPassword());

dbuser.setToken(token);

return dbuser;

}

public User register(User user) {

User dbuser=userMapper.selectbyUsername(user.getUsername());

if(dbuser != null){

throw new ServiceException("用户名已存在");

}

userMapper.insert(user);

return user;

}

public void resetPassword(User user) {

User dbuser=userMapper.selectbyUsername(user.getUsername());

if(dbuser==null){

throw new ServiceException("用户不存在");

}

if(!user.getPhone().equals(dbuser.getPhone())){

throw new ServiceException("验证错误");

}

dbuser.setPassword("123");

userMapper.updateUser(dbuser);

}

}

参考链接