server crud & api

.gitignore

@@ -0,0 +1,40 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Upload directory
+server/www/uploads

LICENSE

@@ -0,0 +1,13 @@
+Copyright (c) 2016, 汪磊
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,25 @@
+# Music Player by Angular Stack
+
+## Run it
+
+```bash
+$ npm install
+$ npm start
+```
+
+### Server Side
+
+visit http://localhost:2080/music/list in browser
+
+### Client Side
+
+visit projectdir/client/index.html in browser
+
+
+1. 创建一个单一入口的HTML文件
+2. 创建一个app.js文件，在这个文件中创建一个Angular模块用于处理当前应用程序
+3. 强模块作用于特定的DOM元素上
+4. 设计路由
+5. 设计控制器和视图
+6. 先根据页面建模 → viewModel
+title artist 总时间 当前播放 playing 按钮

index.js

@@ -0,0 +1,15 @@
+/**
+ * 分发
+ */
+
+const app = require('./server/app')
+
+// 日志记录
+// 开发阶段额外的东西
+
+const server = app.listen(process.env.PORT || 2080, error => {
+  if (error) throw error
+  const address = server.address()
+  app.set('url', `http://127.0.0.1:${address.port}`)
+  console.log('server is ready @ http://127.0.0.1:' + address.port)
+})

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "music-player",
+  "version": "1.0.0",
+  "description": "```bash\r $ npm install\r $ npm start\r ```",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "keywords": [
+    "music player",
+    "vue",
+    "vuejs",
+    "vue.js"
+  ],
+  "author": "iceStone <[email protected]> (http://blog.wedn.net/)",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.15.1",
+    "express": "^4.13.4",
+    "formidable": "^1.0.17",
+    "glob": "^7.0.3",
+    "xtemplate": "^4.5.1",
+    "xtpl": "^3.2.0"
+  },
+  "devDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zce/music-player.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zce/music-player/issues"
+  },
+  "homepage": "https://github.com/zce/music-player#readme"
+}

server/app.js

@@ -0,0 +1,41 @@
+/**
+ * 业务入口
+ */
+const path = require('path')
+const glob = require('glob')
+const express = require('express')
+const bodyParser = require('body-parser')
+
+const app = module.exports = express()
+
+// 设置回到函数名字
+// app.set('jsonp callback name', 'cb')
+
+app.use(express.static(path.join(__dirname, 'www')))
+
+// ===== 模版引擎，bodyParser，controller载入 =====
+app.set('views', path.join(__dirname, 'views'))
+app.set('view engine', 'xtpl')
+
+// parse application/x-www-form-urlencoded
+app.use(bodyParser.urlencoded({ extended: false }))
+
+// 载入所有控制器
+const controllers = glob.sync('./controllers/**/*.js', { cwd: __dirname })
+controllers.forEach(c => {
+  // c = ./controllers/demo.js
+  // 当一个模块没有导出任何成员默认返回 {}
+  const controller = require(c)
+  controller.prefix && app.use(controller.prefix, controller)
+})
+
+if (!module.parent) {
+  // module.parent只有在当前文件被载入的情况下才会有值，否则为NULL
+  // 可以利用这种机制判断是否是被依赖的情况
+  const server = app.listen(process.env.PORT || 2080, error => {
+    if (error) throw error
+    const address = server.address()
+    app.set('url', `http://127.0.0.1:${address.port}`)
+    console.log('server is ready @ http://127.0.0.1:' + address.port)
+  })
+}

server/controllers/api.js

@@ -0,0 +1,43 @@
+const express = require('express')
+
+const Music = require('../models/music')
+
+const router = module.exports = express.Router()
+
+router.prefix = '/api'
+
+/**
+ * GET /api/music
+ */
+router.get('/music', (req, res) => {
+  // JSONP在当下的WEB开发过程中经常用到，express就是将经常用到的东西进行封装
+  // res.send(`${req.query.cb} && ${req.query.cb}(${JSON.stringify(Music.getList())})`)
+  // res.send(`foo(${Music.getList()})`)
+  // 如果是自己写 必须设置响应的响应类型
+  // jsonp方法中会自动接收客户端传来的回调函数名称
+  const list = Music.getList()
+  res.jsonp(list.map(item => {
+    const temp = {}
+    Object.assign(temp, item)
+    temp.music = req.app.get('url') + '/uploads/' + temp.music
+    temp.poster = req.app.get('url') + '/uploads/' + temp.poster
+    return temp
+  }))
+})
+
+/**
+ * GET /api/music/:id
+ */
+router.get('/music/:id', (req, res) => {
+  const id = parseInt(req.params.id || 0)
+  if (!id) {
+    // 不存在这个数据
+    return res.status(404).send('没有该记录')
+  }
+  const item = Music.getById(id)
+  const temp = {}
+  Object.assign(temp, item)
+  temp.music = req.app.get('url') + '/uploads/' + temp.music
+  temp.poster = req.app.get('url') + '/uploads/' + temp.poster
+  res.jsonp(temp)
+})

server/controllers/home.js

@@ -0,0 +1,10 @@
+const express = require('express')
+const router = module.exports = express.Router()
+router.prefix = '/'
+
+/**
+ * GET /
+ */
+router.get('/', (req, res) => {
+  res.redirect('/music/list')
+})

server/controllers/music.js

@@ -0,0 +1,123 @@
+/**
+ * 音乐相关控制逻辑
+ */
+const path = require('path')
+
+const express = require('express')
+const formidable = require('formidable')
+
+const Music = require('../models/music')
+
+const router = module.exports = express.Router()
+
+router.prefix = '/music'
+
+/**
+ * GET /music/list
+ */
+router.get('/list', (req, res) => {
+  // res.render('music/list', { title: '音乐列表' })
+  res.locals.title = '音乐列表'
+  res.locals.list = Music.getList()
+  res.render('music/list')
+})
+
+/**
+ * GET /music/add
+ */
+router.get('/add', (req, res) => {
+  res.locals.title = '添加新音乐'
+  res.render('music/add')
+})
+
+/**
+ * POST /music/add
+ */
+router.post('/add', (req, res) => {
+  const form = new formidable.IncomingForm()
+  form.uploadDir = path.join(__dirname, '../www/uploads')
+  form.keepExtensions = true
+  form.parse(req, (error, fields, files) => {
+    if (error) throw error
+
+    // 接收到客户端提交过来文件和填写的信息
+    let id = 0
+    Music.getList().forEach(m => {
+        if (m.id > id) {
+          id = m.id
+        }
+      })
+      // 此时不能保存完整路径
+    const music = new Music(id + 1, fields.title, fields.artist, path.basename(files.music.path), path.basename(files.poster.path))
+    music.save()
+    res.redirect('/music/list')
+  })
+})
+
+/**
+ * GET /music/edit/:id
+ */
+router.get('/edit/:id', (req, res) => {
+  res.locals.title = '编辑'
+    // 接收传过来的ID
+  const id = parseInt(req.params.id || 0)
+  if (!id) {
+    // 不存在这个数据
+    return res.status(404).send('没有该记录')
+  }
+  // 找到数组中的这个元素删除
+  const temp = Music.getById(id)
+  if (!temp) {
+    // 不存在这个数据
+    return res.status(404).send('没有该记录')
+  }
+  res.locals.item = temp
+  res.render('music/edit')
+})
+
+/**
+ * POST /music/edit/:id
+ */
+router.post('/edit/:id', (req, res) => {
+  res.locals.title = '编辑'
+  // 接收传过来的ID
+  const id = parseInt(req.params.id || 0)
+  if (!id) {
+    // 不存在这个数据
+    return res.status(404).send('没有该记录')
+  }
+  // 找到数组中的这个元素删除
+  const temp = Music.getById(id)
+  if (!temp) {
+    // 不存在这个数据
+    return res.status(404).send('没有该记录')
+  }
+  temp.title = req.body.title
+  temp.artist = req.body.artist
+  if (!temp.update()) {
+    res.locals.item = temp
+    res.render('music/edit')
+  }
+  res.redirect('/music/list')
+})
+
+/**
+ * GET /music/delete/:id
+ */
+router.get('/delete/:id', (req, res) => {
+  // 接收传过来的ID
+  const id = parseInt(req.params.id || 0)
+  if (!id) {
+    // 不存在这个数据
+    return res.status(404).send('没有该记录')
+  }
+  // 找到数组中的这个元素删除
+  const temp = Music.getById(id)
+  if (!temp) {
+    // 不存在这个数据
+    return res.status(404).send('没有该记录')
+  }
+  // 数据存在，需要删除
+  temp.delete()
+  res.redirect('/music/list')
+})