第二段代码块中
ready () { //... }
应改为
mounted () { this.$router.push('dashboard') this.$router.beforeEach((to, from, next) => { this.active = to.path.split('/')[1] next() }) }
如果读者的开发框架是 Vue 2.x 和 Vue-Router 2 版本的话,在整个第四章中所有应作出如下改变:
替换生命周期钩子函数 ready () => mounted ()
ready () => mounted ()
全局导航钩子
this$route.router.beforeEach((to, from, next) => { // ... }) => this.$router.beforeEach((to, from, next) => { // ... next() })
详情见从 Vue1.x 迁移说明 - 生命周期钩子函数 readyVue-Router 2 导航钩子
4.10 管理工具的总体组织
代码清单 /src/router-components/admin/Dashboard.vue
管理页面路由组件 Dashboard.vue 中绑定 Style 进度条 语法 在 Vue2.x 中似乎失效了。作以下修改:
Dashboard.vue
methods 中的 pickBarColor 方法作对应的修改:
methods
pickBarColor
return function pickOne() { const color = 'progress-bar-' + (colors[Math.round(Math.random() * (colors.length - 1))]) .toString() //... }
详情见Vue2.x文档 - Class 与 Style 绑定 - 数组语法
如果读者的开发框架是 Vue 2.x 和 Vue-Router 2 版本的话,书中源码应作出如下改变:
代码清单 filmy/src/entries/admin-main.js
应改为:
//路由表 const routes = [ { path: '/', component: DashboardRoute }, { path: '/dashboard', name: 'dashboard', component: DashboardRoute }, { path: '/categories', name: 'categories', component: CategoriesRoute }, { path: '/categories/:name', name: 'category', component: CategoryRoute }, { path: '/albums', name: 'albums', component: AlbumsRoute }, { path: '/albums/:key', name: 'album', component: AlbumRoute }, { path: '/settings', name: 'settings', component: SettingsRoute } ] const router = new VueRouter({ routes }) // 登陆管理工具 // Confirm the admin password swalp({ //... }) .then(password => filmyBucket.fetchPutToken(password)) .then(() => { //... // 登陆成功,渲染页面 // router.start(Admin, '#admin') new Vue({ el: '#admin', router: router, render: h => h(Admin) }) }) .catch(() => { //... })
详情见从 Vue Router 0.7.x 迁移 定义 router.map从 Vue Router 0.7.x 迁移 初始化 router.start
主流 Node.js 更新到 10 版本,已全面支持 Async/Await 语法,能使开发者更好地理解 “异步代码同步化” ,可对 src\controllers\duels.js 代码做修改,将 * 修改成 async,将 yield 修改成 await
src\controllers\duels.js
*
async
yield
await
若使用 Koa2 框架,其 koa-router 依赖更新了原有的语法。在项目 controllers 目录中,非常多异步路由的操作,文中描述的 this 不再是当前上下文。需要给路由回调函数传入一个参数,如 ctx,将 this 替换成 ctx 来处理请求的返回问题。
koa-router
this
ctx
router.get.fetchAllDuels = function*() { const duels = yield Duel.fetchAllDuels() this.body = { duels: duels.map(duel => duel.plain()) } }
修改成
router.get.fetchAllDuels = async function(ctx) { const duels = await Duel.fetchAllDuels() ctx.body = { duels: duels.map(duel => duel.plain()) } }
书中 P233 P234 P235 和代码文件中出现相同的语法修改,不再举例。
根据作者提供的前端代码。新建赛事时,提交到后端的数据结构为:
{ "players": { "1": "5d033c1b59b8490008e31f46", "2": "5d033c2b6aa07e0008502673" } }
后端路由 /api/duels/new 接收处理的数据结构不一致:
/api/duels/new
const playersId = ctx.request.body.players
应该提取出 players 对象中所有值组成数组,最终修改为:
players
const playersId = Object.values(ctx.request.body.players)
第二段代码块中
应改为
如果读者的开发框架是 Vue 2.x 和 Vue-Router 2 版本的话,在整个第四章中所有应作出如下改变:
替换生命周期钩子函数
ready () => mounted ()
全局导航钩子
详情见
从 Vue1.x 迁移说明 - 生命周期钩子函数 ready
Vue-Router 2 导航钩子
4.10 管理工具的总体组织
管理页面路由组件
Dashboard.vue
中绑定 Style 进度条 语法 在 Vue2.x 中似乎失效了。作以下修改:
methods
中的pickBarColor
方法作对应的修改:详情见
Vue2.x文档 - Class 与 Style 绑定 - 数组语法
如果读者的开发框架是 Vue 2.x 和 Vue-Router 2 版本的话,书中源码应作出如下改变:
应改为:
详情见
从 Vue Router 0.7.x 迁移 定义 router.map
从 Vue Router 0.7.x 迁移 初始化 router.start
主流 Node.js 更新到 10 版本,已全面支持 Async/Await 语法,能使开发者更好地理解 “异步代码同步化” ,可对
src\controllers\duels.js
代码做修改,将*
修改成async
,将yield
修改成await
若使用 Koa2 框架,其
koa-router
依赖更新了原有的语法。在项目 controllers 目录中,非常多异步路由的操作,文中描述的this
不再是当前上下文。需要给路由回调函数传入一个参数,如ctx
,将this
替换成ctx
来处理请求的返回问题。修改成
书中 P233 P234 P235 和代码文件中出现相同的语法修改,不再举例。
根据作者提供的前端代码。新建赛事时,提交到后端的数据结构为:
后端路由
/api/duels/new
接收处理的数据结构不一致:应该提取出
players
对象中所有值组成数组,最终修改为: