AzureFunction

Azure app architecure - step04

, , , ,

create Vue.js in local.

Install vue-cli using cmd.

1
2
npm install @vue/cli -g
npm i -g @vue/cli-init

Create Vue-Project using vue-cli.

1
vue init webpack user-frontend

And enter value you want.
I enter defalult vaules.

After created project, execute vue project using cmd.

1
2
cd user-frontend
npm run dev

Add axios Module

1
npm install axios@0.21.0 --save

And change code in src\main.js.

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'	// import axios

Vue.config.productionTip = false
Vue.prototype.axios = axios // configure axios


new Vue({
  render: h => h(App),
}).$mount('#app')

And remove the code <img src="./assets/logo.png"> in src/App.vue for remove img.

And change the code in src\components\HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<template>
  <div id="app">
    <button v-on:click="findUser">Search User</button>
    <div id="example">
        <table id="userList">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                </tr>
            </thead>
            <tbody id="contacts">
                <tr v-for="user in users" v-bind:key="user.name">
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.sex}}</td>
                </tr>
            </tbody>
        </table>
    </div>
  </div>
  
  
</template>

<script>
export default {
  name: 'app',
  data: function () {
    return {
      users: []
    }
  },
  methods: {
    findUser: function () {
      //const baseURI = 'http://localhost:7071/api';
      const baseURI = <function endpoint> // change user URL
      this.axios.get(`${baseURI}/find-user`)
      .then((result) => {
        this.users = result.data
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  max-width: 560px;
}
</style>

And retry exectue vue server.

1
npm run dev

We find changed screen like this.
Then if we click button named Search User, occur error like this.

To solve this problem, you enable CORS in Azure Function in portal.
Enable Access-control-Allow-Credential
Add localhost:8080
Then save.

After change, we retry click button, then we return data successfully.

We finish make a simple vue project in local.

Azure app architecure - Summary
Azure app architecure - step01
Azure app architecure - step02
Azure app architecure - step03
Azure app architecure - step05
Share