从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用

我们已经创建了Web Api,现在可以创建使用这些Web Api的应用的。我们以Vue.js为例创建单页面应用(SPA)。我们使用Vistual Studio 2017创建这个应用。

使用Vistual Studio 创建 Vue.js项目框架

首先要确认是否安装了Node.js,在命令行中输入node -v,可以显示node的版本,如果没有安装,会出现提示。


从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用_第1张图片
查看node版本

在Vistual Studio 2017 中,创建新项目,选择项目类型JavaScript->Node.js或者TypeScript->Node.js,选择“基本的Vue.js Web 应用程序”:


从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用_第2张图片
创建Vue项目

如果项目中没有相应的类型,需要在安装界面安装基于Node.js的开发:
从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用_第3张图片
安装扩展
安装Node支持

我们选择创建基于JavaScript->Node.js的Vue.js Web应用:


从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用_第4张图片
项目结构

创建完成后,Vistual Studio会调用npm install 安装项目需要的npm模块,这需要等待一会儿,根据网格情况不同,有时可能会等几分钟。可以在输出窗口中选择Npm,查看npm模块的安装进度。


从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用_第5张图片
Npm输出

安装完成后,可以编译运行项目。
Vistual Studio 会启动node.js,并启动浏览器:
从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用_第6张图片
服务端启动
从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用_第7张图片
浏览器启动

在Vue.js项目中调用ABP的Web Api

首先,为我们的项目添加axios包,在项目的nmp文件夹上,单击右键,选择安装新的npm包,弹出安装界面:


从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用_第8张图片
abp-8-step9.PNG

修改App.vue 文件如下:





需要同时运行ZL.Poem.WebApi和ZL.VueJs执行项目,发现不能跨域访问,我们必须在ZL.Poem中启动跨域访问。

需要在Startup的ConfigureServices方法中注册cors策略:

 services.AddCors(option => option.AddPolicy("cors", policy => policy.AllowAnyHeader().AllowAnyMethod().AllowCredentials().AllowAnyOrigin()));
           

然后在Configure中使用这个策略

  public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseCors("cors");

再次运行,能够正确显示分类列表了。


从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用_第9张图片
结果

这里只是一个开始,说明如何使用VS2017创建Vue.js项目,以及如何调用ABP的web api。关于Vue.js项目的更多内容,有时间会另起一个系列说明。

本文同步发布在我的个人网站 http://www.jiagoushi.cn

你可能感兴趣的:(从零开始进行ABP项目开发(九)——创建Vue.js单页面(SPA)应用)