从零开始,搭建一个简单的购物平台(一)

这个项目是我利用空余的时间写的,商城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 [email protected]
    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"//设置全局模块缓存路径

     

  4. 安装mongoDB:下载安装MongoDB,与node一样配置环境变量,在cmd中输入mongo,出现类似这样的,就说明安装配置成功
    从零开始,搭建一个简单的购物平台(一)_第1张图片

  5. webpack:使用npm全局安装webpack-cliwebpack

    npm i webpack webpack-cli -g 

后端搭建

  1. 新建项目文件夹,我这里建立后端文件夹后直接建立server.js(入口文件),这样在npm init时不需要输入项目名称
  2. 使用npm init -y初始化后端项目,并创建文件结构(如下图)
    从零开始,搭建一个简单的购物平台(一)_第2张图片
  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配置好(如下图)
    从零开始,搭建一个简单的购物平台(一)_第3张图片从零开始,搭建一个简单的购物平台(一)_第4张图片从零开始,搭建一个简单的购物平台(一)_第5张图片
  7. 然后在src文件夹中构建项目结构
    从零开始,搭建一个简单的购物平台(一)_第6张图片

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

商城界面搭建

  1. 使用 npm install -g vue-cli 全局安装vue-cli 脚手架工具
  2. 用vue init webpack + 项目的名字   初始化项目
  3. 构建项目目录
    从零开始,搭建一个简单的购物平台(一)_第7张图片
  4. 安装vue-router(路由),vuex(全局状态),axios(前端请求),jquery,less,less-loader,mint-ui(移动端ui组件),swiper(轮播插件)

商城界面搭建完成

总结:

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

你可能感兴趣的:(Node.js,Vue,React,node.js,vue.js,reactjs,mongodb,javascript)