驾一叶之扁舟 举匏樽以相属
寄蜉蝣于天地,渺沧海之一粟。哀吾生之须臾,羡长江之无穷。
挟飞仙以遨游,抱明月而长终。知不可乎骤得,托遗响于悲风。

从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API

前言

哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程简化,一次写好了,在开发 Nuxt.js 框架的过程中,我发现相比之前还是有些变化的,如果你是读过我第一个前后端分离系列的小伙伴,可能看过我简单说过Nuxt框架的一些知识《Nuxt.js 是什么?》,我发现现在在项目搭建的过程中,已经优化了一些功能,今天就重头搭建一下。

如果你没有看过之前的文章,可以简单看看,主要是看看理论方面,如果是只想看搭建过程,直接看这个即可了,毕竟现在已经是最新的了,老的方案可以舍弃,不过个人建议,前边那几篇可以花几分钟看看,了解下,比如:什么是SSR渲染,为啥要使用它,是如何进行渲染的等等,毕竟很多基础概念我这里不会再说了,因为这是一个只有四篇的小系列,在上个系列都会有说到,这里就不多叙述了,直接进行项目的搭建。

今天是从简到繁的过程,并不会把每个页面的说明都写上,因为页面是千篇一律的,项目设计只写这一篇吧,下一篇重点说如何服务端部署。现在已经基本完成了(因为我还没有来得及发布,如果你想现在查看具体的效果,可以下载下来运行即可,注意要配置咱们的Blog.Core 项目,也可以关注的 Github 地址 https://github.com/anjoy8/Nuxt.tBug,这两天我会发布一版本,在线地址:http://123.206.33.109:7090/):

 

一、Nuxt项目搭建

1、通过脚手架工具初始化项目

 这里我们就直接使用了官方脚手架工具创建,当然你也可以一步一步的创建,手动创建比较麻烦,不适合新手,想了解更多,查看官网:新手模板

这里默认你的电脑上已经安装了 npm 环境了,如果不确定是否安装了,可以查使用命令查看 npm -v

 

不仅如此,如果你想使用官方脚手架搭建项目,要确保npm版本在 5.2+ ,目前已经是6.5.0了,我的本地是 5.6.0 ,符合要求,开始动手搭建。

首先你找好一个放置你项目的文件夹作为你的仓库,然后通过CMD或者 PowerShell 来创建项目,很简单 :

npx create-nuxt-app 项目名

 

在安装的过程中,会出现几个选项,这里先放上我的动图,具体如何选,图下我会解释:

 

具体的选择是这样的:

Project name TiBug.Nuxt //项目名称
Project description  //项目描述
Use a custom server framework //选择通用的服务端渲染模板框架:none,是默认服务 Nuxt default serve
Use a custom UI framework  //选择通用UI框架:Element
Choose rendering mode  //选择渲染模式:SSR或SPA
Use axios module   //是否使用 axios 进行http请求:yes
Use eslint  //是否使用代码格式纠错: no,会各种格式警告
Use prettier  //是否代码美化:yes
Author name  //作者名
Choose a package //选择一个包管理:npm

你可以根据情况自己去选择,比如你不喜欢用 nuxt 自带的服务器渲染,想使用 Express ,比如你可以直接在这里就选择好你喜欢的样式,比如我就喜欢 ElementUI 样式框架。这相对以前的版本,已经有很大的改观了,我认为很棒的。

这样我们就等待安装成功了,中间可能大概需要2~5分钟,看个人网络而定。

 

2、项目整体目录结构

安装好后,我们会看到生成的全部文件夹,而且是已经安装好依赖包的:

 

 如果你稍微有一些 Vue 的开发经验,应该都能知道大概的文件夹包含的意思,比如Component,Pages,Store等,咱们具体说说每一个文件夹都是干啥的:

├── assets                         // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript
│   └── logo.jpg                   // 默认logo图片
├── components                     // 组件。用于自己编写的Vue组件,比如滚动组件,日历组件,分页组件
│   └── AppLogo.vue                // 默认logo组件
├── layouts                        // 布局。页面都需要有一个布局,默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 <nuxt /> 标签中。
│   └── default.vue                // 默认模板页面,类似mvc中的layout
├── middleware                     // 中间件。存放中间件。可以在页面中调用: middleware: 'middlewareName' 。
├── pages                         // 页面。一个 vue 文件即为一个页面。
│   └── index.vue                  // 默认首页面
├── plugins                        // 用于存放JavaScript插件的地方
│   └── element-ui.js              // 上边我们安装的UI框架
├── static                         // 用于存放静态资源文件,比如图片,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。
├── store                         // 用于组织应用的Vuex 状态管理。
├── .editorconfig                  // 开发工具格式配置
├── .eslintrc.js                   // ESLint的配置文件,用于检查代码格式
├── .gitignore                     // 配置git不上传的文件
├── nuxt.config.js                 // 用于组织Nuxt.js应用的个性化配置,比如网站title,已便覆盖默认配置
├── package.json                   // npm包管理配置文件
└── README.md                      // 说明文档

其实整理看起来,和之前的没多少差别,至少在页面结构上没太大差别,主要更新是把项目搭建前的配置交给了开发者了,不过有一个地方是被去掉了的,你先和 Vue 结构对比下,看看少了一个什么配置

 

3、路由根据页面定

大家看上边的文档架构层次图,你可能会发现,nuxt 和 vue 还是有些不一样的,这里没有了 路由Route 的配置,发现了么?

这个就是 nuxt 框架的独到之处,为了能实现更好的SSR渲染,它使用的是根据页面结构,自动路由,所以你的文件名,就是你的路由名称:

在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

以下目录结构:

pages/
--| _slug // 以下划线开头的文件夹,代表参数
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue //以 下划线 开头的页面,动态路由
--| index.vue

 

Nuxt.js 生成对应的路由配置表为:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

具体的请查看官网:路 由

 

4、项目加载欢迎页面

 我在webstorm 中运行上边搭建好的项目,可以看到初始欢迎页:

 

下边我们就正式对这个页面进行完善,进行整体设计。

 

二、首页结构布局

 下边我就简要的写了,具体的代码,请看我的 Github 地址就行。我这里先把 pages/index.vue 的默认内容清空,

 

1、创建布局模板

 这个时候你可以先练习练习,布局页面在哪里配置?先停下来想一想,或者看看刚刚创建的文件夹,没错,就是 layouts 文件夹下的 default.vue 页面,咱们看看这个初始的是什么样子:

<template>
  <div>
    <nuxt/> //这个就是页面入口,其他页面就是在这里进行嵌入的,可以对比MVC中 layout.cshtml 中的 @RenderBody()
  </div>
</template>

<style>
</style>

 

我们直接对其进行改造,设计模板结构,

<template>
  <div id="app">
    <el-row :gutter="0" >
      <el-col class="nav">
        <el-col class="nav-bar" :sx="22" :sm="22" :md="22" :lg="16">
          <div class="nav-bar-body">
            <div class="nav-bar-inner">
              <div id="logo">
                <img
                  src="../assets/logoa.png" />
              </div>
            </div>
           ............
    </el-row>
    <div class="footer">京ICP备xxxxxxxx号</div>
  </div>
</template>

 

因为我已经在安装的时候,选择了ElementUI 框架,所以可以直接使用相关 el 组件,而不用在各种配置和引用了,你一定会问:之前在开发 Vue 的时候,也使用过 ElementUI 呀,不是应该先安装,然后在 Mian.js 中引用么,可是你为啥直接就可以用呢?能提这个问题的,表示真的是已经看懂了,别着急,请往下看。

 

2、插件是如何运行的

首先,我们应该清楚插件是什么?

插件其实就是一个 .js 文件,将我们需要的组件注入到我们的项目中去,可拔插,很方便替换任何一个我们需要的。

 

其实,我们应该了解插件是在哪里定义:

(同样,你这里也可以先停一停,自己去文件夹里找找,感觉哪一个像是定义插件的),在脚手架整体结构中,我们知道每一个文件夹都有自己的作用,其中 plugins 文件夹,就是用来存放我们的插件的,插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。说人话就是,我们的vue项目想要运行,必须实例化 vue,这个大家肯定都知道,那实例化之前,当然就必须要加载插件了,就是这个目的。

我们在上边用官方脚手架搭建的时候,已经安装了 elementUI 的插件,所以我们会在 plugins 文件夹里,看到这个 elemengt-ui.js 文件:

以后我们如果还需要建立其他组件的话,都在这里处理,比如以后我们会对axios请求访问进行封装插件,如果你不是很明白,这里举个栗子:

如果你是一直看我的文章,一定知道我在第一个系列的 Vue 项目里,为了进行 axios 请求,创建了一个 http.js 的问题,这个其实就是一个插件:

 

我定义好以后,并在 main.js 中注册引入,这样在其他页面内,就可以随心使用了。

 

最后,我们应该知道如何注册这些插件:

这个时候,就用到我们的配置文件: nuxt.config.js 了,这里边就是我们整个项目的配置文件,比如 head 中的 title 、icon呀,还有css,还有跨域本地代理,最后,当然就是我们的插件注册了:

 

这个时候,我们重新运行下我们的项目(注意:如果修改了nuxt.config.js,要重新编译下),这个时候我们看下效果:

 

嗯,很正常的显示了,并且已经支持了SSR渲染,感觉很开心,就是样式太丑,那我们就需要添加进一个样式文件,在根目录下新建 style 文件夹,并添加 style.css,具体的直接从 Github 拉取即可,不过,不仅仅要添加这个文件,还要在配置文件中,进行注册引用,

 

页面 Banner 最终的效果是这样的:

 

我们页面的模板已经加载好了,并且也 mock 了专题的数据,剩下的就是首页结构了。

 

3、首页正文结构布局

 这里因为和 vue 中开发组件或页面是一样的,就不多说了,具体的代码可以参考我的 Github 代码,这里把结构说一下:

 

其中最重要的,就是 asyncData 异步数据加载,这个和 vue 还是不同的:

 asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,你可以利用 asyncData方法来获取数据,Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

 

4、异步数据加载

是在页面加载之前,加载数据,然后融合着 data ,一起返回,最后渲染页面。注意:由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

我这里通过编译后的代码,可以看到是异步请求数据是这样的,下文中,我会配合着 axios 异步请求,一起说说:

  data: function data() {
    return {
      data: 0,
    };
  },
  asyncData: function () {
    var _asyncData = _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_2___default()(
    /*#__PURE__*/
    regeneratorRuntime.mark(function _callee(_ref) {
      var params, tag, _ref2, data;

      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              params = _ref.params;
              _context.prev = 1;
              tag = params.tag;
              _context.next = 5;//axios http数据请求
              return _plugins_axios__WEBPACK_IMPORTED_MODULE_3__["default"].get("/api/TopicDetail?page=1&tname=".concat(tag));

            case 5:
              _ref2 = _context.sent;
              data = _ref2.data.data;
              console.log(data);
              debugger;
              return _context.abrupt("return", {
                tagList: data.data,
                tagtitle: tag,
                fadetitle: true,
                notfound: !data.data.length
              });

            case 12:
              _context.prev = 12;
              _context.t0 = _context["catch"](1);

            case 14:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, this, [[1, 12]]);
    }));

    function asyncData(_x) {
      return _asyncData.apply(this, arguments);
    }

    return asyncData;
  }(),
  components: {
    ArticleList: _components_ArticleList__WEBPACK_IMPORTED_MODULE_4__["default"]
  },

 

 

三、其他页面说明 

除了上边的首页以外,还有详情页,分类页,以及数据添加页,这里就过多的说明了,其中主要说的是:

1、上拉加载分页

这个其实很简单的,就是在 mounted() 中,注册浏览器滚动事件就好了,如果这里你不知道 mounted 是vue生命周期的什么时候的话,就应该好好的再学学了,因为生命周期钩子是很重要的,至少我个人任务是这样的:

在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点。

 这个时候我们就自定义事件:

 //页面渲染完毕后,监听滚动事件
 mounted() {
   window.addEventListener('scroll', this.handleScroll)
 },
  methods: {
    //处理方法,在页面具体底部30像素的时候,触发事件
    handleScroll() {
        const jrscrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollT
        let scrollBottom = document.body.clientHeight - window.innerHeight - jrscrollTop
        if (scrollBottom < 30) {
          if (this.ScrollFirst) {
            this.nextpage() //触发这个,下拉加载分页事件
          }
        }
      }
  },
  //记得在销毁当前页面的时候,也就是切换的时候,把监听去掉
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, fa
  }

整体很简单,和我们的平时的 JS 上拉加载很相似,具体的可以查看我的代码。 

 

2、设计 axios 插件对接API(两种方式)

这里如果你有一定的 Vue 开发基础,应该能会八成以上,为什么是八成呢,因为可能还是会有一些小问题需要注意,比如重点的就是异步数据加载了。

因为 Nuxt.js 是基于SSR渲染的,所以必须先获取到数据,然后生成 Html 片,才能去渲染,这个和客户端渲染还是不一样的,客户端两者可以同步,甚至先渲染,再去进行 axios 数据请求,但是这样不能实现 SEO 的作用,所以就在原先 axios 请求的基础上,封装了一个异步请求,这样就能达到目的。但是这个在使用的时候,可能不是很顺手,因为很多人已经习惯了直接用当然组件的 data() 中的数据了,在上边我们也看到了,asyncData 编译后的模板,它其实也是当前组件页面中 data 的一部分,我们甚至就可以当成 data 来使用,只不过这个data里,可以写逻辑,可以进行 axios 异步请求,那下边咱们就看看具体用法:

首先我们应该说说如何定义这个插件,当然,我们在每一个页面,通过引入 axios 也行,但是这样有一些问题,除了不方便以为,还有一个就是无法定义一些公共的东西,比如 api 域名路径,所以,我们需要定义一个插件:

 

A:首先,我们在 plugins 文件夹中定义 axios.js 插件:

import axios from 'axios'//引入 axios 服务
let options = {}
if (process.server) {
  // 配置基路由
  options.baseURL = 'http://localhost:5000' // http://123.xx.xx.xx:5000(服务端地址)
}
export default axios.create(options) // 注意这里是直接 export 了一个对象实例,而不是 Vue.use,这个插件不需要注册

 

B:在页面中使用:

 

这里聪明的你可能看到了,为什么没有像 element-ui 插件那样,没有在 nuxt.config.js 中配置这个插件???
这里说下,因为这里是直接返回的一个对象,我们不需要关心是不是要去安装它,它不像 element和下边的markdown那样,我们只有安装了才能用,因为element和 markdown 不是一个返回值的状态,而是 Vue.use ,是直接集成到了 vue 对象内的,所以需要在项目配置文件中进行安装,这里的 axios.js 插件就不需要安装,如果你还不明白的话,我用 http.js 也封装了一个插件,一个就像 element那样,集成到vue 的插件:

这样的话,我们在组件页面中,就可以直接这么用:

const {data: {response}} = await Vue.http.get('/api/TopicDetail/'+ id);//这个就是使用到了 Vue 对象

所以这个就需要安装,因为我们必须在 app(也就是vue)被实例化之前,安装这个插件:

 

如果你还看不懂 axios.js插件(返回对象,可直接使用)和 http.js插件(集成到vue对象里,需要注册),这两者之间的区别的话,请留言,或者加群,我详细给你说说。

 

C:最后为了使用接口,我们需要进行跨域,使用 proxy 代理:

  proxy: [
    ['/api', { target: 'http://localhost:5000' }],
    ['/images', { target: 'http://localhost:5000' }],// 将图片也代理到本地,下文的<上传图片>栏目会说到
    // ['/api', { target: 'http://123.xx.xx.xx:3080' }],//服务端配置
  ]

//还有这里
modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/axios',
'@nuxtjs/proxy'
],

 

D:接下来我们就说说如何进行异步获取数据 

就拿我们的首页数据加载来说,我们的需求是加载出来全部的 Bug 数据,首先 index.vue 中肯定有一些基本的数据,比如当前页数等常量参数,这些参数不需要我们异步去获取,因为它们在页面渲染之前已经被定义了:

 //当前组件中的数据变量
 data() {
   return {
     page: 0,
     lastpage: true,
     ScrollFirst: true,
   };
 }, 

 

但是,上边我们也说了,我们为了实现 SSR 渲染,必须在渲染前就要异步获取数据,所以这里我们就使用到了异步数据加载 asyncData:

 // 一共有三种方法,这个最常用的一种方法,asyncData() 方法
 async asyncData({ params }) {
      try {
        // 路由参数
        const { tag } = params
        // 获取异步得到的数据,必须使用 {} 大括号包裹
        let { data } = await axios.get(`/api/TopicDetail/24`)
        console.log(data)
        
        // 如果想要获取返回数据 data 中的某一个属性,可以这么嵌套
        const { data: { article } } = await axios.get(`/api/TopicDetail?page=1`)
        console.log(article)

        // 然后将得到的数据返回过去,其实和本身的 data() 有异曲同工之妙
        return {
          articleList: article,
          tagtitle: tag,
          fadetitle: true,
          notfound: !article.length
        }
      } catch (err) {
        error({statusCode: 404})
      }
    },

提示:如果你不需要使用异步的话,直接用 let data= axios.get(`/api/TopicDetail/24`) 就可以了。

其实通过这里,你应该也能看的明白,这个异步获取数据,本身和 data() 是很像的,通过操作,把数据返回到页面里,这里只是要注意两点:

1、一定要是异步的 await;

2、一定注意返回的数据格式,你可以用debugger 或者 console 来查看,也可以直接用 mock 数据测试。

 

最后,就是像 data 数据一样,直接在页面其他地方进行使用了,

<el-col :xs="24" :sm="24" :md="24" :lg="12"  v-for="item in articleList" :key="item.id" class="artitem" >

如果你是第一次使用,肯定会遇到找不到数据而报错的情况,用我说的方法,断点调试+mock 数据,相信很快你会游刃有余了。

 

3、选择Mavon-Editor富文本编辑器

关于富文本编辑器,我也找了几个做对比,因为平时更喜欢用 markdown ,所以,就选用了这个 mavon-editor 编辑器了,使用方法很简单,还是插件三步走:

1、安装依赖:

      npm install mavon-editor --save

2、在plugins中创建vue-markdown.js

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)

3、在nuxt.config.js中引入

 

具体如何在详情页展示呢,我用的是 highlight.js 和 marked 来实现的,使用方法很简单,安装过包以后,在页面内引用,然后对我们添加的 content 代码进行 marked() 方法即可,具体使用请查看我的代码。

 

4、上传图片

这个上传图片还是比较简单的,只不过需要有一些细节需要注意下,我这里有两个版本的上传图片的方法 ,一个是 element-upload 上传用户头像的,一个是 mavon 富文本编辑器中的上传图片的方法,后台方法是同一个,只不过前端控制稍微不同罢了,这里先说下后端API:

  [HttpPost]
  [Route("Pic")]
  public async Task<MessageModel<string>> InsertPicture([FromServices]IHostingEnvironment environment)
        {
            var data = new MessageModel<string>();
            string path = string.Empty;
            string foldername = "images";
            var files = Request.Form.Files;
            if (files == null || files.Count() <= 0) { data.Msg = "请选择上传的文件。"; return data; }
            //格式限制
            var allowType = new string[] { "image/jpg", "image/png", "image/jpeg" };
            string folderpath = Path.Combine(environment.WebRootPath, foldername);
            if (!System.IO.Directory.Exists(folderpath))
            {
                System.IO.Directory.CreateDirectory(folderpath);
            }
            if (files.Any(c => allowType.Contains(c.ContentType)))
            {
                if (files.Sum(c => c.Length) <= 1024 * 1024 * 4)
                {
                    //foreach (var file in files)
                    var file = files.FirstOrDefault();
                    string strpath = Path.Combine(foldername, DateTime.Now.ToString("MMddHHmmss") + file.FileName);
                    path = Path.Combine(environment.WebRootPath, strpath);

                    using (var stream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.ReadWrite))
                    {
                        await file.CopyToAsync(stream);
                    }

                    data = new MessageModel<string>()
                    {
                        Response = strpath,
                        Msg = "上传成功",
                        Success = true,
                    };
                    return data;
                }
                else
                {
                    data.Msg = "图片过大";
                    return data;
                }
            }
            else

            {
                data.Msg = "图片格式错误";
                return data;
            }
        }

 

然后看看前端是怎么操作的:

1、element-ui 的 upload 上传图片方法:

这个很简单,官方栗子中,已经说的很明白了,几乎不用做任何的修改就能达到目的,只需要我们修改下后端的api地址即可,注意这里有跨域的问题,我直接用的是本地代理的地址:

注意注意下边三个问题就行了:

1、接口地址配置在 action;

2、一定要跨域,本项目使用的是本地代理 proxy,你也可以使用后端的CORS实现跨域;

3、记得要在后端配置使用静态资源文件 app.UseStaticFiles(); ,因为我把图片放到了wwwroot里了;

其他的和官方地址一模一样的。http://element-cn.eleme.io/#/zh-CN/component/upload

 

2、mavon 富文本编辑器上传图片 :

这个完全照搬官方文档即可,几乎不用修改什么,只不过注意事项还是上边的那三个,跨域+静态资源使用,不多说:图片上传详情点击这里...,或者看我的Github代码。

 

 

四、服务端接口设计

1、设计统一数据结构接口

 我这里使用了异步的统一泛型返回数据模型,大家也都能看懂,因为第一个系列已经说的很多了:

        /// <summary>
        /// 获取Bug数据列表(带分页)
        /// </summary>
        /// <param name="page">页数</param>
        /// <param name="tname">专题类型</param>
        /// <returns></returns>
        [HttpGet]
        public async Task<MessageModel<PageModel<TopicDetail>>> Get(int page = 1, string tname = "")
        {
            var data = new MessageModel<PageModel<TopicDetail>>();
            int intTotalCount = 6;
            int TotalCount = 0;
            int PageCount = 1;
            List<TopicDetail> topicDetails = new List<TopicDetail>();

            //总数据,使用AOP切面缓存
            topicDetails = await _topicDetailServices.GetTopicDetails();
            if (!string.IsNullOrEmpty(tname))
            {
                var tid = (await _topicServices.Query(ts => ts.tName == tname)).FirstOrDefault()?.Id.ObjToInt();
                topicDetails = topicDetails.Where(t => t.TopicId == tid).ToList();
            }
            //数据总数
            TotalCount = topicDetails.Count;

            //总页数
            PageCount = (Math.Ceiling(topicDetails.Count.ObjToDecimal() / intTotalCount.ObjToDecimal())).ObjToInt();

            //当前页数据
            topicDetails = topicDetails.OrderByDescending(d => d.Id).Skip((page - 1) * intTotalCount).Take(intTotalCount).ToList();

            return new MessageModel<PageModel<TopicDetail>>()
            {
                Msg = "获取成功",
                Success = topicDetails.Count >= 0,
                Response = new PageModel<TopicDetail>()
                {
                    page = page,
                    pageCount = PageCount,
                    dataCount = TotalCount,
                    data = topicDetails,
                }
            };

        }

通用返回信息类 和 通用分页类:

 /// <summary>
 /// 通用返回信息类
 /// </summary>
 public class MessageModel<T>
 {
     /// <summary>
     /// 操作是否成功
     /// </summary>
     public bool Success { get; set; } = false;
     /// <summary>
     /// 返回信息
     /// </summary>
     public string Msg { get; set; } = "服务器异常";
     /// <summary>
     /// 返回数据集合
     /// </summary>
     public T Response { get; set; }

 }

/// <summary>
/// 通用分页信息类
/// </summary>
public class PageModel<T>
{
    /// <summary>
    /// 当前页数
    /// </summary>
    public int page { get; set; } = 1;
    /// <summary>
    /// 总页数
    /// </summary>
    public int pageCount { get; set; } = 6;
    /// <summary>
    /// 数据总数
    /// </summary>
    public int dataCount { get; set; } = 0;
    /// <summary>
    /// 返回数据
    /// </summary>
    public List<T> data { get; set; }

}

 

五、对接口进行配置权限

因为我们的TiBug 1.0 还没有设计用户登录问题,所以,这一块还没有,不过别慌,过些天我会加上,这几天先把1.0版本发布到服务器。

然后开始开发 TiBug 1.5版本,设计管理后台,初步是基于VueAdmin的,主要是用户管理和Bug管理,权限管理等,大家也看到了,目前的版本是只能添加不能修改,还是基于我们之前设计的 [Authorize("Permission")],数据库配置,我本地简单试了试,还是挺好用的,到时候也会尝试下滑动过期等问题的解决方案。 

 

 

六、结语

到这里我们已经把项目的结构定义好了,而且也自适应了设备,内容简单,主要的就是讲解了:

1、如何通过 nuxt 官方脚手架搭建项目;2、页面是如何加载的;3、插件的使用;4、异步数据运行;5、使用富文本编辑器以及上传图片等等,作为展示。

这几天把整体页面都设计好了,也上传到Github上了,下篇开始部署,发布到服务器。

 

七、Github

https://github.com/anjoy8/Nuxt.tBug

https://github.com/anjoy8/Blog.Core

 

posted @ 2019-01-14 13:12 老张的哲学 阅读(...) 评论(...) 编辑 收藏
作者:老张的哲学
好好学习,天天向上
好友榜:
如果愿意,把你的博客地址放这里
jianshu.com/u/老张
SqlSugar codeisbug.com
钰玺 studenty.cn