• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • 如何使用React和Firebase創建Reddit克隆

    反應是一個真棒的JavaScript庫,用于構建用戶界面。 由于出版創建應用程序做出反應 ,已經變得非常容易腳手架準系統作出反應的應用程序。

    在這篇文章中,我們將使用火力地堡沿創建應用程序做出反應,以建立一個應用程序,將功能類似于reddit的 它將允許用戶提交,然后可以進行表決一個新的鏈接。

    這里有一個現場演示了我們會建設。

    發明家放置火力心臟成機器人創作

    為什么火力地堡?

    使用火力地堡將使它很容易為我們展現實時數據給用戶。 一旦用戶投票的鏈接,反饋會瞬間。 火力地堡的實時數據庫將幫助我們在開發這一功能。 此外,它將幫助我們了解如何啟動一個應用程序做出反應與火力地堡。

    為什么反應是?

    反應是特別已知用于使用組件架構創建用戶界面。 各組分可含有內部狀態或傳遞數據作為道具 國家和道具都在陣營最重要的兩個概念。 這兩件事情幫助我們確定在任何時間點我們的應用程序的狀態。 如果你不熟悉這些術語,請頭部到做出反應的文檔第一。

    注意:您還可以使用類似的狀態容器終極版MobX ,但是為了簡單起見,我們將不會使用本教程之一。

    整個工程可在GitHub上

    設置項目

    讓我們通過以下步驟來建立我們的項目結構和任何必要的依賴。

    安裝創建反應的應用程序內

    如果你還沒有,你需要安裝創建反應的應用程序內 要做到這一點,你可以輸入你的終端如下:

     npm install -g create-react-app
     

    一旦你已經在全球范圍安裝了它,你可以用它來腳手架一個陣營項目中的任何文件夾內。

    現在,讓我們創建一個新的應用程序,并把它稱為reddit添加克隆

     create-react-app reddit-clone
     

    這將腳手架的reddit的克隆文件夾內新創造反應的應用程序內的項目。 一旦引導完成后,我們可以去里面reddit的克隆目錄和火起來的開發服務器:

     npm start
     

    在這一點上,你可以到HTTP://本地主機:3000 / ,看看您的應用程序骨架正常運行。

    構建應用程序

    對于保養,我總是喜歡我的分離容器組件 容器是包含我們的應用程序的業務邏輯和管理Ajax請求的智能組件。 組件是簡單的啞表象的成分。 它們都可以有自己的內部狀態,其可用于控制組件的邏輯(例如示出的當前狀態控制輸入分量)。

    去除不必要的標識和CSS文件后,這是你的應用程序應該如何現在看起來。 我們創建了一個components文件夾和一個containers文件夾。 讓我們繼續前進App.js內部containers/App文件夾中,并創建registerServiceWorker.js內部utils文件夾。

    構建應用程序

    src/containers/App/index.js文件應該是這樣的:

     // src/containers/App/index.js
    
    import React, { Component } from 'react';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            Hello World
          </div>
        );
      }
    }
    
    export default App;
     

    src/index.js文件應該是這樣的:

     // src/index.js
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './containers/App';
    import registerServiceWorker from './utils/registerServiceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    registerServiceWorker();
     

    轉到您的瀏覽器,如果一切正常,你會看到屏幕上的Hello World。

    您可以檢查我的承諾在GitHub上。

    添加反應過來路由器

    反應路由器將幫助我們定義我們的應用程序的路由。 這是非常定制,非常流行的生態系統做出反應。

    我們將使用反應路由器3.0.0版本。

     npm install --save [email protected]
     

    現在,添加一個新的文件routes.js內部src用下面的代碼文件夾:

     // routes.js
    
    import React from 'react';
    import { Router, Route } from 'react-router';
    
    import App from './containers/App';
    
    const Routes = (props) => (
      <Router {...props}>
        <Route path="/" component={ App }>
        </Route>
      </Router>
    );
    
    export default Routes;
     

    Router組件封裝了所有的Route組件。 基于該path的道具的Route分量,傳遞給組件component道具將在頁面上呈現。 在這里,我們正在設置的根URL( / )來加載我們的App使用組件Router組件。

     <Router {...props}>
      <Route path="/" component={ <div>Hello World!</div> }>
      </Route>
    </Router>
     

    上面的代碼也是有效的。 對于路徑/時, <div>Hello World!</div>將被安裝。

    現在,我們需要調用我們的routes.js從我們的文件src/index.js文件。 該文件應具有以下內容:

     // src/index.js
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { browserHistory } from 'react-router';
    
    import App from './containers/App';
    import Routes from './routes';
    import registerServiceWorker from './utils/registerServiceWorker';
    
    ReactDOM.render(
      <Routes history={browserHistory} />,
      document.getElementById('root')
    );
    
    registerServiceWorker();
     

    基本上,我們安裝了Router ,從我們的組件routes.js文件。 我們通過在history道具也讓路由知道如何處理歷史跟蹤

    您可以檢查我的承諾在GitHub上。

    添加火力地堡

    如果你沒有一個火力地堡帳戶,通過將他們的網站現在創建一個(這是免費的!)。 大功告成創建新帳戶后,登錄到您的帳戶并轉到控制臺頁面,點擊添加項目

    輸入項目名稱(我會打電話給我的reddit的克隆 ),選擇您所在的國家,然后點擊創建項目按鈕。

    現在,在我們開始之前,我們需要改變的規則數據庫因為默認情況下,火力地堡希望用戶進行身份驗證,以便能夠讀取和寫入數據。 如果您選擇的項目,然后點擊左側的數據庫選項卡上,你就可以看到你的數據庫。 您需要點擊,將我們重定向到這將有下列數據的屏幕頂部的規則選項卡上:

     {
      "rules": {
        ".read": "auth != null",
        ".write": "auth != null"
      }
    }
     

    我們需要這種更改為以下:

     {
      "rules": {
        ".read": "auth === null",
        ".write": "auth === null"
      }
    }
     

    這將讓用戶無需登錄更新數據庫。如果我們實現了我們在其中有認證進行更新到數據庫之前,我們需要通過火力地堡提供的默認規則的流動。 為了使這個應用程序簡單,我們不會做認證。

    重要提示:如果不進行此修改,火力地堡不會讓你從更新您的應用程序數據庫。

    現在,讓我們在添加firebase NPM模塊通過運行下面的代碼到我們的應用程序:

     npm install --save firebase
     

    接下來,導入該模塊在你的App/index.js文件:

     // App/index.js
    
    import * as firebase from "firebase";
     

    當我們到火力地堡登錄后選擇我們的項目,我們會得到一個選項添加到火力地堡您的Web應用程序

    添加火力地堡到您的Web應用程序

    如果我們點擊該選項,一個模式會出現,會告訴我們的config ,我們將在我們的使用可變componentWillMount方法。

    CONFIGS

    讓我們創建的火力地堡的配置文件。 我們稱這個文件firebase-config.js ,它將包含所有必要的CONFIGS到我們的應用程序與火力地堡連接:

     // App/firebase-config.js
    
    export default {
      apiKey: "AIzaSyBRExKF0cHylh_wFLcd8Vxugj0UQRpq8oc",
      authDomain: "reddit-clone-53da5.firebaseapp.com",
      databaseURL: "https://reddit-clone-53da5.firebaseio.com",
      projectId: "reddit-clone-53da5",
      storageBucket: "reddit-clone-53da5.appspot.com",
      messagingSenderId: "490290211297"
    };
     

    我們將導入我們的火力地堡配置到App/index.js

     // App/index.js
    
    import config from './firebase-config';
     

    我們將初始化在我們的火力地堡數據庫連接constructor

     // App/index.js
    
    constructor() {
      super();
    
      // Initialize Firebase
      firebase.initializeApp(config);
    }
     

    componentWillMount()生命周期掛鉤,我們使用軟件包firebase ,我們剛剛安裝并調用其initializeApp方法并通過config變量給它。 此對象包含所有關于我們的應用程序中的數據。 initializeApp方法將我們的應用程序連接到我們的火力地堡數據庫中,以便我們可以讀取和寫入數據。

    讓我們添加一些數據,以火力地堡檢查,如果我們的配置是正確的。 轉到數據庫選項卡,并添加下面的結構到數據庫:

    測試數據

    點擊添加將數據保存到我們的數據庫。

    演示數據

    現在,讓我們添加一些代碼來我們componentWillMount方法,使我們的屏幕上的數據顯示:

     // App/index.js
    
    componentWillMount() {
      …
    
      let postsRef = firebase.database().ref('posts');
    
      let _this = this;
    
      postsRef.on('value', function(snapshot) {
        console.log(snapshot.val());
    
        _this.setState({
          posts: snapshot.val(),
          loading: false
          });
          });
        }
     

    firebase.database()為我們提供了數據庫服務的參考。 使用ref()我們可以從數據庫中獲取特定的參考。 舉例來說,如果我們所說的ref('posts')我們將獲得posts從我們的數據庫參考,并存儲在參考postsRef

    postsRef.on('value', …)為我們提供了更新值只要有數據庫中的任何改變。 當我們需要一個實時更新我們的用戶界面基于任何數據庫事件,這是非常有用的。

    使用postsRef.once('value', …)將只給我們一次數據。 這對于只需要加載一次,預計不會頻繁改變或需要積極地傾聽數據非常有用。

    我們得到了更新后的值后on()回調,我們存儲在我們的價值觀posts狀態。

    現在,我們將看到我們的出現控制臺上的數據。

    樣本數據

    同時,我們將通過這個數據下降到我們的孩子。 所以,我們需要修改render我們的功能App/index.js文件:

     // App/index.js
    
    render() {
      return (
        <div className="App">
          {this.props.children && React.cloneElement(this.props.children, {
            firebaseRef: firebase.database().ref('posts'),
            posts: this.state.posts,
            loading: this.state.loading
          })}
        </div>
      );
    }
     

    這里的主要目的是使所有的孩子組成部分,這將傳遞提供的職位數據react-router

    我們正在檢查是否this.props.children存在與否,以及如果存在的話,我們克隆了一個元素,并通過我們所有的道具給我們所有的孩子。 這是通過道具動態孩子的一個非常有效的方式。

    調用cloneElement將淺合并在現有的道具this.props.children ,我們在這里通過的道具( firebaseRefpostsloading )。

    使用這種技術, firebaseRefpostsloading道具將可用于所有路由。

    您可以檢查我的承諾在GitHub上。

    連接與火力地堡的應用

    火力只能存儲數據作為對象; 它沒有對陣列的任何原生支持 我們將存儲在以下格式的數據:

    數據庫結構

    在截圖中添加數據上面的手動設置,使您可以測試你的意見。

    添加視圖的所有帖子

    現在,我們將添加視圖來顯示所有的職位。 創建一個文件src/containers/Posts/index.js ,內容如下:

     // src/containers/Posts/index.js
    
    import React, { Component } from 'react';
    
    class Posts extends Component {
      render() {
        if (this.props.loading) {
          return (
            <div>
              Loading…
            </div>
          );
        }
    
        return (
          <div className="Posts">
            { this.props.posts.map((post) => {
                return (
                  <div>
                    { post.title }
                  </div>
                );
            })}
          </div>
        );
      }
    }
    
    export default Posts;
     

    在這里,我們只是映射過來的數據,并將其呈現給用戶的界面。

    接下來,我們需要把它添加到我們的routes.js文件:

     // routes.js
    
    …
    <Router {...props}>
      <Route path="/" component={ App }>
        <Route path="/posts" component={ Posts } />
      </Route>
    </Router>
    …
     

    這是因為我們想要的職位,只在顯示/posts路線。 所以,我們只是通過Posts組件的component道具和/postspath中的道具Route的成分反應路由器。

    如果我們去到URL 本地主機:3000 /職位 ,我們將看到從我們的火力地堡數據庫中的職位。

    您可以檢查我的承諾在GitHub上。

    添加意見寫一個新的職位

    現在,讓我們創建一個從這里我們可以添加一個新的后視圖。 創建一個文件src/containers/AddPost/index.js ,內容如下:

     // src/containers/AddPost/index.js
    
    import React, { Component } from 'react';
    
    class AddPost extends Component {
      constructor() {
        super();
    
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
    
      state = {
        title: ''
      };
    
      handleChange = (e) => {
        this.setState({
          title: e.target.value
        });
      }
    
      handleSubmit = (e) => {
        e.preventDefault();
    
        this.props.firebaseRef.push({
          title: this.state.title
        });
    
        this.setState({
          title: ''
        });
      }
    
      render() {
        return (
          <div className="AddPost">
            <input
              type="text"
              placeholder="Write the title of your post"
              onChange={ this.handleChange }
              value={ this.state.title }
            />
            <button
              type="submit"
              onClick={ this.handleSubmit }
            >
              Submit
            </button>
          </div>
        );
      }
    }
    
    export default AddPost;
     

    在這里, handleChange方法更新與存在于輸入框中的值我們的狀態。 現在,當我們點擊該按鈕, handleSubmit被觸發方法。 handleSubmit方法是負責發出API請求寫入到我們的數據庫。 我們用它來做firebaseRef支柱,我們傳遞給所有的孩子們。

     this.props.firebaseRef.push({
      title: this.state.title
    });
     

    上面的代碼塊設置標題到我們的數據庫的當前值。

    新的崗位已被存儲在數據庫之后,我們做出的輸入框中再次清空,準備添加一個新的職位。

    現在,我們需要把這個網頁添加到我們的路線:

     // routes.js
    
    import React from 'react';
    import { Router, Route } from 'react-router';
    
    import App from './containers/App';
    import Posts from './containers/Posts';
    import AddPost from './containers/AddPost';
    
    const Routes = (props) => (
      <Router {...props}>
        <Route path="/" component={ App }>
          <Route path="/posts" component={ Posts } />
          <Route path="/add-post" component={ AddPost } />
        </Route>
      </Router>
    );
    
    export default Routes;
     

    在這里,我們剛才添加的/add-post的路線,使我們可以從路由添加一個新的職位。 因此,我們通過AddPost組件的組件道具。

    此外,讓我們修改render我們的方法src/containers/Posts/index.js文件,以便它可以遍歷對象,而不是陣列(因為火力地堡不存儲陣列)。

     // src/containers/Posts/index.js
    
    render() {
        let posts = this.props.posts;
    
        if (this.props.loading) {
          return (
            <div>
              Loading...
            </div>
          );
        }
    
        return (
          <div className="Posts">
            { Object.keys(posts).map(function(key) {
                return (
                  <div key={key}>
                    { posts[key].title }
                  </div>
                );
            })}
          </div>
        );
      }
     

    現在,如果我們去到本地主機:3000 /插件后 ,我們可以添加一個新的職位。 點擊提交按鈕后,新職位將立即出現在帖子頁

    您可以檢查我的承諾在GitHub上。

    實施投票

    現在,我們需要讓用戶在一個帖子投票。 對于這一點,讓我們修改render我們的方法src/containers/App/index.js

     // src/containers/App/index.js
    
    render() {
      return (
        <div className="App">
          {this.props.children && React.cloneElement(this.props.children, {
            // https://github.com/ReactTraining/react-router/blob/v3/examples/passing-props-to-children/app.js#L56-L58
            firebase: firebase.database(),
            posts: this.state.posts,
            loading: this.state.loading
          })}
        </div>
      );
    }
     

    我們改變了firebase從道具firebaseRef: firebase.database().ref('posts')firebase: firebase.database()因為我們會使用火力地堡的set方法來更新我們的投票計數。 這樣一來,如果我們有更多的火力地堡裁判,這將是很容易讓我們僅使用處理它們firebase道具。

    之前與表決出發,讓我們修改handleSubmit方法在我們src/containers/AddPost/index.js文件一點點:

     // src/containers/AddPost/index.js
    
    handleSubmit = (e) => {
      …
      this.props.firebase.ref('posts').push({
        title: this.state.title,
        upvote: 0,
        downvote: 0
      });
      …
    }
     

    我們改名為我們firebaseRef道具firebase道具。 所以,我們改變this.props.firebaseRef.pushthis.props.firebase.ref('posts').push

    現在,我們需要修改我們src/containers/Posts/index.js文件,以適應表決。

    render方法應該進行修改,以這樣的:

     // src/containers/Posts/index.js
    
    render() {
      let posts = this.props.posts;
      let _this = this;
    
      if (!posts) {
        return false;
      }
    
      if (this.props.loading) {
        return (
          <div>
            Loading...
          </div>
        );
      }
    
      return (
        <div className="Posts">
          { Object.keys(posts).map(function(key) {
              return (
                <div key={key}>
                  <div>Title: { posts[key].title }</div>
                  <div>Upvotes: { posts[key].upvote }</div>
                  <div>Downvotes: { posts[key].downvote }</div>
                  <div>
                    <button
                      onClick={ _this.handleUpvote.bind(this, posts[key], key) }
                      type="button"
                    >
                      Upvote
                    </button>
                    <button
                      onClick={ _this.handleDownvote.bind(this, posts[key], key) }
                      type="button"
                    >
                      Downvote
                    </button>
                  </div>
                </div>
              );
          })}
        </div>
      );
    }
     

    當點擊按鈕時, 給予好評downvote數將在我們的火力地堡DB遞增。 為了處理這一邏輯,我們創建了兩個方法: handleUpvote()handleDownvote()

     // src/containers/Posts/index.js
    
    handleUpvote = (post, key) => {
      this.props.firebase.ref('posts/' + key).set({
        title: post.title,
        upvote: post.upvote + 1,
        downvote: post.downvote
      });
    }
    
    handleDownvote = (post, key) => {
      this.props.firebase.ref('posts/' + key).set({
        title: post.title,
        upvote: post.upvote,
        downvote: post.downvote + 1
      });
    }
     

    在這兩種方法中,每當在任一按鈕的用戶點擊,相應的計數是在數據庫遞增,并且在瀏覽器中被立即更新。

    如果我們打開兩個卡口與本地主機:3000 /帖子 ,點擊帖子的投票按鈕,我們將看到每個選項卡中得到幾乎即時更新。 這是使用實時數據庫火力地堡一樣的魔力。

    您可以檢查我的承諾在GitHub上。

    倉庫 ,我已經添加了/posts路線IndexRoute只是為了顯示對職位申請的3000:本地主機的默認值。 您可以檢查提交 GitHub上。

    結論

    最終的結果是無可否認的一點準系統,因為我們并沒有試圖實現任何設計(盡管演示增加了一些基本的樣式)。 我們也沒有添加任何身份驗證,以降低復雜性和教程的長度,但很明顯,任何現實世界的應用程序將需要它。

    火力地堡是,你不希望創建和維護一個獨立的后端應用程序,或者你想要的實時數據,而無需投入太多的時間來開發你的API的地方非常有用。 它起著非常好有反應,你可以從希望在一篇文章中看到。

    我希望本教程可以幫助你在未來的項目。 請隨時分享下面的評論部分您的反饋意見。

    延伸閱讀

    這篇文章是由同行評審邁克爾Wanyoike 感謝所有SitePoint的審稿作出SitePoint內容也可以是最好的!

    From: https://www.sitepoint.com//reddit-clone-react-firebase/

    版權聲明:本文為dingshi7798原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/dingshi7798/article/details/105818028

    智能推薦

    數組刪除其中某個對象的方法

    數組刪除其中的對象或元素,在前端是比較常見的需求。 我現在比較常用的方法如下: 這種方法只適合刪除具有唯一標識的對象。 有沒有想要脫單的小伙伴,加入我們的脫單星球,認識更多優秀的小哥哥小姐姐 特此聲明,星球是免費的,但是創建星球的時候說是必須輸入金額,所以只能先私聊,我再加你免費加入!...

    圖床搭建以及圖床工具的使用

    為什么要用圖床和圖床工具? 比較下面三種md中的圖片url地址(均免費),你會使用哪一種? 選1?由于是本地路徑,文檔分享后給其他人打開后很可能顯示圖片加載失敗。 選2?雖然分享后可以顯示圖片,但能保證加載速度? 選3?我肯定選這種,即兼容2的瀏覽器訪問,又能保證訪問速度。 這樣就可以回答上面的問題了!保證瀏覽器訪問要用圖床,保證加載速度要用圖床工具,又不花錢想想就開心。 除此之外本篇博客還會講解...

    并發編程理論篇

    一、必備知識回顧 計算機又叫電腦,即通電的大腦,發明計算機是為了讓他通電之后能夠像人一樣去工作,并且它比人的工作效率更高,因為可以24小時不間斷 計算機五大組成部分 控制器 運算器 存儲器 輸入設備 輸出設備 計算機的核心真正干活的是CPU(控制器+運算器=中央處理器) 程序要想被計算機運行,它的代碼必須要先由硬盤讀到內存,之后cpu取指再執行 并發 看起來像同時運行的就可以稱之為并發 并行 真正...

    Java LinkedHashMap

    Java LinkedHashMap 前言 Map是我們在實際使用過程中常用的集合,HashMap在Java的實際開發中出鏡率很高,它通過hash算法實現了高效的非線程安全的集合,它有一個缺點就是,用戶插入集合的數據時無序,在我們需要一些有序的map的時候,我們就需要引入另外一個集合:LinkedHashMap。 LinkedHashMap是一個有序的非線程安全的集合,它是HashMap的子類,基...

    Spark Streaming處理文件(本地文件以及hdfs上面的文件)

    標題介紹文件流之前先介紹一下Dstream 下面是來自官網一段的說明,Discretized Streams或DStream是Spark Streaming提供的基本抽象。它表示連續的數據流,可以是從源接收的輸入數據流,也可以是通過轉換輸入流生成的已處理數據流。在內部,DStream由一系列連續的RDD表示,這是Spark對不可變的分布式數據集的抽象(有關更多詳細信息,請參見Spark編程指南)。...

    猜你喜歡

    《痞子衡嵌入式半月刊》 第 8 期

    痞子衡嵌入式半月刊: 第 8 期 這里分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞,農歷年分二十四節氣,希望在每個交節之日準時發布一期。 本期刊是開源項目(GitHub: JayHeng/pzh-mcu-bi-weekly),歡迎提交 issue,投稿或推薦你知道的嵌入式那些事兒。 上期回顧 :《痞子衡嵌入式半月刊: 第 7 期》 嘮兩句 今天是小滿,小滿節氣意味著進入了大幅降水的雨季。痞子...

    (C++)二叉樹的線索化 / 線索二叉樹

    好久不見,朋友們!雖然我知道沒人看我的博客,但我還是想叨逼叨一下。啊,好久沒編程了(其實也就一周沒編),但你們知道,程序員一天不編程那能叫程序員么???雖然我不是程序員哈哈哈哈哈,但還是要有基本素養嘛。 繼續寫二叉樹,給自己立一個flag,就是這幾天要寫完之前沒做完的幾道題,和二叉樹紅黑樹各種樹之類的~~雖然有這個flag,但我還是很實誠地遵從自己的內心,買了一張明天的電影票,等我回來告訴你們好不...

    Linux內存管理:分頁機制

    《Linux內存管理:內存描述之內存節點node》 《Linux內存管理:內存描述之內存區域zone》 《Linux內存管理:內存描述之內存頁面page》 《Linux內存管理:內存描述之高端內存》 《Linux內存管理:分頁機制》 《內存管理:Linux Memory Management:MMU、段、分頁、PAE、Cache、TLB》 目錄 1 分頁機制 1.1 為什么使用多級頁表來完成映射 ...

    Logtail 混合模式:使用插件處理文件日志

    作為一個服務百萬機器的日志采集 agent,Logtail 目前已經提供了包括日志切分、日志解析(完整正則、JSON、分隔符)、日志過濾在內的常見處理功能,能夠應對絕大多數場景的處理需求。但有些時候,由于應用的歷史原因或是本身業務日志的復雜性,單一功能可能無法滿足所采集日志的處理需求,比如: 日志可能不再是單一格式,有可能同時由 JSON 或者分隔符日志組成。 日志格式可能也不固定,不同的業務邏輯...

    Q版緩沖區溢出教程-第一章讀書筆記

    Q版緩沖區溢出教程 1.3 神秘的windows系統 1.3.1 溢出舉例: 我們編譯運行之后的結果 現在我們把程序進行更改,數組的值進行一個變化,改為’abcdefgh’然后再編譯運行 程序運行沒有問題。 如果這個時候我們把程序再次加長的話,會發生什么,內容更改為’abcdefghijklmn’。 這個時候出了錯誤說內存越界。 1.3.3對溢出報錯...

    精品国产乱码久久久久久蜜桃不卡