El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Projecte 3: Plataforma de blogs

Fi!

Introducció

En aquest projecte, construirem una plataforma de blogs utilitzant Vue.js. Aquest projecte ens permetrà aplicar molts dels conceptes apresos al llarg del curs, com ara components, Vue Router, Vuex, i més. La plataforma de blogs inclourà funcionalitats com la creació, edició i eliminació de publicacions, així com la visualització de llistes de publicacions.

Objectius del Projecte

  1. Crear una interfície d'usuari atractiva i funcional per a la plataforma de blogs.
  2. Implementar la navegació entre diferents pàgines utilitzant Vue Router.
  3. Gestionar l'estat de l'aplicació amb Vuex.
  4. Utilitzar components per modularitzar el codi.
  5. Implementar funcionalitats CRUD (Crear, Llegir, Actualitzar, Eliminar) per a les publicacions.

Estructura del Projecte

  1. Configuració Inicial

Instal·lació de Vue CLI

npm install -g @vue/cli
vue create blog-platform
cd blog-platform

Instal·lació de Dependències Addicionals

npm install vue-router vuex axios

  1. Configuració de Vue Router

src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Post from '../views/Post.vue';
import CreatePost from '../views/CreatePost.vue';
import EditPost from '../views/EditPost.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/post/:id', name: 'Post', component: Post },
  { path: '/create', name: 'CreatePost', component: CreatePost },
  { path: '/edit/:id', name: 'EditPost', component: EditPost },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

  1. Configuració de Vuex

src/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: [],
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts;
    },
    ADD_POST(state, post) {
      state.posts.push(post);
    },
    UPDATE_POST(state, updatedPost) {
      const index = state.posts.findIndex(post => post.id === updatedPost.id);
      if (index !== -1) {
        Vue.set(state.posts, index, updatedPost);
      }
    },
    DELETE_POST(state, postId) {
      state.posts = state.posts.filter(post => post.id !== postId);
    },
  },
  actions: {
    async fetchPosts({ commit }) {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      commit('SET_POSTS', response.data);
    },
    async addPost({ commit }, post) {
      const response = await axios.post('https://jsonplaceholder.typicode.com/posts', post);
      commit('ADD_POST', response.data);
    },
    async updatePost({ commit }, post) {
      const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${post.id}`, post);
      commit('UPDATE_POST', response.data);
    },
    async deletePost({ commit }, postId) {
      await axios.delete(`https://jsonplaceholder.typicode.com/posts/${postId}`);
      commit('DELETE_POST', postId);
    },
  },
  modules: {},
});

  1. Creació de Components

src/components/PostList.vue

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="{ name: 'Post', params: { id: post.id } }">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['posts']),
  },
  created() {
    this.$store.dispatch('fetchPosts');
  },
};
</script>

src/components/PostForm.vue

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="title">Title</label>
        <input type="text" v-model="post.title" id="title" required />
      </div>
      <div>
        <label for="body">Body</label>
        <textarea v-model="post.body" id="body" required></textarea>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    post: {
      type: Object,
      default: () => ({ title: '', body: '' }),
    },
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.post);
    },
  },
};
</script>

  1. Creació de Vistes

src/views/Home.vue

<template>
  <div>
    <PostList />
    <router-link to="/create">Create New Post</router-link>
  </div>
</template>

<script>
import PostList from '../components/PostList.vue';

export default {
  components: {
    PostList,
  },
};
</script>

src/views/Post.vue

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
    <router-link :to="{ name: 'EditPost', params: { id: post.id } }">Edit</router-link>
    <button @click="deletePost">Delete</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['posts']),
    post() {
      return this.posts.find(post => post.id === parseInt(this.$route.params.id));
    },
  },
  methods: {
    deletePost() {
      this.$store.dispatch('deletePost', this.post.id);
      this.$router.push('/');
    },
  },
};
</script>

src/views/CreatePost.vue

<template>
  <div>
    <h1>Create Post</h1>
    <PostForm @submit="createPost" />
  </div>
</template>

<script>
import PostForm from '../components/PostForm.vue';

export default {
  components: {
    PostForm,
  },
  methods: {
    createPost(post) {
      this.$store.dispatch('addPost', post);
      this.$router.push('/');
    },
  },
};
</script>

src/views/EditPost.vue

<template>
  <div>
    <h1>Edit Post</h1>
    <PostForm :post="post" @submit="updatePost" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import PostForm from '../components/PostForm.vue';

export default {
  components: {
    PostForm,
  },
  computed: {
    ...mapState(['posts']),
    post() {
      return this.posts.find(post => post.id === parseInt(this.$route.params.id));
    },
  },
  methods: {
    updatePost(updatedPost) {
      this.$store.dispatch('updatePost', updatedPost);
      this.$router.push('/');
    },
  },
};
</script>

Exercicis Pràctics

  1. Afegir Comentaris a les Publicacions:

    • Crear un component CommentList per mostrar els comentaris d'una publicació.
    • Crear un component CommentForm per afegir nous comentaris.
    • Actualitzar les vistes i el Vuex store per gestionar els comentaris.

  2. Autenticació d'Usuaris:

    • Implementar un sistema d'autenticació bàsic amb registre i inici de sessió.
    • Utilitzar Vuex per gestionar l'estat de l'usuari autenticat.
    • Protegir les rutes que requereixen autenticació.

Conclusió

Aquest projecte de plataforma de blogs ens ha permès aplicar molts dels conceptes apresos al llarg del curs de Vue.js. Hem creat una aplicació completa amb funcionalitats CRUD, navegació amb Vue Router, i gestió d'estat amb Vuex. A més, hem vist com modularitzar el codi utilitzant components. Amb aquests coneixements, estàs preparat per desenvolupar aplicacions més complexes i robustes amb Vue.js.

◄ Anterior
◄
Fi!

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats