Skip to content
On this page

wx公众号小程序实战开发vue3+nodejs+koa2+mysql+nginx阿里云部署教程

本课程通过开发wx公众号的实战学习,对接TB客系统开发出一套wx公众号自动找TB、天猫内部优惠券的系统,同时打通wx公众号对接小程序的云开发。使用到的技术栈有:vue3 + nodejs + koa2 + nginx服务器https后台部署 + mysql数据库等

第一课 课程介绍

一、课程背景及痛点

开发本课程目的是用javaScript开发一套可以实战运营的wx公众号和小程序系统,让前端开发的初学者甚至有经验的开发者学到最新的前端知识的同时能开发一套属于自己的能够上线运营的实战项目

javascript
课程面向的学习者:
  1、有前端基础的同学、从事前端开发行业的童鞋学习面试展示
  2、完全没有基础的同学也可以学习,最终部署自己公众号,实现运营盈利。

二、课程能学到什么?

  1. 学习wx公众号的开发

  2. 学习小程序云开发

  3. 掌握vue3 + elementPlus UI + TypeScript前端框架的使用

  4. 掌握使用 nodejs + koa2 + ejs 开发后台接口和ssr服务端渲染页面

  5. 熟练掌握基本的nginx + https 的后台服务部署

  6. 熟悉nodejs+mysql数据库的使用

三、学完课程能达到的目标

  1. 能够熟练开发wx公众号、小程序云开发

  2. 能够独立把自己开发的项目部署到公有云上,生产环境运行

  3. 掌握TB天猫优惠券api的调用

四、项目演示

五、学习资料领取以及课后交流

1、wx公众号波波科技网络工作室 回复 学习

2、wx小程序波波科技网络工作室客服小哥哥索取学习资料

3、VX:bobokeji521

第二课 项目准备环境搭建

本节课带大家搭建wx公众号开发的环境(nodejs)以及下载好开发过程中用到的工具软件(开发工具vscode、内网穿透工具ngrok)

一、 vscode代码编辑软件下载

根据自己的电脑系统下载对应版本即可。vscode官网地址

二、nodejs 下载

  1. 直接去nodejs的官网安装自己的电脑系统下载并且安装好即可下载 | Node.js 中文网

  1. 安装完成后打开命令终端输入node -v命令,如果能正确返回版本号那就说明安装成功

  1. 用nodejs简单写一个本地服务
javascript
const http = require('http');

http.createServer((req, res) => {
  //设置http响应头,状态码:200,文件类型:html,字符集:utf8
  res.writeHead(200,{"Content-Type":"text/html; charset=utf-8"});/*响应状态码和响应头*/
  res.write('波波科技网络工作室'); /*响应数据*/
  res.end(); /*结束响应*/
}).listen(8080);

三、内网穿透工具的使用ngrok的使用

  1. 注册用户,下载对应版本的ngrok的软件。ngrok官网地址

  2. 在你本机电脑配置当前用户的鉴权令牌,执行如下命令,⚠️注意每个账户的令牌不一样,直接从官网拷贝就行

  3. 邮箱校验,点击设置->点击账号->点击邮箱校验,或者直接点击邮箱校验地址

  4. 开启内网穿透:mac系统的需要找到第一步下载软件的地址执行如下命令,windows系统直接双击第一步的软件即可

javascript
./ngrok http 8080

四、wx公众号的申请

  1. 进入wx公众平台申请订阅号类型的wx公众号

  2. 进入开发者工具查看开发文档

第三课 wx公众号开发配置

本节课带大家熟悉wx公众号的开发模式以及使用koa搭建后台开发,配置wx公众号开发服务器,使用crypto模块进行SHA1加密验证wx公众号服务器。

一、wx公众号开发模式介绍

二、初始化项目文件、koa开发服务器

  1. 初始化项目
javascript
npm init
  1. 安装koa模块
javascript
npm install koa

三、开发配置、验证wx服务器消息

  1. 配置服务器地址的url

  2. 安装crpto模块npm install crypto,验证请求是来自wx服务器

javascript
const koa = require('koa')
const { createHash } = require('crypto')
const app = new koa()

app.use(ctx => {
  const token = 'abcefg123'
  const {signature, echostr, timestamp, nonce} = ctx.query
  // 将token、timestamp、nonce三个参数进行字典序排序
  const stringArray = [timestamp, nonce, token]
  const resultArray = stringArray.sort()
  // 将三个参数字符串拼接成一个字符串进行sha1加密
  const resultString = resultArray.join('')
  const hashResut = createHash('sha1').update(resultString).digest('hex')
  console.log('hashResut===>', hashResut)
  console.log('signature===>', signature)
  ctx.body = echostr
})

app.listen('8080')
console.log('serve is on at 8080')

第四课 获取并刷新wx公众号accessToken

获取wx公众号的accessToken存储到服务器,并且定时刷新accessToken

一、后台定时获取并刷新wx公众号Access token

  1. 安装request和request-promise模块
javascript
npm install request request-promise
  1. 调用wx接口获取accesstoken保存在后台并且及时刷新
点击这里查看源码
javascript
const rq = require('request-promise')
const fs = require('fs')

const file_path = __dirname + '/token_file/accessToken.json'

const APPID = 'wxeaf6f9a5e5b669b8'
const APPSECRET = '6386bad5201d9797b0fa53a96ecead06'

let uri = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`

const updateAccessToken = async () => {
  // 请求wx接口获取token 
  let resAccessToken = await rq(uri)
  let fomateToken = JSON.parse(resAccessToken)
  let expireTime = new Date().getTime() + fomateToken.expires_in * 1000
  fomateToken.expireTime = expireTime
  fs.writeFileSync(file_path, JSON.stringify(fomateToken))
}

const getAccessToken = async () => {
  // 获取本地存储的accessToken
  let localToken = await fs.readFileSync(file_path, 'utf8')
  // 判断本地token是否过期
  let localTokenFormate = JSON.parse(localToken)
  let nowTime = new Date().getTime()

  let resultToken = ''
  if(nowTime - localTokenFormate.expireTime >= 0){
    await updateAccessToken()
    await getAccessToken()
  }else{
    resultToken = localTokenFormate.access_token
  }
  return resultToken
}

setInterval(()=>{
  getAccessToken().then(res => {
    console.log("accessToke===>", res)
  })
}, 7200*1000)

第五课、自定义公众号菜单

自定义wx公众号菜单栏,新增、删除、更新click、view以及小程序类型的公众号菜单

一、调用wx公众号接口实现自定义菜单栏

  1. 优化代码—提取公共方法,提取validateWechatHost.js公共方法

  2. 调用wx公众号接口自定义菜单栏

点击这里查看源码
javascript
const rq = require('request-promise')
const getAccessToken = require('./getWechatAccessToken')

const creatMenue = async () => {

  let accessToken = await getAccessToken()
  console.log('accessToken===>', accessToken)

  let rqParam = {
    "button":[
      {    
        "type":"click",
        "name":"吃饭票",
        "key":"chifanpiao"
      },
      {
        "name":"购物票",
        "sub_button":[
          {    
              "type":"view",
              "name":"优惠优选",
              "url":"http://www.soso.com/"
          },
          {    
              "type":"view",
              "name":"解析",
              "url":"https://www.bilibili.com/"
          },
        ]
      }
    ]
  }

  let param = {
    method: "POST",
    uri: ` https://api.weixin.qq.com/cgi-bin/menu/create?access_token=${accessToken}`,
    body: rqParam,
    json: true
  }
  let res = await rq.post(param)
  console.log('res===>', res)
}

creatMenue()

第六课、wx公众号消息、事件接收

这节课通过koa-body插件解析wx公众号发送过来的POST请求,通过xml2js中间件解析wx服务器发送过来的xml数据包

一、安装koa-body解析wx公众号服务器发送post请求数据

javascript
npm install koa-body

二、安装xml2js解析wx公众号服务器发送过来的xml数据

javascript
npm install xml2js

三、index.js的原代码

点击这里查看源码
javascript
const koa = require('koa')
const app = new koa()
const koaBody = require("koa-body")

const xml2js = require("xml2js")

const validateWechatHost = require('./utils/validateWechatHost')
app.use(koaBody({json: true}))

app.use(async ctx => {
  let validateRes = await validateWechatHost(ctx)
  if(ctx.request.method == "GET" && validateRes.isWechatHost){
    ctx.body = validateRes.echostr
  }else if(ctx.request.method == "POST" && validateRes.isWechatHost){
    let xmlString = await xml2js.parseStringPromise(ctx.request.body)
    console.log("to do other things", xmlString)
    let xmlTemp = xmlString.xml
    let xmlJson = {}
    for(let item in xmlTemp){
      xmlJson[item] = xmlTemp[item][0]
    }
    console.log("xmlJson", xmlJson)
    ctx.body = ''
  }
})

app.listen('8080')
console.log('serve is on at 8080')

第七课、wx公众号消息、事件的回复

提取公共方法回复wx公众号文本类型和图文类型的消息

一、createResDate源码

点击这里查看源码
javascript
/**
 * 1、接收发送的内容
 * 2、接收发送的消息类型
 */

const createResData = (res) => {
  let commData = `<xml>
  <ToUserName><![CDATA[${res.FromUserName}]]></ToUserName>
  <FromUserName><![CDATA[${res.ToUserName}]]></FromUserName>
  <CreateTime>${new Date().getTime()}</CreateTime>
  <MsgType><![CDATA[${res.type}]]></MsgType>`

  let newsItem = ''
  if(res.type == 'news'){
    res.content.forEach(element => {
      newsItem += `<item>
      <Title><![CDATA[${element.title}]]></Title>
      <Description><![CDATA[${element.description}]]></Description>
      <PicUrl><![CDATA[${element.picurl}]]></PicUrl>
      <Url><![CDATA[${element.url}]]></Url>
    </item>`
    });
  }

  let typeMap = {
    "text":`<Content><![CDATA[${res.content}]]></Content>`,
    "news": `<ArticleCount>${res.count}</ArticleCount><Articles>` + newsItem + '</Articles>'
  }


  return commData + typeMap[res.type] + '</xml>'

}

exports.createResData = createResData

二、index.js源码

点击这里查看源码
javascript
const koa = require('koa')
const app = new koa()
const koaBody = require("koa-body")

const xml2js = require("xml2js")

const validateWechatHost = require('./utils/validateWechatHost')
const { createResData } = require('./utils/createRespondData')
app.use(koaBody({json: true}))

app.use(async ctx => {
  let validateRes = await validateWechatHost(ctx)
  if(ctx.request.method == "GET" && validateRes.isWechatHost){
    ctx.body = validateRes.echostr
  }else if(ctx.request.method == "POST" && validateRes.isWechatHost){
    let xmlString = await xml2js.parseStringPromise(ctx.request.body)
    let xmlTemp = xmlString.xml
    let xmlJson = {}
    for(let item in xmlTemp){
      xmlJson[item] = xmlTemp[item][0]
    }
    console.log("xmlJson", xmlJson)
    // xmlJson.type = 'text'
    // xmlJson.content = '这里是学习资料哦哦哦'
    xmlJson.type = "news"
    xmlJson.content = [
      {
        title: '波波科技测试',
        description: '波波科技测试',
        picurl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F101021113337%2F211010113337-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654594035&t=6e5217870597b6df9d6d0d7af1ebd452',
        url: 'https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Passive_user_reply_message.html#5'
      }
    ]
    xmlJson.count = 1
    let resMsg = createResData(xmlJson)
    ctx.body = resMsg
  }
})

app.listen('8080')
console.log('serve is on at 8080')

第八课、 wx公众号对接TB客系统配置

TB客逻辑介绍、配置TB客api账号

一、TB客简介

二、创建TB联盟PID

1、注册TB联盟账号

1)进入TB联盟官网,选择“TB会员”用TB账号和密码登录。

2)首次登录TB联盟的账号需补全信息和身份认证,按照如下步骤填写邮箱进行激活。

3)激活注册邮箱后,进行身份认证。

4)身份验证成功则账号激活,激活1小时后再行推广商品,否者推广将无效。

2、完成媒体备案

1)社群推广选择他方平台,如有自己的平台/没有经营地就选择自由平台/无自由阵地(以下按照他方平台介绍)

2)选择流量平台,wx/qq等推广选择社交平台。

3)填写备案信息

按照所列信息进行填写,点击下一步即可。(账号id:如wx则填写wx号,qq则填写qq号)

4)审核通过后,即可在媒体备案管理查看备案信息。

3、设置推广位

1)选择“推广位管理-新增推广位”,选择“媒体类型”“媒体名称”“推广位名称”(填写方便区分的名称即可)的信息,点击确定即可。

2)获取PID:点击推广位管理,即可复制创建的PID。

三、大淘客平台设置PID

1、进入大淘客官网→TB授权

绑定PID前首先需要使用自己的TB账号进行授权。

2、配置大淘客官网PID

1)用途

配置大淘客官方的PID,用于推广商品库、实时榜单、咚咚抢、品牌优惠券、专辑市场的商品。

2)步骤

选择新增PID→TB联盟(链接 如何获取PID)复制PID粘贴→对PID进行备注(名称用于识别不同的PID,自主决定)

3、配置其他板块PID

如要使用淘礼金、推广小工具、大淘客联盟APP以及开放平台,则在对应板块配置PID即可,按如上“配置大淘客官网PID”步骤进行配置即可。(建议可全部设置)

第九课、 wx公众号调用TB联盟接口实现自动找券

通过调用TB联盟的接口实现找券系统的自动找券回复功能

一、引入大淘客sdk在nodejs中调用TB接口

  1. 安装sdk模块, 大淘客官网
javascript
npm install dtk-nodejs-api-sdk
  1. 调用示例, 参考网址
javascript
const dtkSdk = require('dtk-nodejs-api-sdk');
/*
 *  @checkSign: 1 默认老版本验签  2 新版验签
 *  @appKey: 用户填写 appkey
 *  @appSecret: 用户填写 appSecret
 */ 
const sdk = new dtkSdk({appKey:'',appSecret:'',checkSign:1});

const getBrandList = sdk.request('接口地址',{
    method:"GET",
    /* 注意:form 里面就不用传appKey与appSecret  */
    form:{pageId:"1",pageSize:20,version:"v1.1.0"}
}).then((res)=>{
    console.log(res,'接口调用成功')
},(error,body)=>{
    console.log(error,'接口调用失败');
})

二、源码笔记

  1. index.js源码
点击这里查看源码
javascript
const koa = require('koa')
const app = new koa()
const koaBody = require("koa-body")

const xml2js = require("xml2js")

const validateWechatHost = require('./utils/validateWechatHost')
const { createResData } = require('./utils/createRespondData')
const { getTaoBaoPro } = require('./utils/getTaoBaoProduct')
app.use(koaBody({json: true}))

app.use(async ctx => {
  let validateRes = await validateWechatHost(ctx)
  if(ctx.request.method == "GET" && validateRes.isWechatHost){
    ctx.body = validateRes.echostr
  }else if(ctx.request.method == "POST" && validateRes.isWechatHost){
    let xmlString = await xml2js.parseStringPromise(ctx.request.body)
    let xmlTemp = xmlString.xml
    let xmlJson = {}
    for(let item in xmlTemp){
      xmlJson[item] = xmlTemp[item][0]
    }
    console.log("xmlJson", xmlJson)
    if(xmlJson.MsgType==='event' && xmlJson.EventKey === 'chifanpiao'){
      xmlJson.type = "news"
      xmlJson.content = [
        {
          title: '波波科技测试',
          description: '波波科技测试',
          picurl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F101021113337%2F211010113337-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654594035&t=6e5217870597b6df9d6d0d7af1ebd452',
          url: 'https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Passive_user_reply_message.html#5'
        }
      ]
      xmlJson.count = 1
    } else if(xmlJson.MsgType==='text'){
      // 查询TB官方接口,返回商品和优惠券详情逻辑
      let taobaoPro = await getTaoBaoPro(xmlJson.Content)
      let formateProductInfo = ''
      if(taobaoPro.couponInfo !== 0 || taobaoPro.returnMoney){
        formateProductInfo = `优惠券:${taobaoPro.couponInfo}\n券后价格:${taobaoPro.price}\n额外:${taobaoPro.returnMoney}\n----------------\n${taobaoPro.longTpwd}`
      }else{
        formateProductInfo = '亲,该商家无活动哦!'
      }
      xmlJson.type = 'text'

      xmlJson.content = formateProductInfo
    }
    let resMsg = createResData(xmlJson)
    ctx.body = resMsg
  }
})

app.listen('8080')
console.log('serve is on at 8080')
  1. 获取TB和优惠券源码
点击这里查看源码
javascript
const dtkSdk = require('dtk-nodejs-api-sdk');
/*
 *  @checkSign: 1 默认老版本验签  2 新版验签
 *  @appKey: 用户填写 appkey
 *  @appSecret: 用户填写 appSecret
 */ 

const APP_KEY = '6283b426623d1'
const APP_SECRET = 'd69c72bc2519f7b04f2f080e6107a18e'
const sdk = new dtkSdk({appKey: APP_KEY, appSecret: APP_SECRET, checkSign:2});
let URL = `https://openapi.dataoke.com/api/tb-service/twd-to-twd`
let taobaoProInfor = {
  couponInfo: 0, // 优惠券
  price: 0, // 券后价格
  returnMoney: '', // 额外
  longTpwd: '' // 淘口令
}

const getTaoBaoPro = async (content) => {
  let productInfo = await sdk.request(URL,{method:"GET",form:{version:"v1.0.0", content }})
  let productData = productInfo.data
  if(productData){
    taobaoProInfor.couponInfo = productData.originalPrice - productData.actualPrice;
    taobaoProInfor.longTpwd = productData.longTpwd;
    taobaoProInfor.price = productData.actualPrice
    taobaoProInfor.returnMoney = ((productData.actualPrice * (productData.maxCommissionRate/100)) * 0.9).toFixed(2)
  }else{
    taobaoProInfor = {
      couponInfo: 0, // 优惠券
      price: 0, // 券后价格
      returnMoney: '', // 额外
      longTpwd: '' // 淘口令
    }
  }
  console.log('taobaoProInfor===>', taobaoProInfor)
  return taobaoProInfor
}

exports.getTaoBaoPro = getTaoBaoPro

第十课、wx公众号部署到阿里云服务器(服务器配置)

wx公众号部署到服务(以阿里云服务器为例),配置服务器的nodejs、域名解析、nginx以及pm2

一、 注册并购买好阿里云服务

  1. 官网地址购买服务器,购买时的密码一定要记住

  2. 选择香港的服务器,可以免备案

二、下载FileZilla,用于批量上传文件到服务器

下载地址FileZilla,用于文件传输的端口好一般是22

三、安装好服务器的nodejs环境

  1. nodejs 官网下载好linux版本的安装包

  1. 通过FileZilla将下载好的nodejs包上传到服务器

  1. 用ssh登录到服务器后台

如果远程服务器重装了系统链接报错:has changed and you have requested strict checking.。此时需要强制清除你当前机器里关于你的远程服务器的缓存和公钥信息, 终端中运行如下命令

ssh-keygen -R "你的远程服务器ip地址"

javascript
// ssh 登录账号@服务器ip地址
ssh root@8.218.53.95
  1. 解压安装nodejs 并软连接到/urs/bin目录
javascript
// 1. 解压nodejs包
tar xvf node-v16.15.0-linux-x64.tar.xz

// 2.解压完成后重命名文件夹,将文件夹重命名为nodejs,方便管理
mv node-v16.15.0-linux-x64 nodejs

// 3. 将nodejs 目录拷贝到/urs/local目录下
cp -r nodejs /usr/local/

// 4. 软连接到系统的bin目录下
ln -s /home/nodejs/bin/node /usr/local/bin/node 
ln -s /home/nodejs/bin/npm /usr/local/bin/npm
ln -s /home/nodejs/bin/npx /usr/local/bin/npx

// 5.安装nodejs服务器的后台管理模块 pm2
npm install -g pm2

// 6.将pm2模块软连接到系统的/usr/local/bin目录下
ln -s /home/nodejs/lib/node_modules/pm2/bin/pm2 /usr/local/bin

四、安装ngnix服务

javascript
1安装nginx:   yum install nginx

2、 进入nginx 目录 /usr/sbin执行命令启动:  ./nginx

3nginx配置文件(nginx.conf)目录:/etc/nginx

4、nginx的其他相关操作
nginx -s reload : 重启nginx 
nginx -t: 检查nginx配置是否正确

五、配置域名解析

  1. 买个便宜的域名域名信息,做好域名的实名认证

  2. 配置好域名解析,同时也要配置好(安全组)防火墙开发80、443端口

域名解析

安全组(防火墙)配置,开放80和443端口、同时把我们自己开发的服务器端口8080也开放

第十一课、wx公众号部署到阿里云服务器(公众号配置)

wx公众号实战项目部署到服务器,公众号ip白名单设置、服务器验证配置

一、ip白名单配置

把我们需要部署到的服务器的ip配置到白名单,这样才能获取到公众号的accesstoken

二、node服务中的wx公众号appid改成需要上线的公众号appid

三、通过FileZilla把开发好的wx公众号找券系统代码上传到服务器

我们把文件上传到服务器的 /home/bobokeji_nodejs_backEnd目录下

四、服务器的一些基本操作指令

  1. Linux 基本命令
javascript
    链接远端服务器: ssh root@服务器ip
    密码:shsfdssdf

    查看服务器系统版本号: lsb_release -a

    删除文件: rm     删除文件夹 rm -rf 

    查找文件目录: whereis nix

    从根目录查找文件: find / -name xxxx

    显示当前目录: pwd  

    查询端口使用情况: netstat -ntlp

    vim 打开服务器文件并编辑: vim fileName

    新建文件夹: mkdir fileName

    一个文件复制到另一个文件夹下: cp 文件A路径  目标路径
    一个文件移动到另一本文件夹下:mv 源文件目录   目标目录
    查看当前目录的绝对路径: pwd
  1. Vim 文件编辑相关操作(所有命令需要在英文状态下)
javascript
命令模式:
    dd: 删除光标所在行
    :q  退出文件查看
    :wq  保存并退出文件
    gg  跳到首行第一个字符
    shift + g 跳到末行
按以下键进入编辑模式(esc推出编辑模式):
    i:在当前字符前插入。
    I:在光标所在行的行首插入。
    a:在当前字符后插入。
    A:在光标所在行的行尾插入。
    o:在当前行的下一行插入新的一行。
    O:在当前行的上一行插入新的 一行。
    set nu :显示行号
    32,65d:删除32-65行
  1. pm2相关命令
javascript
    pm2 start app.js           # 启动app.js应用程序
    pm2 start app.js --name="api" # 启动应用程序并命名为 "api"
    pm2 list                          # 列表 PM2 启动的所有的应用程序
     pm2 monit                     # 显示每个应用程序的CPU和内存占用情况
    pm2 logs                       # 显示所有应用程序的日志
    pm2 stop all                  # 停止所有的应用程序
    pm2 show [app-name]          # 显示应用程序的所有信息
    pm2 delete 0                  # 删除指定应用 id 0
    pm2 restart xxx     #重启应用 xxx为开启的名称
    pm2 stop xxx     #停止应用 xxx为开启的名称

五、在线npm install安装需要的依赖

进入我们上传好的文件目录:/home/bobokeji_nodejs_backEnd中,执行npm install 安装完成后会在此目录生成node_modules目录

六、使用pm2启动并监听node服务

  1. ngnix配置接口转发
javascript
proxy_pass http://127.0.0.1:8080/;
  1. pm2 start index.js --name="index" 启动服务器

七、wx公众平台配置好服务器验证

  1. wx公众平台配置验证后台服务器

  1. wx公众平台启用服务器

  1. 执行脚本operatorMenu.js更新wx公众号的菜单栏

    javascript
    // 个人wx公众号没有创建菜单栏这个接口的权限
    node operatorMenu.js 
    
  2. 最后验证一下自动找券功能是否正常

第十二课 ejs模块渲染前端html页面

koa-router路由访问,koa-views配合ejs服务端渲染,koa-static实现服务端动静分离

一、koa-router实现路由访问

  1. 安装koa-routernpm install koa-router

  2. 引入并配置路由

javascript
const Router = require('koa-router')
const router = new Router()
app.use(router.routes())

二、koa-views配合ejs服务端渲染

  1. 安装koa-views和ejs模块
javascript
npm install koa-views ejs
  1. 引入并配置koa-views
javascript
// 此处配置需要在路由配置之前
const views = require('koa-views')
app.use(views('./view', { map:{'html':'ejs'} }))

三、koa-static实现服务端动静分离

  1. 安装koa-static模块
javascript
npm install koa-static
  1. 引入并配置静态目录
javascript
const static = require('koa-static')
app.use(static(path.join(__dirname, '/static')))

第十三课 nodejs服务 nginx 配置https访问

一、 上传代码到服务器

  1. 上传index.js文件和view目录下的文件

  2. 服务器安装koa-router koa-views koa-static ejs

二、 阿里云服务起申请免费的https的证书

  1. 进入阿里云官网

  2. 进入控制台搜索证书

  1. 点击进入ssl证书--->点击免费证书--->点击创建证书

  1. 点击证书申请,填写好对应的域名,等待审批即可

三、nginx配置https访问

nginx配置https验证

点击这里查看源码
javascript
server {
                listen 80;
            server_name _;
                rewrite ^/(.*)$ https://$host$1 permanent;
       }



    server {
        listen       443 ssl http2 default_server;
        listen       [::]:443 ssl http2 default_server;
        server_name  _;
        root         /usr/share/nginx/html/bobokeji;

        ssl_certificate "/home/https/7886748_www.bobozhaoquan.cn.pem";
        ssl_certificate_key "/home/https/7886748_www.bobozhaoquan.cn.key";
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers PROFILE=SYSTEM;
        ssl_prefer_server_ciphers on;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
                proxy_pass http://127.0.0.1:8080/;
        }

        error_page 404 /404.html;
            location = /40x.html {
            }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }