Vue.js 2.0 + Webpack + Asp.net Core 2.0 架构讲解

January 22 2018

这是一篇演讲稿。

前提：

  1. VS2017 或者 VsCode
  2. .Net Core 2.0框架
  3. Node.js

为什么要选择 Vue.js ？

  1. 轻量级
  2. 中文文档详细
  3. 社区活跃
  4. 国人骄傲

为什么选择Element作为前端UI ?

为什么要安装Node.js ？

因为要打包。

什么是webpack ？

  1. node的一个package
  2. 打包工具
  3. 专门用于打包js以及css

后端为什么不是Asp.net ？

因为没有找到 vue 2.0 + asp.net 的开源项目，标配 vue 2.0 + asp.net core 1.1 以上。

前端目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
ClientApp/
  |-- api/                  	
  |     |-- index.js            
  |     |-- api.js           	//按业务模块组织的接口文件，所有接口都引用axios实例
  |-- assets/
  |	    |-- util.js           //公共库
  |-- components/
  |-- router/
  |     |-- fullpath.js         //完整路由数据，用于匹配用户的路由权限得到实际路由
  |     `-- index.js            //输出基础路由实例
  |-- views/
  |-- App.vue                 //权限验证，添加动态路由实现菜单管理
  ·-- main.js                 //程序入口

数据格式约定

  • 路由权限数据必须是如下格式的对象数组，id和parent_id相同的两个路由具有上下级关系

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    [
        {
          "id": "1",
          "name": "菜单1",
          "parent_id": null,
          "route": "route1"
        },
        {
          "id": "2",
          "name": "菜单1-1",
          "parent_id": "1",
          "route": "route2"
        }
      ]

  • 资源权限数据必须是如下格式的对象数组，每个对象代表一个RESTful请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     [
        {
          "id": "1",
          "name": "账号-获取",
          "url": "/accounts",
          "method": "GET"
        },
        {
          "id": "2",
          "name": "账号-删除",
          "url": "/account/delete",
          "method": "DELETE"
        }
    ]

  • RESTful请求的格式必须是如下格式

1
2
3
/api/controller					//不允许直接在URL带上参数，但是允许POST或者PUT方式传参
/api/controller/action			//不允许直接在URL带上参数，但是允许POST或者PUT方式传参
/api/controller/action/params	//允许直接在在URL带上参数params，比方说DELETE请求或者GET请求

Vue.js实例生命周期图示

后台目录结构

1
2
3
4
5
6
7
8
9
10
Controllers/
Views/
Extensions/                        //针对ASP.NET里的有，但是ASP.NET Core没有的方法进行扩展
.babelrc                           //将es6转换成es5的配置文件
app.config                         //相当于ASP.NET里的web.config文件
appsettings.json                   //ASP.NET Core的默认配置文件
package.json                       //Node.js安装包配置文件
Program.cs                         //程序入口
Startup.cs                         //ASP.NET Core启动配置项
webpack.config.js                  //webpack配置文件

可能会遇到的问题

  1. 安装node-sass的失败问题

安装node-sass的时候会在node scripts/install阶段从github.com上下载一个.node文件，大部分安装不成功的原因都源自这里，因为Github Release里的文件都托管在s3.amazonws.com上面，而这个网址在国内总是网络不稳定，所以我们需要通过第三方服务器下载这个文件。

可以通过使用淘宝镜像来解决这个问题

1
2
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
npm install node-sass

  1. 无法添加”XXX”引用

从ASP.NET项目迁移到ASP.NET Core项目的过程中，也是.NET Framework平台转移到.NET Core平台的过程。.NET Framework平台上的大部分引用无法直接在.NET Core平台上直接引用，解决办法要么在NuGet包管理器里找，要么自己拓展。

avatar

chilihotpot

You Are The JavaScript In My HTML