(前后端分离.net项目).Net core WebApi dapper Autofac依赖注入 前端Vue (下) 前端部分

前端部分比较简单 ，就是一般的 配置安装 Vue

不会Vue的，可以去查一下  ，需要安装node.js 

 

1.安装好vue环境后  

安装elementui  和axios 这个网上也有 自己查查呗 

在你的Vue项目  src/components文件夹中新建User.vue

<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' //导入Vue模块

import axios from 'axios'  //导入elementui

import ElementUI from 'element-ui'  //导入elementui

import 'element-ui/lib/theme-chalk/index.css' //导入elementui的css文

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>

2.  1部分中/api/product 的路由配置 

找到config/index.js 修改配置

proxyTable: {

"/api":{

 

target: 'http://localhost:50888',//你后端的路由，自己设置你自己的  /api 就等于http://localhost:50888

changeOrigin: true,

pathRewrite:{

'^/api':''

}

}

 测试一下

打开控制台  cd 到你的项目路径

npm run dev一下

看能不能把 后端的api/product 路由 访问到并返回数据到table中

 

很nice

 

最后 问题总结

安装axios是为了解决请求跨域的问题，可以查查关于axios的资料学习一下

像报找不到elementui元素的问题，一般都是没安装好

或者报找不到模块等 ，这些问题网上都有

 

有不足请多多指点，有问题留言，尽力 帮助