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/1587969119

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

2 人赞了这个帖子.

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

系列视频内容简介 00:00

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

搭建独立的 LeanTicket 系统 04:25

项目源代码46

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

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

LeanTicket 功能体验 17:35

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

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

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

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

一系列功能演示 21:00

操作方式见 开始使用13,操作流程:

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

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

具体方式见 开发环境27

技术栈介绍(45:45):

新手求救 本地启动报错:

  • 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文件

最终修改后的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

这个是问题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" 这样就好了,没什么别的影响吧?

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

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,

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

提示这个错误,接下来应该怎么配置呢?
缺少环境变量 "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

输入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