示例应用（LeanTicket）开发环境搭建及功能简介 | LeanCloud Web 应用开发实践（第一期）

[DeerLu]

Hi，亲爱的用户：

最近我们计划以「LeanCloud Web 应用开发实践」为主题，进行一系列的直播及文章分享。并将重写后的 LeanTicket （工单）作为范例，介绍使用 LeanCloud 开发 Web 应用的一些最佳实践，内容包括且不限于：

1. 使用 LeanCloud 账号系统以及三方 OAuth 授权。
2. 使用 ACL 保障数据安全。
3. 使用云引擎的云函数和 hook 函数简化客户端逻辑。
4. LiveQuery 的使用。
5. 与微信或其他外部系统对接。
6. 邮件的发送即接收。
7. 批量处理／订正数据的实践。
8. 使用数据缓存提高响应速度，减少存储服务查询次数。

欢迎您加入微信群（文末扫码）进行交流。

第一期课程：示例应用（LeanTicket）开发环境搭建及功能简介

内容：

1. 使用 LeanTicket 源代码部署一个独立的工单系统。
2. 简单介绍 LeanTicket 现有功能，为后续代码介绍做准备。

讲师

LeanCloud 工程师 陈伟

直播时间

2017 年 8 月 3 日 20:00

课程地址：https://www.douyu.com/1587969

扫描下方二维码即可加入「LeanCloud Web 应用开发实践」，如有疑问也可加微信「 guixiaoTL」咨询。

[sdjcw]

视频回放： https://www.bilibili.com/video/av12928037/

系列视频内容简介 00:00

预计 8～10 个主题。每周二周四晚上 8 点开始，时长预计 45 分钟。

搭建独立的 LeanTicket 系统 04:25

项目源代码

为了让大家有更直观的感受，建议自己搭建一个可以运行的系统。创建方式参考 README。

因为 LeanTicket 还在不断进化，所以建议大家看文档和视频时将本地代码切换到相关版本。本期视频使用版本： 12d3ab7

LeanTicket 功能体验 17:35

因为一些 key 没有配置，所以部分功能不能使用（比如发邮件，微信通知），但是不影响主体功能。

新系统第一个注册用户将被自动设置为管理员。

LeanTicket 使用了浏览器通知，当有新工单或者回复时能弹出提示，这对技术支持同学的快速响应提供帮助。

工单系统一般是一个产品的辅助系统，所以不会有自己的用户体系，而是使用类似 OAuth 的方式依附于主系统（后面会有专题介绍 OAuth 接入）。但是为了独立部署使用方便，也提供了简单的账号注册和登录。

一系列功能演示 21:00

操作方式见 开始使用，操作流程：

• 注册用户 zhangsan，他是整个系统的管理员和第一个客服人员。再注册两个账号： lisi，wangwu。使用 shangsan 把 lisi 添加为客服人员。
• 然后添加工单分类和分类的问题模板。
• 提交工单。建议工单内容 使用 markdown 语法，方便阅读。
• 回复工单。LeanTicket 使用 LiveQuery 做到页面实时更新，提高用户体验（后面有专题介绍 LiveQuery）。
• 统计功能演示（33:03）。
• 个人设置功能。

开发环境搭建和本地启动 41:45

具体方式见 开发环境 。

技术栈介绍（45:45）：

• bootstrap
• React，中文翻译
• React Router，react-router-tutorial
• React-bootstrap

[javascript666666]

新手求救 本地启动报错:

• npm install 安装依赖后 自动编译报错

webpack.config.js 里的内容我没有修改过 里面有CSS loders为什么还报错

var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {

  entry: './index.js',

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080/',
  },

  devServer: {
    '/get': {
      targer: 'localhost:' + process.env.LEANCLOUD_APP_PORT,
      secure: false
    }
  },

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
        include: __dirname + '/modules'
      }
    ]
  },

  plugins: (process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin('app.css')
  ] : [
    new ExtractTextPlugin('app.css')
  ]),
}
`

- 服务器启动 lean up 运行报错 <img src="/uploads/default/original/2X/0/077d3177fc0cfbe57d706c038532e5cf8425ad9c.png" width="601" height="500"> 我把package.json 里的 WEBPACK_DEV_SERVER 改为小写的webpack-dev-server 就可以启动服务端了 自动编译的错误还存在 ,这里 能把WEBPACK_DEV_SERVER 改成小写的吗?

 "scripts": {
    "start": "node server.js",
    "build": "webpack",
    "dev:client": "eval $(lean env) && webpack-dev-server --port 8080 --inline --content-base public --history-api-fallback",
    "dev": "webpack-dev-server=http://localhost:8080 nodemon --ignore modules server.js", //**我把以前的WEBPACK_DEV_SERVER  改为 webpack-dev-server 有什么影响吗**
    "postinstall": "npm run build"
  },

• 客户端启动 win7系统 我修改了 package.json 中的

"dev:client": "eval $(lean env) && webpack-dev-server --port 8080 --inline --content-base public --history-api-fallback",

去掉了 eval $(lean env) && 在启动前 在命令窗口手动输入 lean env 这样可以吗??

eval $(lean env) &&

最终修改后的package.json文件

[javascript666666]

最终修改后的package.json文件

{
  "name": "leanticket",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "build": "webpack",
    "dev:client": "webpack-dev-server --port 8080 --inline --content-base public --history-api-fallback",//这里去掉了 eval $(lean env)
    "dev": "webpack-dev-server=http://localhost:8080 nodemon --ignore modules server.js",//**这里改为小写webpack-dev-server**
    "postinstall": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/leancloud/ticket.git"
  },
  "license": "MIT",
  "author": "LeanCloud",
  "engines": {
    "node": "6.x"
  },
  "dependencies": {
    "anchorate": "^1.1.0",
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.23.0",
    "bluebird": "^3.4.7",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.5.0",
    "color": "^1.0.3",
    "compression": "^1.6.2",
    "css-loader": "^0.28.4",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "highlight.js": "^9.10.0",
    "leancloud-storage": "3.0.0-beta.3",
    "leanengine": "leancloud/leanengine-node-sdk#v3",
    "lodash": "^4.17.4",
    "mailgun-js": "^0.8.2",
    "moment": "^2.17.1",
    "qs": "^6.3.1",
    "query-string": "^4.3.4",
    "randomcolor": "^0.5.3",
    "raven-js": "^3.16.1",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-chartjs-2": "^2.1.0",
    "react-datepicker": "^0.46.0",
    "react-document-title": "^2.0.3",
    "react-dom": "^15.4.2",
    "react-notification-system": "^0.2.14",
    "react-router": "^3.0.2",
    "remarkable": "^1.7.1",
    "request": "^2.79.0",
    "request-promise": "^4.1.1",
    "serve-favicon": "^2.4.3",
    "style-loader": "^0.18.1",
    "uuid": "^3.1.0",
    "webpack": "^1.12.13",
    "wechat-enterprise": "^0.1.1",
    "xss": "^0.3.3"
  },
  "devDependencies": {
    "eslint": "^3.15.0",
    "eslint-plugin-react": "^6.10.0",
    "http-server": "^0.8.5",
    "nodemon": "^1.11.0",
    "supertest": "^3.0.0",
    "supertest-as-promised": "^4.0.2",
    "webpack-dev-server": "^1.14.1"
  }
}

启动客户端是报这个错误

D:\leanCloud\hticket\ticket>lean env
发现新版本 0.12.0，变更如下：
- 更新日志：https://url.leanapp.cn/cliversion
您可以通过以下方式升级：访问 https://github.com/leancloud/lean-cli/releases
SET LC_APP_ID=F6myzymwnRRYcMdpjuKIYazf-gzGzoHsz
SET LC_APP_KEY=neoHug67gnGF40NHLfUx5vJr
SET LC_APP_MASTER_KEY=VcIa9cMvWfSnGE5H0TCUm8am
SET LC_APP_PORT=3000
SET LC_API_SERVER=https://api.leancloud.cn
SET LEANCLOUD_APP_ID=F6myzymwnRRYcMdpjuKIYazf-gzGzoHsz
SET LEANCLOUD_APP_KEY=neoHug67gnGF40NHLfUx5vJr
SET LEANCLOUD_APP_MASTER_KEY=VcIa9cMvWfSnGE5H0TCUm8am
SET LEANCLOUD_APP_HOOK_KEY=VEhSuYay
SET LEANCLOUD_APP_PORT=3000
SET LEANCLOUD_API_SERVER=https://api.leancloud.cn
SET LEANCLOUD_APP_ENV=development
SET LEANCLOUD_REGION=cn

D:\leanCloud\hticket\ticket>npm run dev:client

> leanticket@1.0.0 dev:client D:\leanCloud\hticket\ticket
>  webpack-dev-server --port 8080 --inline --content-base public --history-api-f
allback

events.js:163
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:8080
    at Object.exports._errnoException (util.js:1050:11)
    at exports._exceptionWithHostPort (util.js:1073:20)
    at Server.setupListenHandle [as _listen2] (net.js:1263:14)
    at listenInCluster (net.js:1304:12)
    at doListen (net.js:1428:7)
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:78:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! leanticket@1.0.0 dev:client: ` webpack-dev-server --port 8080 --inline
--content-base public --history-api-fallback`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the leanticket@1.0.0 dev:client script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-08-22T0
4_56_44_606Z-debug.log

[javascript666666]

这个是问题2: lean up 启动报错的图片:

D:\leanCloud\hticket\ticket>lean up
正在检测运行时
检测到 node.js 运行时
获取应用信息 \发现新版本 0.12.0，变更如下：
- 更新日志：https://url.leanapp.cn/cliversion
您可以通过以下方式升级：访问 https://github.com/leancloud/lean-cli/releases
获取应用信息
当前应用：[31mhticket[0m (F6myzymwnRRYcMdpjuKIYazf-gzGzoHsz)
获取运引擎分组 web 信息
使用 [npm run dev] 启动项目
项目已启动，请使用浏览器访问：http://localhost:3000
云函数调试服务已启动，请使用浏览器访问：http://localhost:3001

> leanticket@1.0.0 dev D:\leanCloud\hticket\ticket
> WEBPACK_DEV_SERVER=http://localhost:8080 nodemon --ignore modules server.js

'WEBPACK_DEV_SERVER' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! leanticket@1.0.0 dev: `WEBPACK_DEV_SERVER=http://localhost:8080 nodemon
 --ignore modules server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the leanticket@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-08-22T0
5_13_34_257Z-debug.log

D:\leanCloud\hticket\ticket>

我把'WEBPACK_DEV_SERVER=http://localhost:8080 nodemon--ignore modules server.js` 改写成小写
"webpack-dev-server=http://localhost:8080 nodemon --ignore modules server.js" 这样就好了,没什么别的影响吧?

[sdjcw]

webpack-dev-server=http://localhost:8080

这句话只是设置一个环境变量，用的地方在这里： https://github.com/leancloud/ticket/blob/master/server.js#L52

[IOS_Embed]

请问这个里面的配置项如何配置，主要是邮件和微信

mailgunKey: process.env.MAILGUN_KEY,
mailgunDomain: process.env.MAILGUN_DOMAIN,
wechatCorpID: process.env.WECHAT_CORP_ID,
wechatSecret: process.env.WECHAT_SECRET,
wechatAgentId: process.env.WECHAT_AGENT_ID,
wechatToken: process.env.WECHAT_TOKEN,
wechatEncodingAESKey: process.env.WECHAT_ENCODING_AES_KEY,

[sdjcw]

后面会有专题介绍如何接入邮件和微信，希望您不要错过哈！

[111679]

请问这个问题最后你解决了吗，我也出了同样的错误

[1347462310]

提示这个错误，接下来应该怎么配置呢？
缺少环境变量 "LEANCLOUD_API_HOST"，是不是忘记 $(lean env) 了？
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tapdesk-web@1.0.0 build: npm run clean && node script/generateEnv.js && vite build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tapdesk-web@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/leanengine/.npm/_logs/2022-04-05T08_35_05_375Z-debug.log
The command '/bin/sh -c bash /home/leanengine/before-build' returned a non-zero code: 1
Deployment failed

[1347462310]

输入lean env 后报错PS C:\Users\lenovo\Desktop\bysj\ticket> lean env
SET LC_APP_ID=TV5GKI5xpx69hEChQ7xMFWon-gzGzoHsz
SET LC_APP_KEY=5cNHpSjxS61hIj2MUaTIphD2
SET LC_APP_MASTER_KEY=4KvEWLBXgtlzu6fipzFfA5U3
SET LC_APP_PORT=3000
SET LC_API_SERVER=https://tv5gki5x.lc-cn-n1-shared.com
SET LEANCLOUD_APP_ID=TV5GKI5xpx69hEChQ7xMFWon-gzGzoHsz
SET LEANCLOUD_APP_KEY=5cNHpSjxS61hIj2MUaTIphD2
SET LEANCLOUD_APP_MASTER_KEY=4KvEWLBXgtlzu6fipzFfA5U3
SET LEANCLOUD_APP_HOOK_KEY=PybyBEei
SET LEANCLOUD_APP_PORT=3000
SET LEANCLOUD_API_SERVER=https://tv5gki5x.lc-cn-n1-shared.com
SET LEANCLOUD_APP_ENV=development
SET LEANCLOUD_REGION=CN
SET LEANCLOUD_APP_DOMAIN=
SET LEAN_CLI_HAVE_STAGING=false