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.
If you enjoy my content and would like to support my work, you can buy me a coffee. Your support is greatly appreciated!
Disclaimer: This content is generated by AI.
Top comments (0)