├── .gitignore ├── README.md ├── gshop-client ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .postcssrc.js ├── README.md ├── Vant通过CDN使用的问题.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── dist │ ├── index.html │ └── static │ │ ├── css │ │ ├── app.30790115300ab27614ce176899523b62.css │ │ └── app.30790115300ab27614ce176899523b62.css.map │ │ └── js │ │ ├── app.b22ce679862c47a75225.js │ │ ├── app.b22ce679862c47a75225.js.map │ │ ├── manifest.2ae2e69a05c33dfc65f8.js │ │ ├── manifest.2ae2e69a05c33dfc65f8.js.map │ │ ├── vendor.4e6936140256982905ea.js │ │ └── vendor.4e6936140256982905ea.js.map ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── api │ │ ├── ajax.js │ │ └── index.js │ ├── assets │ │ └── logo.png │ ├── common │ │ ├── imgs │ │ │ └── loading.gif │ │ └── stylus │ │ │ └── mixins.styl │ ├── components │ │ ├── AlertTip │ │ │ └── AlertTip.vue │ │ ├── CartControl │ │ │ └── CartControl.vue │ │ ├── Food │ │ │ └── Food.vue │ │ ├── FooterGuide │ │ │ ├── FooterGuide.vue │ │ │ └── FooterGuide1.vue │ │ ├── HeaderTop │ │ │ └── HeaderTop.vue │ │ ├── HelloWorld.vue │ │ ├── ShopCart │ │ │ └── ShopCart.vue │ │ ├── ShopHeader │ │ │ └── ShopHeader.vue │ │ ├── ShopList │ │ │ ├── ShopList.vue │ │ │ └── images │ │ │ │ ├── shop │ │ │ │ ├── 1.jpg │ │ │ │ ├── 2.jpg │ │ │ │ ├── 3.jpg │ │ │ │ └── 4.jpg │ │ │ │ └── shop_back.svg │ │ └── Star │ │ │ ├── Star.vue │ │ │ └── images │ │ │ ├── star24_half@2x.png │ │ │ ├── star24_half@3x.png │ │ │ ├── star24_off@2x.png │ │ │ ├── star24_off@3x.png │ │ │ ├── star24_on@2x.png │ │ │ ├── star24_on@3x.png │ │ │ ├── star36_half@2x.png │ │ │ ├── star36_half@3x.png │ │ │ ├── star36_off@2x.png │ │ │ ├── star36_off@3x.png │ │ │ ├── star36_on@2x.png │ │ │ ├── star36_on@3x.png │ │ │ ├── star48_half@2x.png │ │ │ ├── star48_half@3x.png │ │ │ ├── star48_off@2x.png │ │ │ ├── star48_off@3x.png │ │ │ ├── star48_on@2x.png │ │ │ └── star48_on@3x.png │ ├── filters │ │ └── index.js │ ├── main.js │ ├── mock │ │ ├── data.json │ │ └── mockServer.js │ ├── pages │ │ ├── Login │ │ │ ├── Login.vue │ │ │ └── images │ │ │ │ └── captcha.svg │ │ ├── Msite │ │ │ ├── Msite.vue │ │ │ └── images │ │ │ │ └── msite_back.svg │ │ ├── Order │ │ │ ├── Order.vue │ │ │ └── images │ │ │ │ └── person.png │ │ ├── Profile │ │ │ └── Profile.vue │ │ ├── Search │ │ │ └── Search.vue │ │ └── Shop │ │ │ ├── Shop.vue │ │ │ ├── ShopGoods │ │ │ └── ShopGoods.vue │ │ │ ├── ShopInfo │ │ │ └── ShopInfo.vue │ │ │ └── ShopRatings │ │ │ └── ShopRatings.vue │ ├── router │ │ └── index.js │ └── store │ │ ├── actions.js │ │ ├── getters.js │ │ ├── index.js │ │ ├── mutation-types.js │ │ ├── mutations.js │ │ └── state.js ├── static │ ├── .gitkeep │ └── css │ │ └── reset.css └── 硅谷外卖app学习.md ├── gshop-client_pages ├── css │ ├── index.css │ ├── reset.css │ └── swiper.css ├── images │ ├── captcha.svg │ ├── msite_back.svg │ ├── nav │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── order │ │ └── person.png │ ├── shop │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ └── 4.jpg │ ├── shop_back.svg │ └── stars │ │ ├── star24_half@2x.png │ │ ├── star24_half@3x.png │ │ ├── star24_off@2x.png │ │ ├── star24_off@3x.png │ │ ├── star24_on@2x.png │ │ ├── star24_on@3x.png │ │ ├── star36_half@2x.png │ │ ├── star36_half@3x.png │ │ ├── star36_off@2x.png │ │ ├── star36_off@3x.png │ │ ├── star36_on@2x.png │ │ ├── star36_on@3x.png │ │ ├── star48_half@2x.png │ │ ├── star48_half@3x.png │ │ ├── star48_off@2x.png │ │ ├── star48_off@3x.png │ │ ├── star48_on@2x.png │ │ └── star48_on@3x.png ├── index.html ├── js │ ├── index.js │ └── swiper.js └── stylus │ ├── index.styl │ └── mixins.styl ├── gshop-server ├── API文档.md ├── api │ └── ajax.js ├── app.js ├── bin │ └── www ├── data │ ├── index_category.json │ └── shops.json ├── db │ └── models.js ├── package.json ├── public │ └── stylesheets │ │ └── style.css ├── routes │ ├── index.js │ └── users.js ├── util │ └── sms_util.js └── views │ ├── error.ejs │ └── index.ejs ├── 短信验证码.txt ├── 硅谷外卖-vue项目.postman_collection.json └── 笔记总结.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /gshop-client/node_modules/ 4 | /gshop-server/node_modules/ 5 | /dist/ 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Editor directories and files 11 | .idea 12 | .vscode 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 项目介绍 2 | * gshop-client 硅谷外卖前台 3 | * gshop-server 硅谷外卖后台 4 | * gshop-client_pages 硅谷外卖切图 5 | 6 | ## 技术参考 7 | ### 前台 8 | * axios 9 | * better-scroll 10 | * date-fns 11 | * mint-ui 12 | * mockjs 13 | * moment 14 | * node-static 15 | * swiper 16 | * vant 17 | * vue2.5 18 | * vue-lazyload 19 | * vue-router 20 | * vuex 21 | ### 后台 22 | * node 23 | * mongoose 24 | * express 25 | * js-base64 26 | * svg-captcha 27 | 28 | ## 项目运行 29 | 1. 前后台安装相应依赖 30 | ```js 31 | npm install 32 | ``` 33 | 2. 安装mongoDB数据库并成功启动 34 | 35 | * windows安装包,百度链接：[https://pan.baidu.com/s/1M7HhtTRW8fE1Oknb0o4TgA](https://pan.baidu.com/s/1M7HhtTRW8fE1Oknb0o4TgA) 提取码：kz8x 36 | * [win版MongoDB安装教程](http://baijiahao.baidu.com/s?id=1601512248926547477&wfr=spider&for=pc) 37 | * MongoDB配置环境变量里面写的不清楚，我在这里重写下， 38 | ```js 39 | MONGO_HOME = C:\Program Files\MongoDB\Server\3.4\bin 40 | Path = %MONGO_HOME% 41 | ``` 42 | * 推荐使用可视化工具管理数据库，清晰明了，我现找了一个，全是英文看不懂，但也能凑活用了，如果有更好的希望推荐下。教程网址[Robo 3T,mongoDB可视化工具](https://www.jianshu.com/p/1194de9859d0) 43 | 44 | 3. 启动后台项目 45 | * 启动前查看本地MongoDB地址并进行更改 46 | ```js 47 | // --db/models.js 48 | mongoose.connect('mongodb://localhost:27017/guigu_zhipin') 49 | ``` 50 | * 修改发送短信验证SID 51 | 短信验证官网:[容联云通讯](https://www.yuntongxun.com/?ly=sem-baidu&qd=pc-dasou&cp=ppc&xl=null&kw=10236399&bd_vid=10788411988454829498) 52 | * 注册登录以后,控制台首页有开发者主账号,复制四条秘钥进行修改 53 | ```js 54 | // --util/sms_util.js 55 | var ACCOUNT_SID = '填入你的SID'; 56 | var AUTH_TOKEN = '填入你的TOKEN'; 57 | var Rest_URL = 'https://app.cloopen.com:8883'; 58 | var AppID = '8aaf0708697b6beb016985281c8103f4'; 59 | ``` 60 | * 启动 61 | ```js 62 | PS M:\个人做过的项目\学习项目\vue项目\硅谷外卖\gshop\gshop-server> npm start 63 | 64 | > gshop_server@0.0.0 start M:\个人做过的项目\学习项目\vue项目\硅谷外卖\gshop\gshop-server 65 | > nodemon ./bin/www 66 | 67 | [nodemon] 1.17.1 68 | [nodemon] to restart at any time, enter `rs` 69 | [nodemon] watching: *.* 70 | [nodemon] starting `node ./bin/www` 71 | server running on port 3000 72 | 数据库连接成功! 73 | ``` 74 | 数据库连接成功,启动成功,端口号3000 75 | 76 | 修改默认端口号在bin/www文件 77 | ```js 78 | // --bin/www 79 | var port = normalizePort(process.env.PORT || '3000'); 80 | ``` 81 | 4. 启动前台项目 82 | ```js 83 | npm start 84 | ``` 85 | 前台登录注册功能是一起的,也就是登录时后台判断是否有此账号,没有进行注册再登录,返回登录成功信息 86 | 87 | -------------------------------------------------------------------------------- /gshop-client/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime", 12 | ["component", [ 13 | { 14 | "libraryName": "mint-ui", 15 | "style": true 16 | } 17 | ]] 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /gshop-client/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /gshop-client/.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /gshop-client/.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /gshop-client/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /gshop-client/README.md: -------------------------------------------------------------------------------- 1 | # gshop 2 | 3 | ## npm 安装 4 | * npm install --save swiper 安装swiper 5 | * npm i vant -S 安装vant 6 | * npm install -S axios 安装axios 7 | * npm install vuex --save 安装vuex 8 | * npm install mockjs 安装mockjs 9 | * npm install better-scroll 滚动插件 10 | * npm i vue-lazyload -S 图片懒加载 11 | * npm i moment -S 引入日期格式化 12 | * npm i date-fns -S 轻量级格式化日期代替moment 13 | ## 讲解你的项目 14 | 1. 项目描述 15 | * 是哪一方面的项目：前后端分离的SPA应用，外卖app 16 | * 有哪些功能模块： 17 | * 主要用到的技术： 18 | * 项目的开发模式：模块化，组件化，工程化 19 | 2. 技术选型，技术架构(主要用到了哪些技术) 20 | * vue技术栈(vue全家桶) 21 | * 使用axios库发送ajax请求 22 | * 有postman接口测试，模拟数据mockjs 23 | * 基于promise使用async、await 24 | * ES6模块，babel 25 | * 项目构建，组件化webpack 26 | * 工程化使用脚手架，使用eslint检查代码 27 | * css预编译器，stylus 28 | 29 | ## 什么是API接口 30 | * url，请求方式，请求参数的格式，响应数据的格式 31 | * 测接口： postman测试通不通，对比文档是否一致， 32 | * 调接口 33 | * 对接口 34 | 35 | ## 你能从项目中学习到什么 36 | * 开发方式、模式 37 | * 学习到一些插件，库 38 | * 页面布局 39 | 40 | ## vuex 41 | 1. 调用action 42 | 2. 读取state数据 43 | 3. 模板显示数据 44 | 45 | ## 轮播图 46 | 47 | ## ajax异步加载 48 | * 异步显示数据，先显示初始数据，再显示获取的数据 49 | 50 | ## JSON 51 | * JSON分为json对象和json数组， 52 | * 结构：名称/数据类型 53 | * 结构 + value值，值可以变，结构不可以变 54 | 55 | ## 商品列表滑动功能 56 | 1. 功能： 57 | * 实现两个列表滑动 58 | * 凸显当前分类 59 | * 当滑动右侧列表时，更新当前分类 60 | * 点击某个分类项，右侧列表滑动到对应位置 61 | 2. 分析 62 | * 类名：current 标识当前分类 63 | * 设计一个计算属性： currentIndex 64 | * 根据哪些数据计算？ 65 | * scrollY： 右侧活动的Y坐标轴（滑动过程是实时变化的） 66 | * tops： 所有右侧分类li的top组成的数组（列表第一次显示后就不再变化） 67 | 3. 编码 68 | * 在滑动过程中，实时收集scrollY 69 | * 在列表第一次显示后，收集tops 70 | * 实现currentIndex的计算逻辑 71 | 72 | ## 73 | * 界面的展现是根据数据进行展现的 74 | * -------------------------------------------------------------------------------- /gshop-client/Vant通过CDN使用的问题.md: -------------------------------------------------------------------------------- 1 | * vant中有一些组件不能直接使用，需要vant.xxx才能使用 2 | 3 | ```js 4 | //使用vant图片懒加载 5 | Vue.use(vant.Lazyload,{ 6 | preLoad: 1.3, 7 | loading: './img/loading.gif', 8 | attempt: 1 9 | }); 10 | //使用轻提示 11 | vant.Toast('没有更多了'); 12 | ``` -------------------------------------------------------------------------------- /gshop-client/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /gshop-client/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /gshop-client/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/build/logo.png -------------------------------------------------------------------------------- /gshop-client/build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /gshop-client/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /gshop-client/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | 12 | 13 | module.exports = { 14 | context: path.resolve(__dirname, '../'), 15 | entry: { 16 | app: './src/main.js' 17 | }, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: '[name].js', 21 | publicPath: process.env.NODE_ENV === 'production' 22 | ? config.build.assetsPublicPath 23 | : config.dev.assetsPublicPath 24 | }, 25 | resolve: { 26 | extensions: ['.js', '.vue', '.json'], 27 | alias: { 28 | 'vue$': 'vue/dist/vue.esm.js', 29 | '@': resolve('src'), 30 | } 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.vue$/, 36 | loader: 'vue-loader', 37 | options: vueLoaderConfig 38 | }, 39 | { 40 | test: /\.js$/, 41 | loader: 'babel-loader', 42 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 46 | loader: 'url-loader', 47 | options: { 48 | limit: 10000, 49 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 50 | } 51 | }, 52 | { 53 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 54 | loader: 'url-loader', 55 | options: { 56 | limit: 10000, 57 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 58 | } 59 | }, 60 | { 61 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 62 | loader: 'url-loader', 63 | options: { 64 | limit: 10000, 65 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 66 | } 67 | } 68 | ] 69 | }, 70 | node: { 71 | // prevent webpack from injecting useless setImmediate polyfill because Vue 72 | // source contains it (although only uses it if it's native). 73 | setImmediate: false, 74 | // prevent webpack from injecting mocks to Node native modules 75 | // that does not make sense for the client 76 | dgram: 'empty', 77 | fs: 'empty', 78 | net: 'empty', 79 | tls: 'empty', 80 | child_process: 'empty' 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /gshop-client/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /gshop-client/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: true 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vendor modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'vendor', 84 | minChunks (module) { 85 | // any required modules inside node_modules are extracted to vendor 86 | return ( 87 | module.resource && 88 | /\.js$/.test(module.resource) && 89 | module.resource.indexOf( 90 | path.join(__dirname, '../node_modules') 91 | ) === 0 92 | ) 93 | } 94 | }), 95 | // extract webpack runtime and module manifest to its own file in order to 96 | // prevent vendor hash from being updated whenever app bundle is updated 97 | new webpack.optimize.CommonsChunkPlugin({ 98 | name: 'manifest', 99 | minChunks: Infinity 100 | }), 101 | // This instance extracts shared chunks from code splitted chunks and bundles them 102 | // in a separate chunk, similar to the vendor chunk 103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 104 | new webpack.optimize.CommonsChunkPlugin({ 105 | name: 'app', 106 | async: 'vendor-async', 107 | children: true, 108 | minChunks: 3 109 | }), 110 | 111 | // copy custom static assets 112 | new CopyWebpackPlugin([ 113 | { 114 | from: path.resolve(__dirname, '../static'), 115 | to: config.build.assetsSubDirectory, 116 | ignore: ['.*'] 117 | } 118 | ]) 119 | ] 120 | }) 121 | 122 | if (config.build.productionGzip) { 123 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 124 | 125 | webpackConfig.plugins.push( 126 | new CompressionWebpackPlugin({ 127 | asset: '[path].gz[query]', 128 | algorithm: 'gzip', 129 | test: new RegExp( 130 | '\\.(' + 131 | config.build.productionGzipExtensions.join('|') + 132 | ')$' 133 | ), 134 | threshold: 10240, 135 | minRatio: 0.8 136 | }) 137 | ) 138 | } 139 | 140 | if (config.build.bundleAnalyzerReport) { 141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 143 | } 144 | 145 | module.exports = webpackConfig 146 | -------------------------------------------------------------------------------- /gshop-client/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /gshop-client/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: { 14 | '/api': { // 匹配所有以 '/api'开头的请求路径 15 | target: 'http://localhost:3000', // 代理目标的基础路径 16 | changeOrigin: true, // 支持跨域 17 | pathRewrite: {// 重写路径: 去掉路径中开头的'/api' 18 | '^/api': '' 19 | } 20 | } 21 | }, 22 | 23 | // Various Dev Server settings 24 | host: 'localhost', // can be overwritten by process.env.HOST 25 | port: 8066, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 26 | autoOpenBrowser: true, 27 | errorOverlay: true, 28 | notifyOnErrors: true, 29 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | assetsRoot: path.resolve(__dirname, '../dist'), 52 | assetsSubDirectory: 'static', 53 | assetsPublicPath: './', 54 | 55 | /** 56 | * Source Maps 57 | */ 58 | 59 | productionSourceMap: true, 60 | // https://webpack.js.org/configuration/devtool/#production 61 | devtool: '#source-map', 62 | 63 | // Gzip off by default as many popular static hosts such as 64 | // Surge or Netlify already gzip all static assets for you. 65 | // Before setting to `true`, make sure to: 66 | // npm install --save-dev compression-webpack-plugin 67 | productionGzip: false, 68 | productionGzipExtensions: ['js', 'css'], 69 | 70 | // Run the build command with an extra argument to 71 | // View the bundle analyzer report after build finishes: 72 | // `npm run build --report` 73 | // Set to `true` or `false` to always turn it on or off 74 | bundleAnalyzerReport: process.env.npm_config_report 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /gshop-client/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /gshop-client/dist/index.html: -------------------------------------------------------------------------------- 1 | gshop
-------------------------------------------------------------------------------- /gshop-client/dist/static/css/app.30790115300ab27614ce176899523b62.css: -------------------------------------------------------------------------------- 1 | #app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}h1[data-v-d8ec41bc],h2[data-v-d8ec41bc]{font-weight:400}ul[data-v-d8ec41bc]{list-style-type:none;padding:0}li[data-v-d8ec41bc]{display:inline-block;margin:0 10px}a[data-v-d8ec41bc]{color:#42b983} 2 | /*# sourceMappingURL=app.30790115300ab27614ce176899523b62.css.map */ -------------------------------------------------------------------------------- /gshop-client/dist/static/css/app.30790115300ab27614ce176899523b62.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["app.30790115300ab27614ce176899523b62.css"],"names":[],"mappings":"AACA,KACE,8CAAoD,AACpD,mCAAoC,AACpC,kCAAmC,AACnC,kBAAmB,AACnB,cAAe,AACf,eAAiB,CAClB,AAED,wCACE,eAAoB,CACrB,AACD,oBACE,qBAAsB,AACtB,SAAW,CACZ,AACD,oBACE,qBAAsB,AACtB,aAAe,CAChB,AACD,mBACE,aAAe,CAChB","file":"app.30790115300ab27614ce176899523b62.css","sourcesContent":["\n#app {\n font-family: 'Avenir', Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-align: center;\n color: #2c3e50;\n margin-top: 60px;\n}\n\nh1[data-v-d8ec41bc], h2[data-v-d8ec41bc] {\n font-weight: normal;\n}\nul[data-v-d8ec41bc] {\n list-style-type: none;\n padding: 0;\n}\nli[data-v-d8ec41bc] {\n display: inline-block;\n margin: 0 10px;\n}\na[data-v-d8ec41bc] {\n color: #42b983;\n}\n"]} -------------------------------------------------------------------------------- /gshop-client/dist/static/js/app.b22ce679862c47a75225.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{"1uuo":function(t,e){},"7Otq":function(t,e){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd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"},NHnr:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n("7+uW"),s={render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"app"}},[e("img",{attrs:{src:n("7Otq")}}),this._v(" "),e("router-view")],1)},staticRenderFns:[]};var i=n("VU/8")({name:"App"},s,!1,function(t){n("Yz1H")},null,null).exports,r=n("/ocq"),l={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"hello"},[n("h1",[t._v(t._s(t.msg))]),t._v(" "),n("h2",[t._v("Essential Links")]),t._v(" "),t._m(0),t._v(" "),n("h2",[t._v("Ecosystem")]),t._v(" "),t._m(1)])},staticRenderFns:[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("ul",[n("li",[n("a",{attrs:{href:"https://vuejs.org",target:"_blank"}},[t._v("\n Core Docs\n ")])]),t._v(" "),n("li",[n("a",{attrs:{href:"https://forum.vuejs.org",target:"_blank"}},[t._v("\n Forum\n ")])]),t._v(" "),n("li",[n("a",{attrs:{href:"https://chat.vuejs.org",target:"_blank"}},[t._v("\n Community Chat\n ")])]),t._v(" "),n("li",[n("a",{attrs:{href:"https://twitter.com/vuejs",target:"_blank"}},[t._v("\n Twitter\n ")])]),t._v(" "),n("br"),t._v(" "),n("li",[n("a",{attrs:{href:"http://vuejs-templates.github.io/webpack/",target:"_blank"}},[t._v("\n Docs for This Template\n ")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("a",{attrs:{href:"http://router.vuejs.org/",target:"_blank"}},[this._v("\n vue-router\n ")])]),this._v(" "),e("li",[e("a",{attrs:{href:"http://vuex.vuejs.org/",target:"_blank"}},[this._v("\n vuex\n ")])]),this._v(" "),e("li",[e("a",{attrs:{href:"http://vue-loader.vuejs.org/",target:"_blank"}},[this._v("\n vue-loader\n ")])]),this._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/vuejs/awesome-vue",target:"_blank"}},[this._v("\n awesome-vue\n ")])])])}]};var c=n("VU/8")({name:"HelloWorld",data:function(){return{msg:"Welcome to Your Vue.js App"}}},l,!1,function(t){n("1uuo")},"data-v-d8ec41bc",null).exports;a.a.use(r.a);var h=new r.a({routes:[{path:"/",name:"HelloWorld",component:c}]});a.a.config.productionTip=!1,new a.a({el:"#app",router:h,components:{App:i},template:""})},Yz1H:function(t,e){}},["NHnr"]); 2 | //# sourceMappingURL=app.b22ce679862c47a75225.js.map -------------------------------------------------------------------------------- /gshop-client/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js: -------------------------------------------------------------------------------- 1 | !function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a 2 | 3 | 4 | 5 | 6 | 7 | gshop 8 | 9 | 10 | 11 | 12 | 13 | 24 | 25 | 28 | 29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /gshop-client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gshop", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "ynzy ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.18.0", 14 | "better-scroll": "^1.15.0", 15 | "date-fns": "^1.30.1", 16 | "mint-ui": "^2.2.13", 17 | "mockjs": "^1.0.1-beta3", 18 | "moment": "^2.24.0", 19 | "node-static": "^0.7.11", 20 | "swiper": "^4.5.0", 21 | "vant": "^1.5.9", 22 | "vue": "^2.5.2", 23 | "vue-lazyload": "^1.2.6", 24 | "vue-router": "^3.0.1", 25 | "vuex": "^3.1.0" 26 | }, 27 | "devDependencies": { 28 | "autoprefixer": "^7.1.2", 29 | "babel-core": "^6.22.1", 30 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 31 | "babel-loader": "^7.1.1", 32 | "babel-plugin-component": "^1.1.1", 33 | "babel-plugin-syntax-jsx": "^6.18.0", 34 | "babel-plugin-transform-runtime": "^6.22.0", 35 | "babel-plugin-transform-vue-jsx": "^3.5.0", 36 | "babel-preset-env": "^1.3.2", 37 | "babel-preset-stage-2": "^6.22.0", 38 | "chalk": "^2.0.1", 39 | "copy-webpack-plugin": "^4.0.1", 40 | "css-loader": "^0.28.0", 41 | "extract-text-webpack-plugin": "^3.0.0", 42 | "file-loader": "^1.1.4", 43 | "friendly-errors-webpack-plugin": "^1.6.1", 44 | "html-webpack-plugin": "^2.30.1", 45 | "node-notifier": "^5.1.2", 46 | "optimize-css-assets-webpack-plugin": "^3.2.0", 47 | "ora": "^1.2.0", 48 | "portfinder": "^1.0.13", 49 | "postcss-import": "^11.0.0", 50 | "postcss-loader": "^2.0.8", 51 | "postcss-url": "^7.2.1", 52 | "rimraf": "^2.6.0", 53 | "semver": "^5.3.0", 54 | "shelljs": "^0.7.6", 55 | "stylus": "^0.54.5", 56 | "stylus-loader": "^3.0.2", 57 | "uglifyjs-webpack-plugin": "^1.1.1", 58 | "url-loader": "^0.5.8", 59 | "vue-loader": "^13.3.0", 60 | "vue-style-loader": "^3.0.1", 61 | "vue-template-compiler": "^2.5.2", 62 | "webpack": "^3.6.0", 63 | "webpack-bundle-analyzer": "^2.9.0", 64 | "webpack-dev-server": "^2.9.1", 65 | "webpack-merge": "^4.1.0" 66 | }, 67 | "engines": { 68 | "node": ">= 6.0.0", 69 | "npm": ">= 3.0.0" 70 | }, 71 | "browserslist": [ 72 | "> 1%", 73 | "last 2 versions", 74 | "not ie <= 8" 75 | ] 76 | } 77 | -------------------------------------------------------------------------------- /gshop-client/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 45 | 46 | 52 | -------------------------------------------------------------------------------- /gshop-client/src/api/ajax.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ajax请求函数模块 3 | * 返回值： promise对象(异步返回的数据是: response.data) 4 | */ 5 | 6 | import axios from 'axios' 7 | 8 | /** 9 | * 10 | * 11 | * @export 12 | * @param {*} url //请求地址 13 | * @param {*} [data={}] //请求数据对象 14 | * @param {string} [type='GET'] //请求方法 15 | */ 16 | export default function ajax(url, data = {}, type = 'GET') { 17 | // console.log(url) 18 | return new Promise(function (resolve, reject) { 19 | // 执行异步ajax请求 20 | let promise 21 | if (type === 'GET') { 22 | // 准备url query参数数据 23 | let dataStr = '' //数据拼接字符串 24 | Object.keys(data).forEach(key => { 25 | dataStr += key + '=' + data[key] + '&' 26 | }) 27 | if (dataStr !== '') { 28 | dataStr = dataStr.substring(0, dataStr.lastIndexOf('&')) 29 | url = url + '?' + dataStr 30 | } 31 | // 发送get请求 32 | promise = axios.get(url) 33 | } else { 34 | // 发送post请求 35 | promise = axios.post(url, data) 36 | } 37 | promise.then(function (response) { 38 | // console.log(response) 39 | // 成功了调用resolve() 40 | resolve(response.data) 41 | }).catch(function (error) { 42 | //失败了调用reject() 43 | reject(error) 44 | }) 45 | }) 46 | } 47 | -------------------------------------------------------------------------------- /gshop-client/src/api/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 包含n个接口请求函数的模块 3 | * 函数的返回值: promise对象 4 | */ 5 | import ajax from './ajax' 6 | // const BASE_URL = 'http://localhost:4000' 7 | const BASE_URL = '/api' 8 | 9 | // 1、根据经纬度获取位置详情 10 | export const reqAddress = function (geohash) { 11 | //TODO: 不加return没有返回值 12 | return ajax(`${BASE_URL}/position/${geohash}`) 13 | } 14 | // 2、获取食品分类列表 15 | export const reqFoodCategorys = () => ajax(BASE_URL+'/index_category') 16 | // 3、根据经纬度获取商铺列表 17 | export const reqShops = (latitude,longitude) => ajax(BASE_URL+'/shops', {longitude, latitude}) 18 | // 4、根据经纬度和关键字搜索商铺列表 19 | export const reqSearchShop = (geohash,keyword) => ajax(BASE_URL+'/search_shops', {geohash, keyword}) 20 | // 5、获取一次性验证码 21 | // export const reqCaptcha = () => ajax(BASE_URL+'/captcha') 22 | // 6、用户名密码登陆 23 | export const reqPwdLogin = ({name,pwd,captcha}) => ajax(BASE_URL+'/login_pwd',{name,pwd,captcha},'POST') 24 | // 7、发送短信验证码 25 | export const reqSendCode = (phone) => ajax(BASE_URL + '/sendcode', {phone}) 26 | // 8、手机号验证码登陆 27 | export const reqSmsLogin = (phone,code) => ajax(BASE_URL + '/login_sms', {phone,code},'POST') 28 | // 9、根据会话获取用户信息 29 | export const reqUserInfo = () => ajax(BASE_URL + '/userinfo') 30 | // 10、用户登出 31 | export const reqLogout = () => ajax(BASE_URL + '/logout') 32 | 33 | /** 34 | * 获取商家信息 35 | */ 36 | export const reqShopInfo = () => ajax('/info') //mock模拟数据不需要代理api 37 | 38 | /** 39 | * 获取商家评价数组 40 | */ 41 | export const reqShopRatings = () => ajax('/ratings') 42 | 43 | /** 44 | * 获取商家商品数组 45 | */ 46 | export const reqShopGoods = () => ajax('/goods') -------------------------------------------------------------------------------- /gshop-client/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/assets/logo.png -------------------------------------------------------------------------------- /gshop-client/src/common/imgs/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/common/imgs/loading.gif -------------------------------------------------------------------------------- /gshop-client/src/common/stylus/mixins.styl: -------------------------------------------------------------------------------- 1 | $green = #02a774; 2 | $yellow = #F5A100; 3 | $bc = #e4e4e4; 4 | 5 | // 一像素下边框 6 | bottom-border-1px($color) 7 | position relative 8 | border none 9 | &:after 10 | content '' 11 | position absolute 12 | left 0 13 | bottom 0 14 | width 100% 15 | height 1px 16 | background-color $color 17 | transform scaleY(0.5) 18 | 19 | // 一像素上边框 20 | top-border-1px($color) 21 | position relative 22 | &::before 23 | content '' 24 | position absolute 25 | z-index 200 26 | left 0 27 | top 0 28 | width 100% 29 | height 1px 30 | background-color $color 31 | 32 | //根据像素比缩放1px像素边框 33 | @media only screen and (-webkit-device-pixel-ratio: 2 ) 34 | .border-1px 35 | &::before 36 | transform scaleY(.5) 37 | 38 | @media only screen and (-webkit-device-pixel-ratio: 3 ) 39 | .border-1px 40 | &::before 41 | transform scaleY(.333333) 42 | 43 | //根据像素比来使用 2x图 3x图 44 | bg-image($url) 45 | background-image: url($url + "@2x.png") 46 | @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) 47 | background-image: url($url + "@3x.png") 48 | 49 | //清除浮动 50 | clearFix() 51 | *zoom 1 52 | &::after 53 | content '' 54 | display block 55 | clear both -------------------------------------------------------------------------------- /gshop-client/src/components/AlertTip/AlertTip.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 28 | 29 | 107 | -------------------------------------------------------------------------------- /gshop-client/src/components/CartControl/CartControl.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 28 | 66 | -------------------------------------------------------------------------------- /gshop-client/src/components/Food/Food.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 55 | -------------------------------------------------------------------------------- /gshop-client/src/components/FooterGuide/FooterGuide.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 40 | -------------------------------------------------------------------------------- /gshop-client/src/components/FooterGuide/FooterGuide1.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | -------------------------------------------------------------------------------- /gshop-client/src/components/HeaderTop/HeaderTop.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 22 | -------------------------------------------------------------------------------- /gshop-client/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 21 | -------------------------------------------------------------------------------- /gshop-client/src/components/ShopCart/ShopCart.vue: -------------------------------------------------------------------------------- 1 | 2 | 45 | 46 | 124 | -------------------------------------------------------------------------------- /gshop-client/src/components/ShopList/ShopList.vue: -------------------------------------------------------------------------------- 1 | 2 | 50 | 51 | 72 | -------------------------------------------------------------------------------- /gshop-client/src/components/ShopList/images/shop/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/ShopList/images/shop/1.jpg -------------------------------------------------------------------------------- /gshop-client/src/components/ShopList/images/shop/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/ShopList/images/shop/2.jpg -------------------------------------------------------------------------------- /gshop-client/src/components/ShopList/images/shop/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/ShopList/images/shop/3.jpg -------------------------------------------------------------------------------- /gshop-client/src/components/ShopList/images/shop/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/ShopList/images/shop/4.jpg -------------------------------------------------------------------------------- /gshop-client/src/components/ShopList/images/shop_back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | -------------------------------------------------------------------------------- /gshop-client/src/components/Star/Star.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 46 | -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star24_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star24_half@2x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star24_half@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star24_half@3x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star24_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star24_off@2x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star24_off@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star24_off@3x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star24_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star24_on@2x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star24_on@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star24_on@3x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star36_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star36_half@2x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star36_half@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star36_half@3x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star36_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star36_off@2x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star36_off@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star36_off@3x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star36_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star36_on@2x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star36_on@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star36_on@3x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star48_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star48_half@2x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star48_half@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star48_half@3x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star48_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star48_off@2x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star48_off@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star48_off@3x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star48_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star48_on@2x.png -------------------------------------------------------------------------------- /gshop-client/src/components/Star/images/star48_on@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/components/Star/images/star48_on@3x.png -------------------------------------------------------------------------------- /gshop-client/src/filters/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import moment from 'moment' 3 | import format from 'date-fns/format' 4 | //自定义过滤器,格式化日期格式 5 | Vue.filter('date-format', function (value, formatStr='YYYY-MM-DD HH:mm:ss') { 6 | if (!value) return '' 7 | return moment(value).format(formatStr) 8 | // return format(value, formatStr) 9 | }) -------------------------------------------------------------------------------- /gshop-client/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | import store from './store' 7 | 8 | import './mock/mockServer' // 加载mockServer即可 9 | import './filters' // 加载过滤器 10 | import loading from './common/imgs/loading.gif' //引入加载中图片 11 | 12 | // /**引入图片懒加载 */ 13 | // import VueLazyload from 'vue-lazyload' 14 | // Vue.use(VueLazyload, { //内部自定义一个指令lazy 15 | // loading 16 | // }) 17 | 18 | /**引入vant */ 19 | import Vant from 'vant'; 20 | import 'vant/lib/index.css'; 21 | Vue.use(Vant); 22 | 23 | // import {Button} from 'mint-ui' 24 | import { Lazyload } from 'vant'; 25 | // 注册全局组件标签 26 | // Vue.component(Button.name, Button) // 27 | 28 | Vue.use(Lazyload, { 29 | loading 30 | }); 31 | 32 | Vue.config.productionTip = false 33 | 34 | /* eslint-disable no-new */ 35 | new Vue({ 36 | el: '#app', 37 | store, // 使用上vuex 38 | router, 39 | components: { App }, 40 | template: '' 41 | }) 42 | -------------------------------------------------------------------------------- /gshop-client/src/mock/mockServer.js: -------------------------------------------------------------------------------- 1 | /* 2 | 使用mockjs提供mock数据接口 3 | */ 4 | 5 | import Mock from 'mockjs' 6 | import data from './data.json' 7 | 8 | // 返回goods的接口 9 | Mock.mock('/goods',{code: 0, data: data.goods}) 10 | // 返回ratings的接口 11 | Mock.mock('/ratings',{code: 0, data: data.ratings}) 12 | // 返回info的接口 13 | Mock.mock('/info',{code: 0, data: data.info}) 14 | 15 | // export default ??? 不需要向外暴露任何数据, 只需要保存能执行即可 -------------------------------------------------------------------------------- /gshop-client/src/pages/Login/images/captcha.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 10 | 12 | -------------------------------------------------------------------------------- /gshop-client/src/pages/Msite/Msite.vue: -------------------------------------------------------------------------------- 1 | 2 | 55 | 56 | 141 | -------------------------------------------------------------------------------- /gshop-client/src/pages/Msite/images/msite_back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /gshop-client/src/pages/Order/Order.vue: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 35 | -------------------------------------------------------------------------------- /gshop-client/src/pages/Order/images/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/src/pages/Order/images/person.png -------------------------------------------------------------------------------- /gshop-client/src/pages/Profile/Profile.vue: -------------------------------------------------------------------------------- 1 | 2 | 105 | 106 | 140 | -------------------------------------------------------------------------------- /gshop-client/src/pages/Search/Search.vue: -------------------------------------------------------------------------------- 1 | 2 | 40 | 41 | 79 | -------------------------------------------------------------------------------- /gshop-client/src/pages/Shop/Shop.vue: -------------------------------------------------------------------------------- 1 | 2 | 23 | 24 | 41 | 42 | -------------------------------------------------------------------------------- /gshop-client/src/pages/Shop/ShopGoods/ShopGoods.vue: -------------------------------------------------------------------------------- 1 | 2 | 61 | 62 | 195 | -------------------------------------------------------------------------------- /gshop-client/src/pages/Shop/ShopInfo/ShopInfo.vue: -------------------------------------------------------------------------------- 1 | 67 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /gshop-client/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import HelloWorld from '@/components/HelloWorld' 4 | import FooterGuide from '@/components/FooterGuide/FooterGuide' 5 | 6 | 7 | // import Msite from '@/pages/Msite/Msite' 8 | // import Order from '@/pages/Order/Order' 9 | // import Profile from '@/pages/Profile/Profile' 10 | // import Search from '@/pages/Search/Search' 11 | /** 12 | * 路由组件懒加载 13 | * 拆分路由文件，按需加载需要的js 14 | */ 15 | const Msite = () => import('../pages/Msite/Msite.vue') 16 | const Search = () => import('../pages/Search/Search.vue') 17 | const Order = () => import('../pages/Order/Order.vue') 18 | const Profile = () => import('../pages/Profile/Profile.vue') 19 | 20 | import Login from '@/pages/Login/Login' 21 | 22 | import Shop from '@/pages/Shop/Shop' 23 | import ShopGoods from '@/pages/Shop/ShopGoods/ShopGoods' 24 | import ShopRatings from '@/pages/Shop/ShopRatings/ShopRatings' 25 | import ShopInfo from '@/pages/Shop/ShopInfo/ShopInfo' 26 | Vue.use(Router) 27 | 28 | export default new Router({ 29 | routes: [ 30 | { 31 | path: '/', 32 | redirect: '/msite' 33 | }, 34 | { 35 | path: '/msite', 36 | name: 'msite', 37 | component: Msite, // 返回路由组件的函数, 只有执行此函数才会加载路由组件, 这个函数在请求对应的路由路径时才会执行 38 | meta: { //配置元数据确定是否显示footer 39 | showFooter: true 40 | } 41 | }, 42 | { 43 | path: '/order', 44 | name: 'order', 45 | component: Order, 46 | meta: { 47 | showFooter: true 48 | } 49 | }, 50 | { 51 | path: '/profile', 52 | name: 'profile', 53 | component: Profile, 54 | meta: { 55 | showFooter: true 56 | } 57 | }, 58 | { 59 | path: '/search', 60 | name: 'search', 61 | component: Search, 62 | meta: { 63 | showFooter: true 64 | } 65 | }, 66 | { 67 | path: '/login', 68 | name: 'login', 69 | component: Login 70 | }, 71 | { 72 | path: '/shop', 73 | component: Shop, 74 | children: [ 75 | { 76 | path: '/shop/goods', 77 | component: ShopGoods 78 | }, 79 | { 80 | path: '/shop/ratings', 81 | component: ShopRatings 82 | }, 83 | { 84 | path: '/shop/info', 85 | component: ShopInfo 86 | }, 87 | { 88 | path: '', 89 | redirect: '/shop/goods' 90 | }, 91 | ] 92 | }, 93 | ] 94 | }) 95 | -------------------------------------------------------------------------------- /gshop-client/src/store/actions.js: -------------------------------------------------------------------------------- 1 | /* 2 | 通过mutation间接更新state的多个方法的对象 3 | */ 4 | import { 5 | RECEIVE_ADDRESS, 6 | RECEIVE_CATEGORYS, 7 | RECEIVE_SHOPS, 8 | RECEIVE_USER_INFO, 9 | RESET_USER_INFO, 10 | RECEIVE_GOODS, 11 | RECEIVE_RATINGS, 12 | RECEIVE_INFO, 13 | INCREMENT_FOOD_COUNT, 14 | DECREMENT_FOOD_COUNT, 15 | CLEAR_CART, 16 | RECEIVE_SEARCH_SHOPS 17 | } from './mutation-types' 18 | import { 19 | reqAddress, 20 | reqFoodCategorys, 21 | reqShops, 22 | reqUserInfo, 23 | reqLogout, 24 | reqShopRatings, 25 | reqShopGoods, 26 | reqShopInfo, 27 | reqSearchShop 28 | } from '../api' 29 | 30 | const actions = { 31 | //异步获取地址 32 | async getAddress({commit,state}) { 33 | // 发送异步ajax请求 34 | const geohash = state.latitude + ',' + state.longitude; 35 | const result = await reqAddress(geohash); 36 | // console.log(result) 37 | //提交一个mutation 38 | if (result.code === 0) { 39 | // console.log(result.data) 40 | const address = result.data 41 | //TODO: 同步操作，提交数据变动 42 | commit(RECEIVE_ADDRESS,{address}) 43 | } 44 | }, 45 | 46 | // 异步获取食品分类列表 47 | async getCategorys({commit}) { 48 | // 发送异步ajax请求 49 | const result = await reqFoodCategorys() 50 | // 提交一个mutation 51 | if (result.code === 0) { 52 | const categorys = result.data 53 | commit( RECEIVE_CATEGORYS, {categorys}) 54 | } 55 | }, 56 | 57 | // 异步获取商家列表 58 | async getShops({commit, state}) { 59 | // 发送异步ajax请求 60 | const {longitude, latitude} = state 61 | const result = await reqShops(longitude, latitude) 62 | // 提交一个mutation 63 | if (result.code === 0) { 64 | const shops = result.data 65 | commit(RECEIVE_SHOPS, {shops}) 66 | } 67 | }, 68 | 69 | // TODO: 同步记录用户信息 70 | recordUser ({commit},userInfo) { 71 | commit(RECEIVE_USER_INFO,{userInfo}) 72 | }, 73 | 74 | // 异步获取用户信息 75 | async getUserInfo({commit}) { 76 | const result = await reqUserInfo() 77 | if(result.code === 0) { 78 | const userInfo = result.data 79 | commit(RECEIVE_USER_INFO,{userInfo}) 80 | } 81 | }, 82 | 83 | // 异步登出 84 | async logout ({commit}) { 85 | const result = await reqLogout() 86 | if(result.code === 0) { 87 | commit(RESET_USER_INFO) 88 | } 89 | }, 90 | 91 | // 异步获取商家信息 92 | async getShopInfo({commit}) { 93 | const result = await reqShopInfo() 94 | if(result.code === 0) { 95 | const info = result.data 96 | commit(RECEIVE_INFO,{info}) 97 | } 98 | }, 99 | 100 | // 异步获取商家评价列表 101 | async getShopRatings({commit}, callback) { 102 | const result = await reqShopRatings() 103 | if(result.code === 0) { 104 | const ratings = result.data 105 | commit(RECEIVE_RATINGS,{ratings}) 106 | //数据更新了，通知一下组件 107 | callback && callback() 108 | } 109 | }, 110 | 111 | // 异步获取商家商品列表 112 | async getShopGoods({commit},callback) { 113 | const result = await reqShopGoods() 114 | if(result.code === 0) { 115 | const goods = result.data 116 | commit(RECEIVE_GOODS,{goods}) 117 | //数据更新了，通知一下组件 118 | callback && callback() 119 | } 120 | }, 121 | 122 | //同步更新food中的count值 123 | updateFoodCount ({commit}, {isAdd, food}) { 124 | if(isAdd) { 125 | commit(INCREMENT_FOOD_COUNT, {food}) 126 | } else { 127 | commit(DECREMENT_FOOD_COUNT, {food}) 128 | } 129 | }, 130 | 131 | //同步清空购物车 132 | clearCart({commit}) { 133 | commit(CLEAR_CART) 134 | }, 135 | 136 | // 异步获取商家商品列表 137 | async searchShops({commit, state}, keyword) { 138 | 139 | const geohash = state.latitude + ',' + state.longitude 140 | const result = await reqSearchShop(geohash, keyword) 141 | if (result.code === 0) { 142 | const searchShops = result.data 143 | commit(RECEIVE_SEARCH_SHOPS, {searchShops}) 144 | } 145 | }, 146 | } 147 | 148 | export default actions 149 | 150 | -------------------------------------------------------------------------------- /gshop-client/src/store/getters.js: -------------------------------------------------------------------------------- 1 | /* 2 | 包含多个基于state的getter计算属性的对象 3 | */ 4 | 5 | const getters = { 6 | //计算总数量，reduce()函数进行累加 7 | totalCount(state) { 8 | return state.cartFoods.reduce((preTotal, food) => preTotal + food.count, 0) 9 | }, 10 | //计算总价格 11 | totalPrice(state) { 12 | return state.cartFoods.reduce((preTotal, food) => preTotal + food.count * food.price, 0) 13 | }, 14 | //计算满意度，看rateType的值是否为1，是则加一，0则不加 15 | positiveSize(state) { 16 | return state.ratings.reduce((preTotal, rating) => preTotal + (rating.rateType===0?1:0) ,0) 17 | } 18 | } 19 | 20 | export default getters 21 | -------------------------------------------------------------------------------- /gshop-client/src/store/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vuex最核心的管理对象store 3 | */ 4 | 5 | import Vue from 'vue' 6 | import Vuex from 'vuex' 7 | import state from './state' 8 | import mutations from './mutations' 9 | import actions from './actions' 10 | import getters from './getters' 11 | 12 | Vue.use(Vuex) 13 | 14 | export default new Vuex.Store({ 15 | state, 16 | mutations, 17 | actions, 18 | getters 19 | }) -------------------------------------------------------------------------------- /gshop-client/src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | /* 2 | 包含n个mutation的type名称常量 3 | */ 4 | export const RECEIVE_ADDRESS = 'receive_address' // 接收地址 5 | export const RECEIVE_CATEGORYS = 'receive_categorys' // 接收食品分类数组 6 | export const RECEIVE_SHOPS = 'receive_shops' // 接收商家数组 7 | export const RECEIVE_USER_INFO = 'receive_user_info' // 接收用户信息 8 | export const RESET_USER_INFO = 'reset_user_info' // 重置用户信息 9 | 10 | export const RECEIVE_GOODS = 'receive_goods' // 接收商品数组 11 | export const RECEIVE_RATINGS = 'receive_ratings' // 接收商家评价数组 12 | export const RECEIVE_INFO = 'receive_info' // 接收商家信息 13 | 14 | export const INCREMENT_FOOD_COUNT = 'increment_food_count' // 增加food中的count 15 | export const DECREMENT_FOOD_COUNT = 'decrement_food_count' // 减少food中的count 16 | export const CLEAR_CART = 'clear_cart' // 清空购物车 17 | 18 | export const RECEIVE_SEARCH_SHOPS = 'receive_search_shops' // 接收搜索的商家数组 -------------------------------------------------------------------------------- /gshop-client/src/store/mutations.js: -------------------------------------------------------------------------------- 1 | /* 2 | 直接更新state的多个方法的对象 3 | */ 4 | import Vue from 'vue' 5 | import { 6 | RECEIVE_ADDRESS, 7 | RECEIVE_CATEGORYS, 8 | RECEIVE_SHOPS, 9 | RECEIVE_USER_INFO, 10 | RESET_USER_INFO, 11 | RECEIVE_INFO, 12 | RECEIVE_RATINGS, 13 | RECEIVE_GOODS, 14 | INCREMENT_FOOD_COUNT, 15 | DECREMENT_FOOD_COUNT, 16 | CLEAR_CART, 17 | RECEIVE_SEARCH_SHOPS 18 | } from './mutation-types' 19 | 20 | const mutations = { 21 | [RECEIVE_ADDRESS](state,{address}) { 22 | state.address = address 23 | }, 24 | 25 | [RECEIVE_CATEGORYS](state,{categorys}) { 26 | state.categorys = categorys 27 | }, 28 | 29 | [RECEIVE_SHOPS](state,{shops}) { 30 | state.shops = shops 31 | }, 32 | [RECEIVE_USER_INFO](state,{userInfo}) { 33 | state.userInfo = userInfo 34 | }, 35 | [RESET_USER_INFO](state) { 36 | state.userInfo = {} 37 | }, 38 | 39 | [RECEIVE_INFO](state,{info}) { 40 | state.info = info 41 | }, 42 | [RECEIVE_RATINGS](state,{ratings}) { 43 | state.ratings = ratings 44 | }, 45 | [RECEIVE_GOODS](state,{goods}) { 46 | state.goods = goods 47 | }, 48 | 49 | [INCREMENT_FOOD_COUNT](state,{food}) { 50 | if(!food.count) { //第一次增加 51 | // food.count = 1 // 新增属性(没有数据绑定) 52 | //TODO: 在已绑定的数据中添加新的数据进行绑定 53 | Vue.set(food, 'count', 1) //让新增的属性也有数据绑定 54 | // 将food添加到cartFoods中 55 | state.cartFoods.push(food) 56 | } else { 57 | food.count++ 58 | } 59 | /** 60 | * p65 61 | * 1.通过两个引用变量指向同一个对象，通过一个引用变量改变变量内部数据，另外一个引用变量能看见 62 | * 2.两个引用变量指向同一个对象，让一个引用变量指向另外一个对象，而原来的引用变量的另一个引用变量还是指向原来的对象 63 | */ 64 | }, 65 | [DECREMENT_FOOD_COUNT](state,{food}) { 66 | if(food.count) { //只有有值大于0才减 67 | food.count-- 68 | if(food.count===0) { 69 | //将food从cartFoods中移除 70 | state.cartFoods.splice(state.cartFoods.indexOf(food), 1) 71 | } 72 | } 73 | }, 74 | 75 | [CLEAR_CART](state) { 76 | //清除food中的count 77 | state.cartFoods.forEach(food => food.count = 0); 78 | //移除购物车中所有购物项 79 | state.cartFoods = [] 80 | }, 81 | 82 | [RECEIVE_SEARCH_SHOPS](state, {searchShops}) { 83 | state.searchShops = searchShops 84 | }, 85 | } 86 | 87 | export default mutations 88 | -------------------------------------------------------------------------------- /gshop-client/src/store/state.js: -------------------------------------------------------------------------------- 1 | /* 2 | 状态对象 3 | */ 4 | 5 | const state = { 6 | latitude: 40.10038, // 纬度 7 | longitude: 116.36867, // 经度 8 | address: {}, //地址相关信息对象 9 | categorys: [], // 食品分类数组 10 | shops: [], // 商家数组 11 | userInfo: {}, // 用户信息 12 | goods: [], // 商品列表 13 | ratings: [], // 商家评价列表 14 | info: {}, // 商家信息 15 | cartFoods: [], // 购物车中食物的列表 16 | searchShops: [], // 搜索得到的商家列表 17 | } 18 | 19 | export default state 20 | 21 | 22 | //TODO: export default {} 导出的是对象，那么引入的时候就要 import {state} from './xxx.js' -------------------------------------------------------------------------------- /gshop-client/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client/static/.gitkeep -------------------------------------------------------------------------------- /gshop-client/static/css/reset.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 3 | * http://cssreset.com 4 | */ 5 | html, body, div, span, applet, object, iframe, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, img, ins, kbd, q, s, samp, 9 | small, strike, strong, sub, sup, tt, var, 10 | b, u, i, center, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td, 14 | article, aside, canvas, details, embed, 15 | figure, figcaption, footer, header, 16 | menu, nav, output, ruby, section, summary, 17 | time, mark, audio, video, input { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | font-size: 100%; 22 | font-weight: normal; 23 | vertical-align: baseline; 24 | } 25 | 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, menu, nav, section { 29 | display: block; 30 | } 31 | 32 | body { 33 | line-height: 1; 34 | } 35 | 36 | blockquote, q { 37 | quotes: none; 38 | } 39 | 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: none; 43 | } 44 | 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* custom */ 51 | a { 52 | color: #7e8c8d; 53 | text-decoration: none; 54 | -webkit-backface-visibility: hidden; 55 | } 56 | 57 | li { 58 | list-style: none; 59 | } 60 | 61 | ::-webkit-scrollbar { 62 | width: 5px; 63 | height: 5px; 64 | } 65 | 66 | ::-webkit-scrollbar-track-piece { 67 | background-color: rgba(0, 0, 0, 0.2); 68 | -webkit-border-radius: 6px; 69 | } 70 | 71 | ::-webkit-scrollbar-thumb:vertical { 72 | height: 5px; 73 | background-color: rgba(125, 125, 125, 0.7); 74 | -webkit-border-radius: 6px; 75 | } 76 | 77 | ::-webkit-scrollbar-thumb:horizontal { 78 | width: 5px; 79 | background-color: rgba(125, 125, 125, 0.7); 80 | -webkit-border-radius: 6px; 81 | } 82 | 83 | html, body { 84 | width: 100%; 85 | height: 100%; 86 | } 87 | 88 | body { 89 | -webkit-text-size-adjust: none; 90 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 91 | } 92 | 93 | /*显示省略号*/ 94 | .ellipsis{ 95 | overflow: hidden; 96 | text-overflow: ellipsis; 97 | white-space: nowrap; 98 | } -------------------------------------------------------------------------------- /gshop-client_pages/css/reset.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 3 | * http://cssreset.com 4 | */ 5 | html, body, div, span, applet, object, iframe, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, img, ins, kbd, q, s, samp, 9 | small, strike, strong, sub, sup, tt, var, 10 | b, u, i, center, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td, 14 | article, aside, canvas, details, embed, 15 | figure, figcaption, footer, header, 16 | menu, nav, output, ruby, section, summary, 17 | time, mark, audio, video, input { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | font-size: 100%; 22 | font-weight: normal; 23 | vertical-align: baseline; 24 | } 25 | 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, menu, nav, section { 29 | display: block; 30 | } 31 | 32 | body { 33 | line-height: 1; 34 | } 35 | 36 | blockquote, q { 37 | quotes: none; 38 | } 39 | 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: none; 43 | } 44 | 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* custom */ 51 | a { 52 | color: #7e8c8d; 53 | text-decoration: none; 54 | -webkit-backface-visibility: hidden; 55 | } 56 | 57 | li { 58 | list-style: none; 59 | } 60 | 61 | ::-webkit-scrollbar { 62 | width: 5px; 63 | height: 5px; 64 | } 65 | 66 | ::-webkit-scrollbar-track-piece { 67 | background-color: rgba(0, 0, 0, 0.2); 68 | -webkit-border-radius: 6px; 69 | } 70 | 71 | ::-webkit-scrollbar-thumb:vertical { 72 | height: 5px; 73 | background-color: rgba(125, 125, 125, 0.7); 74 | -webkit-border-radius: 6px; 75 | } 76 | 77 | ::-webkit-scrollbar-thumb:horizontal { 78 | width: 5px; 79 | background-color: rgba(125, 125, 125, 0.7); 80 | -webkit-border-radius: 6px; 81 | } 82 | 83 | html, body { 84 | width: 100%; 85 | height: 100%; 86 | } 87 | 88 | body { 89 | -webkit-text-size-adjust: none; 90 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 91 | } 92 | 93 | .ellipsis{ 94 | overflow: hidden; 95 | text-overflow: ellipsis; 96 | white-space: nowrap; 97 | } 98 | -------------------------------------------------------------------------------- /gshop-client_pages/images/captcha.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 10 | 12 | -------------------------------------------------------------------------------- /gshop-client_pages/images/msite_back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/1.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/10.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/11.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/12.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/13.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/14.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/2.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/3.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/4.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/5.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/6.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/7.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/8.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/nav/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/nav/9.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/order/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/order/person.png -------------------------------------------------------------------------------- /gshop-client_pages/images/shop/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/shop/1.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/shop/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/shop/2.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/shop/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/shop/3.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/shop/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/shop/4.jpg -------------------------------------------------------------------------------- /gshop-client_pages/images/shop_back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star24_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star24_half@2x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star24_half@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star24_half@3x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star24_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star24_off@2x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star24_off@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star24_off@3x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star24_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star24_on@2x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star24_on@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star24_on@3x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star36_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star36_half@2x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star36_half@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star36_half@3x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star36_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star36_off@2x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star36_off@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star36_off@3x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star36_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star36_on@2x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star36_on@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star36_on@3x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star48_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star48_half@2x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star48_half@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star48_half@3x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star48_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star48_off@2x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star48_off@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star48_off@3x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star48_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star48_on@2x.png -------------------------------------------------------------------------------- /gshop-client_pages/images/stars/star48_on@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/gshop-client_pages/images/stars/star48_on@3x.png -------------------------------------------------------------------------------- /gshop-client_pages/js/index.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | var contentList = document.querySelectorAll('#app .content>div') 3 | var guideItems = document.querySelectorAll('#app .guide_item') 4 | var profileLink = document.querySelector('#app .profile-link') 5 | var loginOrRegister = document.querySelectorAll('.login_content>form>div') 6 | var loginA = document.querySelectorAll('.login_header_title>a') 7 | var switchCircle = document.querySelector('.switch_circle') 8 | var switchButton = document.querySelector('.switch_button') 9 | var switchText = document.querySelector('.switch_text') 10 | var goBack = document.querySelector('.go_back') 11 | var login = document.querySelector('#app>div') 12 | var headerLogin = document.querySelector('.header_login') 13 | 14 | //swiper 15 | var swiper = new Swiper('.swiper-container', { 16 | loop: true, 17 | pagination: { 18 | el: '.swiper-pagination' 19 | } 20 | }) 21 | 22 | //footer tab切换 23 | for (var i = 0; i < guideItems.length; i++) { 24 | guideItems[i].index = i 25 | guideItems[i].addEventListener('touchend', function () { 26 | for (var i = 0; i < guideItems.length; i++) { 27 | guideItems[i].className = 'guide_item' 28 | contentList[i].className = '' 29 | } 30 | this.className = 'guide_item on' 31 | contentList[this.index].className = 'on' 32 | }) 33 | } 34 | //切换手机号登陆/密码登陆 35 | for (var i = 0; i < loginA.length; i++) { 36 | loginA[i].index = i 37 | loginA[i].addEventListener('touchend', function () { 38 | for (var i = 0; i < loginOrRegister.length; i++) { 39 | loginA[i].className = '' 40 | loginOrRegister[i].className = '' 41 | } 42 | this.className = 'on' 43 | loginOrRegister[this.index].className = 'on' 44 | }) 45 | } 46 | //登陆界面切换密码明/暗文 47 | var isSwitch = false 48 | switchButton.addEventListener('touchend', function () { 49 | if (!isSwitch) { 50 | switchCircle.style.transform = 'translateX(27px)' 51 | this.className = 'switch_button on' 52 | switchText.innerText = 'abc' 53 | } else { 54 | switchCircle.style.transform = 'translateX(0)' 55 | this.className = 'switch_button off' 56 | switchText.innerText = '...' 57 | } 58 | isSwitch = !isSwitch 59 | }) 60 | 61 | //控制登陆界面的on/off 62 | profileLink.addEventListener('touchend', function () { 63 | login.className = 'on' 64 | }) 65 | goBack.addEventListener('touchend', function () { 66 | login.className = 'off' 67 | }) 68 | 69 | //点击首页的登录注册 跳转到登录注册 70 | headerLogin.addEventListener('touchend', function () { 71 | login.className = 'on' 72 | }) 73 | 74 | } 75 | -------------------------------------------------------------------------------- /gshop-client_pages/stylus/mixins.styl: -------------------------------------------------------------------------------- 1 | // 一像素下边框 2 | bottom-border-1px($color) 3 | position relative 4 | &::before 5 | content '' 6 | position absolute 7 | z-index 200 8 | left 0 9 | bottom 0 10 | width 100% 11 | height 1px 12 | background-color $color 13 | transform scaleY(0.5) 14 | 15 | // 一像素上边框 16 | top-border-1px($color) 17 | position relative 18 | &::before 19 | content '' 20 | position absolute 21 | z-index 200 22 | left 0 23 | top 0 24 | width 100% 25 | height 1px 26 | background-color $color 27 | 28 | //根据像素比缩放1px像素边框 29 | @media only screen and (-webkit-device-pixel-ratio:2 ) 30 | .border-1px 31 | &::before 32 | transform scaleY(.5) 33 | @media only screen and (-webkit-device-pixel-ratio:3 ) 34 | .border-1px 35 | &::before 36 | transform scaleY(.333333) 37 | 38 | //根据像素比来使用 2x图 3x图 39 | bg-image($url) 40 | background-image:url($url+"@2x.png") 41 | @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) 42 | background-image:url($url+"@3x.png") 43 | 44 | //清除浮动 45 | clearFix() 46 | *zoom 1 47 | &::after 48 | content '' 49 | display block 50 | clear both 51 | -------------------------------------------------------------------------------- /gshop-server/api/ajax.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios') 2 | 3 | module.exports = function ajax(url = '', data = {}, type = 'GET') { 4 | return new Promise(function (resolve, reject) { 5 | 6 | let promise 7 | 8 | if (type === 'GET') { 9 | // 准备url query参数数据 10 | let dataStr = '' //数据拼接字符串 11 | Object.keys(data).forEach(key => { 12 | dataStr += key + '=' + data[key] + '&' 13 | }) 14 | if (dataStr !== '') { 15 | dataStr = dataStr.substr(0, dataStr.lastIndexOf('&')) 16 | url = url + '?' + dataStr 17 | } 18 | // 发送get请求 19 | promise = axios.get(url) 20 | } else { 21 | // 发送post请求 22 | promise = axios.post(url, data) 23 | } 24 | 25 | promise.then(response => { 26 | resolve(response.data) 27 | }) 28 | .catch(error => { 29 | reject(error) 30 | }) 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /gshop-server/app.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var path = require('path'); 3 | var favicon = require('serve-favicon'); 4 | var logger = require('morgan'); 5 | var cookieParser = require('cookie-parser'); 6 | var bodyParser = require('body-parser'); 7 | var session = require('express-session'); 8 | 9 | var index = require('./routes/index'); 10 | var users = require('./routes/users'); 11 | 12 | var app = express(); 13 | /* 14 | app.all("*", function(req, res, next) { 15 | if (!req.get("Origin")) return next(); 16 | // use "*" here to accept any origin 17 | res.set("Access-Control-Allow-Origin", "*"); 18 | res.set("Access-Control-Allow-Methods", "GET"); 19 | res.set("Access-Control-Allow-Headers", "X-Requested-With, Content-Type"); 20 | // res.set('Access-Control-Allow-Max-Age', 3600); 21 | if ("OPTIONS" === req.method) return res.send(200); 22 | next(); 23 | }); 24 | */ 25 | 26 | // view engine setup 27 | app.set('views', path.join(__dirname, 'views')); 28 | app.set('view engine', 'ejs'); 29 | 30 | // uncomment after placing your favicon in /public 31 | //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 32 | app.use(logger('dev')); 33 | app.use(bodyParser.json()); 34 | app.use(bodyParser.urlencoded({ extended: false })); 35 | app.use(cookieParser()); 36 | app.use(express.static(path.join(__dirname, 'public'))); 37 | 38 | app.use(session({ 39 | secret: '12345', 40 | cookie: {maxAge: 1000*60*60*24 }, //设置maxAge是80000ms，即80s后session和相应的cookie失效过期 41 | resave: false, 42 | saveUninitialized: true, 43 | })); 44 | 45 | 46 | app.use('/', index); 47 | app.use('/users', users); 48 | 49 | // catch 404 and forward to error handler 50 | app.use(function(req, res, next) { 51 | var err = new Error('Not Found'); 52 | err.status = 404; 53 | next(err); 54 | }); 55 | 56 | // error handler 57 | app.use(function(err, req, res, next) { 58 | // set locals, only providing error in development 59 | res.locals.message = err.message; 60 | res.locals.error = req.app.get('env') === 'development' ? err : {}; 61 | 62 | // render the error page 63 | res.status(err.status || 500); 64 | res.render('error'); 65 | }); 66 | 67 | module.exports = app; 68 | -------------------------------------------------------------------------------- /gshop-server/bin/www: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Module dependencies. 5 | */ 6 | 7 | var app = require('../app'); 8 | var debug = require('debug')('gweimai-server:server'); 9 | var http = require('http'); 10 | 11 | /** 12 | * Get port from environment and store in Express. 13 | */ 14 | 15 | var port = normalizePort(process.env.PORT || '3000'); 16 | app.set('port', port); 17 | console.log(`server running on port ${port}` ); 18 | /** 19 | * Create HTTP server. 20 | */ 21 | 22 | var server = http.createServer(app); 23 | 24 | /** 25 | * Listen on provided port, on all network interfaces. 26 | */ 27 | 28 | server.listen(port); 29 | server.on('error', onError); 30 | server.on('listening', onListening); 31 | 32 | /** 33 | * Normalize a port into a number, string, or false. 34 | */ 35 | 36 | function normalizePort(val) { 37 | var port = parseInt(val, 10); 38 | 39 | if (isNaN(port)) { 40 | // named pipe 41 | return val; 42 | } 43 | 44 | if (port >= 0) { 45 | // port number 46 | return port; 47 | } 48 | 49 | return false; 50 | } 51 | 52 | /** 53 | * Event listener for HTTP server "error" event. 54 | */ 55 | 56 | function onError(error) { 57 | if (error.syscall !== 'listen') { 58 | throw error; 59 | } 60 | 61 | var bind = typeof port === 'string' 62 | ? 'Pipe ' + port 63 | : 'Port ' + port; 64 | 65 | // handle specific listen errors with friendly messages 66 | switch (error.code) { 67 | case 'EACCES': 68 | console.error(bind + ' requires elevated privileges'); 69 | process.exit(1); 70 | break; 71 | case 'EADDRINUSE': 72 | console.error(bind + ' is already in use'); 73 | process.exit(1); 74 | break; 75 | default: 76 | throw error; 77 | } 78 | } 79 | 80 | /** 81 | * Event listener for HTTP server "listening" event. 82 | */ 83 | 84 | function onListening() { 85 | var addr = server.address(); 86 | var bind = typeof addr === 'string' 87 | ? 'pipe ' + addr 88 | : 'port ' + addr.port; 89 | debug('Listening on ' + bind); 90 | } 91 | -------------------------------------------------------------------------------- /gshop-server/db/models.js: -------------------------------------------------------------------------------- 1 | /* 2 | 包含n个能操作mongodb数据库集合的model的模块 3 | 1. 连接数据库 4 | 1.1. 引入mongoose 5 | 1.2. 连接指定数据库(URL只有数据库是变化的) 6 | 1.3. 获取连接对象 7 | 1.4. 绑定连接完成的监听(用来提示连接成功) 8 | 2. 定义对应特定集合的Model 9 | 2.1. 字义Schema(描述文档结构) 10 | 2.2. 定义Model(与集合对应, 可以操作集合) 11 | 3. 向外暴露获取Model的方法 12 | */ 13 | // 1. 连接数据库 14 | const mongoose = require('mongoose') 15 | mongoose.connect('mongodb://localhost:27017/guigu_zhipin') 16 | const conn = mongoose.connection 17 | conn.on('connected', function () { 18 | console.log('数据库连接成功!') 19 | }) 20 | 21 | // 2. 得到对应特定集合的Model: UserModel 22 | const userSchema = mongoose.Schema({ 23 | // 用户名 24 | 'name': {type: String}, 25 | // 密码 26 | 'pwd': {type: String}, 27 | // 类型 28 | 'phone': {'type': String} 29 | }) 30 | UserModel = mongoose.model('user', userSchema) 31 | 32 | // 3. 向外暴露 33 | module.exports = { 34 | getModel(name) { 35 | return mongoose.model(name) 36 | } 37 | } 38 | 39 | -------------------------------------------------------------------------------- /gshop-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gshop_server", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "nodemon ./bin/www" 7 | }, 8 | "dependencies": { 9 | "axios": "^0.18.0", 10 | "blueimp-md5": "^2.10.0", 11 | "body-parser": "~1.18.2", 12 | "cookie-parser": "~1.4.3", 13 | "debug": "~2.6.9", 14 | "ejs": "~2.5.7", 15 | "express": "~4.15.5", 16 | "express-session": "^1.15.6", 17 | "js-base64": "^2.4.3", 18 | "moment": "^2.21.0", 19 | "mongoose": "^5.0.8", 20 | "morgan": "~1.9.0", 21 | "nodemon": "^1.17.1", 22 | "request": "^2.83.0", 23 | "serve-favicon": "~2.4.5", 24 | "svg-captcha": "^1.3.11" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /gshop-server/public/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 50px; 3 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 4 | } 5 | 6 | a { 7 | color: #00B7FF; 8 | } 9 | -------------------------------------------------------------------------------- /gshop-server/routes/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | const md5 = require('blueimp-md5') 4 | const models = require('../db/models') 5 | const UserModel = models.getModel('user') 6 | const _filter = {'pwd': 0, '__v': 0} // 查询时过滤掉 7 | const sms_util = require('../util/sms_util') 8 | const users = {} 9 | const ajax = require('../api/ajax') 10 | var svgCaptcha = require('svg-captcha') 11 | 12 | /* 13 | 密码登陆 14 | */ 15 | router.post('/login_pwd', function (req, res) { 16 | const name = req.body.name 17 | const pwd = md5(req.body.pwd) 18 | const captcha = req.body.captcha.toLowerCase() 19 | console.log('/login_pwd', name, pwd, captcha, req.session) 20 | 21 | // 可以对用户名/密码格式进行检查, 如果非法, 返回提示信息 22 | if(captcha!==req.session.captcha) { 23 | return res.send({code: 1, msg: '验证码不正确'}) 24 | } 25 | // 删除保存的验证码 26 | delete req.session.captcha 27 | 28 | UserModel.findOne({name}, function (err, user) { 29 | if (user) { 30 | console.log('findUser', user) 31 | if (user.pwd !== pwd) { 32 | res.send({code: 1, msg: '用户名或密码不正确!'}) 33 | } else { 34 | req.session.userid = user._id 35 | res.send({code: 0, data: {_id: user._id, name: user.name, phone: user.phone}}) 36 | } 37 | } else { 38 | const userModel = new UserModel({name, pwd}) 39 | userModel.save(function (err, user) { 40 | // 向浏览器端返回cookie(key=value) 41 | // res.cookie('userid', user._id, {maxAge: 1000*60*60*24*7}) 42 | req.session.userid = user._id 43 | const data = {_id: user._id, name: user.name} 44 | // 3.2. 返回数据(新的user) 45 | res.send({code: 0, data}) 46 | }) 47 | } 48 | }) 49 | }) 50 | 51 | /* 52 | 一次性图形验证码 53 | */ 54 | router.get('/captcha', function (req, res) { 55 | var captcha = svgCaptcha.create({ 56 | ignoreChars: '0o1l', 57 | noise: 2, 58 | color: true 59 | }); 60 | req.session.captcha = captcha.text.toLowerCase(); 61 | console.log(req.session.captcha) 62 | /*res.type('svg'); 63 | res.status(200).send(captcha.data);*/ 64 | res.type('svg'); 65 | res.send(captcha.data) 66 | }); 67 | 68 | /* 69 | 发送验证码短信 70 | */ 71 | router.get('/sendcode', function (req, res, next) { 72 | //1. 获取请求参数数据 73 | var phone = req.query.phone; 74 | //2. 处理数据 75 | //生成验证码(6位随机数) 76 | var code = sms_util.randomCode(6); 77 | //发送给指定的手机号 78 | console.log(`向${phone}发送验证码短信: ${code}`); 79 | sms_util.sendCode(phone, code, function (success) {//success表示是否成功 80 | if (success) { 81 | users[phone] = code 82 | console.log('保存验证码: ', phone, code) 83 | res.send({"code": 0}) 84 | } else { 85 | //3. 返回响应数据 86 | res.send({"code": 1, msg: '短信验证码发送失败'}) 87 | } 88 | }) 89 | }) 90 | 91 | /* 92 | 短信登陆 93 | */ 94 | router.post('/login_sms', function (req, res, next) { 95 | var phone = req.body.phone; 96 | var code = req.body.code; 97 | console.log('/login_sms', phone, code); 98 | if (users[phone] != code) { 99 | res.send({code: 1, msg: '手机号或验证码不正确'}); 100 | return; 101 | } 102 | //删除保存的code 103 | delete users[phone]; 104 | 105 | 106 | UserModel.findOne({phone}, function (err, user) { 107 | if (user) { 108 | req.session.userid = user._id 109 | res.send({code: 0, data: user}) 110 | } else { 111 | //存储数据 112 | const userModel = new UserModel({phone}) 113 | userModel.save(function (err, user) { 114 | req.session.userid = user._id 115 | res.send({code: 0, data: user}) 116 | }) 117 | } 118 | }) 119 | 120 | }) 121 | 122 | /* 123 | 根据sesion中的userid, 查询对应的user 124 | */ 125 | router.get('/userinfo', function (req, res) { 126 | // 取出userid 127 | const userid = req.session.userid 128 | // 查询 129 | UserModel.findOne({_id: userid}, _filter, function (err, user) { 130 | // 如果没有, 返回错误提示 131 | if (!user) { 132 | // 清除浏览器保存的userid的cookie 133 | delete req.session.userid 134 | 135 | res.send({code: 1, msg: '请先登陆'}) 136 | } else { 137 | // 如果有, 返回user 138 | res.send({code: 0, data: user}) 139 | } 140 | }) 141 | }) 142 | 143 | 144 | router.get('/logout', function (req, res) { 145 | // 清除浏览器保存的userid的cookie 146 | delete req.session.userid 147 | // 返回数据 148 | res.send({code: 0}) 149 | }) 150 | 151 | /* 152 | 根据经纬度获取位置详情 153 | */ 154 | router.get('/position/:geohash', function (req, res) { 155 | const {geohash} = req.params 156 | ajax(`http://cangdu.org:8001/v2/pois/${geohash}`) 157 | .then(data => { 158 | res.send({code: 0, data}) 159 | }) 160 | }) 161 | 162 | /* 163 | 获取首页分类列表 164 | */ 165 | router.get('/index_category', function (req, res) { 166 | setTimeout(function () { 167 | const data = require('../data/index_category.json') 168 | res.send({code: 0, data}) 169 | }, 300) 170 | }) 171 | 172 | /* 173 | 根据经纬度获取商铺列表 174 | ?latitude=40.10038&longitude=116.36867 175 | */ 176 | router.get('/shops', function (req, res) { 177 | const latitude = req.query.latitude 178 | const longitude = req.query.longitude 179 | 180 | setTimeout(function () { 181 | const data = require('../data/shops.json') 182 | res.send({code: 0, data}) 183 | }, 300) 184 | }) 185 | 186 | router.get('/search_shops', function (req, res) { 187 | const {geohash, keyword} = req.query 188 | ajax('http://cangdu.org:8001/v4/restaurants', { 189 | 'extras[]': 'restaurant_activity', 190 | geohash, 191 | keyword, 192 | type: 'search' 193 | }).then(data => { 194 | res.send({code: 0, data}) 195 | }) 196 | }) 197 | 198 | module.exports = router; -------------------------------------------------------------------------------- /gshop-server/routes/users.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET users listing. */ 5 | router.get('/', function(req, res, next) { 6 | res.send('respond with a resource'); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /gshop-server/util/sms_util.js: -------------------------------------------------------------------------------- 1 | var md5 = require('blueimp-md5') 2 | var moment = require('moment') 3 | var Base64 = require('js-base64').Base64; 4 | var request = require('request'); 5 | 6 | // 发送短信验证码 7 | /* 8 | 生成指定长度的随机数 9 | */ 10 | function randomCode(length) { 11 | var chars = ['0','1','2','3','4','5','6','7','8','9']; 12 | var result = ""; //统一改名: alt + shift + R 13 | for(var i = 0; i < length ; i ++) { 14 | var index = Math.ceil(Math.random()*9); 15 | result += chars[index]; 16 | } 17 | return result; 18 | } 19 | // console.log(randomCode(6)); 20 | exports.randomCode = randomCode; 21 | 22 | /* 23 | 向指定号码发送指定验证码 24 | */ 25 | function sendCode(phone, code, callback) { 26 | var ACCOUNT_SID = '8aaf0708697b6beb016985281c2403ed'; 27 | var AUTH_TOKEN = '1ebe1649ad774c53b4d319161975d53f'; 28 | var Rest_URL = 'https://app.cloopen.com:8883'; 29 | var AppID = '8aaf0708697b6beb016985281c8103f4'; 30 | //1. 准备请求url 31 | /* 32 | 1.使用MD5加密（账户Id + 账户授权令牌 + 时间戳）。其中账户Id和账户授权令牌根据url的验证级别对应主账户。 33 | 时间戳是当前系统时间，格式"yyyyMMddHHmmss"。时间戳有效时间为24小时，如：20140416142030 34 | 2.SigParameter参数需要大写，如不能写成sig=abcdefg而应该写成sig=ABCDEFG 35 | */ 36 | var sigParameter = ''; 37 | var time = moment().format('YYYYMMDDHHmmss'); 38 | sigParameter = md5(ACCOUNT_SID+AUTH_TOKEN+time); 39 | var url = Rest_URL+'/2013-12-26/Accounts/'+ACCOUNT_SID+'/SMS/TemplateSMS?sig='+sigParameter; 40 | 41 | //2. 准备请求体 42 | var body = { 43 | to : phone, 44 | appId : AppID, 45 | templateId : '1', 46 | "datas":[code,"1"] 47 | } 48 | //body = JSON.stringify(body); 49 | 50 | //3. 准备请求头 51 | /* 52 | 1.使用Base64编码（账户Id + 冒号 + 时间戳）其中账户Id根据url的验证级别对应主账户 53 | 2.冒号为英文冒号 54 | 3.时间戳是当前系统时间，格式"yyyyMMddHHmmss"，需与SigParameter中时间戳相同。 55 | */ 56 | var authorization = ACCOUNT_SID + ':' + time; 57 | authorization = Base64.encode(authorization); 58 | var headers = { 59 | 'Accept' :'application/json', 60 | 'Content-Type' :'application/json;charset=utf-8', 61 | 'Content-Length': JSON.stringify(body).length+'', 62 | 'Authorization' : authorization 63 | } 64 | 65 | //4. 发送请求, 并得到返回的结果, 调用callback 66 | // callback(true); 67 | request({ 68 | method : 'POST', 69 | url : url, 70 | headers : headers, 71 | body : body, 72 | json : true 73 | }, function (error, response, body) { 74 | console.log(error, response, body); 75 | callback(body.statusCode==='000000'); 76 | // callback(true); 77 | }); 78 | } 79 | exports.sendCode = sendCode; 80 | 81 | /* 82 | sendCode('13716962779', randomCode(6), function (success) { 83 | console.log(success); 84 | })*/ 85 | -------------------------------------------------------------------------------- /gshop-server/views/error.ejs: -------------------------------------------------------------------------------- 1 |

<%= message %>

2 |

<%= error.status %>

3 | 
<%= error.stack %>
4 | -------------------------------------------------------------------------------- /gshop-server/views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= title %> 5 | 6 | 7 | 8 |

<%= title %>

9 |

Welcome to <%= title %>

10 | 11 | 12 | -------------------------------------------------------------------------------- /短信验证码.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ynzy/vue2.0_gShop/e5eddf4dbd82934ffa6c67769dfe06645a9287ce/短信验证码.txt -------------------------------------------------------------------------------- /笔记总结.md: -------------------------------------------------------------------------------- 1 | # day01 2 | ## 1. 项目开发准备 3 | 项目描述 4 | 技术选型 5 | API接口 6 | 你能从此项目中学到什么? 7 | 8 | ## 2. 开启项目开发 9 | 使用脚手架创建项目 10 | 安装所有依赖/指定依赖 11 | 开发环境运行 12 | 生产环境打包与发布 13 | 14 | ## 3. 搭建项目整体界面结构 15 | stylus的理解和使用 16 | 结构化, 变量, 函数/minxin(混合) 17 | vue-router的理解和使用 18 | router-view/router-link/keep-alive 19 | $router: 路由器对象, 包含一些操作路由的功能函数, 来实现编程式导航(跳转路由) 20 | $route: 当前路由对象, 一些当前路由信息数据的容器, path/meta/query/params 21 | 项目路由拆分 22 | 底部导航组件: FooterGuide 23 | 导航路由组件: Msite/Search/Order/Profile 24 | 25 | ## 4. 抽取组件 26 | 头部组件: HeaderTop, 通过slot来实现组件通信标签结构 27 | 商家列表组件: ShopList 28 | 29 | ## 5. 登陆路由组件 30 | 静态组件 31 | FooterGuide的显示/隐藏: 通过路由的meta 32 | 33 | ## 6. 后台项目 34 | 启动后台项目: 理解前后台分离 35 | 测试后台接口: 使用postman 36 | 修正接口文档 37 | 38 | ## 7. 前后台交互 39 | ajax请求库: axios 40 | ajax请求函数封装: axios + promise 41 | 接口请求函数封装: 每个后台接口 42 | 43 | 44 | # day02 45 | ## 1. 异步数据 46 | 封装ajax: 47 | promise+axios封装ajax请求的函数 48 | 封装每个接口对应的请求函数(能根据接口定义ajax请求函数) 49 | 解决ajax的跨越域问题: 配置代理, 对代理的理解 50 | vuex编码 51 | 创建所有相关的模块: store/index|state|mutations|actions|getters|mutation-types 52 | 设计state: 从后台获取的数据 53 | 实现actions: 54 | 定义异步action: async/await 55 | 流程:　发ajax获取数据, commit给mutation 56 | 实现mutations: 给状态赋值 57 | 实现index: 创建store对象 58 | main.js: 配置store 59 | 组件异步显示数据 60 | 在mounted()通过$store.dispatch('actionName')来异步获取后台数据到state中 61 | mapState(['xxx'])读取state中数据到组件中 62 | 在模板中显示xxx的数据 63 | 模板中显示数据的来源 64 | data: 自身的数据(内部改变) 65 | props: 外部传入的数据(外部改变) 66 | computed: 根据data/props/别的compute/state/getters 67 | 异步显示轮播图 68 | 通过vuex获取foodCategorys数组(发请求, 读取) 69 | 对数据进行整合计算(一维变为特定的二维数组) 70 | 使用Swiper显示轮播, 如何在界面更新之后创建Swiper对象? 71 | 1). 使用回调+$nextTick() 72 | 2). 使用watch+$nextTick() 73 | 74 | ## 2. 登陆/注册: 界面相关效果 75 | a. 切换登陆方式 76 | b. 手机号合法检查 77 | c. 倒计时效果 78 | d. 切换显示或隐藏密码 79 | g. 前台验证提示 80 | 81 | ## 3. 前后台交互相关问题 82 | 1). 如何查看你的应用是否发送某个ajax请求? 83 | 浏览器的network 84 | 2). 发ajax请求404 85 | 请求的路径的对 86 | 代理是否生效(配置和重启) 87 | 服务器应用是否运行 88 | 3). 后台返回了数据, 但页面没有显示? 89 | vuex中是否有 90 | 组件中是否读取 91 | 92 | # day03 93 | 94 | ## 1. 完成登陆/注册功能 95 | 1). 2种方式 96 | 手机号/短信验证码登陆 97 | 用户名/密码/图片验证码登陆 98 | 2). 登陆的基本流程 99 | 表单前台验证, 如果不通过, 提示 100 | 发送ajax请求, 得到返回的结果 101 | 根据结果的标识(code)来判断登陆请求是否成功 102 | 1: 不成功, 显示提示 103 | 0. 成功, 保存用户信息, 返回到上次路由 104 | 3). vue自定义事件 105 | 绑定监听: @eventName="fn" function fn (data) {// 处理} 106 | 分发事件: this.$emit('eventName', data) 107 | 4). 注意: 108 | 使用network查看请求(路径/参数/请求方式/响应数据) 109 | 使用vue的chrome插件查看vuex中的state和组件中的数据 110 | 使用debugger语句调试代码 111 | 实参类型与形参类型的匹配问题 112 | 113 | ## 2. 搭建商家整体界面 114 | 1). 拆分界面路由 115 | 2). 路由的定义/配置|使用 116 | 117 | ## 3. 模拟(mock)数据/接口 118 | 1). 前后台分离的理解 119 | 2). mockjs的理解和使用 120 | 3). jons数据设计的理解 121 | 122 | ## 4. ShopHeader组件 123 | 1). 异步显示数据效果的编码流程 124 | ajax 125 | ajax请求函数 126 | 接口请求函数 127 | vuex 128 | state 129 | mutation-types 130 | actions 131 | mutations 132 | 组件 133 | dispatch(): 异步获取后台数据到vuex的state 134 | mapState(): 从vuex的state中读取对应的数据 135 | 模板中显示 136 | 2). 初始显示异常 137 | 情况1: Cannot read property 'xxx' of undefined" 138 | 原因: 初始值是空对象, 内部没有数据, 而模块中直接显示3层表达式 139 | 解决: 使用v-if指令 140 | 141 | 情况2: Cannot read property 'xxx' of null" 142 | 143 | 3). vue transition动画 144 | 145 | # day04 146 | ## 1. ShopGoods组件 147 | 1). 动态展现列表数据 148 | 2). 基本滑动: 149 | 使用better-scroll 150 | 理解其基本原理 151 | 创建BScroll对象的时机 152 | watch + $nextTick() 153 | callback + $nextTick 154 | 3). 滑动右侧列表, 左侧同步更新 155 | better-scroll禁用了原生的dom事件, 使用的是自定义事件 156 | 绑定监听: scroll/scrollEnd 157 | 滚动监听的类型: probeType 158 | 列表滑动的3种类型 159 | 手指触摸 160 | 惯性 161 | 编码 162 | 分析: 163 | 类名: current 标识当前分类 164 | 设计一个计算属性: currentIndex 165 | 根据哪些数据计算? 166 | scrollY: 右侧滑动的Y轴坐标 (滑动过程时实时变化) 167 | tops: 所有右侧分类li的top组成的数组 (列表第一次显示后就不再变化) 168 | 编码: 169 | 1). 在滑动过程中, 实时收集scrollY 170 | 2). 列表第一次显示后, 收集tops 171 | 3). 实现currentIndex的计算逻辑 172 | 4). 点击左侧列表项, 右侧滑动到对应位置 173 | 174 | ## 2. CartControl组件 175 | 1). 问题: 更新状态数据, 对应的界面不变化 176 | 原因: 一般方法给一个已有绑定的对象中添加一个新的属性, 这个属性没有数据绑定 177 | 解决: 178 | Vue.set(obj, 'xxx', value)才有数据绑定 179 | this.$set(obj, 'xxx', value)才有数据绑定 180 | 181 | ## 3. ShopCart组件 182 | 1). 使用vuex管理购物项数据: cartFoods 183 | 2). 解决几个功能性bug 184 | 185 | ## 4. Food组件 186 | 1). 父子组件: 187 | 子组件调用父组件的方法: 通过props将方法传递给子组件 188 | 父组件调用子组件的方法: 通过ref找到子组件标签对象 189 | 190 | # day05 191 | ## 1. ShopRatings组件 192 | 1). 列表的过滤显示 193 | 2). 自定义过滤器 194 | 195 | ## 2. ShopInfo组件 196 | 1). 使用better-scroll实现两个方向的滑动 197 | 1). 通过JS动态操作样式 198 | 2). 解决当前路由刷新异常的bug 199 | 200 | ## 3. Search组件 201 | 1). 根据关键字来异步搜索显示匹配的商家列表 202 | 2). 如实实现没有搜索结果的提示显示 203 | 204 | ## 4. 项目优化 205 | 1). 缓存路由组件对象 206 | 2). 路由组件懒加载 207 | 3). 图片司加载: vue-lazyload 208 | 4). 分析打包文件并优化 209 | --------------------------------------------------------------------------------