net core WebApi dapper Autofac dependency injection front-end Vue front-end part

The front-end part is relatively simple, that is, the general configuration and installation of Vue

No Vue. You can check it. You need to install node.js.

 

1. After installing vue environment.

Installing elementui and axios also has its own checks on the Internet.

Create a new User.vue in your Vue project src/components folder

<template>

 

<el-container>

<el-table

:data="tableData"

stripe

style="width: 100%">

<el-table-column

prop="adid"

label="ADID"

width="180">

</el-table-column>

<el-table-column

prop="usercode"

label="USERCODE"

width="180">

</el-table-column>

<el-table-column

prop="usernameen"

label="USERNAMEEN">

</el-table-column>

<el-table-column

prop="usernamecn"

label="USERNAMECN">

</el-table-column>

<el-table-column

prop="rank"

label="RANK">

</el-table-column>

<el-table-column

prop="delflag"

label="DELFLAG">

</el-table-column>

</el-table>

</el-container>

</template>

<script>

import Vue from 'vue' //Import Vue module

import axios from 'axios'  //Import elementui

import ElementUI from 'element-ui'  //Import elementui

import 'element-ui/lib/theme-chalk/index.css' //Import elementui's css text

Vue.use(ElementUI)

 

export default{

name: 'User',

data(){

return {

msg:"",

tableData: []

}

},

created(){

axios.get('/api/product') 

.then(response => {

this.tableData=response.data

})

},

methods: {

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

</style>

Part 2.1 Routing configuration for / api/product

Find config/index.js to modify the configuration

proxyTable: {

"/api":{

 

target: 'http://localhost:50888', // your backend routing, setting your own / api is equivalent to http://localhost:50888

changeOrigin: true,

pathRewrite:{

'^/api':''

}

}

Testing

Open the console cd to your project path

npm run dev

See if you can access back-end api/product routes and return data to table s

 

Very nice

 

Summary of Final Questions

Installation of axios is to solve the cross-domain problem of requests, you can check the information about axios to learn about it.

The problem that the elementui element can not be found in the newspaper is usually not installed properly.

Or newspapers can not find modules, and so on, these problems are online.

 

If there are shortcomings, please give more advice, leave a message with questions, and try your best to help.

Tags: Vue axios Attribute npm

Posted on Sat, 12 Oct 2019 08:49:00 -0700 by siko