开始

Parse服务的后端搭建很简单，在本书的GitHub仓库中，有译者上传的配置好的ParseServer项目，下载下来安装对应的依赖后运行即可。

然后，在前端使用Parse的SDK即可与后端完成交互。

安装Parse服务

你可以照着ParseServer文档 自己搭建Parse服务，也可以直接下载配置好的Parse服务项目，大概长这样：

开始 - 图1

这个项目是基于官方的例子，集成了仪表盘和文件管理功能。

下载完这个项目后，安装依赖。你可以将目录移到合适的位置，因为它将作为我们的后端服务。

然后你还需要 安装MongoDB，安装完成后使用mongod -dbpath "你想要保存数据库的路径" 命令运行数据库服务，然后运行mongo命令测试能不能连接上：

  1. $ mongo
  2. MongoDB shell version: 3.2.9
  3. connecting to: test
  4. > ^C
  5. bye

如果连接成功，在项目目录运行 npm run start即可开启Parse后端服务。

  1. $ npm run start
  3. > parse-server-example@1.4.0 start C:\Users\Administrator\Desktop\Parse\parse-server-example-master
  4. > cross-env APP_ID='myAppId' CLIENT_KEY='123456' MASTER_KEY='123456' PORT=2018 SERVER_URL=http://localhost:2018/parse node index.js
  6. DATABASE_URI not specified, falling back to localhost.
  7. parse-server-example running on port 2018.

你可以通过访问 http://localhost:2018/test 来测试是否运行成功。

如果运行成功，你可以访问http://localhost:2018/dashboard 进入仪表盘，进行可视化管理。

其中， http://localhost:2018/parse 就是我们的后端服务地址，在初始化SDK时我们将会用到。你也可以通过修改index.js的代码来修改服务地址和其他服务信息，也可以在package.json中修改环境变量来修改服务信息。

集成Parse SDK

集成Parse SDK到你的JavaScript项目中，最简单的方法是通过npm安装。

但如果你想使用Parse的预编译文件，你可以从npm cdn获得。

同时，你可以从https://npmcdn.com/parse/dist/parse.js 获得开发版本，从https://npmcdn.com/parse/dist/parse.min.js 获得压缩后的生产版本。

JavaScript的生态系统非常宽泛，它有着为数众多的框架和运行环境。为了适配各种情况，Parse的npm模块包含了为Node.js和React Native量身定制的SDK版本。最适合的才是最好的，所以，使用合适的npm包，可以确保诸如本地存储、用户会话、HTTP请求之类的项目使用合适的依赖。

在基于浏览器的应用中使用npm包：

  1. var Parse = require('parse');

在后端应用或Node.js命令行工具中 ：

  1. // node.js
  2. var Parse = require('parse/node');

在React Native应用中 ：

  1. // React Native
  2. var Parse = require('parse/react-native');

接下来，用JavaScript初始化你的Parse-Sever，记得替换为你的应用信息：

  1. Parse.initialize("你的appId","javascript key","master key");//参数2、3选填。
  2. Parse.serverURL = '你的后端服务地址'

SDK 基于Backbone.js框架，它提供了灵活的API，允许你配置你喜欢的JS库。

目前SDK支持Firefox 23+，Chrome 17+，Safari 5+和IE 10。 IE 9仅支持使用HTTPS托管的应用程序。

例子

在此例子中，假设你已经搭建好ParseServer。

现在，我们使用Vue来做一个Todo List。

1、使用脚手架命令vue init webpack todolist创建一个vue项目。

2、安装Parse、UI依赖 ，集成到main.js。

  1. // main.js
  2. import Vue from 'vue'
  3. import App from './App'
  4. import router from './router'
  5. import muse from 'muse-uI'
  6. import 'muse-ui/dist/muse-ui.css'
  8. Vue.use(muse)
  10. Vue.config.productionTip = false
  12. /* eslint-disable no-new */
  13. new Vue({
  14.     el: '#app',
  15.     router,
  16.     components: { App },
  17.     template: '<App/>'
  18. })

3、编写页面。

  1. //app.vue
  2. <template>
  3.     <div id="app">
  4.         <mu-appbar>
  5.             <mu-text-field type="text" hintText="Todo List" v-model="value"/>
  6.             <mu-icon-button icon="add" slot="right" @click="addItem"/>
  7.         </mu-appbar>
  8.         <mu-list>
  9.             <mu-list-item v-for="item in list" :title="item.get('title')" :describeText="item.get('finish')?'完成':'未完成'">
  10.                 <mu-icon-button icon="check" slot="left" @click="finishItem(item)" :disabled="item.get('finish')"/>
  11.                 <mu-icon-button icon="delete" slot="right" @click="deleteItem(item)"/>
  12.             </mu-list-item>
  13.         </mu-list>
  14.         <div style="text-align:center;" v-if="!list.length">暂无任务</div>
  15.         </section>
  16.     </div>
  17. </template>
  18. <script>
  19. //初始化SDK
  20. import parse from 'parse'
  21. parse.serverURL = 'http://localhost:2018/parse'
  22. parse.initialize('myAppId', '123456')//传入APPID和JavaScript key即可
  24. export default {
  25.     name: 'App',
  26.     data() {
  27.         return {
  28.             value: '',
  29.             list: []
  30.         }
  31.     },
  32.     mounted() {
  33.         const query = new parse.Query('Todo')
  34.         query.find().then(list => {
  35.             this.list = list
  36.         })
  37.     },
  38.     methods: {
  39.         addItem() {
  40.             if (!this.value)
  41.                 return
  42.             const todo = new parse.Object('Todo')
  43.             todo.set('title', this.value)
  44.             todo.set('finish', false)
  45.             todo.save().then(todo => {
  46.                 this.list.push(todo)
  47.                 this.value = ''
  48.             }).catch(console.error)
  49.         },
  50.         finishItem(todo) {
  51.             todo.set('finish', true).save().then(todo => {
  52.                 this.$forceUpdate()
  53.             }).catch(console.error)
  54.         },
  55.         deleteItem(todo) {
  56.             todo.destroy().then(todo => {
  57.                 this.list = this.list.filter(item => item !== todo)
  58.             }).catch(console.error)
  59.         }
  60.     }
  61. }
  62. </script>
  64. <style>
  65. @import "http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css";
  66. #app {
  67.     font-family: 'Avenir', Helvetica, Arial, sans-serif;
  68.     -webkit-font-smoothing: antialiased;
  69.     -moz-osx-font-smoothing: grayscale;
  70.     color: #2c3e50;
  71.     max-width: 400px;
  72.     left: 0;
  73.     right: 0;
  74.     margin: auto;
  75. }
  76. </style>

以上，是手写的所有代码。按惯例，上GIF：

开始 - 图2

图中的数据都是同步保存到后端数据库的，我们从仪表盘的数据浏览器可以看到：

开始 - 图3

你看，一个任务清单应用分分钟就完成了。

你可能对例子中SDK的用法不是很了解，如果你用过国内的leancloud、bmob等bass平台，你会发现他们超级相似；没有用过也没关系，本章之后的指南基本上都是讲SDK的使用。

另外，例子会上传到仓库中，有需要可以下载。

接下来，开始你的Parse之旅吧，有问题可以点击左上角“New Issue”发起讨论。