jeecg boot 企业级应用管理后台 （四）登录模块介绍 从0开始 (持续更新)

Jeecg（Java EE Code Generation）是一款基于代码生成器的企业级快速开发平台，广泛用于开发企业级应用。它提供了丰富的功能模块，其中包括登录模块。以下是关于Jeecg登录模块的详细介绍，涵盖了数据库、前端和后端的各个部分。

数据库部分

Jeecg的登录模块在数据库中通常涉及以下几个表：

1. 用户表（sys_user）：存储用户的基本信息，如用户名、密码、邮箱等。
2. 角色表（sys_role）：存储系统中定义的角色信息。
3. 用户角色关联表（sys_user_role）：存储用户和角色的对应关系。
4. 权限表（sys_permission）：存储系统中的权限信息。
5. 角色权限关联表（sys_role_permission）：存储角色和权限的对应关系。

后端部分

后端主要采用Spring Boot框架进行开发，以下是一些关键点：

登录后端路径(\jeecg-module-system\jeecg-system-biz\src\main\java\org\jeecg\modules\system\controller\LoginController.java)

1. Controller：处理用户的登录请求，接受前端传递过来的用户名和密码。

   @RestController
   @RequestMapping("/sys/login")
   public class LoginController {
       
       @Autowired
       private LoginService loginService;
   
       @PostMapping
       public Result login(@RequestBody LoginRequest loginRequest) {
           return loginService.login(loginRequest.getUsername(), loginRequest.getPassword());
       }
   }
   

2. Service：负责业务逻辑处理，例如验证用户名和密码、生成和管理JWT（JSON Web Token）等。

   @Service
   public class LoginService {
   
       @Autowired
       private UserService userService;
       
       @Autowired
       private TokenService tokenService;
   
       public Result login(String username, String password) {
           // 验证用户名和密码
           User user = userService.findByUsername(username);
           if (user == null || !user.getPassword().equals(password)) {
               return Result.error("用户名或密码错误");
           }
           // 生成JWT
           String token = tokenService.generateToken(user);
           return Result.ok().put("token", token);
       }
   }
   

3. Repository：负责与数据库进行交互，通常使用JPA或者MyBatis。

   @Repository
   public interface UserRepository extends JpaRepository<User, Long> {
       User findByUsername(String username);
   }
   

前端部分

前端部分通常采用Vue.js进行开发，以下是一些关键点：

登录前端登录页面路径 (\jeecgboot-vue3-master\src\views\system\loginmini\MiniLogin.vue)

登录前端登录路由路径 (\jeecgboot-vue3-master\src\router\routes\index.ts)

1. 登录页面示例：提供用户输入用户名和密码的界面。

   <template>
       <div class="login-container">
           <el-form :model="loginForm" @submit.native.prevent="handleLogin">
               <el-form-item>
                   <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
               </el-form-item>
               <el-form-item>
                   <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
               </el-form-item>
               <el-form-item>
                   <el-button type="primary" @click="handleLogin">登录</el-button>
               </el-form-item>
           </el-form>
       </div>
   </template>
   
   <script>
   export default {
       data() {
           return {
               loginForm: {
                   username: '',
                   password: ''
               }
           };
       },
       methods: {
           handleLogin() {
               this.$axios.post('/sys/login', this.loginForm)
                   .then(response => {
                       const { token } = response.data;
                       localStorage.setItem('token', token);
                       this.$router.push('/');
                   })
                   .catch(error => {
                       this.$message.error('登录失败');
                   });
           }
       }
   };
   </script>
   

2. 路由示例：配置登录路由和其他需要验证登录状态的路由。

   import Vue from 'vue';
   import Router from 'vue-router';
   import Login from '@/views/Login.vue';
   import Home from '@/views/Home.vue';
   
   Vue.use(Router);
   
   const router = new Router({
       routes: [
           {
               path: '/login',
               name: 'Login',
               component: Login
           },
           {
               path: '/',
               name: 'Home',
               component: Home,
               meta: { requiresAuth: true }
           }
       ]
   });
   
   router.beforeEach((to, from, next) => {
       const token = localStorage.getItem('token');
       if (to.matched.some(record => record.meta.requiresAuth) && !token) {
           next('/login');
       } else {
           next();
       }
   });
   
   export default router;
   

Jeecg的登录模块结合了前后端的开发，使得用户登录功能可以顺利进行。通过Spring Boot进行后端处理，Vue.js进行前端展示，整个流程高效且易于维护。