SpringBoot和Vue.js實現(xiàn)的前后端分離的用戶權(quán)限管理系統(tǒng)
更新時間：2023年04月02日 16:00:54 作者：hhzz
本文主要介紹了SpringBoot和Vue.js實現(xiàn)的前后端分離的用戶權(quán)限管理系統(tǒng)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
后端實現(xiàn)
1. 數(shù)據(jù)庫設(shè)計
我們需要設(shè)計兩個表：用戶表和角色表。
用戶表
字段 類型 描述
id bigint(20) 用戶 ID
username varchar(50) 用戶名
password varchar(255) 密碼
email varchar(50) 郵箱
phone varchar(20) 手機(jī)號碼
create_by varchar(50) 創(chuàng)建人
create_time datetime 創(chuàng)建時間
update_by varchar(50) 最后修改人
update_time datetime 最后修改時間
status tinyint(1) 用戶狀態(tài)
角色表
字段 類型 描述
id bigint(20) 角色 ID
role_name varchar(50) 角色名稱
create_by varchar(50) 創(chuàng)建人
create_time datetime 創(chuàng)建時間
update_by varchar(50) 最后修改人
update_time datetime 最后修改時間
status tinyint(1) 角色狀態(tài)
用戶角色表
字段 類型 描述
id bigint(20) ID
user_id bigint(20) 用戶 ID
role_id bigint(20) 角色 ID
create_by varchar(50) 創(chuàng)建人
create_time datetime 創(chuàng)建時間
update_by varchar(50) 最后修改人
update_time datetime 最后修改時間
status tinyint(1) 狀態(tài)
2. 創(chuàng)建 Maven 項目
使用 Maven 創(chuàng)建 Spring Boot 項目，引入 Spring Boot Web、Spring Boot JPA、MySQL 和 Lombok 等依賴?？梢允褂靡韵旅顒?chuàng)建 Maven 項目：
mvn archetype:generate -DgroupId=com.example -DartifactId=user-management -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
3. 配置數(shù)據(jù)庫
在 application.properties 文件中添加以下配置：
spring.datasource.url=jdbc:mysql://localhost:3306/user_management?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=root spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.jpa.hibernate.ddl-auto=update spring.jpa.properties.hibernate.show_sql=true spring.jpa.properties.hibernate.format_sql=true spring.jpa.properties.hibernate.use_sql_comments=true
4. 創(chuàng)建實體類
創(chuàng)建 User、Role 和 UserRole 實體類，使用 Lombok 注解簡化代碼。具體代碼如下：
User.java
@Data
@Entity
@Table(name = "user")
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id
User.java（續(xù)）
java
Copy code
private String username;
private String password;
private String email;
private String phone;
private String createBy;
private Date createTime;
private String updateBy;
private Date updateTime;
private Boolean status;
}Role.java
@Data
@Entity
@Table(name = "role")
public class Role {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String roleName;
private String createBy;
private Date createTime;
private String updateBy;
private Date updateTime;
private Boolean status;
}
UserRole.java
@Data
@Entity
@Table(name = "user_role")
public class UserRole {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private Long userId;
private Long roleId;
private String createBy;
private Date createTime;
private String updateBy;
private Date updateTime;
private Boolean status;
}
5. 創(chuàng)建 Repository
創(chuàng)建 UserRepository、RoleRepository 和 UserRoleRepository，用于操作數(shù)據(jù)庫。
UserRepository.java
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
User findByUsername(String username);
}
RoleRepository.java
@Repository
public interface RoleRepository extends JpaRepository<Role, Long> {
}
UserRoleRepository.java
@Repository
public interface UserRoleRepository extends JpaRepository<UserRole, Long> {
List<UserRole> findByUserId(Long userId);
}6. 創(chuàng)建 Service
創(chuàng)建 UserService、RoleService 和 UserRoleService，用于處理業(yè)務(wù)邏輯。
UserService.java
@Service
public class UserService {
? ? @Autowired
? ? private UserRepository userRepository;
? ? @Autowired
? ? private UserRoleRepository userRoleRepository;
? ? public User findByUsername(String username) {
? ? ? ? return userRepository.findByUsername(username);
? ? }
? ? public List<UserRole> findUserRolesByUserId(Long userId) {
? ? ? ? return userRoleRepository.findByUserId(userId);
? ? }
}RoleService.java
@Service
public class RoleService {
@Autowired
private RoleRepository roleRepository;
}
UserRoleService.java
@Service
public class UserRoleService {
@Autowired
private UserRoleRepository userRoleRepository;
}
7. 創(chuàng)建 Controller
創(chuàng)建 UserController、RoleController 和 UserRoleController，用于處理請求。
UserController.java
@RestController
@RequestMapping("/api/user")
public class UserController {
? ? @Autowired
? ? private UserService userService;
? ? @GetMapping("/{username}")
? ? public User findByUsername(@PathVariable String username) {
? ? ? ? return userService.findByUsername(username);
? ? }
? ? @GetMapping("/{userId}/roles")
? ? public List<UserRole> findUserRolesByUserId(@PathVariable Long userId) {
? ? ? ? return userService.findUserRolesByUserId(userId);
? ? }
}RoleController.java
@RestController
@RequestMapping("/api/role")
public class RoleController {
? ? @Autowired
? ? private RoleService roleService;
? ? @GetMapping("")
? ? public List<Role> findAll() {
? ? ? ? return roleService.findAll();
? ? }
}UserRoleController.java
@RestController
@RequestMapping("/api/userRole")
public class UserRoleController {
@Autowired
private UserRoleService userRoleService;
}
8. 啟動應(yīng)用
使用 Maven 命令 mvn spring-boot:run 啟動應(yīng)用，或者直接運(yùn)行 UserManagementApplication 類。
9. 完整的SecurityConfig.java：
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
? ? @Autowired
? ? private UserDetailsServiceImpl userDetailsService;
? ? @Autowired
? ? private JwtAuthenticationEntryPoint unauthorizedHandler;
? ? @Bean
? ? public JwtAuthenticationFilter jwtAuthenticationFilter() {
? ? ? ? return new JwtAuthenticationFilter();
? ? }
? ? @Override
? ? public void configure(AuthenticationManagerBuilder authenticationManagerBuilder) throws Exception {
? ? ? ? authenticationManagerBuilder
? ? ? ? ? ? ? ? .userDetailsService(userDetailsService)
? ? ? ? ? ? ? ? .passwordEncoder(passwordEncoder());
? ? }
? ? @Bean(BeanIds.AUTHENTICATION_MANAGER)
? ? @Override
? ? public AuthenticationManager authenticationManagerBean() throws Exception {
? ? ? ? return super.authenticationManagerBean();
? ? }
? ? @Bean
? ? public PasswordEncoder passwordEncoder() {
? ? ? ? return new BCryptPasswordEncoder();
? ? }
? ? @Override
? ? protected void configure(HttpSecurity http) throws Exception {
? ? ? ? http
? ? ? ? ? ? ? ? .cors()
? ? ? ? ? ? ? ? ? ? .and()
? ? ? ? ? ? ? ? .csrf()
? ? ? ? ? ? ? ? ? ? .disable()
? ? ? ? ? ? ? ? .exceptionHandling()
? ? ? ? ? ? ? ? ? ? .authenticationEntryPoint(unauthorizedHandler)
? ? ? ? ? ? ? ? ? ? .and()
? ? ? ? ? ? ? ? .sessionManagement()
? ? ? ? ? ? ? ? ? ? .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
? ? ? ? ? ? ? ? ? ? .and()
? ? ? ? ? ? ? ? .authorizeRequests()
? ? ? ? ? ? ? ? ? ? .antMatchers("/api/auth/**")
? ? ? ? ? ? ? ? ? ? ? ? .permitAll()
? ? ? ? ? ? ? ? ? ? .anyRequest()
? ? ? ? ? ? ? ? ? ? ? ? .authenticated();
? ? ? ? http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
? ? }
}其中，JwtAuthenticationFilter是前面提到的JWT認(rèn)證過濾器，UserDetailsServiceImpl是實現(xiàn)了Spring Security的UserDetailsService接口的用戶服務(wù)類，JwtAuthenticationEntryPoint是未經(jīng)授權(quán)時拋出的異常處理程序。配置類中的configure方法配置了授權(quán)規(guī)則，訪問“/api/auth/**”路徑下的接口不需要認(rèn)證即可訪問，其他所有請求都需要認(rèn)證后才能訪問。同時，我們也添加了JWT認(rèn)證過濾器。
前端實現(xiàn)
1. 創(chuàng)建 Vue.js 項目
使用 Vue CLI 創(chuàng)建項目：
vue create user-management
2. 添加依賴
在 package.json 中添加以下依賴：
{
"dependencies": {
"axios": "^0.21.1",
"element-plus": "^1.0.2-beta.55",
"vue": "^2.6.12",
"vue-router": "^3.5.1"
}
}
然后執(zhí)行 npm install 安裝依賴。
3. 配置 Axios
在 src/main.js 中添加以下代碼：
import axios from 'axios' axios.defaults.baseURL = 'http://localhost:8080/api' Vue.prototype.$http = axios
4. 創(chuàng)建路由
在 src/router/index.js 中添加以下代碼：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
? {
? ? path: '/',
? ? name: 'Home',
? ? component: Home
? },
? {
? ? path: '/login',
? ? name: 'Login',
? ? component: Login
? }
]
const router = new VueRouter({
? mode: 'history',
? base: process.env.BASE_URL,
? routes
})
export default router5. 創(chuàng)建頁面
在 src/views 目錄下創(chuàng)建以下頁面：
Home.vue
<template>
? <div>
? ? <h1>用戶管理</h1>
? ? <table>
? ? ? <thead>
? ? ? ? <tr>
? ? ? ? ? <th>用戶名</th>
? ? ? ? ? <th>郵箱</th>
? ? ? ? ? <th>手機(jī)號碼</th>
? ? ? ? ? <th>操作</th>
? ? ? ? </tr>
? ? ? </thead>
? ? ? <tbody>
? ? ? ? <tr v-for="user in users" :key="user.id">
? ? ? ? ? <td>{{ user.username }}</td>
? ? ? ? ? <td>{{ user.email }}</td>
? ? ? ? ? <td>{{ user.phone }}</td>
? ? ? ? ? <td>
? ? ? ? ? ? <button @click="editUser(user)">編輯</button>
? ? ? ? ? ? <button @click="deleteUser(user)">刪除</button>
? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? </tbody>
? ? </table>
? </div>
</template>
<script>
export default {
? name: 'Home',
? data() {
? ? return {
? ? ? users: []
? ? }
? },
? mounted() {
? ? this.loadUsers()
? },
? methods: {
? ? loadUsers() {
? ? ? this.$http.get('/user')
? ? ? ? .then(response => {
? ? ? ? ? this.users = response.data
? ? ? ? })
? ? ? ? .catch(error => {
? ? ? ? ? console.log(error)
? ? ? ? })
? ? },
? ? editUser(user) {
? ? ? console.log(user)
? ? },
? ? deleteUser(user) {
? ? ? console.log(user)
? ? }
? }
}
</script>Login.vue
<template>
? <div>
? ? <h1>登錄</h1>
? ? <form @submit.prevent="login">
? ? ? <div>
? ? ? ? <label>用戶名：</label>
? ? ? ? <input type="text" v-model="username" />
? ? ? </div>
? ? ? <div>
? ? ? ? <label>密碼：</label>
? ? ? ? <input type="password" v-model="password" />
? ? ? </div>
? ? ? <button type="submit">登錄</button>
? ? </form>
? </div>
</template>
<script>
export default {
? name: 'Login',
? data() {
? ? return {
? ? ? username: '',
? ? ? password: ''
? ? }
? },
? methods: {
? ? login() {
? ? ? const params = {
? ? ? ? username: this.username,
? ? ? ? password: this.password
? }
? this.$http.post('/login', params)
? ? .then(response => {
? ? ? console.log(response)
? ? })
? ? .catch(error => {
? ? ? console.log(error)
? ? })
}
}
}
</script>6. 添加 Element UI 組件
在 src/main.js 中添加以下代碼：
import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' Vue.use(ElementPlus)
7. 運(yùn)行項目
在項目根目錄下執(zhí)行以下命令運(yùn)行項目：
npm run serve
然后在瀏覽器中訪問 http://localhost:8080 查看效果。
以上代碼只是簡單地實現(xiàn)了用戶列表的顯示以及登錄功能的實現(xiàn)，還需要進(jìn)一步完善和優(yōu)化。同時，還需要在后端實現(xiàn)相應(yīng)的接口。
8. 添加路由
在 src/router/index.js 中添加以下代碼：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import UserList from '../views/UserList.vue'
Vue.use(VueRouter)
const routes = [
? {
? ? path: '/',
? ? redirect: '/login'
? },
? {
? ? path: '/login',
? ? name: 'Login',
? ? component: Login
? },
? {
? ? path: '/userlist',
? ? name: 'UserList',
? ? component: UserList,
? ? meta: {
? ? ? requireAuth: true
? ? }
? }
]
const router = new VueRouter({
? mode: 'history',
? base: process.env.BASE_URL,
? routes
})
export default router其中，meta 屬性中的 requireAuth 表示該路由需要登錄才能訪問。
9. 添加登錄攔截
在 src/main.js 中添加以下代碼：
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth && !localStorage.getItem('token')) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
})
這段代碼的作用是，在用戶訪問需要登錄才能訪問的路由時，檢查用戶是否已登錄。如果用戶未登錄，則跳轉(zhuǎn)到登錄頁面，并將目標(biāo)路由的路徑保存到查詢參數(shù)中，以便用戶登錄成功后自動跳轉(zhuǎn)到目標(biāo)路由。
10. 添加用戶服務(wù)
在 src/services 目錄下創(chuàng)建 UserService.js 文件，并添加以下代碼：
import axios from 'axios'
const API_URL = '/api/users/'
class UserService {
? getUsers () {
? ? return axios.get(API_URL)
? }
? getUser (id) {
? ? return axios.get(API_URL + id)
? }
? createUser (data) {
? ? return axios.post(API_URL, data)
? }
? updateUser (id, data) {
? ? return axios.put(API_URL + id, data)
? }
? deleteUser (id) {
? ? return axios.delete(API_URL + id)
? }
}
export default new UserService()該文件定義了一個 UserService 類，用于向后端發(fā)送請求，獲取用戶數(shù)據(jù)。其中，API_URL 表示后端 API 的根路徑，getUsers、getUser、createUser、updateUser 和 deleteUser 方法分別對應(yīng)獲取用戶列表、獲取單個用戶、創(chuàng)建用戶、更新用戶和刪除用戶。
11. 添加用戶列表頁面
在 src/views 目錄下創(chuàng)建 UserList.vue 文件，并添加以下代碼：
<template>
? <div>
? ? <h1>用戶列表</h1>
? ? <div class="mb-3">
? ? ? <router-link to="/user/add" class="btn btn-primary">添加用戶</router-link>
? ? </div>
? ? <table class="table table-striped">
? ? ? <thead>
? ? ? ? <tr>
? ? ? ? ? <th>用戶名</th>
? ? ? ? ? <th>郵箱</th>
? ? ? ? ? <th>角色</th>
? ? ? ? ? <th>操作</th>
? ? ? ? </tr>
? ? ? </thead>
? ? ? <tbody>
? ? ? ? <tr v-for="user in userList" :key="user.id">
? ? ? ? ? <td>{{ user.username }}</td>
? ? ? ? ? <td>{{ user.email }}</td>
? ? ? ? ? <td>{{ user.roles.map(role => role.name).join(', ') }}</td>
? ? ? ? ? <td>
? ? ? ? ? ? <router-link :to="'/user/edit/' + user.id" class="btn btn-primary">編輯</router-link>
? ? ? ? ? ? <button class="btn btn-danger" @click="deleteUser(user.id)">刪除</button>
? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? </tbody>
? ? </table>
? </div>
</template>
<script>
import axios from "axios";
export default {
? data() {
? ? return {
? ? ? userList: [],
? ? };
? },
? methods: {
? ? fetchUserList() {
? ? ? axios.get("/api/private/users").then((response) => {
? ? ? ? this.userList = response.data;
? ? ? });
? ? },
? ? deleteUser(id) {
? ? ? if (confirm("確定刪除該用戶嗎？")) {
? ? ? ? axios.delete(`/api/private/users/${id}`).then(() => {
? ? ? ? ? this.fetchUserList();
? ? ? ? });
? ? ? }
? ? },
? },
? mounted() {
? ? this.fetchUserList();
? },
};
</script>這個文件中，我們使用了vue-router和axios庫。在fetchUserList方法中，我們使用axios庫發(fā)起了一個GET請求來獲取用戶列表。在deleteUser方法中，我們使用axios庫發(fā)起了一個DELETE請求來刪除用戶。
接下來我們將完成系統(tǒng)的權(quán)限控制部分。在Spring Security中，權(quán)限控制通常通過定義安全配置類來實現(xiàn)。
首先，我們需要創(chuàng)建一個實現(xiàn)了WebSecurityConfigurer接口的安全配置類SecurityConfig。在這個類中，我們可以配置用戶認(rèn)證和授權(quán)規(guī)則。
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
private UserDetailsService userDetailsService;
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/public/**").permitAll()
.antMatchers("/api/private/**").authenticated()
.and().formLogin()
.loginPage("/login")
.permitAll()
.defaultSuccessUrl("/")
.and().logout().logoutUrl("/logout").logoutSuccessUrl("/login").invalidateHttpSession(true);
}
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
}
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
}在上述代碼中，我們配置了以下規(guī)則：
- 所有以/api/public開頭的請求都不需要認(rèn)證即可訪問。
- 所有以/api/private開頭的請求都需要認(rèn)證才能訪問。
- 登錄頁面為/login，登錄成功后默認(rèn)跳轉(zhuǎn)到根路徑/。
- 注銷路徑為/logout，注銷成功后跳轉(zhuǎn)到登錄頁面。
- 在AuthenticationManagerBuilder中指定了用戶認(rèn)證服務(wù)和密碼加密方式。
為了實現(xiàn)用戶認(rèn)證，我們需要創(chuàng)建一個實現(xiàn)了UserDetailsService接口的用戶認(rèn)證服務(wù)。UserDetailsService是一個Spring Security的核心接口，用于查詢用戶信息。我們可以通過重寫該接口的loadUserByUsername方法來實現(xiàn)自定義的用戶認(rèn)證邏輯。
@Service
public class UserDetailsServiceImpl implements UserDetailsService {
@Autowired
private UserRepository userRepository;
@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
User user = userRepository.findByUsername(username);
if (user == null) {
throw new UsernameNotFoundException("用戶不存在");
}
List<SimpleGrantedAuthority> authorities = user.getRoles().stream()
.map(role -> new SimpleGrantedAuthority(role.getName()))
.collect(Collectors.toList());
return new org.springframework.security.core.userdetails.User(user.getUsername(), user.getPassword(),
authorities);
}
}在上述代碼中，我們通過注入UserRepository來查詢用戶信息。然后，我們將查詢到的用戶角色信息轉(zhuǎn)換為Spring Security的授權(quán)信息，并返回一個UserDetails對象。
至此，我們已經(jīng)完成了用戶認(rèn)證和權(quán)限控制的實現(xiàn)。通過這個系統(tǒng)，我們可以實現(xiàn)用戶登錄、注銷和權(quán)限控制等基礎(chǔ)功能。
12. 完整的AddUser.vue組件代碼：
<template>
? <div>
? ? <h2>Add User</h2>
? ? <form>
? ? ? <div class="form-group">
? ? ? ? <label for="username">Username</label>
? ? ? ? <input type="text" class="form-control" id="username" v-model="user.username" required>
? ? ? </div>
? ? ? <div class="form-group">
? ? ? ? <label for="email">Email</label>
? ? ? ? <input type="email" class="form-control" id="email" v-model="user.email" required>
? ? ? </div>
? ? ? <div class="form-group">
? ? ? ? <label for="password">Password</label>
? ? ? ? <input type="password" class="form-control" id="password" v-model="user.password" required>
? ? ? </div>
? ? ? <div class="form-group">
? ? ? ? <label for="roles">Roles</label>
? ? ? ? <select multiple class="form-control" id="roles" v-model="user.roles">
? ? ? ? ? <option v-for="role in roles" :key="role.id" :value="role">{{ role.name }}</option>
? ? ? ? </select>
? ? ? </div>
? ? ? <button type="button" class="btn btn-primary" @click="addUser">Add User</button>
? ? </form>
? </div>
</template>
<script>
import axios from 'axios';
export default {
? name: 'AddUser',
? data() {
? ? return {
? ? ? user: {
? ? ? ? username: '',
? ? ? ? email: '',
? ? ? ? password: '',
? ? ? ? roles: []
? ? ? },
? ? ? roles: []
? ? }
? },
? created() {
? ? axios.get('/api/roles')
? ? ? .then(response => {
? ? ? ? this.roles = response.data;
? ? ? })
? ? ? .catch(error => {
? ? ? ? console.log(error);
? ? ? });
? },
? methods: {
? ? addUser() {
? ? ? axios.post('/api/users', this.user)
? ? ? ? .then(response => {
? ? ? ? ? this.$router.push({ name: 'UserList' });
? ? ? ? })
? ? ? ? .catch(error => {
? ? ? ? ? console.log(error);
? ? ? ? });
? ? }
? }
}
</script>
<style scoped>
.form-group {
? margin-bottom: 1rem;
}
</style>在這個組件中，我們使用了Bootstrap的樣式來美化表單。我們從后端獲取了所有的角色列表，將其渲染到了下拉列表中。同時，我們綁定了一個addUser方法，在點擊“Add User”按鈕時將用戶信息提交到后端創(chuàng)建一個新用戶。13. 完整的UserForm.vue組件代碼：
<template>
? <div>
? ? <form>
? ? ? <div class="form-group">
? ? ? ? <label for="username">Username</label>
? ? ? ? <input type="text" class="form-control" id="username" v-model="user.username" required>
? ? ? </div>
? ? ? <div class="form-group">
? ? ? ? <label for="email">Email</label>
? ? ? ? <input type="email" class="form-control" id="email" v-model="user.email" required>
? ? ? </div>
? ? ? <div class="form-group">
? ? ? ? <label for="password">Password</label>
? ? ? ? <input type="password" class="form-control" id="password" v-model="user.password" required>
? ? ? </div>
? ? ? <div class="form-group">
? ? ? ? <label for="roles">Roles</label>
? ? ? ? <select multiple class="form-control" id="roles" v-model="user.roles">
? ? ? ? ? <option v-for="role in roles" :key="role.id" :value="role">{{ role.name }}</option>
? ? ? ? </select>
? ? ? </div>
? ? ? <button type="button" class="btn btn-primary" @click="submitForm">{{ submitButtonLabel }}</button>
? ? </form>
? </div>
</template>
<script>
import axios from 'axios';
export default {
? name: 'UserForm',
? props: {
? ? user: {
? ? ? type: Object,
? ? ? default: () => {
? ? ? ? return {
? ? ? ? ? username: '',
? ? ? ? ? email: '',
? ? ? ? ? password: '',
? ? ? ? ? roles: []
? ? ? ? };
? ? ? }
? ? },
? ? roles: {
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return [];
? ? ? }
? ? },
? ? submitButtonLabel: {
? ? ? type: String,
? ? ? default: 'Submit'
? ? },
? ? onSubmit: {
? ? ? type: Function,
? ? ? default: () => {
? ? ? ? console.log('Submit function not provided');
? ? ? }
? ? }
? },
? methods: {
? ? submitForm() {
? ? ? this.onSubmit(this.user);
? ? }
? }
}
</script>
<style scoped>
.form-group {
? margin-bottom: 1rem;
}
</style>在這個組件中，我們使用了Bootstrap的樣式來美化表單。我們從父組件中傳遞了一個user對象、roles數(shù)組和submitButtonLabel屬性，分別用于渲染表單元素和提交按鈕。同時，我們使用了props屬性來聲明這些屬性。最后，我們綁定了一個submitForm方法，在點擊提交按鈕時將用戶信息傳遞給父組件的onSubmit方法處理。
到此這篇關(guān)于SpringBoot和Vue.js實現(xiàn)的前后端分離的用戶權(quán)限管理系統(tǒng)的文章就介紹到這了,更多相關(guān)SpringBoot Vue.js用戶權(quán)限管理系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 詳解springboot?springsecuroty中的注銷和權(quán)限控制問題
- SpringBoot使用Spring Security實現(xiàn)登錄注銷功能
- SpringBoot--- SpringSecurity進(jìn)行注銷權(quán)限控制的配置方法
- Vue+springboot批量刪除功能實現(xiàn)代碼
- springboot和vue前后端交互的實現(xiàn)示例
- SpringBoot3結(jié)合Vue3實現(xiàn)用戶登錄功能
- 基于SpringBoot和Vue3的博客平臺的用戶注冊與登錄功能實現(xiàn)
- 詳解SpringBoot項目整合Vue做一個完整的用戶注冊功能
- Vue結(jié)合Springboot實現(xiàn)用戶列表單頁面(前后端分離)
- vue+springboot用戶注銷功能實現(xiàn)代碼
相關(guān)文章
Java的volatile和sychronized底層實現(xiàn)原理解析
文章詳細(xì)介紹了Java中的synchronized和volatile關(guān)鍵字的底層實現(xiàn)原理,包括字節(jié)碼層面、JVM層面的實現(xiàn)細(xì)節(jié),以及鎖的類型和MESI協(xié)議在多核處理器中的作用,文章還探討了synchronized和volatile的區(qū)別,以及如何通過Atomic類來實現(xiàn)更細(xì)粒度的原子操作,感興趣的朋友一起看看吧2025-03-03
這篇文章主要介紹了SpringBoot日志配置,需要的朋友可以參考下2017-09-09
本文主要介紹了springboot?自定義啟動器的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了struts2單個文件上傳的兩種實現(xiàn)方式，有需要的朋友可以參考一下2014-01-01
Java?Date(日期)對象進(jìn)行格式化的思路詳解
Date類是經(jīng)常會使用到的一個用來處理日期、時間的一個類。Date類是在java.util包下的Date類，這篇文章主要介紹了Java?Date(日期)對象如何進(jìn)行格式化呢,需要的朋友可以參考下2022-09-09
SpringBoot?+?Vue?+?ElementUI?實現(xiàn)?el-table?分頁功能(詳細(xì)步驟)
本文詳細(xì)介紹了使用SpringBoot和Vue.js結(jié)合ElementUI實現(xiàn)分頁功能的數(shù)據(jù)表格,從后端分頁邏輯到前端展示和狀態(tài)管理,全面解析如何高效處理大量數(shù)據(jù),提升用戶體驗與系統(tǒng)性能,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要介紹了JAVA遞歸生成樹形菜單,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
SpringBoot開發(fā)案例 分布式集群共享Session詳解
這篇文章主要介紹了SpringBoot開發(fā)案例 分布式集群共享Session詳解，在分布式系統(tǒng)中，為了提升系統(tǒng)性能，通常會對單體項目進(jìn)行拆分，分解成多個基于功能的微服務(wù)，可能還會對單個微服務(wù)進(jìn)行水平擴(kuò)展，保證服務(wù)高可用,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了springboot打成jar后無法讀取根路徑和文件的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12
java面試常問的Runnable和Callable的區(qū)別
大家好，本篇文章主要講的是java面試常問的Runnable和Callable的區(qū)別，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下2022-01-01