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

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

     

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

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

    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(轮播插件)

商城界面搭建完成

总结:

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

原文地址:https://blog.csdn.net/time_____

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要介绍“基于nodejs的ssh2怎么实现自动化部署”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“基于nodejs...
本文小编为大家详细介绍“nodejs怎么实现目录不存在自动创建”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs怎么实现目录不存在自动创建”文章能帮助大...
这篇“如何把nodejs数据传到前端”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这...
本文小编为大家详细介绍“nodejs如何实现定时删除文件”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs如何实现定时删除文件”文章能帮助大家解决疑惑...
这篇文章主要讲解了“nodejs安装模块卡住不动怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来...
今天小编给大家分享一下如何检测nodejs有没有安装成功的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文...
本篇内容主要讲解“怎么安装Node.js的旧版本”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎...
这篇“node中的Express框架怎么安装使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家...
这篇文章主要介绍“nodejs如何实现搜索引擎”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nodejs如何实现搜索引擎...
这篇文章主要介绍“nodejs中间层如何设置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nodejs中间层如何设置”文...
这篇文章主要介绍“nodejs多线程怎么实现”,在日常操作中,相信很多人在nodejs多线程怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法...
这篇文章主要讲解了“nodejs怎么分布式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“nodejs怎么分布式”...
本篇内容介绍了“nodejs字符串怎么转换为数组”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情...
这篇文章主要介绍了nodejs如何运行在php服务器的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇nodejs如何运行在php服务器文章都...
本篇内容主要讲解“nodejs单线程如何处理事件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“nodejs单线程如何...
这篇文章主要介绍“nodejs怎么安装ws模块”,在日常操作中,相信很多人在nodejs怎么安装ws模块问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法...
本篇内容介绍了“怎么打包nodejs代码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!
本文小编为大家详细介绍“nodejs接收到的汉字乱码怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs接收到的汉字乱码怎么解决”文章能帮助大家解...
这篇“nodejs怎么同步删除文件”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇...
今天小编给大家分享一下nodejs怎么设置淘宝镜像的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希