使用React构建精简版本掘金（四）

到目前为止，首页、文章详情页、动态页、话题页及小册页面内容完成了，看一下效果图哈，数据不全，见谅哈！

实现过程

动态页

该页面从布局来说分左右两部分，左边有分为输入框和已发表内容部分。

• 输入框部分

我这里采用了ant-design中的input作为输入框，而掘金是采用了可编辑的div来实现输入内容,通过设置contenteditable="true"实现，感兴趣的小伙伴可查阅相关资料。
发布按钮的disabled状态将根据输入框是否有值来决定。功能类似todolist添加功能，可参考文章详情页面的发布评论功能。

        {this.state.selectedTopic!==''?<span style={{position:'absolute',bottom:'60px',left:'28px',padding:'0 12px',border:'1px solid #007fff',userSelect:'none',height:'22px',borderRadius:'14px',color:'#007fff'}}>{this.state.selectedTopic}</span>:''}
    <div style={{marginTop:'5px',display:'flex',justifyContent:'space-between'}}>
        <ul style={sy1}>
            <li style={sy2} onClick={this.handleBtn.bind(this,'exp')}>
                <img alt='' src='//b-gold-cdn.xitu.io/v3/static/img/emoji.5594dbb.svg' />表情
            </li>
            <li style={sy2} onClick={this.handleBtn.bind(this,'pic')}>
                <img alt='' src='//b-gold-cdn.xitu.io/v3/static/img/active_file.d265f4e.svg' />图片
            </li>
            <li style={sy2} onClick={this.handleBtn.bind(this,'link')}>
                <img alt='' src='//b-gold-cdn.xitu.io/v3/static/img/active_link.b1a6832.svg' />链接
            </li>
            <Popover placement="bottom" content={<TopicList handleTopic={this.handleTopic.bind(this)} />} trigger="click">
                <li style={sy2} onClick={this.handleBtn.bind(this,'topic')}>
                    <img alt='' src='//b-gold-cdn.xitu.io/v3/static/img/topic.6a87bb7.svg' />话题
                </li>
            </Popover>
        </ul>
        <Button type="primary" disabled={this.state.disabledBtn} onClick={this.handlePressEnter.bind(this)}>发布</Button>
    </div>
</div></code></pre> 
 <p>输入框内容发生变化事件</p> 
 <pre><code>handelInputChange=(e)=>{
    if(e.target.value.trim()!==''){
        this.setState({
            disabledBtn:false,
            inputValue:e.target.value
        })
    }else{
        this.setState({
            disabledBtn:true
        })
    }
}</code></pre> 
 <p>发布按钮事件</p> 
 <pre><code>handlePressEnter=()=>{
    if(this.state.inputValue!==''){
        console.log('发布沸点')
    }else{
        message.error('请输入沸点内容');
    }
}</code></pre> 
 <ul> 
  <li>添加话题</li> 
 </ul> 
 <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/6ac5c5b8d1a4445990c16230ea08599f.gif" target="_blank"><img alt="使用React构建精简版本掘金（四）_第2张图片" title="" src="http://img.e-com-net.com/image/info9/6ac5c5b8d1a4445990c16230ea08599f.gif" width="800" height="513" style="border:1px solid black;"></a></span><br>如图所示，一个搜索框加一个话题列表。<br>dom结构如下：</p> 
 <pre><code><div style={{background:'#fff'}}>
    <Search
        placeholder="搜索话题"
        onSearch={value => this.handleSearch(value)}
        style={{ width: '100%' }}
    />
    <List
        itemLayout="horizontal"
        dataSource={this.state.topicListData}
        style={{height:'300px',overflow:'auto'}}
        renderItem={item => (
        <List.Item style={{cursor:'pointer'}} onClick={this.handleClick.bind(this,item.title)}>
            <List.Item.Meta
            avatar={<Avatar size={42} shape="square" src={item.img} />}
            title={item.title}
            description={<div>{item.followers}关注 {item.num}沸点</div>}
            />
        </List.Item>
        )}
    />
</div></code></pre> 
 <p>搜索框回车搜索事件：</p> 
 <pre><code>handleSearch=(value)=>{
    const list=[...this.state.storeListData];
    if(value!==''){
        const searchList=list.filter(item=>item.title.indexOf(value)>-1);
        this.setState({
            topicListData:searchList
        })
    }else{
        this.setState({
            topicListData:list
        })
    }
}</code></pre> 
 <p>话题列表点击事件：</p> 
 <pre><code>handleClick=(val)=>{
    this.props.handleTopic(val);
}</code></pre> 
 <p>这里向父组件传递了一个val代表当前点击话题，关于父子组件传值的相关说明前面文章做了介绍，这里不再赘述。</p> 
 <ul> 
  <li>已发表的话题列表</li> 
 </ul> 
 <p>使用ant-design的list组件实现</p> 
 <pre><code>render() {
    const IconText = ({ type, text,tag }) => (
        <span onClick={this.handleClick.bind(this,tag)}>
            <Icon type={type} style={{ marginRight: 8 }} />
            {text}
        </span>
    );
    const PopoverContent=(id)=>{
        return <p style={{cursor:'pointer'}} onClick={this.handleReport.bind(this,id)}>举报</p>
    }
    return (
        <div>
            <List
                itemLayout="vertical"
                size="large"
                dataSource={this.state.listData}
                renderItem={item => (
                <List.Item
                    key={item.author}
                    actions={
                        [
                            <IconText type="like" text={item.likeNum===0?'赞':item.likeNum} tag='like' />,
                            <IconText type="message" text={item.commentNum===0?'评论':item.commentNum} tag='comment' />,
                            <IconText type="share-alt" text="分享" tag='share' />
                        ]
                    }
                    extra={
                        <div>
                            {!item.isFollowed && <Button style={{borderColor:'#6cbd45',color:'#6cbd45'}} onClick={()=>this.handleFollow(item.id)}>{item.isFollowed?'已关注':'关注'}</Button>}
                            <Popover placement="bottom" content={<PopoverContent author={item.author} />} trigger="click">
                                <span style={{cursor:'pointer',margin:'10px'}}>...</span>
                            </Popover>
                        </div>
                    }
                >
                    <List.Item.Meta
                    // avatar={<Avatar size={45} src={item.avatar} />}
                    avatar={<Popover placement="top" content={<PersonalPop info={item} handleFollow={(id)=>this.handleFollow(id)} />}>
                                <Avatar size={45} src={item.avatar} />
                            </Popover>}
                    title={<Popover placement="top" content={<PersonalPop info={item} handleFollow={(id)=>this.handleFollow(id)} />}>
                                <span style={{cursor:'pointer'}}>{item.author}</span>
                            </Popover>}
                    description={<div><span>{item.description}</span><span style={{margin:'0 5px'}}>·</span><span>{timeUtil.getTimeAgo(item.editTime)}</span></div>}
                    />
                    {item.content}
                </List.Item>
                )}
            />
        </div>
    );
}</code></pre> 
 <p>用户头像鼠标滑过会出现详情，使用了popover组件，具体内容是单独抽离的一个PersonalPop组件。每一项根据isFollowed值判断是否显示关注按钮，如果没有关注，点击可关注。</p> 
 <ul> 
  <li>右侧内容</li> 
 </ul> 
 <p>右侧内容统一使用card组件实现，利用Redux获取登录用户信息。</p> 
 <pre><code>render() {
    const { Meta } = Card;
    return (
        <div className='dynamicSide'>
            <Card style={{ width: '100%' }} className='card1'>
                <Meta
                    avatar={<Avatar size={62} src={this.props.userImage} />}
                    title={this.props.userId}
                    description={this.props.userDesc}
                    />
                <div>
                    <ul>
                        <li>
                            <p className='liTitle'>沸点</p>
                            <p className='liNum'>{this.state.userInfo.topNum}</p>
                        </li>
                        <li>
                            <p className='liTitle'>关注</p>
                            <p className='liNum'>{this.state.userInfo.following}</p>
                        </li>
                        <li>
                            <p className='liTitle'>关注者</p>
                            <p className='liNum'>{this.state.userInfo.follower}</p>
                        </li>
                    </ul>
                </div>
            </Card>
            <Card
                title="你可能感兴趣的人"
                style={{ width: '100%' ,marginTop:'10px'}}
                className='card2'
                >
                <List
                    itemLayout="horizontal"
                    dataSource={this.state.interestList}
                    renderItem={item => (
                    <List.Item actions={[<Button>关注</Button>]}>
                        <List.Item.Meta
                            avatar={<Avatar size={40} src={item.userImage} />}
                            title={item.user}
                            description={item.desc}
                        />
                    </List.Item>
                    )}
                />
                <div className='user-recommend-footer' onClick={this.changeInterestList.bind(this)}>
                    <Icon type="sync" />换一批
                </div>
            </Card>
            <div style={{marginTop:'10px'}}>
                <TopicCard title='关注的话题' link='/topics' list={this.state.attentionTopic} />
            </div>
            <div style={{marginTop:'10px'}}>
                <TopicCard title='更多话题' link='/topics' list={this.state.allTopic} />
            </div>
        </div>
    );
}</code></pre> 
 <p>鉴于关注的话题和更多话题内容结构类似，故抽离为一个公用组件，且为函数式组件。</p> 
 <pre><code>function TopicCard({ title,list,link }){
    return (
        <Card
            title={title}
            extra={<a href={link} style={{color:'#007fff'}}>全部></a>}
            style={{ width: '100%' }}
            className='topicCard'
            >
            <List
                itemLayout="horizontal"
                dataSource={list}
                renderItem={item => (
                <List.Item>
                    <List.Item.Meta
                        avatar={<Avatar shape="square" size={40} src={item.userImage} />}
                        title={item.title}
                        description={<div style={{color:'#8a9aa9'}}><span>{item.followNum}关注</span>·<span>{item.hotNews}沸点</span></div>}
                    />
                </List.Item>
                )}
            />
        </Card>
    );
}</code></pre> 
 <blockquote>
   React组件可分为函数组件(Functional Component )和类组件(Class Component)，划分依据是根据组件的定义方式。函数组件使用函数定义组件，类组件使用ES6 class定义组件。 
 </blockquote> 
 <p>函数组件的写法要比类组件简洁，不过类组件比函数组件功能更强大。类组件可以维护自身的状态变量，即组件的state，类组件还有不同的生命周期方法，可以让我们能够在组件的不同阶段（挂载、更新、卸载）对组件做更多的控制，进行不同的操作。但函数组件的使用可以从思想上让你在设计组件时进行更多思考，更加关注逻辑控制和显示的分离，设计出更加合理的组件结构。实际操作中，当一个组件不需要管理自身状态时，可以把它设计成函数组件，当你有足够的理由发现它需要“升级”为类组件时，再把它改造为类组件。因为函数组件“升级”为类组件是有一定成本的，这样就会要求你做这个改造前更认真地思考其合理性，而不是仅仅为了一时的方便就使用类组件。</p> 
 <h2>话题页</h2> 
 <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/72f091f3056c4fdea33f991c24f46776.jpg" target="_blank"><img alt="使用React构建精简版本掘金（四）_第3张图片" title="" src="http://img.e-com-net.com/image/info9/72f091f3056c4fdea33f991c24f46776.jpg" width="650" height="444" style="border:1px solid black;"></a></span><br>同样适用函数式组件</p> 
 <pre><code>function TopicItem({item,showCount}){
    const {id,topicName,topicImage,topicCount,followedNum,topicNum,isFollowed}=item;
    return (
        <div className='topicItem'>
            <Badge count={showCount?topicCount:0} overflowCount={999}>
                <Avatar shape="square" size={72} src={topicImage} />
            </Badge>
            <div style={{marginLeft:'15px'}}>
                <div>
                    <NavLink to={`/topic/${id}`}>{topicName}</NavLink>
                </div>
                <div style={{color:'#8a9aa9',marginTop:'5px'}}>
                    <span>{followedNum}关注</span>·
                    <span>{topicNum}沸点</span>
                </div>
                <div className={isFollowed?'hasFollowed':'noFollow'}>
                    {isFollowed?'已关注':'+关注'}
                </div>
            </div>
        </div>
    );
}</code></pre> 
 <p>关注的话题数据其实是全部话题的子集，在父页面调用的时候根据数据中的isFollowed属性进行一次筛选。</p> 
 <pre><code>componentDidMount(){
    const list=[...this.state.allTopicList];
    const followedTopicList=list.filter(item=>item.isFollowed);
    this.setState({
        followedTopic:[...followedTopicList]
    })
}</code></pre> 
 <h2>小册页</h2> 
 <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/d3768d8ff762405092bbbaeaa8156225.jpg" target="_blank"><img alt="使用React构建精简版本掘金（四）_第4张图片" title="" src="http://img.e-com-net.com/image/info9/d3768d8ff762405092bbbaeaa8156225.jpg" width="650" height="360" style="border:1px solid black;"></a></span></p> 
 <ul> 
  <li>头部的导航</li> 
 </ul> 
 <pre><code>function TopNav({tags,changeLink}){
    return (
        <ul>
            {tags.map((item,index)=>{
                return <li key={item.path} onClick={()=>changeLink(item.path)}>
                    <NavLink to={`/books${item.path}`}>{item.text}</NavLink>
                </li>
            })}
        </ul>
    )
}</code></pre> 
 <ul> 
  <li>小册列表</li> 
 </ul> 
 <p>使用ant-design中的list组件进行基本布局</p> 
 <pre><code>render() {
    return (
        <div>
            <List
                size="large"
                bordered
                dataSource={this.state.bookList}
                renderItem={item => (
                    <List.Item className='bookList' onClick={()=>this.showInfo(item.bookId)}>
                        <img alt='books' src={item.img} />
                        <div>
                            <div style={{color:'#000',fontSize:'20px',fontWeight:400}}>
                                {item.isPresell && <span className="presale">预售</span> }
                                <span className='bookName'>{item.name}</span>
                            </div>
                            <div className='bookDesc'>{item.desc}</div>
                            <div className='bookAuthor'>
                                <NavLink to={`/user/:${item.userId}`}>
                                    <Avatar size={26} src={item.userImage} />
                                    <span style={{color:'#000',marginLeft:'5px'}}>{item.author}</span>
                                </NavLink>
                                <span style={{color:'#71777c',margin:'0 10px',whiteSpace:'nowrap',overflow:'hidden'}}>{item.selfDesc}</span>
                            </div>
                            <div className='other'>
                                {item.isBuy?<span className='bought'>已购买</span>:<span className='price'>￥{item.price}</span>}
                                <span className='message'>{item.chapterNum}小节</span>
                                {item.isBuy && <span className='message'>阅读时长{item.readTime}分</span>}
                                <span className='message'>{item.purchaseNum}购买</span>
                            </div>
                        </div>
                    </List.Item>
                )}
            />
        </div>
    );
}</code></pre> 
 <p>会根据属性是否预售isPresell和是否已经购买isBuy来判断显示不同内容。</p> 
 <h2>相关文章</h2> 
 <ul> 
  <li>使用React构建精简版本掘金（一）</li> 
  <li>使用React构建精简版本掘金（二）</li> 
  <li>使用React构建精简版本掘金（三）</li> 
 </ul> 
 <p>相关详细代码可查看github,不要忘了star哦！工作中主要是以vue作为主要技术栈，这是第一次使用React+React-router+Redux来构建项目，不足之处还请大家多多包涵。 </p> 
 <p><strong>金三已过，银四会是什么样子呢？</strong></p> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1175112755989000192"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(react.js)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1830646621059248128.htm"
                           title="react.js" target="_blank">react.js</a>
                        <span class="text-muted">涔溪</span>
<a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
                        <div>一、create-react-app全局安装create-react-app$npminstall-gcreate-react-app创建一个项目$create-react-appyour-app注意命名方式CreatinganewReactappin/dir/your-app.Installingpackages.Thismighttakeacoupleofminutes.安装过程较慢，Inst</div>
                    </li>
                    <li><a href="/article/1828080032459878400.htm"
                           title="React.js如何使用Bootstrap" target="_blank">React.js如何使用Bootstrap</a>
                        <span class="text-muted">Vesper63</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>在React.js项目中使用Bootstrap有多种方法，主要包括直接引入BootstrapCSS文件和使用ReactBootstrap库。下面将详细介绍这两种方法。方法一：直接引入BootstrapCSS文件这是最简单的方式，只需在项目中引入Bootstrap的CSS文件即可。安装Bootstrap：你可以通过npm或yarn安装Bootstrap：npminstallbootstrap或者：y</div>
                    </li>
                    <li><a href="/article/1759950762793857024.htm"
                           title="react起源" target="_blank">react起源</a>
                        <span class="text-muted">lemmo</span>

                        <div>简介React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（"dataflowsdown"）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。它由Facebook、Instagra</div>
                    </li>
                    <li><a href="/article/1759892840671965184.htm"
                           title="2024前端面试准备之uniapp篇" target="_blank">2024前端面试准备之uniapp篇</a>
                        <span class="text-muted">前端fighter</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>全文链接！！！！！！！1.UniApp和其他跨平台框架（如ReactNative、Flutter）有什么区别？语言和技术栈：UniApp使用Vue.js作为开发语言和技术栈，而ReactNative使用React.js，Flutter使用Dart语言。开发者可以根据自己的技术背景和偏好选择合适的框架。性能和体验：UniApp的性能和用户体验相对较好，因为它使用原生渲染技术，可以实现更接近原生应用的</div>
                    </li>
                    <li><a href="/article/1759629324341833728.htm"
                           title="快速创建react项目." target="_blank">快速创建react项目.</a>
                        <span class="text-muted">River_tong</span>

                        <div>react简介说起react，我相信大家都对它有一定的了解，react目前是前端界非常流行的一个框架了，react它产生了很多相关的技术，比如：我们常说的react.js，我们可以用react语法来编写一些网页版应用，reactnative这门技术使得我们可以用react语法来编写原生应用，reactVR可以借助react的语法来编写一些VR相关的应用或者说全景视图这样的应用。react开发环境搭</div>
                    </li>
                    <li><a href="/article/1759403284218589184.htm"
                           title="Vue前端】vue使用笔记0基础到高手第2篇：Vue进阶知识点介绍（附代码，已分享）" target="_blank">Vue前端】vue使用笔记0基础到高手第2篇：Vue进阶知识点介绍（附代码，已分享）</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/vim%E5%89%8D%E7%AB%AF/1.htm">vim前端</a>
                        <div>本系列文章md笔记（已分享）主要讨论vue相关知识。Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js是一个构建数据驱动的web界面的渐进式框架，Vue.js的目标是通过尽可能简单的API实</div>
                    </li>
                    <li><a href="/article/1759401029595639808.htm"
                           title="Vue 与 React 比较，十年恩怨情仇整理" target="_blank">Vue 与 React 比较，十年恩怨情仇整理</a>
                        <span class="text-muted"></span>

                        <div>过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V</div>
                    </li>
                    <li><a href="/article/1757098127510224896.htm"
                           title="什么是VUE？" target="_blank">什么是VUE？</a>
                        <span class="text-muted">最爱喝龙井</span>

                        <div>什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整</div>
                    </li>
                    <li><a href="/article/1756897967672934400.htm"
                           title="常见的web前端开发框架：Bootstrap" target="_blank">常见的web前端开发框架：Bootstrap</a>
                        <span class="text-muted">钟念</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Bootstrap框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Bootstrap基本概念：Bo</div>
                    </li>
                    <li><a href="/article/1756897968931225600.htm"
                           title="常见的web前端开发框架：Vue.js" target="_blank">常见的web前端开发框架：Vue.js</a>
                        <span class="text-muted">钟念</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Vue.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Vue.js基本概念：Vue.js是一</div>
                    </li>
                    <li><a href="/article/1756897969937858560.htm"
                           title="常见的web前端开发框架：React.js" target="_blank">常见的web前端开发框架：React.js</a>
                        <span class="text-muted">钟念</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对React.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。React.jsReact.js是</div>
                    </li>
                    <li><a href="/article/1756897837745979392.htm"
                           title="常见的web前端开发框架：Angular.js" target="_blank">常见的web前端开发框架：Angular.js</a>
                        <span class="text-muted">钟念</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                        <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Angular.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Angular.js基本概念：</div>
                    </li>
                    <li><a href="/article/1756617175155621888.htm"
                           title="Vue 与 React 比较，十年恩怨情仇整理" target="_blank">Vue 与 React 比较，十年恩怨情仇整理</a>
                        <span class="text-muted"></span>

                        <div>过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V</div>
                    </li>
                    <li><a href="/article/1755191676357328896.htm"
                           title="新书速览 | React.js+Node.js+MongoDB企业级全栈开发实践" target="_blank">新书速览 | React.js+Node.js+MongoDB企业级全栈开发实践</a>
                        <span class="text-muted">全栈开发圈</span>
<a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
                        <div>详解React.js全家桶及其结合Node.js、MongoDB进行全栈开发的方法实战企业级应用系统项目开发本书内容本书系统介绍Web应用全栈开发技术，通过一个真实的企业项目，讲解如何使用React全家桶以及Node.js、MongoDB进行全栈开发，帮助开发人员快速积累开发经验，全面掌握开发技巧。读完本书相当于真实参与一个完整的全栈项目开发。本书配套示例项目源代码。本书共分27章，内容包括开发环</div>
                    </li>
                    <li><a href="/article/1754735265894645760.htm"
                           title="React 与 Angular：项目的最佳框架" target="_blank">React 与 Angular：项目的最佳框架</a>
                        <span class="text-muted">千源万码</span>
<a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>什么是React？React或React.js是一个基于JavaScript的前端库，可帮助创建用户界面(UI)。它以声明式编程风格描绘UI状态。通过React，程序员可以掌握应用程序在开发后将如何呈现给用户以及他们将如何与用户交互。尽管React以开发Web应用程序而闻名，但它也有助于构建移动应用程序和本机呈现的应用程序。Facebook、Instagram、Netflix和纽约时报等全球公司在</div>
                    </li>
                    <li><a href="/article/1754340238215364608.htm"
                           title="web 技术栈有哪些？" target="_blank">web 技术栈有哪些？</a>
                        <span class="text-muted">老马啸西风</span>
<a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>前端技术栈：HTML（超文本标记语言）：用于创建网页结构的标记语言，定义页面的内容和结构。CSS（层叠样式表）：用于设计和排版网页的样式表语言，负责页面的外观和样式。JavaScript：一种脚本语言，用于在浏览器中实现动态交互和客户端逻辑。常用的前端框架和库如React、Vue、Angular等，可以加速开发。前端框架和库：React.js、Vue.js、Angular等，用于简化和加速前端开发</div>
                    </li>
                    <li><a href="/article/1754304108208078848.htm"
                           title="DataBinding使用详解-Google官方的视图绑定" target="_blank">DataBinding使用详解-Google官方的视图绑定</a>
                        <span class="text-muted">ZhangQiang-</span>
<a class="tag" taget="_blank" href="/search/%5BAndroid%E8%BF%9B%E9%98%B6%5D/1.htm">[Android进阶]</a>
                        <div>几年前，数据绑定在便已在前端界风生水起，Angular.js、React.js、vue.js等热门前端框架都具备这种能力。Android端的开源库butterknife/Anotation/dragger2等等也非常好用且广受支持;数据绑定简单来说，就是通过某种机制，把代码中的数据和xml(UI)绑定起来，双方都能对数据进行操作，并且在数据发生变化的时候，自动刷新数据。在2015年的谷歌IO大会上</div>
                    </li>
                    <li><a href="/article/1754135698736168960.htm"
                           title="LLM应用开发与落地：使用gradio十分钟搭建聊天UI" target="_blank">LLM应用开发与落地：使用gradio十分钟搭建聊天UI</a>
                        <span class="text-muted">前行的七哥</span>
<a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                        <div>一、背景如果你是做LLM应用开发的，特别是做后端开发，你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中，毕竟react.js,next.js,css,html也不是每个人都那么熟练，对吧？即使你是做前端开发的，你也可以尝试一下Gradio，哪天有人给你提了一个调试界面的需求，原本要半天的工作现在只需要十分钟了，多余的时机用来学习或享受生活，多美（或</div>
                    </li>
                    <li><a href="/article/1753035361233158144.htm"
                           title="通过 React 来构建界面" target="_blank">通过 React 来构建界面</a>
                        <span class="text-muted">张培跃吧</span>
<a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>1-通过React来构建界面第1步：下载所需要的二个库文件至本地，如果需要加载指定版本的react和react-dom，可以把18替换成所需加载的版本号。react.js：React中的核心库文件。//开发版https://unpkg.com/react@18/umd/react.development.js//生产版https://unpkg.com/react@18/umd/react.pro</div>
                    </li>
                    <li><a href="/article/1752156807041662976.htm"
                           title="如何在 React 中使用 Sass" target="_blank">如何在 React 中使用 Sass</a>
                        <span class="text-muted">网络研究院</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%A0%94%E7%A9%B6%E9%99%A2/1.htm">网络研究院</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a>
                        <div>Sass（语法很棒的样式表）是CSS的扩展，具有使其更强大的附加功能。Sass最好的一点是它与CSS的兼容性，这意味着您可以在Web开发项目中使用React等JavaScript框架。然而，与普通CSS不同，您需要进行一些设置才能使用Sass。通过设置一个简单的React.js项目并将Sass与其集成来了解其工作原理。如何在React.js项目中使用Sass与其他CSS处理器一样，React本身并</div>
                    </li>
                    <li><a href="/article/1751983156120010752.htm"
                           title="js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡" target="_blank">js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡</a>
                        <span class="text-muted">weixin_39610774</span>
<a class="tag" taget="_blank" href="/search/js%E8%8E%B7%E5%8F%96%E4%BB%8A%E5%A4%A9%E5%89%A9%E4%BD%99%E6%97%B6%E9%97%B4/1.htm">js获取今天剩余时间</a><a class="tag" taget="_blank" href="/search/%E7%94%A8/1.htm">用</a><a class="tag" taget="_blank" href="/search/js%E5%88%A4%E6%96%AD/1.htm">js判断</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E4%B8%AA%E6%95%B0%E6%98%AF%E5%90%A6%E6%98%AF%E7%B4%A0%E6%95%B0%28%E8%B4%A8%E6%95%B0%29/1.htm">一个数是否是素数(质数)</a>
                        <div>React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网</div>
                    </li>
                    <li><a href="/article/1751982897977376768.htm"
                           title="前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡" target="_blank">前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡</a>
                        <span class="text-muted">蓝桥云课</span>
<a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</a>
                        <div>React.js是现今前端最火的应用框架之一，而**Next.js正是React.js领域最优秀的服务端渲染框架之一。**基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI</div>
                    </li>
                    <li><a href="/article/1751982513158373376.htm"
                           title="【前端教程】手把手教你用 Next.js 搭建个人博客，从入门到吃鸡！" target="_blank">【前端教程】手把手教你用 Next.js 搭建个人博客，从入门到吃鸡！</a>
                        <span class="text-muted">实验楼v</span>

                        <div>React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网</div>
                    </li>
                    <li><a href="/article/1750115808266174464.htm"
                           title="React-9：通过路由实现排序切换" target="_blank">React-9：通过路由实现排序切换</a>
                        <span class="text-muted">kino2046</span>

                        <div>queryString（查询字符串）通常我们把URL`?`后面的内容称为queryString，在React.js中，我们可以通过`this.props.location.search`来获取，它的值是字符串，格式为：?k1=v1&k2=v2，为了方便操作，我们把它转成对象形式URLSearchParams在原生JJavaScript中内置了一个URLSearchParams的类，我们通过它可以很</div>
                    </li>
                    <li><a href="/article/1749663567096856576.htm"
                           title="构建高效外卖系统：技术实践与代码示例" target="_blank">构建高效外卖系统：技术实践与代码示例</a>
                        <span class="text-muted">万岳科技系统开发</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>外卖系统在现代社会中扮演着重要的角色，为用户提供了便捷的用餐解决方案。在这篇文章中，我们将探讨构建高效外卖系统的技术实践，同时提供一些基础的代码示例，帮助开发者更好地理解和应用这些技术。1.技术栈选择构建外卖系统首先需要选择合适的技术栈。以下是一个简单的技术栈示例：前端：React.js后端：Node.js数据库：MongoDB实时通信：WebSocket云服务：AWS或Azure2.用户认证与授</div>
                    </li>
                    <li><a href="/article/1749324305847566336.htm"
                           title="React.js快速入门教程" target="_blank">React.js快速入门教程</a>
                        <span class="text-muted">heiyay</span>
<a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
                        <div>介绍React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。React.js的特点1.声明式设计−React采用声明范式，可以轻松描述应用。2.高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活−React可以与已知的库或框架很好地配合。4.JSX−JSX是J</div>
                    </li>
                    <li><a href="/article/1747414643418087424.htm"
                           title="useRef钩子大法好！" target="_blank">useRef钩子大法好！</a>
                        <span class="text-muted">今天也想MK代码</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>在React.js中，useRef是一个钩子，允许你创建一个对元素或值的可变引用。与useState钩子不同，更新useRef不会触发组件的重新渲染。它通常用于直接访问和管理DOM元素，存储持久值，或处理不应触发重新渲染的值。useRef的基本语法如下：constrefContainer=useRef(initialValue);useRef的主要用途1.访问DOM元素useRef的一个最常见的用</div>
                    </li>
                    <li><a href="/article/1746103789431046144.htm"
                           title="Vue.js 学习Day1" target="_blank">Vue.js 学习Day1</a>
                        <span class="text-muted">cf6d95617c55</span>

                        <div>Vue.js-Day1课程介绍前5天：都在学习Vue基本的语法和概念；打包工具Webpack,Gulp后5天：以项目驱动教学；什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js</div>
                    </li>
                    <li><a href="/article/1745787485834723328.htm"
                           title="【React.js 06】Redux基础知识" target="_blank">【React.js 06】Redux基础知识</a>
                        <span class="text-muted">IUVO</span>

                        <div>Redux是一个专注于状态管理的库，和React是解耦的，用Angular和Vue都可以使用Redux。其具有一个单一状态，单向数据流的特性。Redux概念redux有一个store，记录所有的state，state要改变的时候，就通知dispatch去执行action，reducer拿到state和action去生成新的state，store.subscribe根据新的state重新渲染出改变后</div>
                    </li>
                    <li><a href="/article/1744937354797268992.htm"
                           title="前端八股文系列（七） React 面试专题" target="_blank">前端八股文系列（七） React 面试专题</a>
                        <span class="text-muted">微莱羽墨</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>文章目录React面试专题React.js是MVVM框架吗?hooks用过吗？聊聊react中class组件和函数组件的区别React组件通信方式1）父组件向子组件通信2）子组件向父组件通信3）跨级组件通信4）非嵌套关系的组件通信setState既存在异步情况也存在同步情况生命周期说一下react-fiber1）背景2）实现原理Portals何时要使用异步组件？如和使用异步组件React事件绑定原</div>
                    </li>
                                <li><a href="/article/32.htm"
                                       title="对于规范和实现，你会混淆吗？" target="_blank">对于规范和实现，你会混淆吗？</a>
                                    <span class="text-muted">yangshangchuan</span>
<a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a>
                                    <div>昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： 
 
 JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So</div>
                                </li>
                                <li><a href="/article/159.htm"
                                       title="android 网络" target="_blank">android 网络</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                                    <div>android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来  方便查找   ,  服务器使用的是TomCat 
  
服务器代码;  servlet的使用需要在xml中注册 
package servlet;

import java.io.IOException;
import java.util.Arr</div>
                                </li>
                                <li><a href="/article/286.htm"
                                       title="[读书笔记]读法拉第传" target="_blank">[读书笔记]读法拉第传</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a>
                                    <div> 
 
      1831年的时候,一年可以赚到1000英镑的人..应该很少的... 
 
      要成为一个科学家,没有足够的资金支持,很多实验都无法完成 
 
      但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......</div>
                                </li>
                                <li><a href="/article/413.htm"
                                       title="随机数的产生" target="_blank">随机数的产生</a>
                                    <span class="text-muted">沐刃青蛟</span>
<a class="tag" taget="_blank" href="/search/%E9%9A%8F%E6%9C%BA%E6%95%B0/1.htm">随机数</a>
                                    <div>c++中阐述随机数的方法有两种： 
  
一是产生假随机数（不管操作多少次，所产生的数都不会改变） 
  
       这类随机数是使用了默认的种子值产生的，所以每次都是一样的。 
  
	//默认种子
	for (int i = 0; i < 5; i++)
	{
		cout<<</div>
                                </li>
                                <li><a href="/article/540.htm"
                                       title="PHP检测函数所在的文件名" target="_blank">PHP检测函数所在的文件名</a>
                                    <span class="text-muted">IT独行者</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a>
                                    <div>很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 
代码： 
     
[php]   
view plain 
copy    
 
 // Filename: functions.php    
 <?php&nbs</div>
                                </li>
                                <li><a href="/article/667.htm"
                                       title="银行各系统功能简介" target="_blank">银行各系统功能简介</a>
                                    <span class="text-muted">文强chu</span>
<a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a>
                                    <div>银行各系统功能简介     　   业务系统   核心业务系统     业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等       清分清算系统     以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程       国际结算系</div>
                                </li>
                                <li><a href="/article/794.htm"
                                       title="Python学习1(pip django 安装以及第一个project)" target="_blank">Python学习1(pip django 安装以及第一个project)</a>
                                    <span class="text-muted">小桔子</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/pip/1.htm">pip</a>
                                    <div>    最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！ 
第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 
第二部：解压这个压缩文件，会看到一个setup.p</div>
                                </li>
                                <li><a href="/article/921.htm"
                                       title="php 数组" target="_blank">php 数组</a>
                                    <span class="text-muted">aichenglong</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF/1.htm">循环</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">多维数组</a>
                                    <div>1 php中的创建数组 
 $product = array('tires','oil','spark');//array()实际上是语言结构而不  是函数 
2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 
 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 
 $numbers=range(1,10,</div>
                                </li>
                                <li><a href="/article/1048.htm"
                                       title="安装python2.7" target="_blank">安装python2.7</a>
                                    <span class="text-muted">AILIKES</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                                    <div>安装python2.7 
1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 
2、复制解压 
#mkdir -p /opt/usr/python 
#cp  /opt/soft/Python-2</div>
                                </li>
                                <li><a href="/article/1175.htm"
                                       title="java异常的处理探讨" target="_blank">java异常的处理探讨</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/JAVA%E5%BC%82%E5%B8%B8/1.htm">JAVA异常</a>
                                    <div>//java异常  
/* 
1，了解java 中的异常处理机制，有三种操作 
a,声明异常  
b,抛出异常  
c,捕获异常 
2，学会使用try-catch-finally来处理异常 
3，学会如何声明异常和抛出异常 
4，学会创建自己的异常 
  
*/ 
  
//2，学会使用try-catch-finally来处理异常 
  </div>
                                </li>
                                <li><a href="/article/1302.htm"
                                       title="getElementsByName实例" target="_blank">getElementsByName实例</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/element/1.htm">element</a>
                                    <div>实例1： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/x</div>
                                </li>
                                <li><a href="/article/1429.htm"
                                       title="探索JUnit4扩展：Runner" target="_blank">探索JUnit4扩展：Runner</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a>
                                    <div>        参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。 
        文章地址：http://www.blogjava.net/jiangshachina/archive/20</div>
                                </li>
                                <li><a href="/article/1556.htm"
                                       title="[MongoDB学习笔记二]MongoDB副本集" target="_blank">[MongoDB学习笔记二]MongoDB副本集</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
                                    <div>1. 副本集的特性 
  1)一台主服务器(Primary),多台从服务器(Secondary) 
  2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作 
  3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来 
  
2</div>
                                </li>
                                <li><a href="/article/1683.htm"
                                       title="【Spark八十一】Hive in the spark assembly" target="_blank">【Spark八十一】Hive in the spark assembly</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a>
                                    <div>Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 
 
  1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)</div>
                                </li>
                                <li><a href="/article/1810.htm"
                                       title="Nginx问题定位之监控进程异常退出" target="_blank">Nginx问题定位之监控进程异常退出</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 
1. 在error.log中查看是否有signal项，如果有，看看signal是多少。 
比如，这是一个异常退出的情况： 
$grep signal error.log

2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s</div>
                                </li>
                                <li><a href="/article/1937.htm"
                                       title="No grammar constraints (DTD or XML schema).....两种解决方法" target="_blank">No grammar constraints (DTD or XML schema).....两种解决方法</a>
                                    <span class="text-muted">byalias</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
                                    <div>方法一：常用方法   关闭XML验证 
工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 
 
方法二：（个人推荐） 
添加 内容如下 
<?xml version=</div>
                                </li>
                                <li><a href="/article/2064.htm"
                                       title="Netty源码学习-DefaultChannelPipeline" target="_blank">Netty源码学习-DefaultChannelPipeline</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a>
                                    <div>package com.ljn.channel;

/**
 * ChannelPipeline采用的是Intercepting Filter 模式
 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现
 * 
 * 下面对ChannelPipeline作一个模拟，只模拟关键代码：
 */
public class Pipeline {
 </div>
                                </li>
                                <li><a href="/article/2191.htm"
                                       title="MYSQL数据库常用备份及恢复语句" target="_blank">MYSQL数据库常用备份及恢复语句</a>
                                    <span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>  
备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 
mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 
 
备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 
mysqldump -–add-drop-table -uusername -ppassword databasename > ba</div>
                                </li>
                                <li><a href="/article/2318.htm"
                                       title="小白谈谈云计算--基于Google三大论文" target="_blank">小白谈谈云计算--基于Google三大论文</a>
                                    <span class="text-muted">CrazyMizzz</span>
<a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/GFS/1.htm">GFS</a>
                                    <div>    之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。 
    我先说说GFS 
  &n</div>
                                </li>
                                <li><a href="/article/2445.htm"
                                       title="hadoop 平衡空间设置方法" target="_blank">hadoop 平衡空间设置方法</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/balancer/1.htm">balancer</a>
                                    <div>在hdfs-site.xml中增加设置balance的带宽，默认只有1M： 
<property> 
  <name>dfs.balance.bandwidthPerSec</name> 
    <value>10485760</value> 
    <description&g</div>
                                </li>
                                <li><a href="/article/2572.htm"
                                       title="Eclipse程序员要掌握的常用快捷键" target="_blank">Eclipse程序员要掌握的常用快捷键</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a>
                                    <div>   判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。   曾有人在豆瓣评
《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个
程序员图书列表，目的也就是通过读书，让程序员变懒。     程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得</div>
                                </li>
                                <li><a href="/article/2699.htm"
                                       title="Android学习之路" target="_blank">Android学习之路</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Android%E5%AD%A6%E4%B9%A0/1.htm">Android学习</a>
                                    <div>转自：http://blog.csdn.net/ryantang03/article/details/6901459 
以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。 
下面说说我学习Android的感受，我学Android首先是看MARS的视</div>
                                </li>
                                <li><a href="/article/2826.htm"
                                       title="java 遍历Map的四种方法" target="_blank">java 遍历Map的四种方法</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HashMap/1.htm">HashMap</a><a class="tag" taget="_blank" href="/search/java+%E9%81%8D%E5%8E%86Map%E7%9A%84%E5%9B%9B%E7%A7%8D%E6%96%B9%E6%B3%95/1.htm">java 遍历Map的四种方法</a>
                                    <div>转载请出自出处： 
http://eksliang.iteye.com/blog/2059996 
 
package com.ickes;

import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;
/**
 * 遍历Map的四种方式
</div>
                                </li>
                                <li><a href="/article/2953.htm"
                                       title="【精典】数据库相关相关" target="_blank">【精典】数据库相关相关</a>
                                    <span class="text-muted">gengzg</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                                    <div>package C3P0; 
import java.sql.Connection; 
import java.sql.SQLException; 
import java.beans.PropertyVetoException; 
import com.mchange.v2.c3p0.ComboPooledDataSource; 
public class DBPool{       </div>
                                </li>
                                <li><a href="/article/3080.htm"
                                       title="自动补全" target="_blank">自动补全</a>
                                    <span class="text-muted">huyana_town</span>
<a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8/1.htm">自动补全</a>
                                    <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo</div>
                                </li>
                                <li><a href="/article/3207.htm"
                                       title="jquery在线预览PDF文件，打开PDF文件" target="_blank">jquery在线预览PDF文件，打开PDF文件</a>
                                    <span class="text-muted">天梯梦</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
                                    <div>最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。 
  
核心代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.</div>
                                </li>
                                <li><a href="/article/3334.htm"
                                       title="ViewPager刷新单个页面的方法" target="_blank">ViewPager刷新单个页面的方法</a>
                                    <span class="text-muted">lovelease</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/viewpager/1.htm">viewpager</a><a class="tag" taget="_blank" href="/search/tag/1.htm">tag</a><a class="tag" taget="_blank" href="/search/%E5%88%B7%E6%96%B0/1.htm">刷新</a>
                                    <div>  使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面</div>
                                </li>
                                <li><a href="/article/3461.htm"
                                       title="利用按位取反（~）从复合枚举值里清除枚举值" target="_blank">利用按位取反（~）从复合枚举值里清除枚举值</a>
                                    <span class="text-muted">草料场</span>
<a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a>
                                    <div>以 C# 中的 System.Drawing.FontStyle 为例。  
  
如果需要同时有多种效果， 
如：“粗体”和“下划线”的效果，可以用按位或（|） 
FontStyle style = FontStyle.Bold | FontStyle.Underline; 
  
如果需要去除 style 里的某一种效果， </div>
                                </li>
                                <li><a href="/article/3588.htm"
                                       title="Linux系统新手学习的11点建议" target="_blank">Linux系统新手学习的11点建议</a>
                                    <span class="text-muted">刘星宇</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a>
                                    <div>　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。 
 
　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu</div>
                                </li>
                                <li><a href="/article/3715.htm"
                                       title="hibernate dao层应用之HibernateDaoSupport二次封装" target="_blank">hibernate dao层应用之HibernateDaoSupport二次封装</a>
                                    <span class="text-muted">wangzhezichuan</span>
<a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a>
                                    <div>/** 
 * <p>方法描述:sql语句查询 返回List<Class> </p> 
 * <p>方法备注: Class 只能是自定义类 </p> 
 * @param calzz 
 * @param sql 
 * @return 
 * <p>创建人：王川</p> 
 * <p>创建时间：Jul</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>