小程序云开发笔记五

后台管理系统与前后端分离架构

什么是前后端分离？

前端是一个项目，后端是一个项目

前后端分离的好处

1. 互相没有耦合，分工明确。

2. 后台服务器压力减小

3. 不同的客户端可以对应一个后端。

后台管理系统，基本的架构

4. 前端框架vue-element-admin vue-admin-template

git clone https://github.com/PanJiaChen/vue-admin-template.git

进入项目的根目录，然后执行命令npm install,执行之后看看是否有红色的error报错信息，如果有需要重新进行安装。 建议不要使用cnpm进行安装，因为会出现很多诡异的问题。

npm install --registry=https://registry.npm.taobao.org

安装完成之后#启动服务 npm run dev

5. koa2是基于nodejs 一个框架。

小程序的后台

koa框架的第一个Demo，Hello，World.

初始化 npm init

{
  "name": "music-imooc-admin-backend",
  "version": "1.0.0",
  "description": "云音乐后台管理系统后端代码",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xukaiqiang",
  "license": "ISC"
}

或者快速的初始化package.json文件使用命令npm init -y

安装koa

npm insatll koa

新建app.js

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

app.use(async(ctx)=>{
    ctx.body='Hello World'
})

app.listen(3000,()=>{
    console.log('服务开启在3000端口')
})

执行node app.js命令编译运行，在浏览器输入localhost:3000访问

通过Http Api方式调用小程序的云开发

access_token的缓存与更新

安装npm install request

npm install request-promise

npm install koa-router

get和post的区别

get是获取的意思，post是提交，get表示从服务器中获取数据，post表示使用表单进行提交数据。

get传递的参数在请求头中，传递的参数比较少。post传递的参数在请求体中，传递的参数比较多。

get传递参数是明文传递，不安全，post传递的参数安全。

跨域问题

www.a.com www.b.com

1，如果a向b发送请求，就是一个跨域的问题。

www.a.com:88 www.a.com:99

2.如果域名相同，但是端口号不一样，同样也是一个跨域的问题。

wenku.baidu.com www.baidu.com

3.主域和子域之间进行数据交互同样也是一个跨域的问题。

http://www.a.com https://www.a.com

6. 如果地址的协议不同，同样也是一个跨域的问题。

使用jsonp可以解决跨域的问题。

同样是永koa2-cors也可以解决跨域的问题。

npm install koa2-cors

:9528/#/swiper/list:1 Access to XMLHttpRequest at 'http://localhost:3000/swiper/list' from origin 'http://localhost:9528' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

什么时候使用http api调用云函数，什么时候使用tcb-admin-node访问云数据库？

调用云函数情况

1. 通过后台管理系统向用户推送模板消息

2. 通过云函数生成小程序码

npm install koa-body来接收post传给后台的数据。

5开头的都是服务器的错误

4开头的是客户端的错误

v-loading="loading" 表示在vue中显示加载的图标，使用loading: false,设置是否显示

@表示得是src

重启后台得服务 node app.js