├── README.md ├── canye-client ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── 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 ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── api │ │ ├── ajax.js │ │ └── index.js │ ├── common │ │ ├── imgs │ │ │ ├── 1.gif │ │ │ └── loading.gif │ │ └── stylus │ │ │ └── mixins.styl │ ├── components │ │ ├── AlertTip │ │ │ └── AlertTip.vue │ │ ├── CartControl │ │ │ └── CartControl.vue │ │ ├── Food │ │ │ └── Food.vue │ │ ├── FooterGuide │ │ │ └── FooterGuide.vue │ │ ├── HeaderTop │ │ │ └── HeaderTop.vue │ │ ├── ShopCart │ │ │ └── ShopCart.vue │ │ ├── ShopHeader │ │ │ └── ShopHeader.vue │ │ ├── ShopList │ │ │ ├── ShopList.vue │ │ │ └── images │ │ │ │ └── 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 │ │ │ │ └── order │ │ │ │ └── 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 ├── canye-server ├── API.md ├── api │ └── ajax.js ├── app.js ├── bin │ └── www ├── data │ ├── index_category.json │ └── shops.json ├── db │ └── models.js ├── package-lock.json ├── package.json ├── public │ └── stylesheets │ │ └── style.css ├── routes │ ├── index.js │ └── users.js ├── util │ └── sms_util.js └── views │ ├── error.ejs │ └── index.ejs ├── shows ├── food.png ├── login.png ├── msite.png ├── order.png ├── profile.png ├── rating.png ├── search.png └── shop-detail.png └── 笔记总结.md /README.md: -------------------------------------------------------------------------------- 1 | # 简介 2 | 3 | ## 1. 项目描述 4 | 5 | 1. 此项目为一个前后端分离的外卖 Web App (SPA) 项目 6 | 2. 使用了 Vue 全家桶+ES6+Webpack 等前端最新技术 7 | 3. 包括商家, 商品, 购物车, 用户等多个功能子模块 8 | 4. 采用模块化、组件化、工程化的模式开发 9 | 10 | ## 2. 能从此项目中学到什么? 11 | 12 | ### 2.1 项目开发流程及开发方法 13 | 14 | 1. 熟悉一个项目的开发流程 15 | 2. 学会组件化、模块化、工程化的开发模式 16 | 3. 掌握使用 vue-cli 脚手架初始化 Vue.js 项目 17 | 4. 学会模拟 json 后端数据，实现前后端分离开发 18 | 5. 学会 ES6+eslint 的开发方式 19 | 6. 掌握一些项目优化技巧 20 | 21 | ### 2.2 Vue 插件或第三方库 22 | 23 | 1. 学会使用 vue-router 开发SPA单页应用 24 | 2. 学会使用 axios/vue-resource 与后端进行数据交互 25 | 3. 学会使用 vuex 管理应用组件状态 26 | 4. 学会使用 better-scroll/vue-scroller 实现页面滑动效果 27 | 5. 学会使用 mint-ui 组件库构建界面 28 | 6. 学会使用 vue-lazyload 实现图片惰加载 29 | 7. 学会使用 mockjs 模拟后台数据接口 30 | 31 | ## 3. API接口文档 32 | 33 | [项目API接口文档](https://github.com/git-canye/foodshop/blob/master/mintshop-server/API.md) 34 | 35 | ## 4. 运行项目 36 | 37 | **先运行服务器，再打开项目** 38 | 39 | **canyeshop-server文件夹下cmd命令：** 40 | 41 | 1. `npm install` 42 | 2. `npm start` 43 | 44 | **canyeshop-client文件夹下cmd命令：** 45 | 46 | 1. `npm install` 47 | 2. `npm start` 48 | 49 | **登陆** 50 | 51 | 1. 手机号登陆，输入符合格式的手机号即可 52 | 2. 密码登陆，默认用户名abc，密码123 53 | 54 | ## 5. 项目截图 55 | 56 | 1. 首页 57 | 58 | msite 59 | 60 | 2. 订单 61 | 62 | order 63 | 64 | 3. 搜索 65 | 66 | search 67 | 68 | 4. 个人 69 | 70 | profile 71 | 72 | 5. 登陆 73 | 74 | login 75 | 76 | 6. 点餐 77 | 78 | food 79 | 80 | 7. 评价 81 | 82 | rating 83 | 84 | 8. 商店详情 85 | 86 | shop-detail 87 | -------------------------------------------------------------------------------- /canye-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", ["component",[ 12 | { 13 | "libraryName": "mint-ui", 14 | "style": true 15 | } 16 | ]]] 17 | } 18 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-client/.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | *.vue 6 | *.js -------------------------------------------------------------------------------- /canye-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 | "no-new": 0, 25 | // allow async-await 26 | 'generator-star-spacing': 'off', 27 | // allow debugger during development 28 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /canye-client/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-client/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/build/logo.png -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | } 40 | }, 41 | module: { 42 | rules: [ 43 | ...(config.dev.useEslint ? [createLintingRule()] : []), 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader', 47 | options: vueLoaderConfig 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel-loader', 52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 53 | }, 54 | { 55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 56 | loader: 'url-loader', 57 | options: { 58 | limit: 10000, 59 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 60 | } 61 | }, 62 | { 63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 64 | loader: 'url-loader', 65 | options: { 66 | limit: 10000, 67 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 68 | } 69 | }, 70 | { 71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 72 | loader: 'url-loader', 73 | options: { 74 | limit: 10000, 75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 76 | } 77 | } 78 | ] 79 | }, 80 | node: { 81 | // prevent webpack from injecting useless setImmediate polyfill because Vue 82 | // source contains it (although only uses it if it's native). 83 | setImmediate: false, 84 | // prevent webpack from injecting mocks to Node native modules 85 | // that does not make sense for the client 86 | dgram: 'empty', 87 | fs: 'empty', 88 | net: 'empty', 89 | tls: 'empty', 90 | child_process: 'empty' 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | // 静态资源文件夹 12 | assetsSubDirectory: 'static', 13 | // 发布路径 14 | assetsPublicPath: '/', 15 | 16 | // 代理配置表，在这里可以配置特定的请求代理到对应的API接口 17 | // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx' 18 | proxyTable: { 19 | '/api': { // 匹配所有以 '/api'开头的请求路径 20 | target: 'http://localhost:4000', // 代理目标的基础路径 21 | // secure: false, // 如果是https接口，需要配置这个参数 22 | changeOrigin: true, // 支持跨域 23 | pathRewrite: { // 重写路径: 去掉路径中开头的'/api' 24 | '^/api': '' 25 | } 26 | } 27 | }, 28 | 29 | // Various Dev Server settings 30 | host: 'localhost', // can be overwritten by process.env.HOST 31 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 32 | autoOpenBrowser: true, 33 | errorOverlay: true, 34 | notifyOnErrors: true, 35 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 36 | 37 | // Use Eslint Loader? 38 | // If true, your code will be linted during bundling and 39 | // linting errors and warnings will be shown in the console. 40 | useEslint: true, 41 | // If true, eslint errors and warnings will also be shown in the error overlay 42 | // in the browser. 43 | showEslintErrorsInOverlay: false, 44 | 45 | /** 46 | * Source Maps 47 | */ 48 | 49 | // https://webpack.js.org/configuration/devtool/#development 50 | devtool: 'cheap-module-eval-source-map', 51 | 52 | // If you have problems debugging vue-files in devtools, 53 | // set this to false - it *may* help 54 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 55 | cacheBusting: true, 56 | 57 | cssSourceMap: true 58 | }, 59 | 60 | build: { 61 | // Template for index.html 62 | index: path.resolve(__dirname, '../dist/index.html'), 63 | 64 | // Paths 65 | assetsRoot: path.resolve(__dirname, '../dist'), 66 | assetsSubDirectory: 'static', 67 | assetsPublicPath: '/', 68 | 69 | /** 70 | * Source Maps 71 | */ 72 | 73 | productionSourceMap: true, 74 | // https://webpack.js.org/configuration/devtool/#production 75 | devtool: '#source-map', 76 | 77 | // Gzip off by default as many popular static hosts such as 78 | // Surge or Netlify already gzip all static assets for you. 79 | // Before setting to `true`, make sure to: 80 | // npm install --save-dev compression-webpack-plugin 81 | productionGzip: false, 82 | productionGzipExtensions: ['js', 'css'], 83 | 84 | // Run the build command with an extra argument to 85 | // View the bundle analyzer report after build finishes: 86 | // `npm run build --report` 87 | // Set to `true` or `false` to always turn it on or off 88 | bundleAnalyzerReport: process.env.npm_config_report 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /canye-client/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /canye-client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CanyeShop 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /canye-client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "canyeshop-client", 3 | "version": "1.0.0", 4 | "description": "canyeshop client project", 5 | "author": "canye <457090009@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js" 12 | }, 13 | "dependencies": { 14 | "axios": "^0.18.0", 15 | "better-scroll": "^1.12.6", 16 | "date-fns": "^1.29.0", 17 | "fastclick": "^1.0.6", 18 | "mint-ui": "^2.2.13", 19 | "mockjs": "^1.0.1-beta3", 20 | "swiper": "^4.3.3", 21 | "vue": "^2.5.2", 22 | "vue-router": "^3.0.1", 23 | "vuex": "^3.0.1" 24 | }, 25 | "devDependencies": { 26 | "autoprefixer": "^7.1.2", 27 | "babel-core": "^6.22.1", 28 | "babel-eslint": "^8.2.1", 29 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 30 | "babel-loader": "^7.1.1", 31 | "babel-plugin-component": "^1.1.1", 32 | "babel-plugin-syntax-jsx": "^6.18.0", 33 | "babel-plugin-transform-runtime": "^6.22.0", 34 | "babel-plugin-transform-vue-jsx": "^3.5.0", 35 | "babel-preset-env": "^1.3.2", 36 | "babel-preset-stage-2": "^6.22.0", 37 | "chalk": "^2.0.1", 38 | "copy-webpack-plugin": "^4.0.1", 39 | "css-loader": "^0.28.0", 40 | "eslint": "^4.15.0", 41 | "eslint-config-standard": "^10.2.1", 42 | "eslint-friendly-formatter": "^3.0.0", 43 | "eslint-loader": "^1.7.1", 44 | "eslint-plugin-import": "^2.7.0", 45 | "eslint-plugin-node": "^5.2.0", 46 | "eslint-plugin-promise": "^3.4.0", 47 | "eslint-plugin-standard": "^3.0.1", 48 | "eslint-plugin-vue": "^4.0.0", 49 | "extract-text-webpack-plugin": "^3.0.0", 50 | "file-loader": "^1.1.4", 51 | "friendly-errors-webpack-plugin": "^1.6.1", 52 | "html-webpack-plugin": "^2.30.1", 53 | "node-notifier": "^5.1.2", 54 | "optimize-css-assets-webpack-plugin": "^3.2.0", 55 | "ora": "^1.2.0", 56 | "portfinder": "^1.0.13", 57 | "postcss-import": "^11.0.0", 58 | "postcss-loader": "^2.0.8", 59 | "postcss-url": "^7.2.1", 60 | "rimraf": "^2.6.0", 61 | "semver": "^5.3.0", 62 | "shelljs": "^0.7.6", 63 | "stylus": "^0.54.5", 64 | "stylus-loader": "^3.0.2", 65 | "uglifyjs-webpack-plugin": "^1.1.1", 66 | "url-loader": "^0.5.8", 67 | "vue-loader": "^13.7.2", 68 | "vue-style-loader": "^3.0.1", 69 | "vue-template-compiler": "^2.5.2", 70 | "webpack": "^3.6.0", 71 | "webpack-bundle-analyzer": "^2.9.0", 72 | "webpack-dev-server": "^2.9.1", 73 | "webpack-merge": "^4.1.0" 74 | }, 75 | "engines": { 76 | "node": ">= 6.0.0", 77 | "npm": ">= 3.0.0" 78 | }, 79 | "browserslist": [ 80 | "> 1%", 81 | "last 2 versions", 82 | "not ie <= 8" 83 | ] 84 | } 85 | -------------------------------------------------------------------------------- /canye-client/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 33 | -------------------------------------------------------------------------------- /canye-client/src/api/ajax.js: -------------------------------------------------------------------------------- 1 | /* 2 | ajax 请求函数模块 3 | */ 4 | import axios from 'axios' 5 | /** 6 | * 向外部暴露一个函数 ajax 7 | * @param {*} url 请求路径，默认为空 8 | * @param {*} data 请求参数，默认为空对象 9 | * @param {*} type 请求方法，默认为GET 10 | */ 11 | export default function ajax (url = '', data = {}, type = 'GET') { 12 | // 返回值 Promise对象 （异步返回的数据是response.data，而不是response） 13 | return new Promise(function (resolve, reject) { 14 | // （利用axios）异步执行ajax请求 15 | let promise // 这个内部的promise用来保存axios的返回值(promise对象) 16 | if (type === 'GET') { 17 | // 准备 url query 参数数据 18 | let dataStr = '' // 数据拼接字符串，将data连接到url 19 | Object.keys(data).forEach(key => { 20 | dataStr += key + '=' + data[key] + '&' 21 | }) 22 | if (dataStr !== '') { 23 | dataStr = dataStr.substring(0, dataStr.lastIndexOf('&')) 24 | url = url + '?' + dataStr 25 | } 26 | // 发送 get 请求 27 | promise = axios.get(url) 28 | } else { 29 | // 发送 post 请求 30 | promise = axios.post(url, data) 31 | } 32 | promise.then(response => { 33 | // 成功回调resolve() 34 | resolve(response.data) 35 | }) 36 | .catch(error => { 37 | // 失败回调reject() 38 | reject(error) 39 | }) 40 | }) 41 | } 42 | -------------------------------------------------------------------------------- /canye-client/src/api/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | 与后台交互模块 （依赖已封装的ajax函数） 3 | 包含n个接口请求函数的模块，函数的返回值是promise对象 4 | */ 5 | import ajax from './ajax' 6 | // const BASE_URL = 'http://localhost:4000' 7 | const BASE_URL = '/api' 8 | 9 | // 1.获取地址信息(根据经纬度串) 10 | // 这个接口的经纬度参数是在url路径里的param参数，没有query参数 11 | export const reqAddress = (geohash) => ajax(`${BASE_URL}/position/${geohash}`) 12 | 13 | // 2.获取 msite 页面食品分类列表 14 | export const reqCategorys = () => ajax(BASE_URL + '/index_category') 15 | 16 | // 3.获取 msite 商铺列表(根据query参数：经纬度) 17 | // 将经纬度两个数据作为一个参数对象传入 18 | // 也可以两个数据分别传入ajax， 然后再放入一个对象参数内， 如下面的手机号接口 19 | export const reqShops = ({latitude, longitude}) => ajax(BASE_URL + '/shops', {latitude, longitude}) 20 | 21 | // 4.根据经纬度和关键字搜索商铺列表 22 | export const reqSearchShop = (geohash, keyword) => ajax(BASE_URL + '/search_shops', {geohash, keyword}) 23 | 24 | // 5.获取一次性验证码 25 | // 不是ajax请求，src可通过methods改变 26 | 27 | // 6.账号密码登录 28 | export const reqPwdLogin = ({name, pwd, captcha}) => ajax(BASE_URL + '/login_pwd', {name, pwd, captcha}, 'POST') 29 | 30 | // 7.获取短信验证码 31 | export const reqSendCode = (phone) => ajax(BASE_URL + '/sendcode', {phone}) 32 | 33 | // 8.手机号验证码登录 34 | export const reqSmsLogin = (phone, code) => ajax(BASE_URL + '/login_sms', {phone, code}, 'POST') 35 | 36 | // 9.获取用户信息(根据会话) 37 | export const reqUserInfo = () => ajax(BASE_URL + '/userinfo') 38 | 39 | // 10.请求登出 40 | export const reqLogout = () => ajax(BASE_URL + '/logout') 41 | 42 | 43 | /** 44 | * 下列请求由mock拦截并返回 不需要代理 45 | */ 46 | // 获取商家信息 47 | export const reqShopInfo = () => ajax('/info') 48 | 49 | // 获取商家评价数组 50 | export const reqShopRatings = () => ajax('/ratings') 51 | 52 | // 获取商家商品数组 53 | export const reqShopGoods = () => ajax('/goods') 54 | -------------------------------------------------------------------------------- /canye-client/src/common/imgs/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/common/imgs/1.gif -------------------------------------------------------------------------------- /canye-client/src/common/imgs/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/common/imgs/loading.gif -------------------------------------------------------------------------------- /canye-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 -------------------------------------------------------------------------------- /canye-client/src/components/AlertTip/AlertTip.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 28 | 29 | 107 | -------------------------------------------------------------------------------- /canye-client/src/components/CartControl/CartControl.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | 25 | 63 | -------------------------------------------------------------------------------- /canye-client/src/components/Food/Food.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 54 | 55 | 168 | -------------------------------------------------------------------------------- /canye-client/src/components/FooterGuide/FooterGuide.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 45 | 46 | 78 | -------------------------------------------------------------------------------- /canye-client/src/components/HeaderTop/HeaderTop.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 | 62 | -------------------------------------------------------------------------------- /canye-client/src/components/ShopCart/ShopCart.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 123 | 124 | 296 | -------------------------------------------------------------------------------- /canye-client/src/components/ShopHeader/ShopHeader.vue: -------------------------------------------------------------------------------- 1 | 108 | 109 | 132 | 133 | 607 | -------------------------------------------------------------------------------- /canye-client/src/components/ShopList/ShopList.vue: -------------------------------------------------------------------------------- 1 | 51 | 78 | 183 | -------------------------------------------------------------------------------- /canye-client/src/components/ShopList/images/shop_back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | -------------------------------------------------------------------------------- /canye-client/src/components/Star/Star.vue: -------------------------------------------------------------------------------- 1 | 6 | 42 | 93 | -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star24_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star24_half@2x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star24_half@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star24_half@3x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star24_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star24_off@2x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star24_off@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star24_off@3x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star24_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star24_on@2x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star24_on@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star24_on@3x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star36_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star36_half@2x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star36_half@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star36_half@3x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star36_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star36_off@2x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star36_off@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star36_off@3x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star36_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star36_on@2x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star36_on@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star36_on@3x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star48_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star48_half@2x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star48_half@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star48_half@3x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star48_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star48_off@2x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star48_off@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star48_off@3x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star48_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star48_on@2x.png -------------------------------------------------------------------------------- /canye-client/src/components/Star/images/star48_on@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/components/Star/images/star48_on@3x.png -------------------------------------------------------------------------------- /canye-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 | // return moment(value).format(formatStr) 7 | return format(value, formatStr) 8 | }) 9 | -------------------------------------------------------------------------------- /canye-client/src/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | 入口JS 3 | */ 4 | import Vue from 'vue' 5 | import {Button} from 'mint-ui' 6 | import VueLazyload from 'vue-lazyload' 7 | import App from './App' 8 | import router from './router' 9 | import store from './store' 10 | 11 | import './mock/mockServer' // 加载mockServer即可 12 | import './filters' // 过滤器 13 | import loading from './common/imgs/1.gif' 14 | 15 | // 注册全局组件标签 16 | Vue.component(Button.name,Button) // 17 | Vue.use(VueLazyload, { // 内部自定义一个指令lazy 18 | loading 19 | }) 20 | 21 | // 引入fastclick并绑定到body 解决移动端点击响应延迟0.3s的问题 22 | import FastClick from 'fastclick' 23 | FastClick.attach(document.body) 24 | Vue.config.productionTip = false 25 | 26 | new Vue({ 27 | el: '#app', 28 | render: h => h(App), 29 | router, // 使用vue-router 30 | store // 使用vuex 31 | }) -------------------------------------------------------------------------------- /canye-client/src/mock/mockServer.js: -------------------------------------------------------------------------------- 1 | /* 2 | 使用mockjs提供mock数据接口 3 | */ 4 | import Mock from 'mockjs' 5 | import data from './data.json' 6 | 7 | // 返回goods的接口 8 | Mock.mock('/goods', {code: 0, data: data.goods}) 9 | // 返回ratings的接口 10 | Mock.mock('/ratings', {code: 0, data: data.ratings}) 11 | // 返回info的接口 12 | Mock.mock('/info', {code: 0, data: data.info}) 13 | 14 | // export default ??? 不需要向外暴露任何数据, 只需要保存能执行即可 15 | -------------------------------------------------------------------------------- /canye-client/src/pages/Login/Login.vue: -------------------------------------------------------------------------------- 1 | 61 | 191 | 330 | -------------------------------------------------------------------------------- /canye-client/src/pages/Login/images/captcha.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 10 | 12 | -------------------------------------------------------------------------------- /canye-client/src/pages/Msite/Msite.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 115 | 116 | 210 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-client/src/pages/Order/Order.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 21 | 22 | 74 | -------------------------------------------------------------------------------- /canye-client/src/pages/Order/images/order/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/src/pages/Order/images/order/person.png -------------------------------------------------------------------------------- /canye-client/src/pages/Profile/Profile.vue: -------------------------------------------------------------------------------- 1 | 97 | 98 | 126 | 127 | 288 | -------------------------------------------------------------------------------- /canye-client/src/pages/Search/Search.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 70 | 71 | 133 | -------------------------------------------------------------------------------- /canye-client/src/pages/Shop/Shop.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 34 | 35 | -------------------------------------------------------------------------------- /canye-client/src/pages/Shop/ShopGoods/ShopGoods.vue: -------------------------------------------------------------------------------- 1 | 52 | 148 | 149 | 247 | -------------------------------------------------------------------------------- /canye-client/src/pages/Shop/ShopInfo/ShopInfo.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 102 | 103 | 218 | -------------------------------------------------------------------------------- /canye-client/src/pages/Shop/ShopRatings/ShopRatings.vue: -------------------------------------------------------------------------------- 1 | 76 | 77 | 133 | 134 | 314 | -------------------------------------------------------------------------------- /canye-client/src/router/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | 路由模块 3 | */ 4 | import Vue from 'vue' 5 | import VueRouter from 'vue-router' 6 | 7 | /*import Msite from '../pages/Msite/Msite.vue' 8 | import Search from '../pages/Search/Search.vue' 9 | import Order from '../pages/Order/Order.vue' 10 | import Profile from '../pages/Profile/Profile.vue'*/ 11 | 12 | // 路由组件懒加载 13 | const Msite = () => import('../pages/Msite/Msite.vue') 14 | const Search = () => import('../pages/Search/Search.vue') 15 | const Order = () => import('../pages/Order/Order.vue') 16 | const Profile = () => import('../pages/Profile/Profile.vue') 17 | 18 | import Login from '../pages/Login/Login.vue' 19 | import Shop from '../pages/Shop/Shop.vue' 20 | import ShopGoods from '../pages/Shop/ShopGoods/ShopGoods.vue' 21 | import ShopRatings from '../pages/Shop/ShopRatings/ShopRatings.vue' 22 | import ShopInfo from '../pages/Shop/ShopInfo/ShopInfo.vue' 23 | 24 | // 全局注册Vue-router组件 25 | Vue.use(VueRouter) 26 | 27 | // 配置路由表并导出 28 | export default new VueRouter({ 29 | // 去掉地址中的哈希# 30 | mode: 'history', 31 | // 所有路由 32 | routes: [ 33 | { 34 | path: '/', 35 | redirect: '/msite' 36 | }, 37 | { 38 | path: '/msite', 39 | component: Msite, 40 | // 此时的Msite等都是返回路由组件的函数，只有请求对应的路由路径时(第一次)才会执行此函数并加载路由组件 41 | // 标识此路由是否显示FooterGuide 42 | meta: { 43 | showFooter: true 44 | } 45 | }, 46 | { 47 | path: '/search', 48 | component: Search, 49 | meta: { 50 | showFooter: true 51 | } 52 | }, 53 | { 54 | path: '/order', 55 | component: Order, 56 | meta: { 57 | showFooter: true 58 | } 59 | }, 60 | { 61 | path: '/profile', 62 | component: Profile, 63 | meta: { 64 | showFooter: true 65 | } 66 | }, 67 | { 68 | path: '/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 | -------------------------------------------------------------------------------- /canye-client/src/store/actions.js: -------------------------------------------------------------------------------- 1 | /* 2 | Action:通过操作mutation间接更新state的多个方法的对象 3 | */ 4 | import { 5 | RECEIVE_ADDRESS, 6 | RECEIVE_CATEGORYS, 7 | RECEIVE_SHOPS, 8 | RECEIVE_USER_INFO, 9 | RESET_USER_INFO, 10 | RECEIVE_INFO, 11 | RECEIVE_RATINGS, 12 | RECEIVE_GOODS, 13 | INCREMENT_FOOD_COUNT, 14 | DECREMENT_FOOD_COUNT, 15 | CLEAR_CART, 16 | RECEIVE_SEARCH_SHOPS 17 | } from './mutation-types' 18 | 19 | // api接口 20 | import { 21 | reqAddress, 22 | reqCategorys, 23 | reqShops, 24 | reqUserInfo, 25 | reqLogout, 26 | reqShopInfo, 27 | reqShopRatings, 28 | reqShopGoods, 29 | reqSearchShop 30 | } from '../api' 31 | 32 | export default { 33 | // 异步获取地址 34 | async getAddress({commit,state}) { 35 | // 发送异步ajax请求 36 | const geohash = state.latitude + ',' + state.longitude 37 | const result = await reqAddress(geohash) 38 | // 提交一个mutation 39 | if (result.code===0) { 40 | const address = result.data 41 | commit(RECEIVE_ADDRESS,{address}) 42 | } 43 | }, 44 | // 获取食品分类 45 | async getCategorys({commit}) { 46 | // 发送异步ajax请求 47 | const result = await reqCategorys() 48 | // 提交一个mutation 49 | if (result.code===0) { 50 | const categorys = result.data 51 | commit(RECEIVE_CATEGORYS,{categorys}) 52 | } 53 | }, 54 | // 获取商家列表 55 | async getShops({commit,state}) { 56 | const {latitude,longitude} = state 57 | // 发送异步ajax请求 58 | const result = await reqShops(state) 59 | // 提交一个mutation 60 | if (result.code===0) { 61 | const shops = result.data 62 | commit(RECEIVE_SHOPS,{shops}) 63 | } 64 | }, 65 | 66 | 67 | // 同步记录用户信息 68 | saveUser({commit},userInfo) { 69 | commit(RECEIVE_USER_INFO,{userInfo}) 70 | }, 71 | // 异步获取用户信息 72 | async getUserInfo({commit}) { 73 | const result = await reqUserInfo() 74 | if (result.code==0) { 75 | const userInfo = result.data 76 | commit(RECEIVE_USER_INFO,{userInfo}) 77 | } 78 | }, 79 | // 异步登出 80 | async logout({commit}) { 81 | const result = await reqLogout() 82 | if (result.code==0) { 83 | commit(RESET_USER_INFO) 84 | } 85 | }, 86 | 87 | 88 | // 异步获取商家信息 89 | async getShopInfo({commit}) { 90 | const result = await reqShopInfo() 91 | if (result.code==0) { 92 | const info = result.data 93 | commit(RECEIVE_INFO,{info}) 94 | } 95 | }, 96 | // 异步获取商家评价列表 97 | async getShopRatings({commit},callback) { 98 | const result = await reqShopRatings() 99 | if (result.code==0) { 100 | const ratings = result.data 101 | commit(RECEIVE_RATINGS,{ratings}) 102 | // 数据更新了，通知组件 103 | callback && callback() 104 | } 105 | }, 106 | // 异步获取商家商品列表 107 | async getShopGoods({commit},callback) { 108 | const result = await reqShopGoods() 109 | if (result.code==0) { 110 | const goods = result.data 111 | commit(RECEIVE_GOODS,{goods}) 112 | // 数据更新了，通知组件 113 | callback && callback() 114 | } 115 | }, 116 | 117 | // 同步更新food的count 118 | updateFoodCount({commit},{isAdd,food}) { 119 | if (isAdd) { 120 | commit(INCREMENT_FOOD_COUNT,{food}) 121 | } else { 122 | commit(DECREMENT_FOOD_COUNT,{food}) 123 | } 124 | }, 125 | 126 | // 同步清空购物车 127 | clearCart ({commit}) { 128 | commit(CLEAR_CART) 129 | }, 130 | 131 | // 异步获取商家商品列表 132 | async getSearchShops ({commit, state}, keyword) { 133 | const geohash = state.latitude + ',' + state.longitude 134 | const result = await reqSearchShop(geohash, keyword) 135 | if (result.code === 0) { 136 | const searchShops = result.data 137 | commit(RECEIVE_SEARCH_SHOPS, {searchShops}) 138 | } 139 | } 140 | } -------------------------------------------------------------------------------- /canye-client/src/store/getters.js: -------------------------------------------------------------------------------- 1 | /* 2 | 包含多个基于state的getter计算属性的对象 3 | */ 4 | export default { 5 | totalCount (state) { 6 | return state.cartFoods.reduce((total,food) => total + food.count, 0) 7 | }, 8 | totalPrice (state) { 9 | return state.cartFoods.reduce((total,food) => total + food.count*food.price, 0) 10 | }, 11 | positiveSize (state) { 12 | return state.ratings.reduce((size,rating) => size + (rating.rateType==0? 1:0),0) 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /canye-client/src/store/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | vuex最核心的管理对象store 3 | 组装模块并导出 store 的地方 4 | */ 5 | // 首先引入Vue及Vuex 6 | import Vue from 'vue' 7 | import Vuex from 'vuex' 8 | 9 | // 引入四个基本模块 10 | import state from './state' 11 | import mutations from './mutations' 12 | import actions from './actions' 13 | import getters from './getters' 14 | 15 | // 一定要声明使用插件 16 | Vue.use(Vuex) 17 | 18 | // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 19 | export default new Vuex.Store({ 20 | state, 21 | mutations, 22 | actions, 23 | getters 24 | }) -------------------------------------------------------------------------------- /canye-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 | 8 | export const RECEIVE_USER_INFO = 'receive_user_info' // 接收用户信息 9 | export const RESET_USER_INFO = 'reset_user_info' // 重置用户信息 10 | 11 | export const RECEIVE_INFO = 'receive_info' // 接收商家信息 12 | export const RECEIVE_RATINGS = 'receive_ratings' // 接收商家评价数组 13 | export const RECEIVE_GOODS = 'receive_goods' // 接收商品数组 14 | 15 | export const INCREMENT_FOOD_COUNT = 'increment_food_count' // 增加food中的count 16 | export const DECREMENT_FOOD_COUNT = 'decrement_food_count' // 减少food中的count 17 | export const CLEAR_CART = 'clear_cart' // 清空购物车 18 | 19 | export const RECEIVE_SEARCH_SHOPS = 'receive_search_shops' // 接收搜索的商家数组 -------------------------------------------------------------------------------- /canye-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 | export default { 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 | 33 | [RECEIVE_USER_INFO] (state,{userInfo}) { 34 | state.userInfo = userInfo 35 | }, 36 | 37 | [RESET_USER_INFO] (state) { 38 | state.userInfo = {} 39 | }, 40 | 41 | [RECEIVE_INFO] (state,{info}) { 42 | state.info = info 43 | }, 44 | 45 | [RECEIVE_RATINGS] (state,{ratings}) { 46 | state.ratings = ratings 47 | }, 48 | 49 | [RECEIVE_GOODS] (state,{goods}) { 50 | state.goods = goods 51 | }, 52 | 53 | [INCREMENT_FOOD_COUNT] (state,{food}) { 54 | if (!food.count) { // 第一次增加 55 | // food.count = 1 // 新增加属性(没有数据绑定) 56 | // set(对象，属性名，值)，让新增属性也有数据绑定 57 | Vue.set(food,'count',1) 58 | // 将food添加到cartFoods中 59 | state.cartFoods.push(food) 60 | } else { 61 | food.count++ 62 | } 63 | }, 64 | 65 | [DECREMENT_FOOD_COUNT] (state,{food}) { 66 | if (food.count) { 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 | // count归零并清除food的count属性 77 | state.cartFoods.forEach(food => { 78 | food.count = 0 79 | delete food.count 80 | }) 81 | // 清空购物车所有项 82 | state.cartFoods = [] 83 | }, 84 | 85 | [RECEIVE_SEARCH_SHOPS] (state, {searchShops}) { 86 | state.searchShops = searchShops 87 | } 88 | } -------------------------------------------------------------------------------- /canye-client/src/store/state.js: -------------------------------------------------------------------------------- 1 | /* 2 | State:状态对象 3 | */ 4 | export default { 5 | latitude: 23.1127, // 纬度 6 | longitude: 113.41724, // 经度 7 | address: {}, // 地址相关信息对象 8 | categorys: [], // 食品分类数组 9 | shops: [], // 商家数组 10 | userInfo: {}, // 用户信息 11 | goods: [], // 商品列表 12 | ratings: [], // 商家评价列表 13 | info: {}, // 商家信息 14 | cartFoods: [], // 购物车中食物的列表 15 | searchShops: [] // 搜索得到的商家列表 16 | } 17 | -------------------------------------------------------------------------------- /canye-client/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/canye-client/static/.gitkeep -------------------------------------------------------------------------------- /canye-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 | } -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 || '4000'); 16 | app.set('port', port); 17 | 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 | -------------------------------------------------------------------------------- /canye-server/data/index_category.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 20, 4 | "is_in_serving": true, 5 | "description": "苦了累了，来点甜的", 6 | "title": "甜品饮品", 7 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu751c%5Cu54c1%5Cu996e%5Cu54c1%22%2C%22complex_category_ids%22%3A%5B240%2C241%2C242%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A239%2C%22name%22%3A%22%5Cu751c%5Cu54c1%5Cu996e%5Cu54c1%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E7%94%9C%E5%93%81%E9%A5%AE%E5%93%81&animation_type=1&is_need_mark=0&banner_type=", 8 | "image_url": "/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg", 9 | "icon_url": "", 10 | "title_color": "", 11 | "__v": 0 12 | }, 13 | { 14 | "id": 10, 15 | "is_in_serving": true, 16 | "description": "足不出户，便利回家", 17 | "title": "商超便利", 18 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu5546%5Cu8d85%5Cu4fbf%5Cu5229%22%2C%22complex_category_ids%22%3A%5B254%2C255%2C256%2C257%2C258%2C271%2C272%2C273%2C274%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A252%2C%22name%22%3A%22%5Cu5546%5Cu5e97%5Cu8d85%5Cu5e02%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E5%95%86%E8%B6%85%E4%BE%BF%E5%88%A9&animation_type=1&is_need_mark=0&banner_type=", 19 | "image_url": "/0/da/f42235e6929a5cb0e7013115ce78djpeg.jpeg", 20 | "icon_url": "", 21 | "title_color": "", 22 | "__v": 0 23 | }, 24 | { 25 | "id": 15, 26 | "is_in_serving": true, 27 | "description": "附近美食一网打尽", 28 | "title": "美食", 29 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu7f8e%5Cu98df%22%2C%22complex_category_ids%22%3A%5B207%2C220%2C233%2C260%5D%2C%22is_show_all_category%22%3Afalse%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A207%2C%22name%22%3A%22%5Cu5feb%5Cu9910%5Cu4fbf%5Cu5f53%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E7%BE%8E%E9%A3%9F&animation_type=1&is_need_mark=0&banner_type=", 30 | "image_url": "/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg", 31 | "icon_url": "", 32 | "title_color": "", 33 | "__v": 0 34 | }, 35 | { 36 | "id": 225, 37 | "is_in_serving": true, 38 | "description": "有菜有肉，营养均衡", 39 | "title": "简餐", 40 | "link": "eleme://restaurants?filter_key=%7B%22activity_types%22%3A%5B3%5D%2C%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu7b80%5Cu9910%22%2C%22complex_category_ids%22%3A%5B209%2C212%2C215%2C265%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A207%2C%22name%22%3A%22%5Cu5feb%5Cu9910%5Cu4fbf%5Cu5f53%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%7B%22id%22%3A3%2C%22name%22%3A%22%5Cu4e0b%5Cu5355%5Cu7acb%5Cu51cf%22%2C%22icon_name%22%3A%22%5Cu51cf%22%2C%22icon_color%22%3A%22f07373%22%2C%22is_need_filling%22%3A1%2C%22is_multi_choice%22%3A0%2C%22filter_value%22%3A3%2C%22filter_key%22%3A%22activity_types%22%7D%5D%7D&target_name=%E7%AE%80%E9%A4%90&animation_type=1&is_need_mark=0&banner_type=", 41 | "image_url": "/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg", 42 | "icon_url": "", 43 | "title_color": "", 44 | "__v": 0 45 | }, 46 | { 47 | "id": 403297, 48 | "is_in_serving": true, 49 | "description": "大胆尝鲜，遇见惊喜", 50 | "title": "新店特惠", 51 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu65b0%5Cu5e97%5Cu7279%5Cu60e0%22%2C%22complex_category_ids%22%3A%5B207%2C220%2C233%2C239%2C244%2C248%2C252%2C260%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A207%2C%22name%22%3A%22%5Cu5feb%5Cu9910%5Cu4fbf%5Cu5f53%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22support_ids%22%3A%5B-1%5D%2C%22activities%22%3A%5B%5D%7D&target_name=%E6%96%B0%E5%BA%97%E7%89%B9%E6%83%A0&animation_type=1&is_need_mark=0&banner_type=", 52 | "image_url": "/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg", 53 | "icon_url": "", 54 | "title_color": "", 55 | "__v": 0 56 | }, 57 | { 58 | "id": 92, 59 | "is_in_serving": true, 60 | "description": "准时必达，超时赔付", 61 | "title": "准时达", 62 | "link": "eleme://restaurants?filter_key=%7B%22support_ids%22%3A%5B9%5D%2C%22activities%22%3A%5B%7B%22id%22%3A9%2C%22name%22%3A%22%5Cu51c6%5Cu65f6%5Cu8fbe%22%2C%22icon_name%22%3A%22%5Cu51c6%22%2C%22icon_color%22%3A%22E8842D%22%2C%22is_need_filling%22%3A0%2C%22is_multi_choice%22%3A1%2C%22filter_value%22%3A9%2C%22filter_key%22%3A%22support_ids%22%2C%22description%22%3A%22%5Cu51c6%5Cu65f6%5Cu8fbe%22%7D%5D%7D&target_name=%E5%87%86%E6%97%B6%E8%BE%BE&animation_type=1&is_need_mark=0&banner_type=", 63 | "image_url": "/3/84/8e031bf7b3c036b4ec19edff16e46jpeg.jpeg", 64 | "icon_url": "", 65 | "title_color": "", 66 | "__v": 0 67 | }, 68 | { 69 | "id": 1, 70 | "is_in_serving": true, 71 | "description": "0元早餐0起送，每天都有新花样。", 72 | "title": "预订早餐", 73 | "link": "eleme://web?url=https%3A%2F%2Fzaocan.ele.me&target_name=%E9%A2%84%E8%AE%A2%E6%97%A9%E9%A4%90&animation_type=1&is_need_mark=&banner_type=", 74 | "image_url": "/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg", 75 | "icon_url": "", 76 | "title_color": "", 77 | "__v": 0 78 | }, 79 | { 80 | "id": 65, 81 | "is_in_serving": true, 82 | "description": "", 83 | "title": "土豪推荐", 84 | "link": "eleme://restaurants?filter_key=%7B%22activities%22%3A%5B%7B%22filter_key%22%3A%22tags%22%2C%22filter_value%22%3A0%7D%5D%7D&target_name=%E5%9C%9F%E8%B1%AA%E6%8E%A8%E8%8D%90&animation_type=1&is_need_mark=0&banner_type=", 85 | "image_url": "/e/7e/02b72b5e63c127d5bfae57b8e4ab1jpeg.jpeg", 86 | "icon_url": "", 87 | "title_color": "", 88 | "__v": 0 89 | }, 90 | { 91 | "id": 288, 92 | "is_in_serving": true, 93 | "description": "无辣不欢", 94 | "title": "川湘菜", 95 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu5ddd%5Cu6e58%5Cu83dc%22%2C%22complex_category_ids%22%3A%5B221%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A220%2C%22name%22%3A%22%5Cu7279%5Cu8272%5Cu83dc%5Cu7cfb%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E5%B7%9D%E6%B9%98%E8%8F%9C&animation_type=1&is_need_mark=0&banner_type=", 96 | "image_url": "/9/7c/9700836a33e05c2410bda8da59117jpeg.jpeg", 97 | "icon_url": "", 98 | "title_color": "", 99 | "__v": 0 100 | }, 101 | { 102 | "id": 286, 103 | "is_in_serving": true, 104 | "description": "", 105 | "title": "麻辣烫", 106 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu9ebb%5Cu8fa3%5Cu70eb%22%2C%22complex_category_ids%22%3A%5B214%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A207%2C%22name%22%3A%22%5Cu5feb%5Cu9910%5Cu4fbf%5Cu5f53%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E9%BA%BB%E8%BE%A3%E7%83%AB&animation_type=1&is_need_mark=0&banner_type=", 107 | "image_url": "/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg", 108 | "icon_url": "", 109 | "title_color": "", 110 | "__v": 0 111 | }, 112 | { 113 | "id": 289, 114 | "is_in_serving": true, 115 | "description": "老字号，好味道", 116 | "title": "包子粥店", 117 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu5305%5Cu5b50%5Cu7ca5%5Cu5e97%22%2C%22complex_category_ids%22%3A%5B215%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A207%2C%22name%22%3A%22%5Cu5feb%5Cu9910%5Cu4fbf%5Cu5f53%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E5%8C%85%E5%AD%90%E7%B2%A5%E5%BA%97&animation_type=1&is_need_mark=0&banner_type=", 118 | "image_url": "/2/17/244241b514affc0f12f4168cf6628jpeg.jpeg", 119 | "icon_url": "", 120 | "title_color": "", 121 | "__v": 0 122 | }, 123 | { 124 | "id": 9, 125 | "is_in_serving": true, 126 | "description": "内心小公举，一直被宠爱", 127 | "title": "鲜花蛋糕", 128 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu9c9c%5Cu82b1%5Cu86cb%5Cu7cd5%22%2C%22complex_category_ids%22%3A%5B249%2C250%2C251%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A248%2C%22name%22%3A%22%5Cu9c9c%5Cu82b1%5Cu86cb%5Cu7cd5%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E9%B2%9C%E8%8A%B1%E8%9B%8B%E7%B3%95&animation_type=1&is_need_mark=0&banner_type=", 129 | "image_url": "/8/83/171fd98b85dee3b3f4243b7459b48jpeg.jpeg", 130 | "icon_url": "", 131 | "title_color": "", 132 | "__v": 0 133 | }, 134 | { 135 | "id": 285, 136 | "is_in_serving": true, 137 | "description": "寿司定食，泡菜烤肉", 138 | "title": "日韩料理", 139 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu65e5%5Cu97e9%5Cu6599%5Cu7406%22%2C%22complex_category_ids%22%3A%5B229%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A260%2C%22name%22%3A%22%5Cu5f02%5Cu56fd%5Cu6599%5Cu7406%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E6%97%A5%E9%9F%A9%E6%96%99%E7%90%86&animation_type=1&is_need_mark=0&banner_type=", 140 | "image_url": "/6/1a/1e0f448be0624c62db416e864d2afjpeg.jpeg", 141 | "icon_url": "", 142 | "title_color": "", 143 | "__v": 0 144 | }, 145 | { 146 | "id": 8, 147 | "is_in_serving": true, 148 | "description": "一天变女神", 149 | "title": "果蔬生鲜", 150 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu679c%5Cu852c%5Cu751f%5Cu9c9c%22%2C%22complex_category_ids%22%3A%5B245%2C246%2C247%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A244%2C%22name%22%3A%22%5Cu679c%5Cu852c%5Cu751f%5Cu9c9c%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E6%9E%9C%E8%94%AC%E7%94%9F%E9%B2%9C&animation_type=1&is_need_mark=0&banner_type=", 151 | "image_url": "/4/34/ea0d51c9608310cf41faa5de6b8efjpeg.jpeg", 152 | "icon_url": "", 153 | "title_color": "", 154 | "__v": 0 155 | }, 156 | { 157 | "id": 236, 158 | "is_in_serving": true, 159 | "description": "大口大口把你吃掉", 160 | "title": "汉堡薯条", 161 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu6c49%5Cu5821%22%2C%22complex_category_ids%22%3A%5B212%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A207%2C%22name%22%3A%22%5Cu5feb%5Cu9910%5Cu4fbf%5Cu5f53%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E6%B1%89%E5%A0%A1%E8%96%AF%E6%9D%A1&animation_type=1&is_need_mark=0&banner_type=", 162 | "image_url": "/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg", 163 | "icon_url": "", 164 | "title_color": "", 165 | "__v": 0 166 | }, 167 | { 168 | "id": 287, 169 | "is_in_serving": true, 170 | "description": "西餐始祖，欧洲的味道", 171 | "title": "披萨意面", 172 | "link": "eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu62ab%5Cu8428%5Cu610f%5Cu9762%22%2C%22complex_category_ids%22%3A%5B211%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A260%2C%22name%22%3A%22%5Cu5f02%5Cu56fd%5Cu6599%5Cu7406%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E6%8A%AB%E8%90%A8%E6%84%8F%E9%9D%A2&animation_type=1&is_need_mark=0&banner_type=", 173 | "image_url": "/7/b6/235761e50d391445f021922b71789jpeg.jpeg", 174 | "icon_url": "", 175 | "title_color": "", 176 | "__v": 0 177 | } 178 | ] -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "canyeshop_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 | -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | // 缺少数据库的暂时处理 29 | if (name!=='abc') { 30 | return res.send({code: 1, msg: '用户名不正确'}) 31 | } else if (pwd!==md5('123')) { 32 | return res.send({code: 1, msg: '密码不正确'}) 33 | } else { 34 | req.session.userid = 1 35 | req.session.username = name 36 | return res.send({code: 0, data: {_id: 1, name: name}}) 37 | } 38 | 39 | /*UserModel.findOne({name}, function (err, user) { 40 | if (user) { 41 | console.log('findUser', user) 42 | if (user.pwd !== pwd) { 43 | res.send({code: 1, msg: '用户名或密码不正确!'}) 44 | } else { 45 | req.session.userid = user._id 46 | res.send({code: 0, data: {_id: user._id, name: user.name, phone: user.phone}}) 47 | } 48 | } else { 49 | const userModel = new UserModel({name, pwd}) 50 | userModel.save(function (err, user) { 51 | // 向浏览器端返回cookie(key=value) 52 | // res.cookie('userid', user._id, {maxAge: 1000*60*60*24*7}) 53 | req.session.userid = user._id 54 | const data = {_id: user._id, name: user.name} 55 | // 3.2. 返回数据(新的user) 56 | res.send({code: 0, data}) 57 | }) 58 | } 59 | })*/ 60 | }) 61 | 62 | /* 63 | 一次性图形验证码 64 | */ 65 | router.get('/captcha', function (req, res) { 66 | var captcha = svgCaptcha.create({ 67 | ignoreChars: '0o1l', 68 | noise: 2, 69 | color: true 70 | }); 71 | req.session.captcha = captcha.text.toLowerCase(); 72 | console.log(req.session.captcha) 73 | /*res.type('svg'); 74 | res.status(200).send(captcha.data);*/ 75 | res.type('svg'); 76 | res.send(captcha.data) 77 | }); 78 | 79 | /* 80 | 发送验证码短信(缺少数据库的暂时处理) 81 | */ 82 | var smsCode = ''; 83 | router.get('/sendcode', function (req, res, next) { 84 | //1. 获取请求参数数据 85 | var phone = req.query.phone; 86 | //2. 处理数据 87 | //生成验证码(6位随机数) 88 | var code = sms_util.randomCode(6); 89 | //发送给指定的手机号 90 | console.log(`向${phone}发送验证码短信: ${code}`); 91 | sms_util.sendCode(phone, code, function (success) {//success表示是否成功 92 | if (success) { 93 | users[phone] = code 94 | console.log('保存验证码: ', phone, code) 95 | res.send({"code": 0}) 96 | } else { 97 | //3. 返回响应数据 98 | smsCode = code 99 | res.send({"code": 1, msg: '短信验证码为'+ smsCode}) 100 | } 101 | }) 102 | }) 103 | 104 | /* 105 | 短信登陆(缺少数据库的暂时处理) 106 | */ 107 | router.post('/login_sms', function (req, res, next) { 108 | var phone = req.body.phone; 109 | var code = req.body.code; 110 | console.log('/login_sms', phone, code); 111 | //if (users[phone] != code) { 112 | if (smsCode!=code) { 113 | return res.send({code: 1, msg: '手机号或验证码不正确'}); 114 | } else { 115 | req.session.userid = 2 116 | req.session.userphone = phone 117 | return res.send({code: 0, data: {_id: 2,phone: phone}}); 118 | } 119 | //删除保存的code 120 | delete users[phone]; 121 | 122 | 123 | /*UserModel.findOne({phone}, function (err, user) { 124 | if (user) { 125 | req.session.userid = user._id 126 | res.send({code: 0, data: user}) 127 | } else { 128 | //存储数据 129 | const userModel = new UserModel({phone}) 130 | userModel.save(function (err, user) { 131 | req.session.userid = user._id 132 | res.send({code: 0, data: user}) 133 | }) 134 | } 135 | })*/ 136 | 137 | }) 138 | 139 | /* 140 | 根据sesion中的userid, 查询对应的user 141 | */ 142 | router.get('/userinfo', function (req, res) { 143 | // 取出userid 144 | const userid = req.session.userid 145 | // 查询 146 | if (!userid) { 147 | // 清除浏览器保存的userid的cookie 148 | delete req.session.userid 149 | res.send({code: 1, msg: '请先登陆'}) 150 | } else if (userid==1) { 151 | res.send({code: 0, data: {_id: 1, name: req.session.username}}) 152 | } else if (userid==2) { 153 | res.send({code: 0, data: {_id: 2, phone: req.session.userphone}}) 154 | } 155 | /*UserModel.findOne({_id: userid}, _filter, function (err, user) { 156 | // 如果没有, 返回错误提示 157 | if (!user) { 158 | // 清除浏览器保存的userid的cookie 159 | delete req.session.userid 160 | 161 | res.send({code: 1, msg: '请先登陆'}) 162 | } else { 163 | // 如果有, 返回user 164 | res.send({code: 0, data: user}) 165 | } 166 | })*/ 167 | }) 168 | 169 | 170 | router.get('/logout', function (req, res) { 171 | // 清除浏览器保存的userid的cookie 172 | delete req.session.userid 173 | delete req.session.username 174 | delete req.session.userphone 175 | // 返回数据 176 | res.send({code: 0}) 177 | }) 178 | 179 | /* 180 | 根据经纬度获取位置详情 181 | */ 182 | router.get('/position/:geohash', function (req, res) { 183 | const {geohash} = req.params 184 | ajax(`http://cangdu.org:8001/v2/pois/${geohash}`) 185 | .then(data => { 186 | res.send({code: 0, data}) 187 | }) 188 | }) 189 | 190 | /* 191 | 获取首页分类列表 192 | */ 193 | router.get('/index_category', function (req, res) { 194 | setTimeout(function () { 195 | const data = require('../data/index_category.json') 196 | res.send({code: 0, data}) 197 | }, 300) 198 | }) 199 | 200 | /* 201 | 根据经纬度获取商铺列表 202 | ?latitude=40.10038&longitude=116.36867 203 | */ 204 | router.get('/shops', function (req, res) { 205 | const latitude = req.query.latitude 206 | const longitude = req.query.longitude 207 | 208 | setTimeout(function () { 209 | const data = require('../data/shops.json') 210 | res.send({code: 0, data}) 211 | }, 300) 212 | }) 213 | 214 | router.get('/search_shops', function (req, res) { 215 | const {geohash, keyword} = req.query 216 | ajax('http://cangdu.org:8001/v4/restaurants', { 217 | 'extras[]': 'restaurant_activity', 218 | geohash, 219 | keyword, 220 | type: 'search' 221 | }).then(data => { 222 | res.send({code: 0, data}) 223 | }) 224 | }) 225 | 226 | module.exports = router; -------------------------------------------------------------------------------- /canye-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 | -------------------------------------------------------------------------------- /canye-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 | function randomCode(length) { 10 | var chars = ['0','1','2','3','4','5','6','7','8','9']; 11 | var result = ""; //统一改名: alt + shift + R 12 | for(var i = 0; i < length ; i ++) { 13 | var index = Math.ceil(Math.random()*9); 14 | result += chars[index]; 15 | } 16 | return result; 17 | } 18 | // console.log(randomCode(6)); 19 | exports.randomCode = randomCode; 20 | 21 | /* 22 | 向指定号码发送指定验证码 23 | */ 24 | function sendCode(phone, code, callback) { 25 | // 只需要改1,2,4项 26 | var ACCOUNT_SID = '8a216da8662360a401665ce2156b14ce'; 27 | var AUTH_TOKEN = 'da88c854987c42d9ab98e8b80044d3f3'; 28 | var Rest_URL = 'https://app.cloopen.com:8883'; 29 | var AppID = '8a216da8662360a401665ce215bc14d4'; 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('13312345678', randomCode(6), function (success) { 83 | console.log(success); 84 | })*/ 85 | -------------------------------------------------------------------------------- /canye-server/views/error.ejs: -------------------------------------------------------------------------------- 1 |

<%= message %>

2 |

<%= error.status %>

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

<%= title %>

9 |

Welcome to <%= title %>

10 | 11 | 12 | -------------------------------------------------------------------------------- /shows/food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/shows/food.png -------------------------------------------------------------------------------- /shows/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/shows/login.png -------------------------------------------------------------------------------- /shows/msite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/shows/msite.png -------------------------------------------------------------------------------- /shows/order.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/shows/order.png -------------------------------------------------------------------------------- /shows/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/shows/profile.png -------------------------------------------------------------------------------- /shows/rating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/shows/rating.png -------------------------------------------------------------------------------- /shows/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/shows/search.png -------------------------------------------------------------------------------- /shows/shop-detail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/git-canye/foodshop/7fb42d0978e2fe0f4cb2fb258dbe1be31e057264/shows/shop-detail.png -------------------------------------------------------------------------------- /笔记总结.md: -------------------------------------------------------------------------------- 1 | # 01 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 | # 02 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 | # 03 93 | ## 1. 完成登陆/注册功能 94 | 1). 2种方式 95 | 手机号/短信验证码登陆 96 | 用户名/密码/图片验证码登陆 97 | 2). 登陆的基本流程 98 | 表单前台验证, 如果不通过, 提示 99 | 发送ajax请求, 得到返回的结果 100 | 根据结果的标识(code)来判断登陆请求是否成功 101 | 1: 不成功, 显示提示 102 | 0. 成功, 保存用户信息, 返回到上次路由 103 | 3). vue自定义事件 104 | 绑定监听: @eventName="fn" function fn (data) {// 处理} 105 | 分发事件: this.$emit('eventName', data) 106 | 4). 注意: 107 | 使用network查看请求(路径/参数/请求方式/响应数据) 108 | 使用vue的chrome插件查看vuex中的state和组件中的数据 109 | 使用debugger语句调试代码 110 | 实参类型与形参类型的匹配问题 111 | 112 | ## 2. 搭建商家整体界面 113 | 1). 拆分界面路由 114 | 2). 路由的定义/配置|使用 115 | 116 | ## 3. 模拟(mock)数据/接口 117 | 1). 前后台分离的理解 118 | 2). mockjs的理解和使用 119 | 3). jons数据设计的理解 120 | 121 | ## 4. ShopHeader组件 122 | 1). 异步显示数据效果的编码流程 123 | ajax 124 | ajax请求函数 125 | 接口请求函数 126 | vuex 127 | state 128 | mutation-types 129 | actions 130 | mutations 131 | 组件 132 | dispatch(): 异步获取后台数据到vuex的state 133 | mapState(): 从vuex的state中读取对应的数据 134 | 模板中显示 135 | 2). 初始显示异常 136 | 情况1: Cannot read property 'xxx' of undefined" 137 | 原因: 初始值是空对象, 内部没有数据, 而模块中直接显示3层表达式 138 | 解决: 使用v-if指令 139 | 140 | 情况2: Cannot read property 'xxx' of null" 141 | 142 | 3). vue transition动画 143 | 144 | # 04 145 | ## 1. ShopGoods组件 146 | 1). 动态展现列表数据 147 | 2). 基本滑动: 148 | 使用better-scroll 149 | 理解其基本原理 150 | 创建BScroll对象的时机 151 | watch + $nextTick() 152 | callback + $nextTick 153 | 3). 滑动右侧列表, 左侧同步更新 154 | better-scroll禁用了原生的dom事件, 使用的是自定义事件 155 | 绑定监听: scroll/scrollEnd 156 | 滚动监听的类型: probeType 157 | 列表滑动的3种类型 158 | 手指触摸 159 | 惯性 160 | 编码 161 | 分析: 162 | 类名: current 标识当前分类 163 | 设计一个计算属性: currentIndex 164 | 根据哪些数据计算? 165 | scrollY: 右侧滑动的Y轴坐标 (滑动过程时实时变化) 166 | tops: 所有右侧分类li的top组成的数组 (列表第一次显示后就不再变化) 167 | 编码: 168 | 1). 在滑动过程中, 实时收集scrollY 169 | 2). 列表第一次显示后, 收集tops 170 | 3). 实现currentIndex的计算逻辑 171 | 4). 点击左侧列表项, 右侧滑动到对应位置 172 | 173 | ## 2. CartControl组件 174 | 1). 问题: 更新状态数据, 对应的界面不变化 175 | 原因: 一般方法给一个已有绑定的对象中添加一个新的属性, 这个属性没有数据绑定 176 | 解决: 177 | Vue.set(obj, 'xxx', value)才有数据绑定 178 | this.$set(obj, 'xxx', value)才有数据绑定 179 | 180 | ## 3. ShopCart组件 181 | 1). 使用vuex管理购物项数据: cartFoods 182 | 2). 解决几个功能性bug 183 | 184 | ## 4. Food组件 185 | 1). 父子组件: 186 | 子组件调用父组件的方法: 通过props将方法传递给子组件 187 | 父组件调用子组件的方法: 通过ref找到子组件标签对象 188 | 189 | # 05 190 | ## 1. ShopRatings组件 191 | 1). 列表的过滤显示 192 | 2). 自定义过滤器 193 | 194 | ## 2. ShopInfo组件 195 | 1). 使用better-scroll实现两个方向的滑动 196 | 1). 通过JS动态操作样式 197 | 2). 解决当前路由刷新异常的bug 198 | 199 | ## 3. Search组件 200 | 1). 根据关键字来异步搜索显示匹配的商家列表 201 | 2). 如实实现没有搜索结果的提示显示 202 | 203 | ## 4. 项目优化 204 | 1). 缓存路由组件对象 205 | 2). 路由组件懒加载 206 | 3). 图片司加载: vue-lazyload 207 | 4). 分析打包文件并优化 --------------------------------------------------------------------------------