koa

koa-generator

  • 直接创建koa项目,不需要自己配置
  • 全局安装 npm i -g koa-generator
  • 创建项目 koa2 -e project 其中-e 表示以ejs为模板
  • nodemon node不需要重新执行,自动加载程序

mongodb

  • 启动 两个命令行,分别输入 mongod --dbpath 数据存储地址 mongo 启动数据库

mongoose 是操作MongoDB的库,

const mongoose = require('mongoose')
mongoose.connect('mongodb://127.0.0.1:27017/数据库')
let schema = new mongoose.Schema({name: String}) //定义字段的数据类型
let Person = mongoose.model('name',schema) //创建数据模型
let name = new Person({name:'fhx'}) //成功创建数据库,并添加数据成功
name.save() //添加数据后必须执行这段代码,
Person.find({name:''})
Person.findOne({name:''}) //对数据库的增删改查都是对模型的操作
Person.where().remove() //删
Person.where().update() //改
Person.create({}) //增
  ### redis+ 启动 在redis的根目录中,输入redis-server+ redis是一个数据库,存储的数据为键值对+ koa连接session
安装 npm i koa-generic-sessionnpm i koa-redis //如果npm安装错误,则使用cnpm代码const session = require('koa-generic-session')const Redis = require('koa-redis')app.keys = ['jk','ff'] //对session加密,并随便添加两个字符串app.use(session({store: new Redis() //只要存储了一个session,就会自动在redis中添加一个键值对,键是存储在浏览器中的key+value一起组成,相当于cookie,redis的值就是session设置的值,如ctx.session.name='fhx',则值为{...name:'fhx'}}))

可以打开客户端程序,该程序可以查看存储的数据
重启一个命令行窗口
  redis-clikeys * //获取所有数据的key值get key //获取对应key的value值
  • 不一定需要session直接对redis进行操作,也可以自定义设置redis
 const Redis = require('redis')// 创建redis客户端const Store = new Redis().clientStore.hset('fix','name',Math.random()) //在redis存储数据命令行中hget fix name //获取值
  # Nuxt.js+ ```集成vue2 vue Router //不用配vuexvue server renderervue-meta
 工作流1、Incoming Request指的是浏览器发出一个请求,那么服务端接收到这个请求之后呢2、它要检查当前有没有nuxtServerInit这个配置项,如果有的话就先执行这个函数。Store action是用来操作vuex的3、middleware中间件,这个中间件是和路由相关,在这里可以做任何你想要的功能4、验证:validate(),可以配合高级动态路由去做验证,比如说这个页面是否允许跳到别的页面上去,如果没有得到我的校验的话,我可以跳走之类的等等5、获取数据,又分两个函数,第一个是aysncData(),第二个是fetch(),他们两个实现的是同样的功能,都是获取数据,区别是aysncData()获取的数据是渲染vue组件的,fetch通常是修改vuex的也就是store这些东西的,6、Render:渲染,有模板,有数据进行渲染了7、其中有一个nuxt-link,如果是发起一个新的路由,那么这个时候要从头开始循环

安装
vue init nuxt-community/koa-template

 async mounted() {let self = thislet {status, data: {list}} = await axios.get('/city/list')console.log(list)if (status === 200) {self.list = list}}//浏览器端渲染async asyncData() {let {status, data: {list}} = await axios.get('http://localhost:3000/city/list')console.log(list)if (status === 200) {return {list}}}//服务端渲染服务器端编译好的内容下发给浏览器异步获取到的数据同时给浏览器端(在浏览器端中创建一个scrip标签,把数据挂载到window对象中,到达了浏览器数据与浏览器同步)
  • 其他安装
    npm i -g npx
    npx create-nuxt-app project-name
    
  • npm i sass-loader node-sass -S
    更改每个组件的lang='scss'
    
  • 解决koa中模块化以CommonJs为主,该es6模块化
    npm i babel-cli babel-preset-es2015
    在dev和build后面添加  --exec babel-node
    

服务端

passport

// 提供了一个用户鉴权的框架,并把鉴权得到的用户身份供后续的业务逻辑来使用
import passport from 'koa-passport'
// 提供本地鉴权的代码框架
import LocalStrategy from 'passport-local'import UserModel from '../../dbs/models/users'
// 为passport新增一个可用的策略
// 鉴权的作用有两个
// 1、鉴权失败可用拒绝用户访问
// 2、鉴权成功会把用户记录到context
// passport支持同时使用多个策略,它会从头开始尝试各个策略,直到
// 有一个策略做出处理或已尝试所有策略为止// passport默认会使用session// 会自动从请求中获取username,password两个字段,然后提供给用户自定义的函数进行鉴权
passport.use(new LocalStrategy(async function(username, password, done){let where = {username}let result = await UserModel.findOne(where)if(result != null){if(result.password === password){return done(null, result)}else{return done(null, false, '密码错误')}}else{return done(null, false, '用户不存在')}
}))passport.serializeUser(function(user,done){// 是将信息存入到session// ctx.login(id) 函数调用时触发,其中的参数会传给serializeUser函数作为第一个参数//  序列化ctx.login()触发,就可以调用ctx.state.userdone(null, user)
})// 反序列化(请求时,session中存在"passport":{"user":"1"}触发)
passport.deserialzeUser(function(user,done){// 将信息从session中取出来return done(null,user)
})export default passport
// 服务端的入口文件 index.js
app.use(passport.initialize())
app.use(passport.session())
ctx.state.user 认证用户
ctx.login(user) 登录用户(序列化用户)
ctx.isAuthenticated() 判断是否认证

邮箱验证

import nodeMailer from 'nodemailer'
let username = ctx.request.body.usernameconst saveExpire = await Store.hget(`nodemail:${username}`, 'expire')// 验证时redis中没有saveExpire,有则说明在1分钟之内连续操作if(saveExpire && new Date().getTime()-saveExpire<0){ctx.body = {code: -1,msg: '验证请求过于频繁,1分钟1次'}return false}//定义后台管理员(发送对象)的信息let transporter = nodemailer.createTransport({host: Email.smtp.host,port: 587,secure: false, //true监听465端口,false监听其他端口//配置的管理员的信息,如管理员的邮箱,如第三方授权信息auth: {user: Email.smtp.user,pass: Email.smtp.pass}})// 配置发送验证码相关信息(用户)let ko = {code: Email.smtp.code(), //向用户邮箱发送的验证码expire: Email.smtp.expire(),email: ctx.request.body.email,user: ctx.request.body.username //给你个注册用户名发送验证码,发送验证码要有名字}// 邮件中要显示什么内容,这个也要定义let mailOption = {from: `"认证邮件"<${Email.smtp.user}>`,  //告诉收件方,谁给收件方发的to: ko.email, //接收方subject: '《高仿美团网全栈实战》 注册验证码 ',  //邮件主题html: `或许前路永夜,即便如此我也要前进,因为星光即便微弱也会为我照亮前路 您的邀请码${ko.code}`}// 发送await transporter.sendMail(mailOption, (error, info) => {if(error){return console.log('error')}else{// 验证码发送成功了,则存储验证码等相关信息,等用户点击注册时,提交的验证码与// 在redis保存的验证码进行验证// hmset 可以在redis存储多个键值对,获取对应的一个键值对,hget('key')// HMSET myhash field1 "Hello" field2 "World"// HGET myhash field1Store.hmset(`nodemail:${username}`,'code', ko.code, 'expire', ko.expire, 'email', ko.email)}})ctx.body = {code: 0,msg: '验证码已发送,可能会有延时,有效期为1个小时'}
数据库导入
mongoimport -d dbs `数据库` -c test `数据结合` pois.dat `数据源`

小点

汉字转字母
npm i js-pinyin
p = pinyinJS.getFullChars(汉字).toLocaleLowerCase().slice(0,1)
c = p.CharCodeAt(0)  //方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
Object.entries(对象) //跟for in类似,区别在于不循环对象上的原型链
Object.sort((a,b) => return 大于0||小于0||等于0) //大于0,说明a比b大,a排在b后面,降序,小于0,升序

注意

浏览器post向服务器请求数据,数据不会encodeURIComponent,需要加这个。
get请求的数据,会编码,不需要加encodeURIComponent

实战美团Nuxt +Vue全家桶,服务端渲染,邮箱验证,passport鉴权服务,地图API引用,mongodb,redis等技术点相关推荐

  1. 《“透视”个人大数据》项目开发小记 --(二)网络服务端,邮箱验证和手机验证(C#,Java)

    现在网络的应用越来越普及,网络的构建也越来越简便,对于某些研究性项目自建网络服务端 也是可行的方案.本项目的网络服务,是用C#,基于Socket构建的,核心的工作是通过自定的BS60传输协议,实现与手 ...

  2. 服务端渲染与客户端渲染详解(vue)

    1.客户端请求 (1)用户在浏览器输入请求的地址例如:172.0.0.1:8080 到服务器 服务器接受到客户端的请求拿到一个没有被数据渲染的空页面 (2)客户端拿到服务端的空字符串页面,然后从上往下 ...

  3. Vue全家桶仿网易优选商城APP源码

    介绍: Vue全家桶仿优选商城APP源码,只写了前端,用到的技术栈是Vue全家桶.mintUI.axios,没有实现后端接口,全部是抓包至商城App接口. 实现了挺多的功能的,比如首页.商品列表.商品 ...

  4. java vue 服务端渲染_vue ssr服务端渲染小白解惑

    vue ssr服务端渲染小白解惑 >初学ssr入坑 初学vue服务端渲染疑惑非常多,我们大部分前端都是半路出家,上手都是前后端分离,对服务端并不了解,不说java.php语言了,连node服务都 ...

  5. vue服务端渲染 MySQL_vue服务端渲染

    一.基本原理 1.服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端.然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式: a.服务器通过模板引擎 ...

  6. 服务端渲染可以用ajax吗,服务端渲染(SSR)

    导读 本文主要是从三个方面学习服务端渲染,内容整理自多个博客. 服务端渲染是什么?什么是服务端渲染?(服务端渲染的运行机制) 为什么使用服务端渲染?服务端渲染解决了什么问题? 什么情况下使用服务端渲染 ...

  7. ssr Android简书,渲染篇一:服务端渲染(SSR)

    导读 本文主要是从三个方面学习服务端渲染,内容整理自多个博客. 服务端渲染是什么?什么是服务端渲染?(服务端渲染的运行机制) 为什么使用服务端渲染?服务端渲染解决了什么问题? 什么情况下使用服务端渲染 ...

  8. React 服务端渲染方案完美的解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...

  9. 服务端渲染和客户端渲染以及服务器部署

    文章内容输出来源:拉勾教育前端高薪训练营 SPA单页面应用 优点 用户体验好 开发效率高 渲染性能好 可维护性好 缺点 需等待客户端js解析执行完,造成首屏渲染时间长 单页面的html是没有内容的,不 ...

最新文章

  1. linux 内核驱动模块的编译及加载
  2. Python中join()方法和os.path.join()方法
  3. 云时代架构--阅读笔记03
  4. PHP警告:socket_bind():无法绑定地址
  5. 疯狂ios讲义疯狂连载之实现游戏视图控制器
  6. java python rsa加密_实现Java加密,Python解密的RSA非对称加密算法功能
  7. html页面授权码,spring boot 2.0 整合 oauth2 authorization code授权码模式
  8. matlab z变换离散化_Matlab基础教程
  9. cas java单点登录_(Java)CAS单点登录
  10. leach协议c++代码_leach协议matlab仿真代码
  11. everything用于移动硬盘资料管理(二):离线搜索全部移动硬盘
  12. Flowable 工作流引擎
  13. vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not d
  14. 黑盒测试方法—等价类划分法
  15. react-player一个很好用的直播组件,可以播放视频等等
  16. 适合win7的python版本_windows支持哪个版本的python
  17. linux内核形式化验证,聪明人的笨功夫 -- MesaTEE安全形式化验证实践
  18. 2022年登高架设考试题模拟考试题库及模拟考试
  19. 牛视源码定制,抖音矩阵系统。come here
  20. OpenCV项目实战——虚拟画笔

热门文章

  1. 女人手掌中间有条竖线_手心有一条竖线代表什么
  2. Labview中的匹配模式(函数)
  3. 邮件服务器IP被列黑名单的解决思路
  4. 一款超简单易用功能丰富的视频播放器Chimee
  5. 明道云如何实现银行内部评级管理
  6. JS删除字符串中所有的英文双引号
  7. safari阅读模式 html,safari浏览器阅读模式在哪里
  8. enq: TO - contention
  9. 环信直播php怎么生成推流地址,使用Nginx实现简单的RTMP推流直播笔记
  10. [哈希][费用流]JZOJ 3296 【SDOI2013】刺客信条