Item Description

This innovative training program provides multi-source movie browsing and recommendation system functions for movie audiences.The front-end is presented as a Web page, which provides functions of filtering, querying and sorting movies.

Technical Selection

1. Do you want to use the front-end frame?

Yes.The front-end pages of this project are rich in content and involve filtering, querying, and sorting functions.Using native HTML+CSS+JS for development is bound to result in inefficient development, error-prone, poor scalability and other issues.At present, the mainstream front-end framework has become stable and easy to develop, which has natural advantages for this project.

2.Vue.js Or React?

These are currently two common frameworks in the front-end area, and both are competent for the development of this project.However, considering the complexity of coding and the ease of post-maintenance, React is clearly a better choice.

This time, the front-end technology is React, and the user interface is built using the Bootstrap component.

Foundation erection

Create Project

Create a React project using npm.

$ npx create-react-app movie-score

Execute the following command to start debugging.

$ npm start

Routing Configuration

For routing, the officially recommended React-Router project is selected.Modify Default App.js File to add Routers.

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

import Home from './pages/Home'

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

Request Encapsulation

React uses fetch for network requests.The fetch is encapsulated for easy invocation.The goal of encapsulation is that requests can be made simply by passing in url s, method s, and data without regard to the type of request (that is, how parameters are passed).

One thing to note when using fetch is that failing to place parameters in data or body when the request type is GET can result in request exceptions that throw the following errors:

Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

The data in the data needs to be stitched after the URL.The urlFormat() function accomplishes this.In addition, to prevent special symbols from interfering with URLs, you need to use the encodeURIComponent() function to encode key s and value s in the data.

function urlFormat(url, data) {
  let res = Object.keys(data).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&')
  return url + '?' + res
}

When requesting preprocessing, make a judgment about the request method and call the urlFormat() function in the GET method to format the URL.

export default async function request(options = {}){
  let { data, url } = options
  options = {...options}
  options.mode = 'cors'
  delete options.url
  
  if (data) {
    if (options.method.toLowerCase() === 'get') {
      url = urlFormat(url, data)
    } else {
      options.body = JSON.stringify({
        data
      })
      options.headers={
        'Content-Type':'application/json'
      }
    }
    delete options.data
  }
}

A fetch request can be made after the preprocessing is complete.

  try {
        const rawResp = await fetch(baseUrl + url, options, { credentials: 'include' })
        const checkedResp = await checkStatus(rawResp)
        return parseJSON(checkedResp)
  } catch (err) {
      return ({ err })
  }

Now let's try requesting access to the back-end interface/api/search to get a list of movies.

export function search() {
    request({
        url: '/api/search',
        method: 'get',
        data: {
            name: '',
            rate_min: 0,
            rate_max: 10,
            time_min: '',
            time_max: '',
            directors: '',
            casts: '',
            order: 'name',
            limit: 5,
            offset: 0
        }
    }).then(res => {
        console.log(res)
    })
}

The browsing console found that the GET request completed successfully.