Technology stack

Front end: Reactv15.6.1, React RouterV4.2.0, Reduxv3.7.2, ANTDV2.13.0, Axiosv0.16.2 and process-style sass; Backend (main) : Nodev8.3.0, KOA2v2.3.0, koA-RouterV7.2.1; Database: mongodb; The back-end is mLab deployed in Heroku, the online database. The specific process is not detailed, but generally it is not very troublesome. As for why choose these two, because both are free to use… MLab has 500 MB free to use, but access is extremely slow, extremely slow, and you can continue to get a feel for desperation, so my advice is to clone down and run locally. The database connection is the default mongodb port, and you can change the configuration in the DB file. The overall schema design refers to the CNode community, and some problems encountered in the middle are solved by looking at the source code of Nodeclub.

Page preview

The page is mainly divided into topic list page, message page, personal information page, create a topic page, personal Settings page, registration page, login page, 404 page.

  • Navigation + Home page
  • News page
  • User information page
  • Create a topic page
  • User Settings page
  • And a slightly more complex detail page
  • 404 pages
  • Landing page
  • The sign-up page

File directory

The front end

Create-react-app scaffolding and actions are manually added:

The back-end

Well, to be honest, I’m not familiar with the back end, ugh, basically not, wrote simple model+ Controller + Middleware, didn’t see any good scaffolding, wrote a lot of repetitive code…





Something like this:

Front-end data structures

The front-end uses Redux, and the whole state structure is shown as follows:



Note that react Router V4 is quite different from before, and the route parameters need to be manually bound as follows:



export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NavBar));Copy the code

React Router V4 cancels indexRoute and uses exact instead. There are also rights, such as login can not enter the login page, did not login can not enter the creation of the theme page. Overall routing design:



const AppRouter = (a)= > (
  <Router>
    <div>
      <Switch>
        <Route path="/" exact component={Home}/>
        <Route path="/page/:pageNum?" exact component={Home}/>
        <Route path="/category/:categorySlug/:pageNum?" exact component={Home}/>
        <Route path="/topics/:id" component={TopicDetail}/>
        <Route path="/user-info/:loginname" component={UserInfo}/>
        <AuthRoute path='/message' component={Message}/>
        <PrivateRoute path="/login" component={Login}/>
        <PrivateRoute path="/register" component={Register}/>
        <AuthRoute path='/create-topic' component={CreateTopic}/>
        <AuthRoute path='/edit-topic/:topicId' component={CreateTopic}/>
        <AuthRoute path='/setting' component={Setting}></AuthRoute>
        <Route component={NoMatch}/>
      </Switch>
    </div>
  </Router>
);Copy the code

What’s worth mentioning about the V4 release? A =1&&b=2 no longer provides default parsing support, as if this is not canonical and requires a third-party query-string package to parse. I don’t use it. I don’t analyze it. The first time I used V4, I still encountered many pits in the middle, but basically can find the corresponding introduction and solution on the Internet, recommend using Google search, about the official document, there are Chinese version of the document. React has a new version v 16.0.0. I have upgraded it, but ANTD cannot seamlessly access V16. Some components use ANTD, so it is not recommended to upgrade to the latest version. As for the case of antD having multiple forms in the same container, I did some processing when SETTING up this page. I separated the forms.

Backend design

HHH, please forgive me for laughing, the understanding of the backend is basically only superficial, have seen node and KOA for some time, so I will not do a detailed analysis, for fear of misleading new people, there are a lot of high-quality documents and examples on the Internet, I will quietly when a salty fish, explain their problems encountered in the development.

1. About async and await, I encountered a problem during the period, I need to take out the comment corresponding to each ID according to the comment or some array ID. I wrote it like this at the beginning:



const xxx = idList.map(id= > {
  const result = await findReplyById(id);
  //xxx
  return result;
})Copy the code

“Await” can only be used under async, cannot be used under function, then modify to promise.all ().

2. Token processing, using Node-JsonWebToken, read The blog RESTFul Wolf uncle, more detailed introduction, the whole process is sorted out. The user logs in, the back end verifies the account and password, and returns a token to the front end. The front end takes the token and stores it locally. When the request is sent, the back end parses the token to the id of the logged-in user through axios interceptor. If the token times out, the back end returns an error code to the front end. The front end evaluates the error through the interceptor. If the token times out, the front end redirects to the login page. The code is as follows:



// If you have a token, put it in the request header
axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('login_token');
  if (token) {
    config.headers['x-access-token'] = token;
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

// Handle login expiration
axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  const { errCode } = error.response.data;
  if (errCode && errCode === 100) {
    localStorage.removeItem('login_token');
    history.push('/login');
  }
  return Promise.reject(error);
});Copy the code

3. Lodash is a good thing.

4. Well, there seems to be nothing else to explain, most of it is database additions and deletions… Add anything you think of later.

Summary and source code

The source code is on Github. Immutable. Js is not used, but it is recommended to use, otherwise the performance is poor. React V16 has removed prop-types from React. I think React wants to use Facebook’s own flow instead. Slightly rough production, for reference only. The content is so much, some small details may not be mentioned, I will continue to add content.