全栈开发实战
文章平均质量分 97
全栈开发实战,angularjs管理端+小程序端+nodejs后端
天地会珠海分舵
互联网老兵,全栈小学生
展开
-
[小黄书管理平台]登录服务的实现
上一章我们重新定制了登录页面,且学习了angularjs通过模型驱动表单,更好的对表单以及表单下面的控件进行控制。这一章我们会开始动手写代码,实现小黄书管理平台的登录功能。其中涉及以下几个点:支持es6 async/await特性使用Logger实现promisify化的HTTP请求服务实现登录服务调用登录服务进行登录1. 支持es6 async/await特性ES6增加了很...原创 2021-02-17 00:56:43 · 4753 阅读 · 0 评论 -
[小黄书管理平台]登录页面和模型驱动表单
上一章我们对小黄书管理平台实现了中文国际化的支持,让我们的管理平台可以根据浏览器当前的语言来自动显示中文或者英文。本章我们计划开始看下ng2-admin的登录页面:如何通过Formbuilder来实现模型驱动表单的,并会对登录页面进行些修改,修改成适合我们小黄书管理平台的登录页面。1. 登录页面表单处理1.1. 模型驱动表单 vs 模板驱动表单在Angular中,我们可...原创 2021-02-17 00:54:44 · 6385 阅读 · 0 评论 -
[小黄书管理平台]Angularjs 2.0应用的国际化
通过上一章,我们学习了Angularjs 2.0的基础知识以及对ng2-admin后台管理模板有了初步的了解。这一章我们的计划是让ng2-admin支持上中文语言,并学习ng2的国际化相关知识。ngx-translate是ng2的国际化模块, 我们可以通过其在github上的README来学习该模块的使用。同时,也可以在线上编辑并体验相关的用法:https://plnkr.co/edit/...原创 2021-02-17 00:53:31 · 1359 阅读 · 0 评论 -
[小黄书管理平台]Angularjs2.0基础及ng2-admin概览
上一章我们实现了小黄书小程序的微信授权登录。往下我们打算实现小黄书管理平台端的登录授权操作,毕竟,小黄书后台很早就已经实现了管理员的管理和登录授权逻辑。小黄书的管理后台我们打算使用Angularjs 2.0的技术来实现,因为笔者自身也是个小白,所以会在学习过程中谈及很多基础的知识。同时,我们不会从零开始对小黄书的后台进行构建。这样太耗时了,现实中,我们往往是基于一些收费的或者是免费的模板开始的...原创 2021-02-17 00:52:40 · 2362 阅读 · 1 评论 -
[小黄书小程序]微信授权登录
在上一篇文章中,我们在后台实现了会员管理以及会员注册登录的逻辑。其中登录方式包括:通过手机号码和验证码登录通过微信授权登录在小黄书小程序上,我们支持第二种登录方式。第一种方式,今后看情况再酌情进行支持。我们这一章节要做的事情就是在小程序客户端支持上微信授权登录,我们的目标是:在小黄书小程序打开时,通过微信授权进行登录。登录成功后,将访问令牌存放到小程序提供的本地缓存中。1. ...原创 2021-02-17 00:51:40 · 6554 阅读 · 0 评论 -
[小黄书后台]会员管理及微信授权登录
通过前几章小程序的UI实践,我们小黄书的Home页面已经有一个基本的呈现。但是,所有的数据还都只是mock模拟的数据,还没有任何跟小黄书服务器进行交互的动作。今天开始,我们会逐步增加小程序和服务器的交互。首先,我们会从后台对客户端会员登录的支持开始。参考小红书应用,它大体支持以下几种会员的登录方式:通过手机号和验证码进行登录通过手机号和密码进行登录,其中密码是在后期绑定进去,而不是注册时...原创 2021-02-17 00:50:38 · 13106 阅读 · 0 评论 -
[小黄书小程序]主页面笔记图片高度自适应及上拉无限加载及下拉更新
上一章我们实现了小黄书小程序标签栏的左右滑动和弹出框UI功能,今天我们会开始实现主页面中笔记的呈现。主要的功能会囊括以下几个方面:笔记的两列式布局: 一行只是显示两个笔记。且每个笔记的封面图片的高度进行自适应呈现。笔记的下拉刷新: 下拉时,检查是否有新的笔记,并完成加载。同时在标题栏显示加载动画。笔记的上拉无限加载:上拉时,获取更多的笔记,并进行加载。同时在下方显示加载动画。1. 笔...原创 2021-02-17 00:48:47 · 2724 阅读 · 0 评论 -
[小黄书小程序]主页面标签栏水平滑动和下拉弹出框
上一章我们实现了小黄书小程序的搜索栏的界面呈现。这一章我们将会参考小红书实现搜索栏下面的标签栏。该标签栏存在的意义是,用户可以根据选择的标签来快速呈现相关的内容。该标签栏界面主要是两个功能模块。一个是可以左右滑动的标签栏:另外一个功能模块就是,点击标题栏右边的箭头按钮,可以弹出和收起完整的标签弹出框:1. 标签栏布局整个标签栏的布局实现跟我们上一章的搜索栏的布局的实现很类似,我们同...原创 2021-02-17 00:47:42 · 2630 阅读 · 0 评论 -
[小黄书小程序]主页面搜索栏和flex布局
上一章我们实现了小程序的导航栏和标题栏的呈现,今天我们会开始小黄书主页面的相关界面。因为本人对css不是很熟悉,所以涉及到的知识点都会写得比较细,对于熟悉的朋友来说,也许会觉得比较冗余。所以大家酌情观看。1. 搜索栏经过上一章的实战,我们这个时候在pages/home页面已经生成了相应的几个文件:home.jshome.jsonhome.wxmlhome.wxss我们将会在h...原创 2021-02-17 00:46:26 · 2912 阅读 · 0 评论 -
[小黄书小程序]导航栏和标题栏界面
我们前面几章已经将小黄书的后台基础框架给搭建好了。后台的小黄书相关的业务逻辑,会在往后根据客户端的业务需求来进行实现。今天起我们会开始小黄书小程序的实现。我们先看下小红书应用的主界面。这一篇文章中我们主要是要搞定以下界面的UI呈现:将最下面的导航栏的界面呈现最上面的标题栏的界面呈现这里我们假设您已经做好以下准备,如果没有的话,请自行百度:已经安装微信web开发者工具: 我们可...原创 2021-02-17 00:44:25 · 145763 阅读 · 0 评论 -
[小黄书后台]文件上传到CDN
上一篇文章我们通过multer这个中间件将图片顺利的上传到了我们的服务器上面,且将图片的元数据存储到了Image这个mongodb的collections里面。这一章我们看下应该如何将文件上传到cdn,以便客户端通过cdn来快速访问图片。这里我们用到的cdn是又拍云的,国内知名度比较高,且注册认证后会送1个月的免费券。我们要达成的目标是:在配置文件提供一个开关,打开的话会将图片传送到服...原创 2021-02-17 00:41:58 · 4916 阅读 · 0 评论 -
[小黄书后台]文件上传到服务器
上一篇文章我们实现了小黄书后台框架中的鉴权服务。今天我们会开始实现文件上传的服务,因为我们参考的小红书中有很多地方是需要上传图片的,比如商品的图片等。1. Express Multer中间件Express框架下进行文件上传的一个很好用的中间件就是Multer:https://github.com/expressjs/multer它提供的Readme有很好的例子指导我们如何使用该中间件来进...原创 2021-02-17 00:40:31 · 3580 阅读 · 1 评论 -
[小黄书后台]redis和鉴权
上一章我们通过引入mongodb实现了基本的用户管理,已经实现了异常处理的基本框架。今天我们会开始实现小红书后台的鉴权功能。鉴权的主要目的就是为了:让授权的用户访问相应的api资源,而禁止没有授权的用户去访问不属于它的资源。现在比较流行的方案就是基于Token的鉴权方式, 请看知乎上的描述:https://zhuanlan.zhihu.com/p/19920223?columnSlug...原创 2021-02-17 00:38:58 · 1890 阅读 · 1 评论 -
[小黄书后台]mongodb和用户管理
上一章我们介绍了如何通过nodemon,bunyan 以及最新的nodejs调试方式来让我们更高效的进行代码调试。本章我们会引入数据库的使用,毕竟,我们小黄书的很多数据是需要存储在数据库中的。1. Mongodb这里我们假设大家对Mongodb已经有基本的了解,所以不会去详细介绍安装和基本使用之类的东西,更多的是关注到我们小黄书相关的实现上面来。我自己安装的mongodb采取的基本都是默...原创 2021-02-17 00:37:15 · 1400 阅读 · 0 评论 -
[小黄书后台]更高效的nodejs调试
上一篇文章我们通过引入Express Router来将来自客户端的各种请求代码模块化到routes目录下面,将server.js的代码保持足够的简洁。我们前面在修改了代码之后,都需要重新执行’node server/server.js’来运行服务器代码来进行调试,这显得很麻烦。且我们调试也基本上通过console.log来做,效率很低,效果也不是很好。所以本章我们尝试解决这几个问题:通过g...原创 2021-02-17 00:35:29 · 1364 阅读 · 0 评论 -
[小黄书后台]Insomnia及HelloWorld
Insomnia工欲善其事必先利其器。开发调试Resftful API的服务,我们需要有些好的工具进行支持。Postman vs Insomnia[Postman示例] [Insomnia示例] 对于调试Restful API的工具,最出名的应该就是谷歌的Postman工具。但是这个工具是个内存和CPU消耗大户(至少在我的Mackbook pro乞丐版上是如此,很容原创 2021-02-17 00:03:04 · 3661 阅读 · 0 评论 -
小白如何入门全栈开发
本教程的主要目的是想从最基础简单的概念入手,记录下自己是如何从小白到入门全栈开发的过程,以便自己查阅。 当然,如果能给后来者带来那么一点点的帮助,那将甚是欣慰。原创 2021-02-16 23:58:41 · 457 阅读 · 0 评论 -
[小黄书后台]路由级中间件及SRP单一职责原则
1. SRP单一职责原则单一职责原则(SRP:Single responsibility principle)又称单一功能原则。指的是不要存在多于一个导致类变更的原因。通俗的说,即一个类只负责一项职责。在nodejs中,我们这里将‘类’转变成‘模块’,单一职责原则同样适用。首先,回顾我们上一章的helloworld这个api在server.js文件中的应用级中间件的实现:app.u原创 2021-02-17 00:26:56 · 317 阅读 · 0 评论