“This is the 11th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Project creation

We launch the Vue UI and create a custom project.

Click Create project, enter project name, select package manager as NPM, and click Next

Check the plugins we need and click Next

We removed the EsLint plugin option to avoid some additional error prompts.

Select vUE version 3.x and click Create Project

After the project is created, it is automatically entered into the Demodemo project we created. We click on dependencies, click on the upper right corner to install dependencies, search axios and Element-Plus and install them. After installation let as shown in figure

Then we click on tasks to launch Serve

Then we go to: localhost:8080 to see the home page of the Router mode

Back-end interfaces are available

We developed a backend interface using FastApi: localhost:2345/test/info

Front-end code development

The main js configuration

The most basic and important configuration is where we create the VUE instance and configure it globally.

For our project, we need to import the AXIos, element-Plus module we need in main.js for use in views (components), configure axios and enable it.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// Import the plug-in
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
// Import axios and set the default baseURL
import axios from 'axios'
axios.defaults.baseURL='http://localhost:2345'

// Create vue instance app
const app = createApp(App)
// Start the plugin we need
app.use(router)
app.use(ElementPlus)
// Configure vue to enable AXIOS
app.config.globalProperties.$axios = axios
/ / mount app
app.mount('#app')
Copy the code

App.vue added a new router-link

So there’s a link on the home page for us to jump to.

Prepare the view (component)

When the Demo link is clicked on the home page, the router will load the view page we wrote into the home page router-view.

<template>
    <h1>This is Demo!</h1>
    <el-row>
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
        <el-button @click='showinfo'>Update the infos</el-button>
      </el-row>
      <p>{{info}}</p>
      <p>{{infos}}</p>
       <el-table :data="infos" border style="width: 100%">
          <el-table-column prop="id" label="Date" width="180" />
          <el-table-column prop="name" label="Name" />
        </el-table>
</template>

<script>
  export default{
      name: "demo".data() {
          return {
              infos: [{id: 1.name: 'phyger'}].info: "hello vue...",}},methods: {
          showinfo(){
              this.$axios.get('/test/info')
              .then(response= >{
                  this.infos = response.data;
                  console.log(response.data);
              })
              .catch(error= >{
                  console.log(error); }); }},}</script>

<style>
</style>
Copy the code

This page mainly loads the basic button component of Elemental-Plus to confirm the successful loading of Elemental-Plus. The main showinfo method requests the back end through AXIOS and updates the obtained data into the responsive variable infos to achieve dynamic rendering of the page.

Add a route to router/index.js

In router/index.js, we import the view we defined above and define a route /demo. When we request this route /demo, the view will be loaded into the router-view.

Routing analysis

When we click on the Demo link on the home page, we are redirected to the URI to=”/ Demo “we defined in router-link. In this case, we can see that the route we defined refers to the view named Demo, and then render the view named Demo to the router-view.

Project test

Access/demo

Click on the Demo link on the home page and, unsurprisingly, see the router-view section of the page rendered by the Demo view

We see that the page has successfully loaded and the table has been rendered with the default data.

Test the Script function of Demo

The logic in the Script of Demo view is that when the update INFOS button is clicked, the showinfo method is executed to update the infOS data, and the el-table of the page is also updated in a responsive manner

This concludes our front and back end separation Demo.