社交系统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
社交系统ThinkSNS+安装部署演示的更多相关文章
- 开源社群系统ThinkSNS+安装部署演示视频!
社群系统TS+一期版本发布之后,很多小伙伴们反馈安装部署有些困难,那么今天由我们的颜值与技术实力担当乔斌大佬通过录制视频的形式,给大家演示一下部署的整个过程,录制过程中有些杂音,请各位尽情谅解,后续我 ...
- sns社交系统ThinkSNS+ 更新至V0.8.2,新增圈子功能
sns社交系统"ThinkSNS+"于7月15日发布了V0.8.0,含开源版本web+H5,及Android APP和iOS APP客户端. V0.8.2版本将于7月29日(本周六 ...
- 开源社交系统ThinkSNS+ V0.8.0 正式发布(一期功能版本)
智士软件旗下开源sns社交系统ThinkSNS即将进入10周年,推出并行两代系统ThinkSNSV4和ThinkSNS+,以专业易用的技术源码输出,驱动互联网社交软件建设及创业,使用ThinkSNS改 ...
- 【社交系统ThinkSNS+研发日记三】基于 Laravel Route 的 ThinkSNS+ Component
[社交系统ThinkSNS+研发日记系列] 一.<ThinkSNS+ 基于 Laravel master 分支,从 1 到 0,再到 0.1> 二.<基于 Laravel 开发 Th ...
- 社交系统ThinkSNS+ APP更新至V0.8.3---新增打赏、用户认证
一.ThinkSNS简介 目前社交系统ThinkSNS(简称TS)有两个版本并行: ThinkSNS V4----最新版本ThinkSNS V4.6.1,第一次发布时间为2015年7月15日,最近更新 ...
- SNS社交系统“ThinkSNS V4.6”活动应用功能详解及应用场景举例
sns社交系统ThinkSNS目前拥有功能:朋友圈(微博).微吧(论坛).频道.积分商城.IM即时聊天.直播.问答.活动.资讯(CMS).商城.广场.找人.搜索.评论.点赞.转发.分享.话题.积分.充 ...
- 社交系统ThinkSNS+ 发布通知!
社交系统ThinkSNS 最新版本ThinkSNS+将于7月15日正式发布开源版本web+H5,同时发布Android APP和iOS APP.我们将告别内测阶段,正式对外发布. 没错,你们没看错,就 ...
- windows系统dokuwiki安装部署设置 xampp环境配置
简单记录一次安装dokuwiki的过程 dokuwiki下载 dokuwiki下载地址 https://download.dokuwiki.org/ 下载前有一些可选项目,版本.语言.插件,可以按照需 ...
- RHEL6 最小化系统 编译安装部署zabbix (mysql)
RHEL6 最小化系统 编译安装部署zabbix (mysql)官方说明详细见:https://www.zabbix.com/documentation/4.0/manual/installation ...
随机推荐
- iOS----------检测app进入后台或前台
开发播放器的时候,经常需要检测app进入后台(暂停播放)或者进入前台(开始播放).方法非常简单. 1.检测app进入后台 // 在AppDelete实现该方法 - (void)applicationD ...
- WPF:使用TypeConverter
所谓TypeConverter就是类型转换器,支持两种类型之间相互转换 你可以重写转换逻辑,只要你清楚转换的协议,就可以实现类型互转. 定义一个Person类型,具有一个int类型的Age属性: pu ...
- 常用Shell脚本命令(备忘)
此处纪录一些个人常用的Shell命令,留作复用 Linux 必备软件 Tmux 终端复用神器 zsh 无比强大Shell运行环境 oh my zsh 搭配zsh食用 uGet Linux下载工具 Do ...
- FIDDLER的使用方法及技巧总结
转自: https://www.cnblogs.com/ink-marks/p/6363275.html 一.FIDDLER快速入门及使用场景 Fiddler的官方网站:http://www.fidd ...
- sql判断字段是否为空
sql语句条件查询时,有时会判断某个字段是否为空. 字段内容为空有两种情况 1.为null 2.为字符串的空'' 语句如下: select * from table where column is n ...
- Python基础——0前言
python虽然这几年才兴起,但是已经是一门“老”语言了. python的诞生历史也很有趣.Python的创始人为Guido van Rossum(龟叔).1989年圣诞节期间,在阿姆斯特丹,Guid ...
- spring启动component-scan类扫描加载过程(转)
文章转自 http://www.it165.net/pro/html/201406/15205.html 有朋友最近问到了 spring 加载类的过程,尤其是基于 annotation 注解的加载过程 ...
- Nero8刻录引导系统光盘镜像图文教程
刻录可引导的Windows系统光盘一直是电脑使用者较为需要的,今天,倡萌抽空写了这篇图文教程,希望对于菜鸟级的朋友有所帮助,大虾请飘过.本教程以最为强大的刻录软件Nero 8做为工具(其他版本的Ner ...
- AI MobileNet
MobileNet,是针对移动和嵌入式设备的一类高效模型,基于流线型(streamlined)架构,使用深度可分离卷积(depthwise separable convolution)来构建轻量级深度 ...
- go笔记-值传递、引用传递
eg: func sliceModify(slice []int) { // slice[0] = 88 slice = append(slice, ) } func main() { slice : ...