【创新实训】前端开发记录（一）：基础篇

山软创新实训前端开发记录

【创新实训】前端开发记录（一）：基础篇
【创新实训】前端开发记录（二）：主页面
【创新实训】前端开发记录（三）：特殊效果

---

---

项目描述

此次创新实训项目为面向电影观众提供多源电影浏览及推荐系统功能的项目。前端以Web页面形式呈现，提供对电影的筛选、查询、排序功能。

技术选型

1、是否选用前端框架？

是。该项目的前端网页内容繁多，涉及到筛选、查询和排序的功能。使用原生HTML+CSS+JS进行开发势必导致开发效率低下、易出错、扩展性差等问题。目前主流的前端框架已趋于稳定，开发也十分便捷，对于该项目具有天然的优势。

2、Vue.js还是React？

这是目前前端领域常用的两个框架，并且都能够胜任此次项目的开发。但考虑到编码复杂性、后期维护的难易程度，React显然更胜一筹。

本次的前端技术选型为React，并使用Material Design组件构建用户界面。

基础搭建

创建项目

使用npm创建React项目。

$ npx create-react-app mvrankings

执行以下命令开启调试。

$ npm start

路由配置

路由方面选用官方推荐的React-Router项目。修改默认的App.js文件来添加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;

请求封装

React使用fetch进行网络请求。为了方便调用，对fetch进行封装。封装的目标是只需传入url、method和data即可进行请求，无需关注请求类型（即参数的传递方式）。

使用fetch时有一点需要注意，若请求类型为GET时无法将参数放在data或body中，会导致请求异常，抛出以下错误：

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

此时需要将data中的数据拼接在URL之后。urlFormat()函数将完成这个功能。此外为了防止特殊符号干扰URL，需要使用encodeURIComponent()函数将data中的key和value进行URL编码。

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

在请求预处理时，进行请求方法的判断，并在GET方法中调用urlFormat()函数进行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
  }
}

预处理完后进行fetch请求即可。

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

此时我们尝试一下进行请求，访问后端接口/api/search获取电影列表。

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

浏览控制台发现GET请求顺利完成。