feat: django and vue integration

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
2021-02-09 12:34:10 +05:30 · 2021-02-09 12:34:10 +05:30 · b4656e7fca
commit b4656e7fca
parent 6e9c9160c9
18 changed files with 172 additions and 96 deletions
--- a/backend/app/admin.py
+++ b/backend/app/admin.py
@ -1,3 +1,6 @@
 from django.contrib import admin
+from app.models import BhavCopyEquity

 # Register your models here.
+admin.site.register(BhavCopyEquity)
+
--- a/backend/app/models.py
+++ b/backend/app/models.py
@ -20,9 +20,9 @@ class BhavCopyEquity(models.Model):
    no_trades = models.PositiveIntegerField()
    no_of_shrs = models.PositiveIntegerField()
    net_turnov = models.PositiveIntegerField()
-    tdcloindi = models.TextField()
+    tdcloindi = models.TextField(blank=True)

    def __str__(self):
-        return f'{self.DATE}-{self.SC_CODE}'
+        return f'{self.date}-{self.sc_code}'


--- a/backend/app/serializers.py
+++ b/backend/app/serializers.py
@ -0,0 +1,8 @@
+from rest_framework import serializers
+from app.models import BhavCopyEquity
+
+class BhavCopyEquitySerializer(serializers.ModelSerializer):
+    class Meta:
+        model = BhavCopyEquity
+        fields = '__all__'
+
--- a/backend/app/urls.py
+++ b/backend/app/urls.py
@ -0,0 +1,6 @@
+from django.urls import path
+from app.views import BhavCopyEquityView
+
+urlpatterns = [
+    path('bhavcopyequity/', BhavCopyEquityView.as_view(), name='bhavcopyequity_view'),
+]
--- a/backend/app/views.py
+++ b/backend/app/views.py
@ -1,3 +1,15 @@
-from django.shortcuts import render
+from rest_framework.response import Response
+from rest_framework import generics
+
+from app.models import BhavCopyEquity
+from app.serializers import BhavCopyEquitySerializer

 # Create your views here.
+class BhavCopyEquityView(generics.RetrieveAPIView):
+    queryset = BhavCopyEquity.objects.all()
+
+    def get(self, request, *args, **kwargs):
+        queryset = self.get_queryset()
+        serializer = BhavCopyEquitySerializer(queryset, many=True)
+        return Response(serializer.data)
+
--- a/backend/backend/settings.py
+++ b/backend/backend/settings.py
@ -38,12 +38,14 @@ INSTALLED_APPS = [
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
+    'corsheaders',
    'app',
 ]

 MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
@ -126,6 +128,11 @@ USE_L10N = True

 USE_TZ = True

+# TODO: fix hardcoded cross allowed origins
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:8080",
+    "http://127.0.0.1:8080",
+]

 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.1/howto/static-files/
--- a/backend/backend/urls.py
+++ b/backend/backend/urls.py
@ -14,8 +14,9 @@ Including another URLconf
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path
+from django.urls import path, include

 urlpatterns = [
    path('admin/', admin.site.urls),
+    path('', include('app.urls'))
 ]
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@ -1,11 +1,12 @@
-# req
+# prod
+django-cors-headers==3.7.0
 django-redis==4.12.1
 django-rq==2.4.0
 django==3.1.6
 djangorestframework==3.12.2
+psycopg2==2.8.6
 requests==2.25.1
 rq-scheduler==0.10.0
-psycopg2==2.8.6

 # dev
 pip==21.0.1
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -44,19 +44,18 @@ services:
    # ports:
    #   - 5432:5432

-  pgadmin:
-    image: dpage/pgadmin4
-    restart: unless-stopped
-    depends_on:
-      - db
-    environment:
-      - PGADMIN_LISTEN_PORT=5050
-      - PGADMIN_DEFAULT_EMAIL=admin@bullish.io
-      - PGADMIN_DEFAULT_PASSWORD=password
-    ports:
-      - 5050:5050
+  # pgadmin:
+  #   image: dpage/pgadmin4
+  #   restart: unless-stopped
+  #   depends_on:
+  #     - db
+  #   environment:
+  #     - PGADMIN_LISTEN_PORT=5050
+  #     - PGADMIN_DEFAULT_EMAIL=admin@bullish.io
+  #     - PGADMIN_DEFAULT_PASSWORD=password
+  #   ports:
+  #     - 5050:5050

 volumes:
  bullish-db-data:

-
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -4,4 +4,8 @@ MAINTAINER "Ameya Shenoy <shenoy.ameya@gmail.com>"

 WORKDIR /code

+RUN set -ex \
+  npm i -g npm \
+  npm i
+
 ENTRYPOINT sh /code/entrypoint.sh
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -5,10 +5,13 @@
  "requires": true,
  "packages": {
    "": {
+      "name": "frontend",
      "version": "0.1.0",
      "dependencies": {
+        "axios": "^0.21.1",
        "core-js": "^3.6.5",
-        "vue": "^2.6.11"
+        "vue": "^2.6.11",
+        "vue-router": "^3.5.1"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
@ -2726,6 +2729,14 @@
      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
      "dev": true
    },
+    "node_modules/axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
    "node_modules/babel-eslint": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@ -6384,7 +6395,6 @@
      "version": "1.13.2",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz",
      "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==",
-      "dev": true,
      "funding": [
        {
          "type": "individual",
@ -13377,6 +13387,11 @@
      "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
      "dev": true
    },
+    "node_modules/vue-router": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
+      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+    },
    "node_modules/vue-style-loader": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@ -16263,7 +16278,8 @@
      "version": "4.5.11",
      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.11.tgz",
      "integrity": "sha512-JBPeZLubiSHbRkEKDj0tnLiU43AJ3vt6JULn4IKWH1XWZ6MFC8vElaP5/AA4O3Zko5caamDDBq3TRyxdA2ncUQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@vue/cli-service": {
      "version": "4.5.11",
@ -16423,7 +16439,8 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
      "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@vue/web-component-wrapper": {
      "version": "1.2.0",
@ -16638,7 +16655,8 @@
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "acorn-walk": {
      "version": "7.2.0",
@ -16678,13 +16696,15 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "ajv-keywords": {
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "alphanum-sort": {
      "version": "1.0.2",
@ -16945,6 +16965,14 @@
      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
      "dev": true
    },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
    "babel-eslint": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@ -19920,8 +19948,7 @@
    "follow-redirects": {
      "version": "1.13.2",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz",
-      "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==",
-      "dev": true
+      "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA=="
    },
    "for-in": {
      "version": "1.0.2",
@ -25616,6 +25643,11 @@
        }
      }
    },
+    "vue-router": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
+      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+    },
    "vue-style-loader": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -8,8 +8,10 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "axios": "^0.21.1",
    "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -1,28 +1,24 @@
 <template>
  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view/>
  </div>
 </template>

 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
  name: 'App',
-  components: {
-    HelloWorld
-  }
 }
 </script>

 <style>
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #f8f8f8 !important;
+}
 #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>
--- a/frontend/src/axios-api.js
+++ b/frontend/src/axios-api.js
@ -0,0 +1,9 @@
+import axios from 'axios'
+
+// TODO: fix baseurl as per builds
+const getAPI = axios.create({
+  baseURL: 'http://127.0.0.1:8000',
+  timeout: 5000,
+})
+
+export { getAPI }
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './routes.js'

 Vue.config.productionTip = false

 new Vue({
+  router,
  render: h => h(App),
 }).$mount('#app')
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import BhavCopy from './views/BhavCopy'
+
+// ensure Router added to middleware
+Vue.use(VueRouter)
+
+export default new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'bhavcopy',
+      component: BhavCopy,
+    }
+  ]
+})
+
--- a/frontend/src/views/BhavCopy.vue
+++ b/frontend/src/views/BhavCopy.vue
@ -0,0 +1,33 @@
+<template>
+  <div class="posts">
+    <h1>HelloWorld</h1>
+    <div v-for="stock in APIData" v-bind:key="stock.id">
+      <div>{{ stock.sc_name }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getAPI } from '../axios-api'
+  export default {
+    name: 'Posts',
+    data() {
+      return {
+        APIData: []
+      }
+    },
+    created() {
+      getAPI.get('/bhavcopyequity/',)
+        .then(response => {
+          console.log('BhavCopyEquity API has recieved data')
+          this.APIData = response.data
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    }
+  }
+</script>
+
+<style scoped>
+</style>