mvc架构:

image.png

小程序mvvm架构:

image.png

拆分:

拆分的好处就是看代码时简洁明了 便于维护
image.png
由于启动文件放在了src文件下 可以再package.json里面配置以下命令
image.png

  1. npm start //配置好上面的代码 这个命令就可以直接启动项目了

controllers路由控制层

image.png
image.png
image.png

  1. const my=async ctx=>{
  2. ctx.body="my"
  3. }
  4. module.exports=my

routers 路由界面

image.png

  1. const Router = require("koa-router")
  2. const router = new Router()
  3. const home = require("../controllers/home")
  4. const music = require("../controllers/music")
  5. const my = require("../controllers/my")
  6. const routes = [
  7. {
  8. path: "/home",
  9. component:home,
  10. }, {
  11. path: "/music",
  12. component:music,
  13. }, {
  14. method:"post",
  15. path: "/my",
  16. component:my,
  17. }
  18. ]
  19. routes.forEach(item => {
  20. if(item.method == "post"){
  21. router.post(item.path,item.component)
  22. }else {
  23. router.get(item.path,item.component)
  24. }
  25. })
  26. module.exports=router