西安学工管理系统前端开发实践

小明: 嗨，小华，最近我在负责一个新项目，是关于西安某大学的学工管理系统。

小华: 听起来挺有趣的。你们打算用什么技术栈呢？

小明: 我们决定采用Vue.js作为前端框架，因为它易于上手且社区活跃。

小华: 那你从哪里开始的呢？

小明: 首先，我设置了项目的基本结构。使用Vue CLI创建了一个新的项目，然后安装了必要的依赖，比如axios用于HTTP请求处理。

            
                # 安装Vue CLI
                npm install -g @vue/cli

                # 创建项目
                vue create xian-university-student-worker-management
                
                # 进入项目目录
                cd xian-university-student-worker-management
                
                # 安装axios
                npm install axios
            
        

小华: 非常好，接下来是如何组织你的组件的呢？

小明: 我把系统分为几个主要部分：学生信息管理、教师信息管理和课程管理。每个部分都有自己的组件。例如，学生信息管理包括一个StudentList.vue组件用于展示学生列表。

            
                <template>
                    <div>
                        <h1>学生列表</h1>
                        <ul>
                            <li v-for="student in students" :key="student.id">
                                {{ student.name }} - {{ student.major }}
                            </li>
                        </ul>
                    </div>
                </template>

                <script>
                import axios from 'axios';

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

小华: 看起来很不错！那你是如何处理表单提交的呢？

小明: 对于表单，我们使用了v-model双向数据绑定，这样可以方便地将用户输入的数据与后端API对接。当用户提交表单时，我们会调用axios发送POST请求到后端。

            
                <template>
                    <form @submit.prevent="addStudent">
                        <input v-model="newStudent.name" placeholder="姓名" />
                        <input v-model="newStudent.major" placeholder="专业" />
                        <button type="submit">添加学生</button>
                    </form>
                </template>

                <script>
                import axios from 'axios';

                export default {
                    data() {
                        return {
                            newStudent: {
                                name: '',
                                major: ''
                            }
                        };
                    },
                    methods: {
                        addStudent() {
                            axios.post('/api/students', this.newStudent)
                                .then(() => {
                                    this.newStudent.name = '';
                                    this.newStudent.major = '';
                                    // 更新学生列表
                                    this.$emit('student-added');
                                })
                                .catch(error => console.error(error));
                        }
                    }
                };
                </script>