Creating a Student Management System in Vue.js involves setting up the Vue.js project, creating the necessary components, and implementing the functionality to manage students. Here’s a step-by-step guide:
Step 1: Set Up the Development Environment
Install Node.js:
Download and install Node.js from nodejs.org.Install Vue CLI:
npm install -g @vue/cli
Step 2: Create a New Vue Project
- Create the Project:
vue create student-management-system
cd student-management-system
- Choose the default Vue CLI settings or customize according to your preference.
Step 3: Set Up Routing
- Install Vue Router:
npm install vue-router
-
Configure Vue Router:
Create a
router.jsfile in thesrcdirectory:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import AddStudent from './views/AddStudent.vue';
import StudentDetails from './views/StudentDetails.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/add-student',
name: 'add-student',
component: AddStudent,
},
{
path: '/student/:id',
name: 'student-details',
component: StudentDetails,
},
],
});
-
Update
main.jsto Use Router:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App),
}).$mount('#app');
Step 4: Create Views
-
Create Home View:
Create
src/views/Home.vue:
<template>
<div>
<h1>Student List</h1>
<ul>
<li v-for="student in students" :key="student.id">
{{ student.name }} - {{ student.email }}
<button @click="deleteStudent(student.id)">Delete</button>
<router-link :to="'/student/' + student.id">Details</router-link>
</li>
</ul>
<router-link to="/add-student">Add Student</router-link>
</div>
</template>
<script>
export default {
data() {
return {
students: [
{ id: 1, name: 'John Doe', email: 'john@example.com' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' },
],
};
},
methods: {
deleteStudent(id) {
this.students = this.students.filter(student => student.id !== id);
},
},
};
</script>
<style>
/* Add styles here */
</style>
-
Create AddStudent View:
Create
src/views/AddStudent.vue:
<template>
<div>
<h1>Add Student</h1>
<form @submit.prevent="addStudent">
<label for="name">Name:</label>
<input type="text" v-model="name" required />
<label for="email">Email:</label>
<input type="email" v-model="email" required />
<button type="submit">Add</button>
</form>
<router-link to="/">Back</router-link>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
};
},
methods: {
addStudent() {
const newStudent = {
id: Math.random().toString(36).substr(2, 9),
name: this.name,
email: this.email,
};
this.$router.push({ path: '/', query: { newStudent: JSON.stringify(newStudent) } });
},
},
};
</script>
<style>
/* Add styles here */
</style>
-
Create StudentDetails View:
Create
src/views/StudentDetails.vue:
<template>
<div>
<h1>Student Details</h1>
<div v-if="student">
<p>Name: {{ student.name }}</p>
<p>Email: {{ student.email }}</p>
</div>
<router-link to="/">Back</router-link>
</div>
</template>
<script>
export default {
data() {
return {
student: null,
};
},
created() {
const id = this.$route.params.id;
const students = JSON.parse(localStorage.getItem('students')) || [];
this.student = students.find(student => student.id === id);
},
};
</script>
<style>
/* Add styles here */
</style>
Step 5: Implement State Management (Optional)
For a more robust application, consider using Vuex for state management:
- Install Vuex:
npm install vuex
-
Configure Vuex:
Create a
store.jsfile in thesrcdirectory:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
students: [],
},
mutations: {
setStudents(state, students) {
state.students = students;
},
addStudent(state, student) {
state.students.push(student);
},
deleteStudent(state, id) {
state.students = state.students.filter(student => student.id !== id);
},
},
actions: {
fetchStudents({ commit }) {
const students = JSON.parse(localStorage.getItem('students')) || [];
commit('setStudents', students);
},
addStudent({ commit }, student) {
commit('addStudent', student);
const students = JSON.parse(localStorage.getItem('students')) || [];
students.push(student);
localStorage.setItem('students', JSON.stringify(students));
},
deleteStudent({ commit }, id) {
commit('deleteStudent', id);
const students = JSON.parse(localStorage.getItem('students')) || [];
const updatedStudents = students.filter(student => student.id !== id);
localStorage.setItem('students', JSON.stringify(updatedStudents));
},
},
});
-
Update
main.js:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
- Use Vuex in Components: Update the components to use Vuex actions and getters instead of local data.
Step 6: Run the Application
- Run the Vue App:
npm run serve
-
Navigate to the App:
Open a browser and go to
http://localhost:8080.
Step 7: Test the Application
-
Add, View, and Delete Students:
- Use the app to add, view, and delete students.
- Ensure that the data updates correctly and that the UI reflects the changes.
This guide provides a foundational approach to creating a Student Management System in Vue.js. You can further expand and customize it based on your application's requirements.
Disclaimer: This content is generated by AI.
Top comments (0)