基于Vue+Vuex+Vue-Router+Axios+Mint-ui+Node+Express+MySQL+Element-ui的移動端項目

第一步:安裝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根頁面下加了如下代碼:

? ? ? ? ? ? ? 三零九笙塵藥膳坊后臺管理系統? ? ? ? ? ? html,

? ? body,

? ? #app {

? ? ? height: 100%;

? ? ? margin: 0px;

? ? ? padding: 0px;

? ? }

? ? .chromeframe {

? ? ? margin: 0.2em0;

? ? ? background: #ccc;

? ? ? color: #000;

? ? ? padding: 0.2em0;

? ? }

? ? #loader-wrapper {

? ? ? position: fixed;

? ? ? top: 0;

? ? ? left: 0;

? ? ? width: 100%;

? ? ? height: 100%;

? ? ? z-index:999999;

? ? }

? ? #loader {

? ? ? display: block;

? ? ? position: relative;

? ? ? left: 50%;

? ? ? top: 50%;

? ? ? width: 150px;

? ? ? height: 150px;

? ? ? margin: -75px00-75px;

? ? ? border-radius:50%;

? ? ? border: 3px solid transparent;

? ? ? /* COLOR 1 */? ? ? border-top-color: #FFF;

? ? ? -webkit-animation: spin 2s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-ms-animation: spin 2s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-moz-animation: spin 2s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-o-animation: spin 2s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */? ? ? animation: spin 2s linear infinite;

? ? ? /* Chrome, Firefox 16+, IE 10+, Opera */? ? ? z-index:1001;

? ? }

? ? #loader:before {

? ? ? content: "";

? ? ? position: absolute;

? ? ? top: 5px;

? ? ? left: 5px;

? ? ? right: 5px;

? ? ? bottom: 5px;

? ? ? border-radius:50%;

? ? ? border: 3px solid transparent;

? ? ? /* COLOR 2 */? ? ? border-top-color: #FFF;

? ? ? -webkit-animation: spin 3s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-moz-animation: spin 3s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-o-animation: spin 3s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-ms-animation: spin 3s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */? ? ? animation: spin 3s linear infinite;

? ? ? /* Chrome, Firefox 16+, IE 10+, Opera */? ? }

? ? #loader:after {

? ? ? content: "";

? ? ? position: absolute;

? ? ? top: 15px;

? ? ? left: 15px;

? ? ? right: 15px;

? ? ? bottom: 15px;

? ? ? border-radius:50%;

? ? ? border: 3px solid transparent;

? ? ? border-top-color: #FFF;

? ? ? /* COLOR 3 */-moz-animation: spin1.5s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-o-animation: spin1.5s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-ms-animation: spin1.5s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-webkit-animation: spin1.5s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */? ? ? animation: spin 1.5s linear infinite;

? ? ? /* Chrome, Firefox 16+, IE 10+, Opera */? ? }

? ? @-webkit-keyframes spin {

? ? ? 0% {

? ? ? ? -webkit-transform: rotate(0deg);

? ? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(0deg);

? ? ? ? /* IE 9 */? ? ? ? transform: rotate(0deg);

? ? ? ? /* Firefox 16+, IE 10+, Opera */? ? ? }

? ? ? 100% {

? ? ? ? -webkit-transform: rotate(360deg);

? ? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(360deg);

? ? ? ? /* IE 9 */? ? ? ? transform: rotate(360deg);

? ? ? ? /* Firefox 16+, IE 10+, Opera */? ? ? }

? ? }

? ? @keyframes spin {

? ? ? 0% {

? ? ? ? -webkit-transform: rotate(0deg);

? ? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(0deg);

? ? ? ? /* IE 9 */? ? ? ? transform: rotate(0deg);

? ? ? ? /* Firefox 16+, IE 10+, Opera */? ? ? }

? ? ? 100% {

? ? ? ? -webkit-transform: rotate(360deg);

? ? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(360deg);

? ? ? ? /* IE 9 */? ? ? ? transform: rotate(360deg);

? ? ? ? /* Firefox 16+, IE 10+, Opera */? ? ? }

? ? }

? ? #loader-wrapper .loader-section {

? ? ? position: fixed;

? ? ? top: 0;

? ? ? width: 51%;

? ? ? height: 100%;

? ? ? background: #7171C6;

? ? ? /* Old browsers */? ? ? z-index:1000;

? ? ? -webkit-transform: translateX(0);

? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateX(0);

? ? ? /* IE 9 */? ? ? transform: translateX(0);

? ? ? /* Firefox 16+, IE 10+, Opera */? ? }

? ? #loader-wrapper .loader-section.section-left {

? ? ? left: 0;

? ? }

? ? #loader-wrapper .loader-section.section-right {

? ? ? right: 0;

? ? }

? ? /* Loaded */? ? .loaded #loader-wrapper .loader-section.section-left {

? ? ? -webkit-transform: translateX(-100%);

? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateX(-100%);

? ? ? /* IE 9 */? ? ? transform: translateX(-100%);

? ? ? /* Firefox 16+, IE 10+, Opera */-webkit-transition: all0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

? ? ? transition: all 0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

? ? }

? ? .loaded #loader-wrapper .loader-section.section-right {

? ? ? -webkit-transform: translateX(100%);

? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateX(100%);

? ? ? /* IE 9 */? ? ? transform: translateX(100%);

? ? ? /* Firefox 16+, IE 10+, Opera */-webkit-transition: all0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

? ? ? transition: all 0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

? ? }

? ? .loaded #loader {

? ? ? opacity: 0;

? ? ? -webkit-transition: all0.3s ease-out;

? ? ? transition: all 0.3s ease-out;

? ? }

? ? .loaded #loader-wrapper {

? ? ? visibility: hidden;

? ? ? -webkit-transform: translateY(-100%);

? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateY(-100%);

? ? ? /* IE 9 */? ? ? transform: translateY(-100%);

? ? ? /* Firefox 16+, IE 10+, Opera */-webkit-transition: all0.3s 1s ease-out;

? ? ? transition: all 0.3s 1s ease-out;

? ? }

? ? /* JavaScript Turned Off */? ? .no-js #loader-wrapper {

? ? ? display: none;

? ? }

? ? .no-js h1 {

? ? ? color: #222222;

? ? }

? ? #loader-wrapper .load_title {

? ? ? font-family:'Open Sans';

? ? ? color: #FFF;

? ? ? font-size: 19px;

? ? ? width: 100%;

? ? ? text-align: center;

? ? ? z-index:9999999999999;

? ? ? position: absolute;

? ? ? top: 60%;

? ? ? opacity: 1;

? ? ? line-height: 30px;

? ? }

? ? #loader-wrapper .load_title span {

? ? ? font-weight: normal;

? ? ? font-style: italic;

? ? ? font-size: 13px;

? ? ? color: #FFF;

? ? ? opacity: 0.5;

? ? }



? ? ?

? ? ?


? ? ? 正在加載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組件的部分代碼。

? ? ? ? // 引入 ECharts 主模塊varecharts = require('echarts/lib/echarts');// 引入柱狀圖require('echarts/lib/chart/bar');

require("echarts/lib/component/dataset");// 引入提示框和標題組件require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

require("echarts/lib/component/legendScroll");

require("echarts/lib/component/axisPointer");

require("echarts/lib/component/markLine");

export default{

? name:'Echarts1',

? data(){

? ? ? ? return{

? ? ? ? }

? },

? mounted(){

? ? ? varmyChart = echarts.init(document.querySelector('.ECharts1'))

? ? ? myChart.setOption({

? ? ? ? title: {

? ? ? ? ? text: '2018-2019年各類藥物月交易額',

? ? ? ? ? textStyle:{? ? ? ? ? ? ? ? ? //文字樣式color:'#000',//顏色fontWeight:700,//粗細fontSize:30,? ? ? ? ? ? ?

? ? ? ? ? ? // textBorderColor:'black',? //文字本身的描邊顏色。textShadowColor:'rgba(255,0,0,.2)',//文字本身的陰影顏色。

? ? ? ? ? ? // textShadowBlur :5,? ? ? //文字本身的陰影長度。

? ? ? ? ? ? // textShadowOffsetX:8,? ? //文字本身的陰影 X 偏移。

? ? ? ? ? ? // textShadowOffsetY:5,? ? ? //文字本身的陰影 Y 偏移。? ? ? ? ? }

? ? ? ? },

? ? ? ? tooltip : {? ? ? ? ? ? ? ? //提示框組件。trigger:'axis',//觸發類型。

? ? ? ? ? // 可選: 'item'數據項圖形觸發,主要在散點圖,餅圖等無類目軸的圖表中使用。

? ? ? ? ? //? ? ? ? 'axis'? 坐標軸觸發,主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。axisPointer : {// 坐標軸指示器,坐標軸觸發有效type :'shadow'// 默認為直線,可選為:'line' | 'shadow'? ? ? ? }

? ? },

? ? legend: {? //? 圖例組件data:['中西藥品','養生保健','醫療器械','計生用品','中藥飲品','美容護膚'],

? ? ? ? right:25,

? ? ? ? top:70,

? ? ? ? // orient:'vertica'? 圖例列表的布局朝向。可選:'horizontal'? ? 'vertical'itemWidth:30,// 圖例的寬度itemHeight:20,// 圖例的高度? ? ? ? textStyle:{

? ? ? ? ? fontSize:16? ? ? ? }

? ? },

? ? grid: {? ? //? 直角坐標系內繪圖網格top:150,?

? ? ? ? left: '3%',

? ? ? ? right: '4.5%',

? ? ? ? bottom: '3%',

? ? ? ? containLabel: true? ? },

? ? xAxis : [? ? // grid 中的 x 軸? ? ? ? {?

? ? ? ? ? ? type : 'category',//類目軸,適用于離散的類目數據,為該類型時必須通過 data 設置類目數據? ? ? ? ? ? data : [

? ? ? ? ? ? {

? ? ? ? ? ? ? ? value: '2018年11月',

? ? ? ? ? ? ? ? textStyle: {

? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? value: '2018年12月',

? ? ? ? ? ? ? ? textStyle: {

? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? value: '2019年1月',

? ? ? ? ? ? ? ? textStyle: {

? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? value: '2019年2月',

? ? ? ? ? ? ? ? textStyle: {

? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? value: '2019年3月',

? ? ? ? ? ? ? ? textStyle: {

? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? value: '2019年4月',

? ? ? ? ? ? ? ? textStyle: {

? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? value: '2019年5月',

? ? ? ? ? ? ? ? textStyle: {

? ? ? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },]

? ? ? ? }

? ? ],

? ? yAxis : [? ? // grid 中的 Y 軸? ? ? ? {

? ? ? ? ? ? name:'單位(千元)',

? ? ? ? ? ? // categorytype :'value',

? ? ? ? ? ? nameTextStyle:{

? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? }

? ? ? ? },

? ? ],

? ? series : [

? ? ? ? {

? ? ? ? ? ? name:'中西藥品',

? ? ? ? ? ? type:'bar',

? ? ? ? ? ? data:[260,332,301,334,390,330,320]

? ? ? ? },

? ? ? ? {

? ? ? ? ? ? name:'養生保健',

? ? ? ? ? ? type:'bar',

? ? ? ? ? ? stack: '廣告',

? ? ? ? ? ? data:[120,132,101,134,90,230,210]

? ? ? ? },

? ? ? ? {

? ? ? ? ? ? name:'醫療器械',

? ? ? ? ? ? type:'bar',

? ? ? ? ? ? stack: '廣告',

? ? ? ? ? ? data:[220,182,191,234,290,330,310]

? ? ? ? },

? ? ? ? {

? ? ? ? ? ? name:'計生用品',

? ? ? ? ? ? type:'bar',

? ? ? ? ? ? stack: '廣告',

? ? ? ? ? ? data:[150,232,201,154,190,330,410],

? ? ? ? },

? ? ? ? {

? ? ? ? ? ? name:'中藥飲品',

? ? ? ? ? ? type:'bar',

? ? ? ? ? ? data:[862,1018,964,1026,1679,1600,1570],

? ? ? ? ? ? markLine : {

? ? ? ? ? ? ? ? lineStyle: {

? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? type: 'dashed'? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? [{type : 'min'}, {type :'max'}]

? ? ? ? ? ? ? ? ]

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? {

? ? ? ? ? ? name:'美容護膚',

? ? ? ? ? ? type:'bar',

? ? ? ? ? ? barWidth : 5,

? ? ? ? ? ? stack: '中藥飲品',

? ? ? ? ? ? data:[620,732,701,734,1090,1130,1120],

? ? ? ? ? ? markLine : {

? ? ? ? ? ? ? ? lineStyle: {

? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? type: 'dashed'? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? [{type : 'min'}, {type :'max'}]

? ? ? ? ? ? ? ? ]

? ? ? ? ? ? }

? ? ? ? },

? ? ]

? ? });

? ? },

}.ECharts1{

? margin:2%0;

? width: 50%;

? height: 600px;

? float: left;

? /*background-color: red;*/}


平臺用戶管理效果如下:


模糊查詢是當時在老師指出后臨時加的。效果如下:


這里的輸入框中數據發生變化,則會自動更新獲取的數據,每次都會進行分頁,分頁有兩種形式,一種是后臺進行分頁再傳到前臺,一種是后臺傳過來所有的數據交給前臺去進行分頁,這里用的是第一種,所以配合餓了么組件的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

309藥膳坊-Admin后臺管理? ? ? 項目地址:https://github.com/tzy13755126023/309-Admin

309藥膳坊-Server服務器端? ? ? 項目地址:https://github.com/tzy13755126023/309-server

Clone到本地后,走下面這個流程吧!!

npm install(npm網速可能比較慢,建議安裝淘寶鏡像cnpm install)

安裝所有的包之后呢,就npm start吧,或者npm run dev 都可以,這個在package.json中的script可以自行設置。但是如果改動了config目錄下的配置文件,比如進行代理跨域,或者改變運行端口,則需要重新啟動項目。

在運行309藥膳坊-Mobile商城 和309藥膳坊-Admin后臺管理 之前,記得先打開本地服務器。?

數據庫數據就不放出來了,如果需要數據。

歡迎Star? ?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容