前后端分离之Vue添加功能

 

第一步创建一个页面，然后进入Router里面找到Index配置一下你所创建页面的路由：

 

配置完之后按下Ctrl+S保存一下，然后进入页面敲下vue回车就会把页面的基础框架搭建好我们就只需要粘贴复制代码就行了：

 

 

 

在之后就进入官网复制代码了，打开element 找到table表格找到你所需要的表单页面点击下面的显示代码进行粘贴复制：

 

 

 

复制完之后粘贴到vue页面，要粘贴到div里面， 下面的script代码也要复制过去：

 

 

之后在script代码找到一个叫methods的方法，在里面创建一个添加的方法（名字随意最好符合规范），使用axios连接后台的API项目：

 

 

 进入后台API中写下我们的添加方法：

 

 

然后在App_Start文件夹中找到WebApiConfig类进入里面配置一下路由，配置之前要现在项目中下载配置路由的程序包，右击鼠标点击管理NUGet包

 

进入之后点击浏览输入Cors，找到后缀相同的下载然后再去配置，第一个引用它的命名空间：

 

配置完进入控制器点击运行复制添加的网址链接，然后进入Vue中把链接粘贴到axios中Ctrl+S保存运行：