社交系统ThinkSNS+安装部署演示

　　ThinkSNS(简称TS)，一款全平台综合性社交软件系统，10年来为国内外大中小企业和创业者提供社交化软件研发及技术解决方案。目前有ThinkSNS V4、ThinkSNS+两个并行系统。
　　
　　ThinkSNS一直不断优化，持续更新，旨在为大家带来更好的系统体验，能够更快更好地应用到商业化、企业化等多样化的软件项目中，加速你的开发进度，减少研发时间周期。
　　
　　ThinkSNS社交系统主要功能有：微博（朋友圈）、即时聊天、直播、论坛、资讯、CMS、活动、频道、圈子、问答、打赏等主流社交功能应有尽有。
　　
　　ThinkSNS+版本发布之后，很多小伙伴们反馈安装部署有些困难，那么今天我们就通过录制视频的形式，给大家演示安装部署的全过程，由于时间紧张没有字幕，敬请谅解，后续我们有时间的时候会进行后期处理。
　　
　　好，那么正式演示开始：
　　
　　社交系统ThinkSNS+安装部署演示视频
　　
　　视频内容提要：
　　
　　一、 工具
　　
　　1. composer composer中文网 网页链接
　　
　　2. github
　　
　　3. nodejs + yarn或者npm
　　
　　1. yarn官网 网页链接
　　
　　2. nodejs官网 网页链接
　　
　　二、演示内容
　　
　　1. thinksns+ 核心包安装 网页链接
　　
　　2. html5扩展安装 网页链接（原地址） -> 网页链接（以后的新地址）
　　
　　3. 组织机构仓库 网页链接
　　
　　三、操作步骤
　　
　　1. 从github拉取thinksns+核心主干代码 网页链接
　　
　　2. composer安装thinksns+所需的依赖包 composer install;
　　
　　3. 创建数据库;
　　
　　4.对核心进行配置 复制 .env.example 为 .env, 设置数据库信息如数据库账号密码、数据库;
　　
　　5.执行php artisan key:generate;
　　
　　6.运行迁移 php artisan migrate; php artisan db:seed;
　　
　　7.composer依赖html5移动版扩展 composer require/zhiyicx/plus-component-web;
　　
　　8.进行编译;
　　
　　9.安装html5扩展 php artisan package:handle h5 install; php artisan package:handle h5 link;
　　
　　10.安装动态扩展 composer require zhiyicx/ www.tianscpt.com plus-component-feed; php artisan package:handle feed resolve;
　　
　　11. 安装im扩展 composer require zhiyicx/plus-component-im; php aritisan package:handle im install;
　　
　　上述是成功的部署整个过程，有不清楚的小伙伴们，可以多看几次视频，相信一定可以很快部署成功的。
　　
　　感谢各位对Ts团队和产品的支持，部署开源系统请保留版权标志，你们的支持和尊重是我们最大的动力。
　　
　　ThinkSNS+购买，可以联系(www.baihuiyulep.cn)深度了解相关事项！
　　
　　ThinkSNS+开源代码仓库（仅含PC及H5，不含APP源码）：
　　
　　组件功能分析：
　　
　　1-每个input输入框被触发后开始做非空校验并提示错误
　　
　　2-表单提交时做表单项校验，全部校验成功则提示登录，否则提示校验失败
　　
　　3-表单项增加前置图标
　　
　　组件封装思路：
　　
　　1-需要一个高阶函数hoc FormCreate，用来包装用户表单，增加数据管理能力；hoc需要扩展四个功能：getFieldDecorator, getFieldsError, getFieldError, isFieldTouched。获取字段包装器方法getFieldDecorator的返回值是个高阶函数，接收一个Input组件作为参数，返回一个新的组件。这就是让一个普通的表单项，变成了带有扩展功能的表单项(例如：增加该项的校验规则)
　　
　　2-FormItem组件，负责校验及错误信息的展示，需要保存两个属性，校验状态和错误信息，当前校验通过时错误信息为空
　　
　　3-Input组件，展示型组件，增加输入框前置icon
　　
　　4-导出FormCreate装饰后的MForm组件，MForm组件负责样式布局以及提交控制
　　
　　组件封装步骤：
　　
　　1-完成一个基础的组件MForm，让页面先展示出来
　　
　　2-写一个高阶组件FormCreate对MForm进行扩充，使MForm组件拥有数据管理的能力。
　　
　　保存字段选项设置 this.options = {}; 这里不需要保存为state，因为我们不希望字段选项变化而让组件重新渲染
　　
　　保存各字段的值 this.state = {}
　　
　　定义方法 getFieldDecorator()()，第一个参数传递配置项，第二个参数传入Input组件；第一个参数包括：当前校验项、校验规则 'username',{rules:[require:true,message:'请输入用户名']}
　　
　　在FormCreate中，克隆一份Input组件，并且定义Input的onChange事件。首先这里需要把已经存在的jsx克隆一份，并修改它的属性，直接修改属性是不允许的；这里在更高级别定义onChange事件，控制元素的值，这样当组件发生变化时，就不用进行组件之间的来回通信。数据变化交给容器型组件去做，低层级的组件只负责展示即可。
　　
　　3-增加提交校验功能
　　
　　4-增加FormItem组件，在表单项触发后做实时校验并提示错误信息
　　
　　代码：MForm.js
　　
　　以下每一步骤都可以独立运行
　　
　　step1 - 搭建基础代码
　　
　　复制代码
　　
　　1 import React, { Component } from 'react'
　　
　　2
　　
　　3 class MForm extends Component {
　　
　　4 render() {
　　
　　5 return (
　　
　　6 <div>
　　
　　7 用户名：<input type='text' />
　　
　　8 密码：<input type=www.mmingyLgw.com'password' />
　　
　　9 <button>Log in</button>
　　
　　10 </div>
　　
　　11 )
　　
　　12 }
　　
　　13 }
　　
　　14
　　
　　15 export default MForm
　　
　　复制代码
　　
　　step2 - 用高阶组件FormCreate对最后导出的MForm组件进行能力扩充；通过表单项组件FormItem展示校验错误信息
　　
　　复制代码
　　
　　1 import React, { Component } from 'react'
　　
　　2
　　
　　3 // hoc: 包装用户表单，增加数据管理能力及校验功能
　　
　　4 const FormCreate = Comp => {
　　
　　5 return class extends Component {
　　
　　6 constructor(props) {
　　
　　7 super(props)
　　
　　8 this.options = {} // 保存字段选项设置
　　
　　9 this.state = {} // 保存各字段的值
　　
　　10 }
　　
　　11
　　
　　12 // 处理表单项输入事件
　　
　　13 handleChange = e => {
　　
　　14 const { name, value } = e.target
　　
　　15 this.setState(
　　
　　16 {
　　
　　17 [name]: value
　　
　　18 },
　　
　　19 () => {
　　
　　20 // TODO: 处理状态变化后的校验
　　
　　21 // 由于setState是异步的，所以这里需要在回调函数中处理后续操作
　　
　　22 // 保证状态已经完成改变
　　
　　23 }
　　
　　24 )
　　
　　25 };
　　
　　26
　　
　　27 getFieldDecorator = (field, option) => InputComp => {
　　
　　28 this.options[field] = option
　　
　　29 return (
　　
　　30 <div>
　　
　　31 {/* 把已经存在的jsx克隆一份，并修改它的属性，直接修改属性是不允许的。
　　
　　32 这里在更高级别定义onChange事件，控制元素的值，这样当组件发生变化时，
　　
　　33 就不用进行组件之间的来回通信 */}
　　
　　34 {React.cloneElement(InputComp, {
　　
　　35 name: field, // 控件name
　　
　　36 value: this.state[field] || '', // 控件值
　　
　　37 onChange: this.handleChange // change事件处理
　　
　　38 })}
　　
　　39 </div>
　　
　　40 )
　　
　　41 };
　　
　　42 render() {
　　
　　43 return (
　　
　　44 <Comp {...this.props} getFieldDecorator={this.getFieldDecorator} />
　　
　　45 )
　　
　　46 }
　　
　　47 }
　　
　　48 }
　　
　　49
　　
　　50 @FormCreate
　　
　　51 class MForm extends Component {
　　
　　52 render() {
　　
　　53 const { getFieldDecorator www.365soke.com} = this.props
　　
　　54
　　
　　55 return (
　　
　　56 <div>
　　
　　57 用户名：{getFieldDecorator('username', {
　　
　　58 rules: [{ required: true, message: '请填写用户名' }]
　　
　　59 })(<input type='text' />)}
　　
　　60 密码：{getFieldDecorator('password', {
　　
　　61 rules: [www.dasheng178.com{ required: true, message: '请填写密码' }]
　　
　　62 })(<input type='password' />)}
　　
　　63 <button>Log in</button>
　　
　　64 </div>
　　
　　65 )
　　
　　66 }
　　
　　67 }
　　
　　68
　　
　　69 export default MForm