【Vue 牛刀小试】:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

前言

        在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习惯进行调整。因此在后面几章的学习中,我将会在整个项目基础上,按照自己的需求进行修改设定。
        PS:因为毕竟自己还是传统意义上的后端开发,所以这里最终搭建完成的前端项目模板,其实是按照 PanJiaChen 开源的 vue-admin-template 模板进行修改仿写,所以你可以把这个系列后续的文章当成是对于 vue-admin-template 模板的使用资料补充。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:https://github.com/Lanesra712/ingos-web

或许是你应该了解的一些 ASP.NET Core Web API 使用小技巧

前言

        在目前的软件开发的潮流中,不管是前后端分离还是服务化改造,后端更多的是通过构建 API 接口服务从而为 web、app、desktop 等各种客户端提供业务支持,如何构建一个符合规范、容易理解的 API 接口是我们后端开发人员需要考虑的。在本篇文章中,我将列举一些我在使用 ASP.NET Core Web API 构建接口服务时使用到的一些小技巧,因才疏学浅,可能会存在不对的地方,欢迎指出。
        仓储地址:https://github.com/Lanesra712/ingos-server

【Vue 牛刀小试】:第十六章 - 针对传统后端开发人员的前端项目框架搭建

前言

        在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中。伴随着 Node.js 的出现,以及 React、Angular、Vue 这类的前端 MVVM 框架的发展,前端越来越像后端靠拢,前端工程化的思想开始出现。现在的前端开发,已经不再只是一个 html 页面,上面引用各种 js、css 文件就可以完成开发的了。
        与后端类似,前端开始出现各种已经很完善的框架模板、开始出现针对前端组件包的管理工具、各种各样的单元测试库,以及针对前端所特有的 js、css、image…这种静态资源文件的模块打包器。那么,从本篇文章开始,我们就从零开始,结合之前学习的 Vue 相关的基础知识,通过 Vue CLI 和 Element UI 去搭建一个基于 Vue 的 SPA 前端项目框架模板。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter03-Silver Use Vue CLI To Build Vue Project

【Vue 牛刀小试】:第十五章 - 传统开发模式下的 axios 使用入门

前言

        在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,能够非常便捷的发起 http 请求也占有非常重要的地位。
        既然我们已经开始使用 Vue 进行前端开发,抛弃了对页面 DOM 元素的操作,难道,为了方便的发起 http 请求,还需要在项目中加载 jquery 或者是手动创建 http 请求吗?
        答案当然是不用的,作为目前主流的前端框架,开发者、社区早已经为我们提供好了解决方案。随着 Vue 作者尤雨溪宣布不再维护 vue-resource,转而推荐大家使用 axios,目前在 Vue 社区中 axios 开始占据 http 库的主导地位,所以这一章我们就介绍下如何使用 axios 发起 http 请求。
        系列目录地址:Vue.js 牛刀小试
        仓储地址(前端):Chapter02-Bronze Use Axios To Make HTTP Request
        仓储地址(后端):Chapter02-Bronze ASP.NET Core Sample API

【Vue 牛刀小试】:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

前言

        在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由、命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传递。通过学习我们可以发现,在实现路由间的参数传递时,我们将 Vue Router 与我们的组件强耦合在一起,这无疑是不合适的,那么本章我们就来学习,如何实现组件和 Vue Router 之间的解耦。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Decouple Component from Router

【Vue 牛刀小试】:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

前言

        在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由。但是在实际使用中,我们经常会遇到路由传参、或者一个页面是由多个组件组成的情况。本章,我们就来介绍下在这两种情况下 Vue Router 的使用方法以及一些可能涉及到的概念。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Routing Pass in Vue.js

构建可读性更高的 ASP.NET Core 路由

前言

        不知你在平时上网时有没有注意到,绝大多数网站的 URL 地址都是小写的英文字母,而我们使用 .NET/.NET Core MVC 开发的项目,因为在 C# 中类和方法名采用的是 Pascal 命名规范,根据 .NET 框架默认的路由规则,项目的 URL 地址会呈现出大小写混合的情况。对于强迫症来说,这种情况绝对不能忍,当然,由于整个项目的 URL 地址大小写混合显示,也无法更清晰的向用户、浏览器表达出当前页面的功能。那么,这篇文章就来介绍下,如何调整我们的 ASP.NET Core 项目的路由规则,从而使我们项目的 URL 地址可读性更高。
        PS:在构建 URL 的过程中,采用大写的地址还是采用小写的地址,每个人都会有自己的想法和这样做的理由,这篇文章不讨论两种方案的优劣,只是提供一种构建小写 URL 地址以及让我们的 URL 可读性更高的解决方案,请友善观看,切勿互怼。
        仓储地址:https://github.com/Lanesra712/grapefruit-common

【Vue 牛刀小试】:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

前言

        前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的。那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由与我们后端的路由有什么异同呢。本章,我们就来简单介绍下前端路由的概念,以及如何在 Vue 中使用 Vue Router 来实现我们的前端路由。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Build Router in Vue.js

在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

前言

        在项目的前端开发中,对于绝大多数的小伙伴来说,当然,也包括我,不可避免的需要在项目中使用到一些第三方的组件包。这时,团队中的小伙伴是选择直接去组件的官网上下载,还是图省事直接在网上搜索,然后从一些来源不明的地方下载,我们就无法管控了。同时,我们添加的组件间可能存在各种依赖关系,如果我们没有正确下载引用的话,到最后可能还是无法正常使用。
        因此,如何从可信的源下载组件包,以及如何轻松的解决各个组件间的依赖关系就成了我们需要解决的问题,那么,有没有一种工具可以帮我们解决这一问题?你好,有的,npm 了解一下。
        仓储地址:https://github.com/Lanesra712/grapefruit-common

【Vue 牛刀小试】:第十一章 - Vue 中 ref 的使用

前言

        在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作。但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据。难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能,当然,这也只是 ref 其中一项的功能。本章,我们就来学习 Vue 中 ref 的相关使用。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Get Elements

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×