搜索功能会包含:热搜.搜索列表. 热搜功能在电商的搜索中经常看到,热搜数据的来源有两种 用户真实的搜索数据,根据算法进行排序 人为推送的数据 想想微博热搜是可以买的就知道热搜功能多么重要了. 我采用第二种方式简单实现. 第一种方式由于我目前还未实现,没办法介绍. 大伙儿可以参考下面几篇文章介绍热搜实现: Redis简单案例(一) 网站搜索的热搜词 Redis 与搜索热词推荐 热搜算法是怎样实现的,具体些,求解? 热搜 前端页面效果图如下: 前端页面热搜只显示图书名称.因此表示一本图书只要返回 图…

效果图 接口分析 通过上面的效果图可以看出,点赞入口主要是在书籍的详情页面. 而书籍详情页面,有以下几个功能是和点赞有关的: 获取点赞状态 点赞 取消点赞 所以项目中理论上与点赞相关的接口就以上三个. 点赞 model 的设计 既然明确了接口数量,那么下一步就是设计接口对应的model,通过model生成表格like,里面存放点赞数据. 那么需要存在哪些点赞数据呢? 这里简单分析后,记录一条点赞信息只需要保存以下的信息即可: 点赞 id 书籍 id 用户 id created_at delete…

评论功能分析 上图可以看出评论功能主要实现了:评论的发布.评论列表的展示. 在不考虑子评论以及图片评论的场景下,评论功能主要有以下两个接口: 发布评论 获取评论列表(考虑分页) 评论 Model 的建立 结合上图通过分析可以看出一条评论信息主要包含有: 用户 id 用户名 用户头像 评论信息 书籍 id 书籍名称(可选) 那么根据以上的分析,我们的Model设计如下: Comment.init({ cmid: { type: Sequelize.INTEGER, primaryKey: true…

通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看出目前一本图书信息主要有: 图片字段 名称字段 作者字段 出版社字段 除了以上前端页面中可见的信息外,在服务器开发中还需要给每一条记录(数据)都加上下面的几个字段: 创建时间字段 更新时间字段 删除时间字段 最后完成的数据库表如下: ps:由于数据库是直接导入的,之前的数据库是没有时间字段的,所以前…

通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下几个接口: 获取书籍详情信息 获取用户对书籍的喜欢状态接口 喜欢/不喜欢书籍接口 获取评论列表 写评论接口 以上的接口,有的数据可以直接从已存在的数据表中去获取,比如:书籍详情信息,而其他新接口就需要创建对应的model,然后根据model创建相应的数据表. 比如 用户对书籍的喜欢操作,可以创建li…

什么是异常 做开发的基本都知道异常,像Android开发中常见的ANR异常.空指针异常,服务器开发中经常遇到的异常404,500异常,还有一些其他常见的异常,具体可见HTTP状态码. 基本上这些异常可以总结为:已知异常和未知异常. 已知异常就是程序中能够预想到异常,比如:服务器接口开发中某个api接口需要5个参数,而用户传递的参数多余5个或者少于5个,这种错误就是已知错误. 未知异常就说程序中不能预想到的异常,比如:服务器接口开发中遇到了空指针而程序中又没有做相应处理就会抛出HTTP状态码为50…

KOA2 是什么? Koa是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 async函数,Koa帮你丢弃回调函数,并有力地增强错误处理. Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序. 为什么产生? 笔者对这几个框架都不熟,这里就不误人子弟了.可以看看下面一些大佬的介绍. Koa是由Express的原班人马打造,那么他们为什么不将…

为什么使用数据库 为什么需要数据库?-知乎 相比与文件系统,数据库具有以下优势: 高效率:查找效率高 高可用:可数据库共享 安全性强:数据不能随意修改 选择哪个数据库 数据库可以分为关系型数据库和非关系型数据库. 关系型数据库:是指采用了关系模型来组织数据的数据库,关系模型指的就是二维表格模型(一个表由行和列组成),而一个关系型数据库就是由二维表及其之间的联系所组成的一个数据组织. 代表的数据库有: 非关系型数据库(NoSQL):NoSQL(NoSQL = Not Only SQL ),意即"不…

为什么需要做参数校验 在开发中,无论是App开发还是服务器接口开发, 我们无法去预测用户传入的数据,因此参数(数据)校验是开发中不可或缺的一环. 例如像App的注册登录表单提交页面,就要做好多层的判断.如:用户名是否为空,用户密码是否为空,密码长度是否足够等等. 那么有没有比较优雅的方式实现呢? 如何优雅实现 这里使用的是基于validator.js封装的Lin-Validator,源码是七月老师提供. Lin-Validator拥有的功能: 参数校验,header,query,path,bod…

通过这篇 全栈项目|小书架|服务器开发-JWT 详解 文章我们对JWT有了深入的了解,那么接下来介绍JWT如何在项目中使用. 安装 $ npm install jsonwebtoken 生成 Token 将生成token的代码封装到一个函数中,方便后续调用. /** * 生成 token * @param {用户 id} uid * @param {*} scope */ const generateToken = function (uid, scope) { // 配置项中的密钥和过期时间…

唠嗑 参考的是慕课网七月老师的课程,七月的课质量真的挺高的,推荐一波.这次的小书架项目源码不会全部公开,因为用了七月老师课程的绝大部分代码.虽然代码不全,但是只要思路看得懂,代码实现就很简单了. 小书架项目不是我个人完整的项目,UI 使用的是[9小时搞定微信小程序开发],这位老师的界面效果,当时(去年吧)由于已经学了一段时间小程序,正好看到极客时间有这个课程,看着目录讲的挺详细的就买了,后来没啥时间看,就搁置了.今年看到七月老师的课[Node.js+KOA2 从0到1打造超好用Web框架 一步到…

小程序登录 之前也写过微信小程序登录的相关文章: 微信小程序~新版授权用户登录例子 微信小程序-携带Token无感知登录的网络请求方案 微信小程序开通云开发并利用云函数获取Openid 也可以通过官方的这张时序图了解小程序的登录流程: 从流程图上可以看出微信小程序登录需要先调用wx.login() 获取 临时登录凭证code ,并回传到开发者服务器.然后在服务器端调用 auth.code2Session 接口,换取 用户唯一标识 openid和 会话密钥 session_key等信息.之后开发者…

效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件. 热搜内容的单个按钮使用 lin-ui 中的 Tag组件,而实现云标签样式的布局是用css样式控制. 搜索列表使用 lin-ui 中的 WaterFlow布局组件. 搜索框实现 搜索框就是照着 Searchbar组件 文档实现,因此wxml布局如下: <l-search-bar placehold…

安装 官网:https://sequelize.org/v5/manual/getting-started.html 安装sequelize及数据库连接驱动 npm install --save sequelize $ npm install --save mysql2 使用 创建连接: const Sequelize = require('sequelize'); const sequelize = new Sequelize('database', 'username', 'password…

前面的文章 介绍了服务端的基础搭建以及用户模块的设计,接下来就是在服务端和客户端实现具体的业务了. 本篇文章先来介绍微信小程序开发的项目结构设计,也就是项目分包情况. 由于项目是在<极客时间-9小时搞定微信小程序开发>的基础上开发,该项目的原有的分包如下: 在此基础上增加了一些目录componends.miniprogram_npm.models,最后的目录如下: componends:存放自定义组件,如自定义弹窗.列表item布局 config:存放配置信息,如接口api.一些常量 imag…

什么是路由 路由就是具体的访问路径,指向特定的功能模块.一个api接口是由ip(域名)+端口号+路径组成,例如 :https://www.npmjs.com/package/koa-router就是一个路由,指向了koa-router的npm页面. 为什么需要 koa-router 路由 当然不需要koa-router也能实现路由功能,通过ctx.request.path去指定路径实现.例子如下: const koa = require('koa2') const app = new koa()…

JWT 官方简介:Introduction to JSON Web Tokens 文章基本是官网内容的翻译,英文不错的同学可点击上面的链接直接看英文文档. 什么是 JWT JWT全称是JSON Web Token(JWT)是一个开放标准(RFC 7519),它定义了一种紧凑且自包含的方式,用于在各方之间作为JSON对象安全地传输信息.由于此信息是经过数字签名的,因此可以被验证和信任. 可以使用密钥(HMAC算法)或使用RSA或ECDSA的公用/专用密钥对对JWT进行签名. 什么时候使用 JWT…

微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相对简单,这里就直接贴源码了. wxml布局源码如下: <view class="button-area" catchtap="onLikeClick"> <block wx:if="{{isLike}}"> <text…

首页效果 首页功能主要有 搜索(下篇文章介绍) 图书列表 图书列表 分析一波: 列表是水平滑动 点击列表会有按压效果:布局整体缩小 每个布局的信息从上到下排列分别是:图片.书名.作者.出版社 每个布局之间都有间隔 根据以上信息,在没有服务器接口的时候我们可以利用模拟数据将静态页面实现出来. 首先是水平滑动列表,这个可以使用swiper组件实现,在使用swiper组件的时候可以通过设置previous-margin和next-margin字段实现布局之间的间隔. 而按压效果可以通过CSS效果实现,…

效果图 这一节介绍,登录回调 以及 喜欢列表 的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成功之后不仅将用户信息刷新,同时将积分和喜欢列表的数量刷新. 登录回调 我这里实现的回调层级有点多,这也是回调的一个弊端,当回调层级很多代码就会很难理解. 一个简单的回调例子: // 1.获取网络数据 _getDataFromServer(userInfo, callBack){ ... callBa…

效果图 实现分析 从效果图上分析,书籍详情是通过点击首页的item后进入. 进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口. 点击登录之后即可加载出用户评论信息. 通过上图我们可以分析出静态页面的主要结构如下: 书籍信息 左侧布局是图书图片 中间布局从上到下是:名称.作者.出版社 右侧布局是收藏icon 登录提示弹窗 上部分是提示文本 下部分是登录按钮 评论列表 左侧是评论人头像 右侧上部分是评论人名字 右侧中间部分是评论信息 右侧下部分是评论时间…

也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图探索一条全新的前后端分离模式. 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越…

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 上一篇文章给大家讲了一下本项目的开发计划,这一章将会开始着手搭建一个MEAN项目.千里之行,始于足下,打造MEAN全栈项目的第一步就是创建一个新的Express项目.在本项目中,你需要安装以下工具: (1) Node和npm (2)全局安装的Express (3)git (4)一个云服务器 (5)一个写命令行的接口(CLI)或者是终端 创建一个Express项目 具体的安装方式请自行百度.首先,我们创建一个项…

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习.   上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通用的MEAN项目的技术架构,(2)为什么我们要打造单页应用,(3)本系列项目的技术架构和开发计划.希望通过这三个问题,我们能够对本项目产生一个全局视角. 实现一个常见的MEAN全栈项目的核心就是RESTful API.这个接口通常是用MongoDB, Express, Node.js实现的,而单页应用(SPA)由AngularJ…

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 在本系列的开篇,我打算讲一下全栈项目开发的优势,以及MEAN项目各个模块的概览. 为什么选择全栈开发?     对于初学者来说,学习一门新的语言和技术的体验总是让人愉快的,也会满足于掌握了一些新的东西并且解决了一些实际问题.在一个小组中采用全栈开发时,你可以更加有效地把握项目全局概念,这也有利于让你了解项目中的不同模块以及它们之间是如何协同工作的.你会对你们的产品中他人的贡献更加清晰,你也就了解了这款产品如何…

最近学了mysql数据库,寻思着能不能构思一个小的全栈项目,思来想去,于是就有了下面的项目: 先上几张效果图吧       目前暂时前端只有这几个页面,后端开发方面,有登录,注册,完善用户信息,获取用户信息,获取文章列表,发表文章,点赞文章的api接口: 后续会慢慢考虑如何丰富这个项目,比如搜索,实时增加聊天,文章留言功能,粉丝功能,用户发表文章管理,等等等等等....... 这里是项目地址:感兴趣的朋友可以瞅两眼,也欢迎交流 https://github.com/songdongdong123…

个人博客系统 前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议,本来打算用nuxt来书写,但是想学了react之后用next来写,后面会用reactSSR来重构! ❞ 博客该有的功能都有,可以写文章,可以评论,可以留言,甚至可以玩游戏(虽然还没完善),等等让你来发现. 这是一个小型的全栈项目,主要是检验并记录一下自己的学习成果 运用的技术Vue.Vue-Cli…

一. 前言 日志对于一个程序的重要程度不用过多的言语修饰,本篇将以实战的方式讲述开源微服务全栈项目 有来商城 是如何整合当下主流日志解决方案 ELK +Filebeat . 话不多说,先看实现的效果图,绝不搞些浪费大家时间且没意义的东西. 二. Elastic Stask 技术栈 1. 为什么引入 Filebeat ? ELK 作为分布式日志解决方案让人为之津津乐道,即使没有实践过也能耳熟,可见其火热程度. Beats 作为数据采集器后来加入进来 Elastic 家族,ELK正式更名为 Elas…

AgileBoot是笔者在业余时间基于ruoyi改造优化的前后端全栈项目. 关于AgileBoot的详细介绍:https://www.cnblogs.com/valarchie/p/16777336.html 学习一个项目首先的第一步就是把项目给run起来. 为了便于大家把项目Run起来~ 写个启动说明 准备工作 请确保您的机子上安装好了JDK,Docker,npm.  什么??  你还没有安装? 没事下面有几个安装小教程. JDK安装:https://www.cnblogs.com/zll-w…

一.前言 最近在B站学习了一下全栈开发,使用到的技术栈是Vue+Element+Express+MongoDB,为了让自己学的第一个全栈项目落地,于是想着把该项目部署到阿里云服务器.经过网上一番搜索和自己的一顿操作后,我在这里记录一下自己的部署过程,方便以后查阅. 参考博客: https://segmentfault.com/a/1190000012186563?utm_source=tag-newest https://blog.csdn.net/weixin_43503511/article…