小程序云开发8.搭建后台管理系统

1.轮播图图片
2.歌单信息管理
3.发现信息管理

微信截图_20191226105049.png

GitHub上搜索vue-element-admin，star最多的那个，我们选择使用基础模板vue-admin-template

# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git
# 进入项目目录
cd vue-admin-template
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev

问题：下载了之后npm run dev报错，去掉vue.config.js中的open:true之后可以直接启动，但是登陆报405错误。

后端代码我们选用koa
1.建立空文件夹
2.npm init -y
3.npm install koa
4.新建app.js作为入口文件
在nodejs中出现最多的就是异步操作
实现hello world

const Koa = require('koa')
const app = new Koa()
app.use(async (ctx)=>{
    ctx.body = 'hello world'
})
app.listen(3000)

选用request来实现后端的发送请求
npm install request
npm install request-promise
请求接口
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

微信截图_20191227171811.png

我们把请求获得token的代码封装在utils文件夹中的getAccessToken.js文件中

const rp = require('request-promise')
const APPID = 'xxxx'
const APPSECRET = 'xxx'
const URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
const updateAccessToken = async () => {
    const resStr = await rp(URL)
    const res = JSON.parse(resStr)
    console.log(res)
}
updateAccessToken()

这时候通过运行getAccessToken.js文件我们可以在控制台上看到，我们已经获取到了token，并且有效时间为7200s，我们选择把获取到的token，通过node写入到json文件中去。
写入信息，需要引入fs和path两个核心模块，并且封装一个可以读取token的方法。同时读取代码的时候如果文件不存在，会报错，我们需要进行一个异常的捕获。完整代码如下

const rp = require('request-promise')
const APPID = 'wx5857abfb171ff81b'
const APPSECRET = 'eff5fc8da40595fedf4b21b7a799c014'
const URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`

// 引入两个核心文件，一个用来读取文件，一个用来获得文件的绝对路径
const fs = require('fs')
const path = require('path')
// 定义我们要写入数据的文件路径
const fileName = path.resolve(__dirname, './access_token.json')

const updateAccessToken = async () => {
    const resStr = await rp(URL)
    const res = JSON.parse(resStr)
    console.log(res)
    // 写文件,writeFileSync第一个参数是要写入的文件路径，文件没有的话会自动创建，
    //第二个参数是我们想要写入的值
    //第二个参数我们写代码的时候定义的是对象，但是最终录入的是字符串，所以需要进行转换
    if (res.access_token) {
        fs.writeFileSync(fileName, JSON.stringify({
            access_token: res.access_token,
            createTime: new Date()
        }))
    }else{
        // 如果因为网络原因，一次获取token失败也必须再次获取，因为后面的所有操作都要依赖这个token
        updateAccessToken()
    }
}
// 封装读取token的方法
const getAccessToken = async ()=>{
    try {
        // 读取文件
        // 第二个参数utf8如果不传，则默认读取的是二进制数
        const readRes = fs.readFileSync(fileName, 'utf8')
        const readObj = JSON.parse(readRes)
        console.log(readObj)
    } catch (error) {
        // 如果读取失败，就重新请求接口
        await updateAccessToken()
        // 然后再去获取token信息
        await getAccessToken()
    }
}

// updateAccessToken()
getAccessToken()

module.exports = getAccessToken

设置一个定时器，去获取token

setInterval(()=>{
    await updateAccessToken()
},7200*1000)

路由规划

下载安装koa-router
npm install koa-router
新建controller文件夹，表示项目中C层（MVC模式），把前端发送过来的请求，我们进行云函数调用处理后再返还给前端=》这个文件夹的作用
在controller文件夹中新建一个playlist.js，关于歌单的处理写在这个文件中
此时的app.js代码

const Koa = require('koa')
const app = new Koa()

const Router = require('koa-router')
const router = new Router()

const playlist = require('./controller/playlist.js')
// 通过router声明路由名称, 对应的就是playlist里面的路由
router.use('/playlist', playlist.routes())

// 声明router
app.use(router.routes())
// 允许方法的调用
app.use(router.allowedMethods())

app.use(async (ctx) => {
    ctx.body = 'hello world'
})
app.listen(3000, () => {
    console.log('listening on 3000')
})

playlist.js代码

const Router = require('koa-router')
const router = new Router()

router.get('/list',async(ctx,next)=>{
    // 查询歌单列表
    ctx.body='歌单列表'
})

module.exports = router

启动项目，访问localhost:3000/playlist/list，我们就能看到“歌单列表”
接下来，在playlist.js中调用HTTP API触发云函数
这一步，我们实现访问localhost:3000/playlist/list可以把请求到的歌单信息展现到浏览器上,此时的playlist.js完整代码如下

const Router = require('koa-router')
const router = new Router()
const getAccessToken = require('../utils/getAccessToken.js')
const ENV = 'test-t1x7t'
const rp = require('request-promise')

router.get('/list', async (ctx, next) => {
    const access_token = await getAccessToken()
    // 查询歌单列表
    const url = `https://api.weixin.qq.com/tcb/invokecloudfunction?access_token=${access_token}&env=${ENV}&name=music`
    // 用request-promise发送post请求的方式：定义一个options对象，然后将options作为发送请求的参数
    const options = {
        method: 'POST',
        url: url,
        body: {
            // 首先我们需要告诉云函数中的tcb-router，我们要请求的具体路由
            $url: 'playlist',
            start: 0,
            count: 50
        },
        json: true
    }
    ctx.body = await rp(options)
        .then((res) => {
            // console.log(res)
            return JSON.parse(res.resp_data).data
        })
        .catch((err) => {
            console.log("出错了")
        })
})

module.exports = router

接下来我们要实现从前端项目发送请求到后端拿取这个json歌单列表数据
前端代码部分1.30左右
解决跨域的方案之一：cors
在后端项目中配置上允许发请求的域名
首先需要在后端项目安装corsnpm install koa2-cors
然后在app.js文件中进行导入const cors = require('koa2-cors')
进行配置

app.use(cors({
    origin:['http://localhost:9528'],
    credentials:true
}))

这样的话，我们就可以从http://localhost:9528发送请求了，origin的值是个数组，可以配置多个