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

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

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

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

查看node版本

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

创建Vue项目

如果项目中没有相应的类型，需要在安装界面安装基于Node.js的开发：

安装扩展

安装Node支持

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

项目结构

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

Npm输出

安装完成后，可以编译运行项目。
Vistual Studio 会启动node.js，并启动浏览器：

服务端启动

浏览器启动

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

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

abp-8-step9.PNG

修改App.vue 文件如下：

<template>
    <div id="app">
        <ul>
            <li v-for="(item,index) of list" :key="index">
                {{item.categoryName}}
            </li>
        </ul>
    </div>
</template>

<script>
   
    import axios from 'axios'
    export default {
        name: 'app',
        data: function () {
            return {
                errmsg: {},
                list: [{ categoryName: "C1" }, { categoryName: "C2" }]
            }
        }, mounted() {
            axios
                .post('http://localhost:6749/api/services/app/Poem/GetAllCategories')
                .then(response => (this.list=response.data.result))
                .catch(function (error) { 
                    this.errmsg = error;
                });
        }

    };
</script>

需要同时运行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");

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

结果

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

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