服务构建与前后端分离的开发报告

服务构建与前后端分离的开发报告

姓名	赵文序
学号	18342137
负责内容	商品展示与购物车页面

本次作业我和同组的伍浩源同学共同负责前端的设计开发，一致决定使用React框架

1. 实验环境搭建

搭建具体步骤如下：

1. 首先需要安装nodejs，执行如下命令：

   brew install node
   

2. 安装了node之后npm也是附带安装了的，查看版本信息如下：

   ➜  ~ npm -v
   7.0.15
   ➜  ~ node -v
   v15.4.0
   

3. 更新npm版本信息，可以看到brew默认安装的版本为7.0.15，我们执行npm install -g npm@7.2.0进行更新

   ➜  ~ sudo npm install npm -g
   Password:
   
   removed 54 packages, and changed 194 packages in 1m
   
   3 packages are looking for funding
   	run `npm fund` for details
   npm notice 
   npm notice New minor version of npm available! 7.0.15 -> 7.2.0
   npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.2.0
   npm notice Run npm install -g npm@7.2.0 to update!
   npm notice 
   

   ➜  ~ npm install -g npm@7.2.0
   /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
   /usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
   + npm@7.2.0
   added 56 packages from 28 contributors, removed 241 packages and updated 194 	packages in 20.516s
   

4. 设置国内淘宝代理，解决npm install速度过慢的问题

   ➜  ~ npm config set registry https://registry.npm.taobao.org --global
   ➜  ~ npm config set disturl https://npm.taobao.org/dist --global
   

   ➜  ~ npm install -g create-react-app
   
   added 67 packages in 13s
   

5. 创建react项目，执行如下命令

   ➜  Desktop create-react-app my-app
   
   Creating a new React app in /Users/zhaowenxu/Desktop/my-app.
   
   Installing packages. This might take a couple of minutes.
   Installing react, react-dom, and react-scripts with cra-template...
   
   npm ERR! code 1
   npm ERR! path /Users/zhaowenxu/Desktop/my-app/node_modules/canvas
   npm ERR! command failed
   npm ERR! command sh -c node-gyp rebuild
   npm ERR! /bin/sh: pkg-config: command not found
   npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127     while in binding.gyp. while trying to load binding.gyp
   npm ERR! gyp ERR! configure error 
   npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
   npm ERR! gyp ERR! stack     at ChildProcess.onCpExit    (/Users/zhaowenxu/Desktop/my-app/node_modules/node-gyp/lib/configure    .js:345:16)
   npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:376:20)
   npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit  (node:internal/child_process:284:12)
   npm ERR! gyp ERR! System Darwin 19.6.0
   npm ERR! gyp ERR! command "/usr/local/Cellar/node/15.4.0/bin/node"  "/Users/zhaowenxu/Desktop/my-app/node_modules/.bin/node-gyp" "rebuild"
   npm ERR! gyp ERR! cwd /Users/zhaowenxu/Desktop/my-app/node_modules/canvas
   npm ERR! gyp ERR! node -v v15.4.0
   npm ERR! gyp ERR! node-gyp -v v3.8.0
   npm ERR! gyp ERR! not ok
   
   Aborting installation.
     npm install --save --save-exact --loglevel error react rea