锦中融合门户系统

小明：嘿，小李，我最近在研究怎么做一个大学的综合门户系统，你有经验吗？

小李：当然有啊！大学综合门户其实是一个集成了多个功能模块的平台，比如课程管理、学生信息查询、通知公告、图书馆资源等。你想从哪里开始呢？

小明：我想先了解有哪些基本功能。你能列举一下吗？

小李：好的，一般来说，大学综合门户需要具备以下几个核心功能：

用户登录与权限管理：区分教师、学生、管理员等角色。

课程管理：包括课程表、选课系统、成绩查询。

通知公告：发布学校新闻、考试安排等信息。

图书馆资源：提供电子书、期刊、借阅记录等。

在线交流：论坛或聊天室功能。

个人中心：用户可以修改个人信息、查看日程等。

小明：听起来挺全面的。那你是怎么开发这个系统的呢？有没有什么技术栈推荐？

小李：一般我们会采用前后端分离的架构。前端可以用Vue.js或者React，后端可以用Spring Boot或者Django，数据库用MySQL或者PostgreSQL。

小明：那能不能给我看一个简单的代码示例？比如登录页面的实现？

小李：当然可以，下面是一个使用Vue.js和Axios进行登录请求的示例代码：

<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="login">
      <label>用户名：<input v-model="username" type="text" /></label><br>
      <label>密码：<input v-model="password" type="password" /></label><br>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        alert('登录成功！');
        // 这里可以跳转到首页或其他页面
      } catch (error) {
        alert('登录失败，请检查用户名或密码。');
      }
    }
  }
};
</script>
    

小明：这个例子不错，但后端是怎么处理登录请求的呢？

小李：后端通常会使用Spring Boot来处理这些请求。下面是一个简单的Spring Boot控制器示例：

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

    @PostMapping("/login")
    public ResponseEntity login(@RequestBody LoginRequest request) {
        // 简单的验证逻辑
        if ("admin".equals(request.getUsername()) && "123456".equals(request.getPassword())) {
            return ResponseEntity.ok("登录成功");
        } else {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("用户名或密码错误");
        }
    }
}

class LoginRequest {
    private String username;
    private String password;

    // getters and setters
}
    

小明：明白了，那权限管理是怎么做的？比如不同角色的用户访问不同的页面？

小李：权限管理一般是通过JWT（JSON Web Token）来实现的。当用户登录后，服务器生成一个Token并返回给客户端。客户端在后续请求中携带该Token，服务器验证Token的有效性并决定用户权限。

小明：那你能举个例子说明吗？

小李：当然可以，下面是一个使用Spring Security和JWT的简单配置示例：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .csrf().disable()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and()
            .addFilterBefore(new JwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
        return http.build();
    }
}

public class JwtAuthenticationFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        String token = request.getHeader("Authorization");
        if (token != null && token.startsWith("Bearer ")) {
            token = token.substring(7);
            try {
                String username = Jwts.parser().setSigningKey("secret_key").parseClaimsJws(token).getBody().getSubject();
                UsernamePasswordAuthenticationToken authentication = new UsernamePasswordAuthenticationToken(username, null, new ArrayList<>());
                SecurityContextHolder.getContext().setAuthentication(authentication);
            } catch (JwtException e) {
                response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "无效的Token");
                return;
            }
        }
        filterChain.doFilter(request, response);
    }
}
    

小明：这个太棒了，我感觉现在对整个系统有了更清晰的认识。

小李：没错，这只是基础部分。接下来你还可以考虑添加更多功能，比如课程管理、通知公告推送、图书馆资源检索等。

小明：那如果我要做课程管理，应该怎么做呢？

小李：课程管理通常是通过一个数据库表来存储课程信息，比如课程名称、授课教师、上课时间、地点等。然后前端展示课程列表，后端提供增删改查接口。

小明：能给我看看具体的数据库设计吗？

小李：当然可以，下面是一个简单的课程表结构：

CREATE TABLE course (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    teacher VARCHAR(100),
    time TIME,
    location VARCHAR(100)
);
    

小明：明白了，那前端如何展示这些数据呢？

小李：前端可以使用Vue.js或者React来调用后端API获取课程数据，然后渲染成表格或卡片形式。

小明：那你能给我一个Vue组件的例子吗？

小李：好的，下面是一个简单的Vue组件示例，用于显示课程列表：

<template>
  <div>
    <h2>课程列表</h2>
    <table>
      <thead>
        <tr>
          <th>课程名称</th>
          <th>教师</th>
          <th>时间</th>
          <th>地点</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="course in courses" :key="course.id">
          <td>{{ course.name }}</td>
          <td>{{ course.teacher }}</td>
          <td>{{ course.time }}</td>
          <td>{{ course.location }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      courses: []
    };
  },
  mounted() {
    axios.get('/api/courses')
      .then(response => {
        this.courses = response.data;
      })
      .catch(error => {
        console.error('获取课程失败:', error);
      });
  }
};
</script>
    

小明：太好了，这对我帮助很大。

小李：不客气，如果你还有其他问题，随时问我。开发大学综合门户是一个很复杂的项目，但只要一步步来，一定能完成。

小明：谢谢你的帮助，我会继续努力的！

小李：加油！祝你顺利完成这个项目！