用前端技术:vue，vuex,axios,router四选三 后端技术:springboot，springsecurity,jwt,mybatis（mp）实现两张数据表的增删改查

在使用Vue.js、Vuex、Axios和Vue Router实现前端功能的同时，结合Spring Boot、Spring Security和MyBatis Plus (MP) 进行后端开发，可以构建一个典型的单页面应用（SPA）和RESTful API架构。这里是一个简化的步骤指南：

**前端部分**

1. **Vue.js & Vue Router**: 使用Vue.js作为视图层框架，Vue Router用于管理路由和组件之间的导航。创建一个组件（如`UserList.vue`）展示用户列表，并使用`axios`发起GET请求从后端获取数据。

<template>
  <div>
    <ul v-for="user in users" :key="user.id">
      <!-- ...渲染用户信息 -->
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return { users: [] };
  },
  async created() {
    try {
      const response = await axios.get('/api/users');
      this.users = response.data;
    } catch (error) {
      console.error(error);
    }
  },
};
</script>

2. **Vuex**: 用于状态管理，存储全局共享的数据，如登录状态。当用户状态改变（如登录成功），可以用`mutation`更新store，然后触发`actions`去发送JWT认证后的API请求。

// store/user.js
export const state = () => ({
  isLoggedIn: false,
});

export const mutations = {
  loginSuccess(state, token) {
    localStorage.setItem('token', token);
    state.isLoggedIn = true;
  },
};

export const actions = {
  async login({ commit }, credentials) {
    // 发送POST请求到服务器登录，携带JWT
    const response = await axios.post('/api/login', credentials);
    commit('loginSuccess', response.data.token);
  },
};

**后端部分**

1. **Spring Boot**: 作为后端服务提供API。创建一个Controller，使用`@RestController`注解，处理用户的增删改查请求，如`UserController`。

@RestController
@RequestMapping("/api")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/users")
    public ResponseEntity<?> createUser(@RequestBody User user) {
        // 使用MyBatis Plus保存用户，返回响应结果
    }

    // ...其他HTTP方法对应其他操作
}

2. **MyBatis Plus (MP)**: 作为持久层框架，处理数据库操作，包括CRUD。在`UserService`里调用`UserMapper`执行具体操作。

@Service
public class UserService {

    @Autowired
    private UserMapper userMapper;

    public int createUser(User user) {
        return userMapper.insert(user);
    }

    // ...其他方法对应其他操作
}

3. **Spring Security & JWT**: 添加身份验证，使用JWT进行用户授权。在`SecurityConfig`中配置JWT过滤器，以及登录和登出处理。

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Bean
    public JwtAuthenticationTokenFilter jwtAuthenticationTokenFilter() {
        return new JwtAuthenticationTokenFilter();
    }

    // 登录方法处理
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/api/**").authenticated()
                .and()
            .addFilterBefore(jwtAuthenticationTokenFilter(), UsernamePasswordAuthenticationFilter.class);
    }
}