background

Full Stack engineer, also known as Full end engineer (with front-end and back-end capabilities), English Full Stack Developer. A person who has mastered a variety of skills and can use them to independently complete a product.

Knock on the blackboard: Use a variety of skills to finish products independently.

So, at least one person needs to cover the front end + back end + database

Create a live voting app for everyone:)

The specific functions are:

  • For authorized users:

    • Create a new poll and customize the options in it
    • Store polls initiated, and next time you log in, you can still see the set of polls initiated by yourself
    • See live polls created by all the users in the app (shown in charts)
    • Vote all polls (only one vote per poll per user number).
    • Shareable poll (poll details page supports external landing)

  • Unauthorized users can only:

    • See live polls created by all the users in the app (shown in charts)

The development process

Overall technical goal: React + Express + Mongodb to complete a voting SPA

The front end

  • An overview of the
    • Use JS language standard ES6
    • Module: ES6 Module
    • React + ReactDOM is used for componentized development of the framework front end
    • React-router is the core of SPA and works with back-end routes to complete application routes
    • The react-router-transition effect is meant to be silky and smooth

  • Front Entrance (View Source)

    Use the React Router to point the Home page to the Home component, and define three new routes, list, detail, and new, to point to the corresponding page component.

<Router key={Math.random()} history={browserHistory} >
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>

    <Route path="/list(/:name)" component={List}>
    </Route>

    <Route path="/detail(/:id)" component={Detail}>
    </Route>

    <Route path="/new" component={New}></Route>

  </Route>
</Router>
Copy the code

  • Page-level components Each page-level component corresponds to an application page, which is inherited from React.component

    • home (View source)
      • As the home page of the application, lists the main functions and information of the application
      • Corresponding to the router:/
    • list (View source)
      • The list page shows the summary of all polls and corresponding title and owner
      • Corresponding to the router:/list(/:name)
    • detail (View source)
      • The details page displays the details of the specified poll
      • Corresponding to the router:/detail(/:id)
    • new (View source)
      • The new page collects the necessary information for the new poll
      • Corresponding to the router:/new

  • Common components

    • Header (View source): Common header for all pages, including personalized menu, user profile name, login and logout buttons, and so on

    • Footer (View Source): Reusable bottom of the page, containing copyright information

    • Loading: Loading dynamic effects (a tool loading. IO is recommended)
    • Spning: Button waiting effect
  • An asynchronous request
    • Zepto Ajax (all using POST, whole site development, not cross domain)

The back-end

router.get('/detail/:id', throwToHome);
router.get('/detail', throwToHome);
router.get('/list/:name', throwToHome);
router.get('/list', throwToHome);
router.get('/new', throwToHome);

router.get('/', throwToHome);
router.get('*', throwToError);

function throwToHome(request, response){
  response.render('index',
  {
    cdnUrl: config.CDN_URL
  }
  );
}
function throwToError(request, response){
  response.render('error',
  {
    cdnUrl: config.CDN_URL
  }
  );
}
Copy the code
  • Third party login
    • Select Github API, see Github OAuth – Web Application Flow for details
  • API (View source)
    • /getPollList: Gets the list of polls
      • The arguments:userName(user name), get all polls created by that user; The defaultuserNameGets all the polls that exist
      • Returns: List of polls that qualify
    • /getPollByID: Gets the details of the specified poll
      • The arguments:pollID(Poll unique identifier)
      • Returns a single element list with the specified poll
    • /upDatePollByID: Update a poll
      • The ginsengpollID(poll unique identifier);index(the number of the option specified by the user);voter(Pass the voting user name to avoid multiple votes on the same poll)
      • returnresult: boolType value that tells you whether the update was successful
    • /insertPoll: Creates a poll
      • The ginsengtitleThe topic of (poll),description(poll),options: (option in poll),ownerName(Create user),voterList(Voting user, initially empty array)
      • returnresult: boolType value that tells you whether the creation was successful

The database

  • Mongodb Mongodb is a database based on distributed file storage. Written in C++ language. Designed to provide scalable high-performance data storage solutions for WEB applications. MongoDB is a product between relational database and non-relational database. Among non-relational databases, it has the most rich functions and is the most like relational database.

  • Environment installation and configuration

    • Download: Download
    • Install: Unzip zip files to wherever you want
    • Configuration: Binary files can be executed directly to configure your.bashrcFile:export PATH=<mongodb-install-directory>/bin:$PATHFor example, mine isexport PATH=$HOME/mongodb/bin:$PATH

    • Run the mongodb service. The default port is 27017

      mongodCopy the code

    • Run the Cli and use the command line to perform common database operations

      Mongo // Go to CliCopy the code
      Show DBS // Displays all databasesCopy the code
      Use <dbName> // Enter the specified databaseCopy the code
      Show collections // Show all collectionsCopy the code
      The < collectionName >. The find ({}) / / queryCopy the code
      The < collectionName >. DeleteOne ({}) / / deletedCopy the code
      • Express connect to Mongodb (View source)
var dbUrl = 'mongodb://localhost:27017/voting' var mongo = require("mongodb").MongoClient; mongo.connect(dbUrl, function(err, db){ var pullList = db.collection('pollList'); pullList.find({ownerName: ownerName},{}).sort({timestamp: -1}).toArray(function(err, docs){ if(err){ db.close(); errCal(err); } else { db.close(); sucCal(docs); }}); });Copy the code
  • Database collection (table) :
{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "_id": {
                "type": "integer"
            },
            "email": {
                "type": "string"
            },
            "name": {
                "type": "string"
            },
            "timestamp": {
                "type": "integer"
            }
        }
    }
}
Copy the code

pollList schema:

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "_id": {
                "type": "integer"
            },
            "description": {
                "type": "string"
            },
            "options": {
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {
                        "count": {
                            "type": "integer"
                        },
                        "index": {
                            "type": "integer"
                        },
                        "option": {
                            "type": "string"
                        }
                    }
                }
            },
            "ownerName": {
                "type": "string"
            },
            "pollID": {
                "type": "string"
            },
            "title": {
                "type": "string"
            },
            "voterList": {
                "type": "array",
                "items": {
                    "type": "string"
                }
            }
        }
    }
}
Copy the code

Release process

Heroku publishes code to the cloud

Official website (ladders may be required)

  • Heroku Cli Download

  • Go to the project root directory

    cd WeVotingCopy the code

  • Run heroku login to login. If no account is available, go to the official website to apply

  • Create yourApp by executing Heroku create

    , where the appName is also your level 3 domain name under Herokuapp.com

    heroku create we-voting-eleCopy the code

    Final domain name is we-voexpired ele.herokuapp.com

  • Push code to Heroku for distribution
git push heroku masterCopy the code

  • Open the application

    heroku openCopy the code

  • Create a Procfile setup service start command

    web: node index.jsCopy the code

  • Scale the app

    heroku ps:scale web=1Copy the code

Heroku Addons deploys the mongodb cloud servicemLab MongoDB

  • One command deploys mLab MongoDB free edition

    heroku addons:create mongolab:sandboxCopy the code

  • Get the Mongodb_uri link for the cloud database service for the backend code to connect to the Mongodb service

    heroku configCopy the code

For details, see Getting Started on Heroku with Node.js

Done ~

LISENCE

Open source code, a graph to tell you how to choose open source agreement by Ryfeng

Finally send source code and Demo

The Demo in this

Git repository: Git repository: Git Repository: Git Repository: Git Repository: Git Repository: Git Repository: Git Repository