从零开始，搭建一个简单的购物平台（一）

本文最后更新于：9 个月前

这个项目是我利用空余的时间写的，商城App界面主要模仿零食商贩小程序写的，其余都是自己写的

项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

使用到的技术：

后端：node+express+MongoDB

管理界面：react+antd

商城界面（移动端）：Vue+Mint UI

开发工具：npm

打包工具：webpack

代码管理：git

技术栈：

  • 后端（express，mongoose，cors，body-parser，multer，jsonwebtoken，crypto-js，bcryptjs，nodemailer）
  • 管理界面（react，antd，axios，crypto-js，less，less-loader，react-router-dom，events，redux）
  • 商城界面（vue，vue-router，vuex，axios，jquery，less，less-loader，mint-ui，swiper）

准备工作：

工具配置

  1. node安装：下载并安装nvm或直接下载nodejs安装，若使用nvm，则使用

    nvm install node@12.16.1
nvm use 12.16.1

  2. 安装好node之后，查看环境变量（右键我的电脑=>属性=>高级系统设置=>环境变量）若没有，则将node目录添加至环境变量

  3. npm 配置：

npm config set registry https://registry.npm.taobao.org    //将默认下载地址设置为淘宝镜像
npm config set prefix "D:\soft\nodejs\module_global"     //设置全局模块安装默认路径（后面直接将路径放到环境变量，可以直接使用）
npm config set cache "D:\soft\nodejs\module_cache"//设置全局模块缓存路径

  1. 安装mongoDB：下载安装MongoDB，与node一样配置环境变量，在cmd中输入mongo，出现类似这样的，就说明安装配置成功

  2. webpack：使用npm全局安装webpack-cli和webpack

npm i webpack webpack-cli -g

后端搭建

  1. 新建项目文件夹，我这里建立后端文件夹后直接建立server.js(入口文件)，这样在npm init时不需要输入项目名称
  2. 使用npm init -y初始化后端项目，并创建文件结构（如下图）
  3. 安装express，mongoose，cors（处理前端跨域），body-parser（允许修改请求类型，简言之就是支持post请求），multer（使文件上传被支持），jsonwebtoken（后端生成单向token，传输至前端以供验证状态），crypto-js（请求数据传输加密），bcryptjs（密码加密），nodemailer（发送电子邮件，验证码）等模块

到此为止，一个基本的服务端已搭建好

服务端管理系统界面搭建

  1. 使用 npm install create-react-app -g 全局安装create-react-app脚手架工具，并新建项目目录
  2. 在项目目录中运行脚手架工具 create-react-app myapp(项目名称)
  3. 配置webpack：这里需要用到less，react脚手架提供默认的预处理语言是sass，所以要将react项目的config暴露出来，
    暴露之前我们项目下的package.json文件中有一项eject，运行 npm run eject（注意:此操作不可逆，如非必要，最好不要暴露，webpack打包原理就是将项目所需依赖生成静态资源，也就是说，如果没用到的包，不会有任何影响）
  4. 安装antd（ui），axios（数据请求），crypto-js（请求数据传输加密），react-router-dom（路由跳转），redux（全局状态）
  5. 下载less和less-loader,
    npm install less-loader less –save
  6. 配置less：运行完eject后package.json中的eject项会消失，此时项目中会多出一个config文件夹，其中就是webpack的配置文件，我们打开webpack.config.js文件，通过搜索找到默认配置的sass配置项，照葫芦画瓢，将less配置好，同理将less-loader配置好（如下图）
  7. 然后在src文件夹中构建项目结构

至此，一个基本的服务端管理前端项目搭建完成

商城界面搭建

  1. 使用 npm install -g vue-cli 全局安装vue-cli 脚手架工具
  2. 用vue init webpack + 项目的名字 初始化项目
  3. 构建项目目录
  4. 安装vue-router（路由），vuex（全局状态），axios（前端请求），jquery，less，less-loader，mint-ui（移动端ui组件），swiper（轮播插件）

商城界面搭建完成

总结：

面向对象编程的实质其实是考验自己对抽象思想的理解与认知，有的事物你虽无法描述，但是他是的的确确存在的，考虑有什么，而不是是什么