Django➕Vueで顧客管理サイト作成❽

❶.クライアントのリストを表示する

-クライアント向けのページ作成

ファイルのパス（path）:ganarcrm_vue/src/view/Clients.vue

<template>
   <div class="container">
       <div class="columns is-multiline">
           <div class="column is-12">
               <h1 class="title">クライアント</h1>
               <router-link to="/dashboard/clients/add">クライアント追加</router-link>
           </div>
           <div class="column is-12">
               <template v-if="clients.length">
                   <table class="table is-fullwidth">
                       <thead>
                           <tr>
                               <th>名前</th>
                               <th>窓口</th>
                               <th></th>
                           </tr>
                       </thead>
                       <tbody>
                           <tr
                               v-for="client in clients"
                               v-bind:key="client.id"
                           >
                                   <td>{{ client.name }}</td>
                                   <td>{{ client.contact_person }}</td>
                                   <td>
                                       <router-link :to="{ name: 'Client', params: { id: client.id }}">詳細</router-link>
                                   </td>
                           </tr>
                       </tbody>
                   </table>
               </template>
               <template v-else>
                   <p>クライアント情報ございません</p>
               </template>
           </div>
       </div>
   </div>
</template>
<script>
   import axios from 'axios'
   export default {
       name: 'Clents',
       data() {
           return {
               clients: []
           }
       },
       mounted() {
           this.getClients()
       },
       methods: {
           async getClients() {
               this.$store.commit('setIsLoading', true)
               await axios
                   .get('/api/v1/clients/')
                   .then(response => {
                       this.clients = response.data
                   })
                   .catch(error => {
                       console.log(error)
                   })
               this.$store.commit('setIsLoading', false)
           }
       }
   }
</script>

ファイルのパス（path）:ganarcrm_vue/src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import store from '../store'

import Home from '../views/Home.vue'

import SignUp from '../views/SignUp.vue' 
import LogIn from '../views/LogIn.vue'
import Dashboard from '../views/dashboard/Dashboard.vue'
import MyAccount from '../views/dashboard/MyAccount.vue'
import Leads from '../views/dashboard/Leads.vue'
import Lead from '../views/dashboard/Lead.vue'
import EditLead from '../views/dashboard/EditLead.vue'
import AddLead from '../views/dashboard/AddLead.vue'
import AddTeam from '../views/dashboard/AddTeam.vue'
//part6
import Team from '../views/dashboard/Team.vue'
import AddMember from '../views/dashboard/AddMember.vue'

// part8
import Clients from '../views/dashboard/Clients.vue'


const routes = [
 {
   path: '/',
   name: 'Home',
   component: Home
 },
 {
   path: '/sign-up',
   name: 'SignUp',
   component: SignUp
 },

 {
   path: '/log-in',
   name: 'LogIn',
   component: LogIn
 },

 {
   path: '/dashboard',
   name: 'Dashboard',
   component: Dashboard,
   meta: {
     requireLogin: true
   }
 },
 {
   path: '/dashboard/my-account',
   name: 'MyAccount',
   component: MyAccount,
   meta: {
     requireLogin: true
   }
 },
 {
   path: '/dashboard/team',
   name: 'Team',
   component: Team,
   meta: {
     requireLogin: true
   }
 },
 {
   path: '/dashboard/team/add-member',
   name: 'AddMember',
   component: AddMember,
   meta: {
     requireLogin: true
   }
 },
 {
   path: '/dashboard/add-team',
   name: 'AddTeam',
   component: AddTeam,
   meta: {
     requireLogin: true
   }
 },
 {
   path: '/dashboard/leads',
   name: 'Leads',
   component: Leads,
   meta: {
     requireLogin: true
   }
 },
 {
   path: '/dashboard/leads/add',
   name: 'AddLead',
   component: AddLead,
   meta: {
     requireLogin: true
   }
 },
 {
   path: '/dashboard/leads/:id',
   name: 'Lead',
   component: Lead,
   meta: {
     requireLogin: true
   }
 },
 {
   path: '/dashboard/leads/:id/edit',
   name: 'EditLead',
   component: EditLead,
   meta: {
     requireLogin: true
   }
 },

 {
   path: '/dashboard/clients',
   name: 'Clients',
   component: Clients,
   meta: {
     requireLogin: true
   }
 },
 {
   path: '/about',
   name: 'About',
   // route level code-splitting
   // this generates a separate chunk (about.[hash].js) for this route
   // which is lazy-loaded when the route is visited.
   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
 }
]

const router = createRouter({
 history: createWebHistory(process.env.BASE_URL),
 routes
})

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireLogin) && !store.state.isAuthenticated){
   next('/log-in')
 } else {
   next()
 }
})

export default router

ファイルのパス（path）:ganarcrm_vue/src/components/layout/Navbar.vue

<template>
   <nav class="navbar is-dark" >
       <div class="navbar-brand">
           <router-link to="/" class="navbar-item">
               <strong> 勝つためのCRM</strong>
           </router-link>
       </div>

       <div class="navbar-menu">
           <div class="navbar-end">
               <!-- part4 追加 -->
               <div class="navbar-item">
                   <div class="buttons">
                       <template v-if="!$store.state.isAuthenticated">
                           <router-link to="/sign-up" class="button is-success"><strong>登録</strong></router-link>
                           <router-link to="/log-in" class="button is-light">ログイン</router-link>
                       </template>

                       <template v-else>

                           <router-link to="/dashboard/leads" class="button is-info"><strong>顧客管理</strong></router-link>
                           <router-link to="/dashboard/team" class="button is-info"><strong>チーム</strong></router-link>
                           <!-- part8 -->
                           <router-link to="/dashboard/clients" class="button is-info"><strong>クライアント</strong></router-link>

                           <router-link to="/dashboard/my-account" class="button is-info"><strong>アカウント</strong></router-link>
                       </template>


                   </div>

               </div>
           </div>
       </div>
   </nav>

</template>

<script>
   export default {
       name: 'Navbar'
   }
</script>