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的值是个数组，可以配置多个
网友评论