dotnet core webapi +vue 搭建前后端完全分离web架构(一)

publicvoidConfigure(IApplicationBuilderapp,IHostingEnvironmentenv)
{
if(env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}

//添加cors服务
services.AddCors(options=>
options.AddPolicy("CorsSample",p=>p.WithOrigins("http://localhost:5000")
.AllowAnyMethod().AllowAnyHeader()));

app.UseMvc();
}

publicvoidConfigureServices(IServiceCollectionservices)

{

services.AddMvc();

//配置Cors
app.UseCors("CorsSample");

}

namespacewebApiDemo1.Controllers
{
[Route("api/[controller]")]
publicclassValuesController:Controller
{
//GETapi/values
[HttpGet]
[EnableCors("CorsSample")]
publicIEnumerable<string>Get()
{
returnnewstring[]{DateTime.Now.ToString()};
}

}
}

<template>

<divclass="userList">

<el-buttontype="primary"@click="handleClick">获取服务端时间</el-button>

<p>callfromserver:{{msg}}</p>

</div>

</template>

<script>

importaxiosfrom'axios';

exportdefault{

data(){

return{

msg:""

}

},

methods:{

handleClick(evt){

let_self=this;

axios.get('http://localhost:5000/api/Values')

.then(function(response){

//debugger;

console.log(response);

_self.msg=response.data;

})

.catch(function(error){

console.log(error);

});

}

}

}

</script>

<stylescoped>

.userList

{

padding-top:10px;

}

</style>