学生信息管理系统

张伟（前端开发工程师）：李强，我刚收到客户那边的反馈，说他们现在使用的学工管理系统在移动端显示有问题。你这边能看看是什么原因吗？

李强（系统厂家代表）：张伟，你好。我们这边也收到了类似的反馈。不过，你们是用什么框架开发的？有没有具体的错误信息？

张伟：我们用的是React和Ant Design，前端部分没问题，但页面在手机上加载很慢，布局也乱了。你们那边有没有做过适配？

李强：我们之前是基于PC端设计的，移动端确实没有特别优化。不过，我们可以配合你们做适配。你这边有没有遇到具体的错误代码或者控制台报错？

张伟：控制台没报错，但页面渲染的时候，某些组件会突然消失，可能跟动态加载有关。

李强：那可能是数据加载顺序的问题。你们是不是用了异步请求来获取数据？比如从后端接口获取学生信息、课程表等。

张伟：对，我们是用Axios发送GET请求获取数据，然后渲染到页面上。但是有时候数据还没回来，组件就先渲染了，导致空白或异常。

李强：这个问题很常见。你可以考虑使用React的useEffect配合useState来管理状态。同时，在数据未加载完成前，可以显示一个加载状态的UI，避免页面混乱。

张伟：明白了。那我可以写一个Loading组件，当数据还在加载时显示它。不过，如果数据量很大，会不会影响性能？

李强：确实要注意性能。建议你使用懒加载或者分页机制。另外，如果数据是实时变化的，可以考虑使用WebSocket而不是轮询。

张伟：好的，我会调整一下。另外，我们还想在系统中加入一个在线答疑功能，用户可以直接在页面上提问，系统自动回复。这个怎么实现呢？

李强：这个功能需要后端支持。我们这边有API可以对接，你只需要在前端调用对应的接口，然后处理返回的数据即可。

张伟：那我应该怎么做？有没有示例代码？

李强：当然，下面是一个简单的例子，你可以参考一下。

// 前端代码示例
import React, { useState } from 'react';
import axios from 'axios';

function QnAForm() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('https://api.example.com/qna', { question });
      setAnswer(response.data.answer);
    } catch (error) {
      console.error('Error fetching answer:', error);
    }
  };

  return (
    

       setQuestion(e.target.value)}
        placeholder="请输入你的问题"
      />
      提交
      {answer && 
回答：{answer}
}
    
  );
}

export default QnAForm;
    

张伟：谢谢，这个例子很有帮助。那如果我们想把问答结果保存下来，记录到数据库里，该怎么操作？

李强：你需要在后端提供一个保存记录的接口。前端可以再发一次POST请求，把问题和答案都传过去。比如这样：

// 保存问答记录
const saveQnA = async () => {
  try {
    await axios.post('https://api.example.com/save_qna', { question, answer });
  } catch (error) {
    console.error('保存失败:', error);
  }
};
    

张伟：明白了。那我们在前端要怎么处理跨域问题？因为我们的前端域名和后端API不在同一个域下。

李强：跨域问题可以通过配置CORS来解决。你可以在后端设置允许的来源，或者在前端使用代理服务器。如果你是用Vite或Webpack，也可以配置代理。

张伟：我们用的是Vite，可以配置一下代理。比如在vite.config.js里加一个proxy配置项。

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});
    

李强：没错，这样前端就可以通过/api路径访问后端接口，而不会触发跨域问题。

张伟：好的，这对我们来说非常有用。还有，我们想做一个权限管理模块，不同角色的用户看到的内容不一样。这个怎么实现？

李强：权限管理通常由后端控制，前端可以根据用户的登录状态和角色进行渲染。比如，你可以用JWT来存储用户信息，然后根据角色显示不同的组件。

张伟：那我可以写一个高阶组件来封装权限逻辑，对吧？

李强：对的，你可以创建一个AuthComponent，根据用户角色决定是否渲染内容。

// 权限组件示例
import React from 'react';

const AuthComponent = ({ allowedRoles, children }) => {
  const userRole = localStorage.getItem('role');
  if (allowedRoles.includes(userRole)) {
    return <>{children};
  }
  return null;
};

export default AuthComponent;
    

张伟：这个方法很实用。那如果用户没有权限，我们能不能跳转到403页面？

李强：可以。你可以使用React Router的Redirect组件，或者直接在组件中判断并跳转。

张伟：明白了。那接下来我们是不是还需要考虑系统的安全性？比如防止XSS攻击？

李强：是的。前端要对用户输入进行过滤，避免注入恶意脚本。你可以使用库如DOMPurify来清理用户输入的内容。

张伟：那我们在表单提交时，应该怎么处理？

李强：在提交前，可以用DOMPurify.sanitize()来清理用户输入的内容，确保安全。

import DOMPurify from 'dompurify';

const sanitizedInput = DOMPurify.sanitize(question);
    

张伟：好的，这些知识对我们帮助很大。最后一个问题，我们想做一个实时通知功能，用户登录后能收到系统消息。这个怎么实现？

李强：这个可以用WebSocket或者SSE（Server-Sent Events）。如果是实时性要求高的场景，推荐WebSocket。

张伟：那前端怎么连接WebSocket？

李强：你可以用JavaScript的WebSocket API，或者在React中用useEffect来管理连接。

// WebSocket 示例
useEffect(() => {
  const ws = new WebSocket('wss://api.example.com/ws');

  ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
    // 处理消息，比如更新通知列表
  };

  return () => {
    ws.close();
  };
}, []);
    

张伟：太好了，这对我们后续开发非常有帮助。感谢你的指导！

李强：不客气，有任何问题随时联系我。祝你们项目顺利！