第一步:安装Node
1、打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题。
下载地址:https://nodejs.org/en/download/
我选择的是Window版本64位的安装程序,也有MAC平台的安装程序。
下载完成,如图:
2、接下来就是安装了,安装很简单,直接下一步下一步就可以,但是我也把流程记录下来,给第一次看本教程的人有一个大概的了解。
双击安装文件,如图:
3、点击下一步,选择同意协议,否则无法继续安装。如图:
4、这一步选择安装的目录,可以使用默认目录【C:\Program Files\nodejs\】,也可以根据需要改变目录,我选择安装在D盘:
6、最后一步就是安装和完成了。如图:
完成效果:
安装完成后,在cmd窗口下执行 node -v 命令,看到版本信息,则说明安装成功:
参考链接:https://www.cnblogs.com/zhouyu2017/p/6485265.html
第二步:配置淘宝npm镜像
由于需要通过npm下载各种模块,默认npm是从国处服务器下载,对于网络条件一般的用户可能很难下载成功,所以需要配置成淘宝的镜像。
打开命令行,输入:npm config set registry https://registry.npm.taobao.org
以后下载模块会自动从淘宝地址进行下载。
第三步:安装webpack
打开命令行,输入npm install webpack -g。安装完成后输入webpack -v,如果显示版本号,则说明安装成功。
第四步:安装vue-cli
打开命令行,输入npm install vue-cli -g。安装完成后输入vue -V查看版本事情,现在应该是三点几的版本了,不过我的项目是用的2.9.6版本。
第五步:通过vue-cli初始化项目
打开命令行,进入指定的目录,输入vue init webpack 项目名,确认创建项目后,后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等,详见上图。安装顺利执行后会,生成如下文件目录。
如果不是很习惯ESLint规范代码,建议新手选择No,如果你的编辑器安装了ESLint插件,但你的代码写的又不规范,所以会一直报错,尽管不影响项目的运行,但还是会一直出现讨厌的红色。
前面简单的介绍了怎么搭建Vue项目以及Node环境,下面切入正题:
先说一下三零九在线药品销售系统 前台的项目配置信息,跟上图所示的其实也差不多吧,只是文件夹下的没再依次展示了。
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- assets // 图片样式文件
| |-- components // vue公共组件
| |-- pages // 页面 (里面有很多页面,就不依次详细展开了)
| |-- router // 路由文件
| |-- store // vuex的状态管理
| |-- util // 公共js文件
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico // logo图标
|-- index.html // 入口页面
|-- package.json // 项目基本信息
他主要用到的技术有(Vue+Vuex+Vue-router+Axios+Mint-ui+Element-ui+Webpack)等等。
还是先看一下Mobile端的演示效果吧:
只列出了部分功能,像九九包邮,健康资讯,当季必备,关于我们等等没有列出来。像购物车动画,同步刷新购物车中商品数量,以及实时刷新个人中心各个订单状态的数量。其中弹出框主要是用的Mint-ui中的Message和饿了么组件的MessqgeBox和alert框。
入口文件main.js部分代码:
其中基于ES6中的Promise的HTTP库的Axios,关于它的响应拦截请求,以及各种请求方法 请 查看它的官方社区Api中文文档,地址如下:https://www.kancloud.cn/yunye/axios/234845
再来看一下三零九在线药品销售系统 后台的项目配置信息,其实跟前台的目录结构差不多,毕竟都是用Vue-cli脚手架生成的。
后台管理系统主要用到Vue+Vuex+Vue-router+AxiosElement-ui+Webpack技术等等。
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- assets // 图片样式文件
| |-- components // vue公共组件
| |-- pages // 页面 (里面有很多页面,就不依次详细展开了)
| |-- router // 路由文件
| |-- store // vuex的状态管理
| |-- util // 公共js文件
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico // logo图标
|-- index.html // 入口页面
|-- package.json // 项目基本信息
前后台 都有用到 缓解首屏加载时间过长的一个 过度 页面(可以这么说吧,其实就是怕一次性加载的数据过大导致白屏时间太长),效果如下:
只是在index.html根页面下加了如下代码:
"utf-8"> "viewport" content="width=device-width,initial-scale=1.0">三零九笙尘药膳坊后台管理系统 "shortcut icon" type="image/x-icon" href="static/icon.jfif">"app">"loader-wrapper">"loader">class="loader-section section-left">class="loader-section section-right">class="load_title">正在加载 309-admin,请耐心等待
master-tzy
然后看一下后台管理系统的效果图吧!!!!!!❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
登录页面如下:
运行Mobile端的商城和PC端的管理系统时,前提必须是先打开Node+express的本地服务器(后面会说到),不然会报以下错误:
首页效果如下:
首页布局其实也是参考了饿了么的Contain布局吧,但又不全是,所以我没有加动态的Tag标签页了,其实也可以实现吧,不过自己用的面包屑也凑合着吧,就懒得换了,当时答辩的前一天晚上,同组的Mr Yang都把代码发给我了,我也没来得及去加,因为当时要加的功能真的还有几个,比如后台没有考虑周到的大多是没有对数据进行查询,还有对订单没有进行分页,以及订单的按时间查找等等。后来肝到凌晨2点多实在不行了,所以一直没有将面包屑换掉,所以也凑合着用吧。
在这里再链接一个专门用到了饿了么组件中的Tag的动态标签页的小例子吧,虽然很简单,但还是根据自身需要来决定是否要用到Tag标签页吧。
链接地址 :https://github.com/tzy13755126023/Vue-elementui-demo-Tag
这里用到了视图化数据的Echarts中的柱形图和折线图来展示数据,关于Echarts怎么使用这里 也不做详细介绍了吧,直接把官方Api文档地址放这里了,地址如下: https://www.echartsjs.com/api.html#echarts。请自行查看。
我只贴出关于Echarts组件的部分代码。
class="ECharts1">
平台用户管理效果如下:
模糊查询是当时在老师指出后临时加的。效果如下:
这里的输入框中数据发生变化,则会自动更新获取的数据,每次都会进行分页,分页有两种形式,一种是后台进行分页再传到前台,一种是后台传过来所有的数据交给前台去进行分页,这里用的是第一种,所以配合饿了么组件的Pagination,当时自己觉得写得麻烦,pagination中的total总数和分页加载的数据每次都要请求两次,所以如果用第二种方法进行分页的话,则只需请求一次就可以将数据分页展示出来了。(当时自己也没考虑这么多吧,后期可能会进行改进。)
查看待审核商家(这里说明一下,因为Mobile端没有贴申请商家入驻的图,所以这里的待审核的商家数实际上是用户提交的申请数):
查看已审核商家(通过审核的,可以查看当前商家所有上架的商品,以及发布新的商品):
查看唐志远大药房商家的所有上架的商品:
发布新的商品:
查看用户反馈消息(用户提交的反馈信息将在这个模块中展示):
订单管理(二级路由,默认跳转到的是商家代发货页面,并展示当前待发货的数据):
查看健康资讯文章(点进去可以看到详细内容):
发布健康资讯(后台发布的健康资讯,会在Mobile端展示出来,展示给用户看):
当季必备:
查看登录日志:
关于后台管理这块,权限方面没有做完,因为预想是后台设计两个角色,一个管理员身份,另一个则是商家的身份,虽然大同小异,但是实际上获取的菜单项却差别很大,商家则只能获取三个,第一,自身的商家信息管理,第二,该商家的订单管理,在你家买的东西肯定要你来完成发货了(如果是代理的话,当然可以不用自己发货,我们组另外一个同学Ms yong 就是做的跟代理有关的,用户即代理其实也没错,符合当下的这种微商模式),第三就是对自己店内的商品进行管理了。这里只写了admin管理员的身份,暂时没有写商家的身份,后期有时间可能会完善。
最后一个就是服务器项目了,用Node+Express+mysql搭的本地服务器。
Express是Node.js上最流行的Web开发框架,我们可以通过应用生成器工具快速创建一个应用的骨架。
先去了解node下express初始化项目骨架的知识,算了在这里写一下吧,写在这里总觉得会好一点(图片用的CSDN的,我没有自己在建项目了~~~~~)。
参考链接:http://www.expressjs.com.cn/starter/generator.html
$ npm install express-generator -g 全局安装 express-generator
在当前目录下创建一个命名为myapp的应用(express 你的项目名)
注意:这里express myapp命令默认会使用jade模板引擎,建议使用ejs模板引擎,则应将命令改为express -e myapp
然后进入到你创建的项目目录下,安装所有依赖包
启动这个应用(Windows平台)
然后在浏览器输入localhost:3000/网址就可以看到这个应用了
通过Express应用生成器创建的应用一般具有如下的目录结构
解释:
app.js 启动文件,入口文件
package.json 存储工程的信息及模块依赖,当添加依赖模块时,运行npm install,npm会检查当前目录下的package.json,并自动安装所有指定的模块
node_modules 存放package.json中安装的模块
public 存放image、css、js文件
routes 存放路由文件
views 存放视图文件,或者说是模板文件
bin 存放可执行文件
当然本项目中多了两个Floder,一个是MySQL,其中放了sql脚本,还有mysqlConfig数据库配置信息等等。
另一个是Api ,其中是关于Client和Admin的 Api接口方法。
服务器项目目录如下图所示:
部分Sql脚本如下所示:
309药膳坊-Mobile商城 项目地址:https://github.com/tzy13755126023/309-Client如果觉得还不错,请Star一下啦 ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤❤
309药膳坊-Admin后台管理 项目地址:https://github.com/tzy13755126023/309-Admin如果觉得还不错,请Star一下啦 ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤❤
309药膳坊-Server服务器端 项目地址:https://github.com/tzy13755126023/309-server如果觉得还不错,请Star一下啦 ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤❤ thanks a lot。
Clone到本地后,走下面这个流程吧!!
npm install(npm网速可能比较慢,建议安装淘宝镜像cnpm install)
安装所有的包之后呢,就npm start吧,或者npm run dev 都可以,这个在package.json中的script可以自行设置。但是如果改动了config目录下的配置文件,比如进行代理跨域,或者改变运行端口,则需要重新启动项目。
在运行309药膳坊-Mobile商城 和309药膳坊-Admin后台管理 之前,记得先打开本地服务器。
❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
数据库数据就不放出来了,如果需要数据,联系方式如下:QQ:2938526863 vx:tzy13755126023。
欢迎Star 欢迎Star 欢迎Star 欢迎Star ❤❤❤❤❤❤❤❤❤❤ ❤❤❤❤❤❤❤❤❤❤ ❤❤❤❤❤❤❤❤❤❤❤❤❤❤
其实当时老师给我的建议是,你太重感情了,从你的项目名字上来看,就可以看出来,其实眼界可以再高点,不要局限于你的寝室。其实,当时我很想反驳他,但是我没有,也对,四年来确实是室友过于珍贵,可能也和自己参加的活动太少有关吧。现在想想其实也没那么珍贵吧,因为本就没有不散的宴席,每个人都是以自己为世界的中心,不强求也不奢求。学习的路还很长,希望自己一直保持这种学习的状态吧,加油,和看到这篇博文的朋友一起共勉。未来你一定会过得很好!!
欢迎Star 欢迎Star 欢迎Star 欢迎Star ❤❤❤❤❤❤❤ ❤❤❤❤❤❤❤❤❤❤❤❤❤❤ ❤❤❤❤❤❤❤❤❤❤❤❤❤❤