├── .gitignore ├── src ├── assets │ ├── images │ │ ├── l1.jpg │ │ ├── l2.jpg │ │ ├── l3.jpg │ │ ├── l4.jpg │ │ ├── l5.jpg │ │ ├── l6.jpg │ │ ├── l7.jpg │ │ ├── l8.jpg │ │ ├── bai3.png │ │ ├── bai4.png │ │ ├── err.png │ │ ├── huo1.png │ │ ├── huo2.png │ │ ├── huo3.png │ │ ├── huo4.png │ │ ├── huo5.jpg │ │ ├── n-me.png │ │ ├── nav0.png │ │ ├── nav1.png │ │ ├── nav2.png │ │ ├── nav3.png │ │ ├── nav4.png │ │ ├── nav5.png │ │ ├── nav6.png │ │ ├── nav7.png │ │ ├── nav8.png │ │ ├── nav9.png │ │ ├── none.png │ │ ├── test.jpg │ │ ├── vip.png │ │ ├── wuliu.png │ │ ├── a-home.png │ │ ├── biubiu.jpg │ │ ├── loading.gif │ │ ├── my_icon.jpg │ │ ├── n-cart.png │ │ ├── n-find.png │ │ ├── sprites.png │ │ ├── tuihuan.png │ │ ├── userbg.png │ │ ├── waitpay.png │ │ ├── baitiao1.png │ │ ├── baitiao2.png │ │ ├── banner_1.jpg │ │ ├── banner_1.png │ │ ├── buy-logo.png │ │ ├── buy-pro1.jpg │ │ ├── delete_up.png │ │ ├── focus-icon.png │ │ ├── header-bg.png │ │ ├── jd-sprites.png │ │ ├── jd_skill.png │ │ ├── mypackage.png │ │ ├── n-catergry.png │ │ ├── safe_icon.png │ │ ├── shop-icon.png │ │ ├── delete_down.png │ │ ├── seckill-icon.png │ │ ├── cart_sprits_all.png │ │ ├── my_order_icon.png │ │ ├── sprits_btm_new.png │ │ ├── icon-updown-arrow.png │ │ ├── jd-search-sprites.png │ │ └── scroll-to-top-icon.png │ ├── css │ │ ├── login.css │ │ ├── reg.css │ │ ├── category.css │ │ ├── searchpage.css │ │ ├── base.css │ │ ├── mine.css │ │ ├── detail.css │ │ ├── index.css │ │ └── cart.css │ └── js │ │ ├── cart.js │ │ ├── category.js │ │ └── index.js ├── components │ ├── loading │ │ ├── index.js │ │ └── Loading.vue │ ├── MineHeader.vue │ ├── CartHeader.vue │ ├── CategoryHead.vue │ ├── SearchPage.vue │ ├── Mine.vue │ ├── CategoryMain.vue │ ├── Category.vue │ ├── CategoryLeft.vue │ ├── CartFooter.vue │ ├── HomeHeader.vue │ ├── Cart.vue │ ├── Home.vue │ ├── HomeBanner.vue │ ├── NavBottom.vue │ ├── CategoryRight.vue │ ├── Reg.vue │ ├── Login.vue │ ├── CartMain.vue │ ├── HomeNav.vue │ ├── GoodsDetail.vue │ ├── HomeMain.vue │ ├── SearchMain.vue │ └── MineMain.vue ├── store │ ├── getter.js │ ├── index.js │ ├── actions.js │ └── mutations.js ├── router.config.js ├── App.vue └── main.js ├── .babelrc ├── libs └── common.js ├── index.html ├── package.json ├── server.js ├── webpack.config.js ├── README.md ├── READ.md └── route └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | -------------------------------------------------------------------------------- /src/assets/images/l1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/l1.jpg -------------------------------------------------------------------------------- /src/assets/images/l2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/l2.jpg -------------------------------------------------------------------------------- /src/assets/images/l3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/l3.jpg -------------------------------------------------------------------------------- /src/assets/images/l4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/l4.jpg -------------------------------------------------------------------------------- /src/assets/images/l5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/l5.jpg -------------------------------------------------------------------------------- /src/assets/images/l6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/l6.jpg -------------------------------------------------------------------------------- /src/assets/images/l7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/l7.jpg -------------------------------------------------------------------------------- /src/assets/images/l8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/l8.jpg -------------------------------------------------------------------------------- /src/assets/images/bai3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/bai3.png -------------------------------------------------------------------------------- /src/assets/images/bai4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/bai4.png -------------------------------------------------------------------------------- /src/assets/images/err.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/err.png -------------------------------------------------------------------------------- /src/assets/images/huo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/huo1.png -------------------------------------------------------------------------------- /src/assets/images/huo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/huo2.png -------------------------------------------------------------------------------- /src/assets/images/huo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/huo3.png -------------------------------------------------------------------------------- /src/assets/images/huo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/huo4.png -------------------------------------------------------------------------------- /src/assets/images/huo5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/huo5.jpg -------------------------------------------------------------------------------- /src/assets/images/n-me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/n-me.png -------------------------------------------------------------------------------- /src/assets/images/nav0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav0.png -------------------------------------------------------------------------------- /src/assets/images/nav1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav1.png -------------------------------------------------------------------------------- /src/assets/images/nav2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav2.png -------------------------------------------------------------------------------- /src/assets/images/nav3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav3.png -------------------------------------------------------------------------------- /src/assets/images/nav4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav4.png -------------------------------------------------------------------------------- /src/assets/images/nav5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav5.png -------------------------------------------------------------------------------- /src/assets/images/nav6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav6.png -------------------------------------------------------------------------------- /src/assets/images/nav7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav7.png -------------------------------------------------------------------------------- /src/assets/images/nav8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav8.png -------------------------------------------------------------------------------- /src/assets/images/nav9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/nav9.png -------------------------------------------------------------------------------- /src/assets/images/none.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/none.png -------------------------------------------------------------------------------- /src/assets/images/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/test.jpg -------------------------------------------------------------------------------- /src/assets/images/vip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/vip.png -------------------------------------------------------------------------------- /src/assets/images/wuliu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/wuliu.png -------------------------------------------------------------------------------- /src/assets/images/a-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/a-home.png -------------------------------------------------------------------------------- /src/assets/images/biubiu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/biubiu.jpg -------------------------------------------------------------------------------- /src/assets/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/loading.gif -------------------------------------------------------------------------------- /src/assets/images/my_icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/my_icon.jpg -------------------------------------------------------------------------------- /src/assets/images/n-cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/n-cart.png -------------------------------------------------------------------------------- /src/assets/images/n-find.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/n-find.png -------------------------------------------------------------------------------- /src/assets/images/sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/sprites.png -------------------------------------------------------------------------------- /src/assets/images/tuihuan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/tuihuan.png -------------------------------------------------------------------------------- /src/assets/images/userbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/userbg.png -------------------------------------------------------------------------------- /src/assets/images/waitpay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/waitpay.png -------------------------------------------------------------------------------- /src/assets/images/baitiao1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/baitiao1.png -------------------------------------------------------------------------------- /src/assets/images/baitiao2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/baitiao2.png -------------------------------------------------------------------------------- /src/assets/images/banner_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/banner_1.jpg -------------------------------------------------------------------------------- /src/assets/images/banner_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/banner_1.png -------------------------------------------------------------------------------- /src/assets/images/buy-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/buy-logo.png -------------------------------------------------------------------------------- /src/assets/images/buy-pro1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/buy-pro1.jpg -------------------------------------------------------------------------------- /src/assets/images/delete_up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/delete_up.png -------------------------------------------------------------------------------- /src/assets/images/focus-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/focus-icon.png -------------------------------------------------------------------------------- /src/assets/images/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/header-bg.png -------------------------------------------------------------------------------- /src/assets/images/jd-sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/jd-sprites.png -------------------------------------------------------------------------------- /src/assets/images/jd_skill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/jd_skill.png -------------------------------------------------------------------------------- /src/assets/images/mypackage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/mypackage.png -------------------------------------------------------------------------------- /src/assets/images/n-catergry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/n-catergry.png -------------------------------------------------------------------------------- /src/assets/images/safe_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/safe_icon.png -------------------------------------------------------------------------------- /src/assets/images/shop-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/shop-icon.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/images/delete_down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/delete_down.png -------------------------------------------------------------------------------- /src/assets/images/seckill-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/seckill-icon.png -------------------------------------------------------------------------------- /src/assets/images/cart_sprits_all.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/cart_sprits_all.png -------------------------------------------------------------------------------- /src/assets/images/my_order_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/my_order_icon.png -------------------------------------------------------------------------------- /src/assets/images/sprits_btm_new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/sprits_btm_new.png -------------------------------------------------------------------------------- /src/assets/images/icon-updown-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/icon-updown-arrow.png -------------------------------------------------------------------------------- /src/assets/images/jd-search-sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/jd-search-sprites.png -------------------------------------------------------------------------------- /src/assets/images/scroll-to-top-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangche007/vue-jd/HEAD/src/assets/images/scroll-to-top-icon.png -------------------------------------------------------------------------------- /src/components/loading/index.js: -------------------------------------------------------------------------------- 1 | const LoadingComponent = require('./Loading.vue'); 2 | const loading = { 3 | install: function(Vue) { 4 | Vue.component('loading', LoadingComponent) 5 | } 6 | }; 7 | module.exports = loading; 8 | -------------------------------------------------------------------------------- /src/store/getter.js: -------------------------------------------------------------------------------- 1 | export default { 2 | loading: (state) => { 3 | return state.isShow; 4 | }, 5 | shownav: (state) => { 6 | return state.isNavShow; 7 | }, 8 | getUserInfo: (state) => { 9 | return state.userInfo; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/MineHeader.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | import actions from './actions'; 5 | import mutations from './mutations'; 6 | export default new Vuex.Store({ 7 | modules: { 8 | mutations 9 | }, 10 | actions 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/CartHeader.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /libs/common.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | const crypto = require('crypto'); 3 | module.exports = { 4 | MD5_SUFFXIE: "HUNCSCDMM@#@$^%&^*%#$GFbggnCDSccxczvdsdhagbnfghvZfsdv", 5 | md5: (str) => { 6 | let md5Obj = crypto.createHash('md5'); 7 | md5Obj.update(str); 8 | return md5Obj.digest('hex'); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/components/CategoryHead.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/SearchPage.vue: -------------------------------------------------------------------------------- 1 | 8 | 16 | -------------------------------------------------------------------------------- /src/components/Mine.vue: -------------------------------------------------------------------------------- 1 | 7 | 17 | -------------------------------------------------------------------------------- /src/components/CategoryMain.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | export default { 2 | showLoading: ({ commit }) => { 3 | commit('showLoading') 4 | }, 5 | hideLoading: ({ commit }) => { 6 | commit('hideLoading') 7 | }, 8 | showNav: ({ commit }) => { 9 | commit('showNav') 10 | }, 11 | hideNav: ({ commit }) => { 12 | commit('hideNav') 13 | }, 14 | setUserInfo: ({ 15 | commit, 16 | userInfo, 17 | }) => { 18 | commit('setUserInfo', userInfo); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/Category.vue: -------------------------------------------------------------------------------- 1 | 7 | 22 | 23 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import getters from './getter.js'; 2 | const state = { 3 | isShow: true, 4 | isNavShow: true, 5 | userInfo: {} 6 | } 7 | const mutations = { 8 | showLoading: (state) => { 9 | state.isShow = true 10 | }, 11 | hideLoading: (state) => { 12 | state.isShow = false 13 | }, 14 | showNav: (state) => { 15 | state.isNavShow = true 16 | }, 17 | hideNav: (state) => { 18 | state.isNavShow = false 19 | }, 20 | setUserInfo: (state, userInfo) => { 21 | state.userInfo = userInfo; 22 | } 23 | } 24 | 25 | export default { 26 | getters, 27 | state, 28 | mutations 29 | } 30 | -------------------------------------------------------------------------------- /src/components/CategoryLeft.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/components/CartFooter.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/HomeHeader.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/components/Cart.vue: -------------------------------------------------------------------------------- 1 | 22 | 40 | 43 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 15 | 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | vue-taobao 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/router.config.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue' 2 | import Category from './components/Category.vue' 3 | import Cart from './components/Cart.vue' 4 | import GoodsDetail from './components/GoodsDetail.vue' 5 | import SearchPage from './components/SearchPage.vue' 6 | import Mine from './components/Mine.vue' 7 | import Login from './components/Login.vue' 8 | import Reg from './components/Reg.vue' 9 | export default [{ 10 | path: '/home', 11 | component: Home 12 | }, { 13 | path: '/catgory', 14 | component: Category 15 | }, { 16 | path: '/cart', 17 | component: Cart 18 | }, { 19 | path: '/search', 20 | component: SearchPage 21 | }, { 22 | path: '/mine', 23 | component: Mine 24 | }, { 25 | path: '/login', 26 | component: Login 27 | }, { 28 | path: '/register', 29 | component: Reg 30 | }, { 31 | path: '/catgory/:id', 32 | component: Category 33 | }, { 34 | path: '/detail/:id', 35 | component: GoodsDetail 36 | }, { 37 | path: '/', 38 | redirect: '/home' 39 | }, { 40 | path: '*', 41 | redirect: '/home' 42 | }] 43 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 35 | 36 | 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-taobao", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "huangche", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8081", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "body-parser": "^1.17.1", 13 | "cookie-parser": "^1.4.3", 14 | "cookie-session": "^2.0.0-beta.1", 15 | "express": "^4.15.2", 16 | "express-router": "^0.0.1", 17 | "express-static": "^1.1.0", 18 | "jsonp": "^0.2.1", 19 | "mysql": "^2.13.0", 20 | "vue": "^2.2.1", 21 | "vue-lazyload": "^1.0.3" 22 | }, 23 | "devDependencies": { 24 | "axios": "^0.16.0", 25 | "babel-core": "^6.0.0", 26 | "babel-loader": "^6.0.0", 27 | "babel-preset-latest": "^6.0.0", 28 | "cross-env": "^3.0.0", 29 | "css-loader": "^0.25.0", 30 | "file-loader": "^0.9.0", 31 | "less": "^2.7.2", 32 | "less-loader": "^4.0.3", 33 | "style-loader": "^0.16.1", 34 | "vue-loader": "^11.1.4", 35 | "vue-router": "^2.3.1", 36 | "vue-template-compiler": "^2.2.1", 37 | "vuex": "^2.2.1", 38 | "webpack": "^2.2.0", 39 | "webpack-dev-server": "^2.2.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/HomeBanner.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/css/login.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #F3F5F7; 3 | } 4 | 5 | .user_login_box{ 6 | max-width: 640px; 7 | min-width: 300px; 8 | margin: 0 auto; 9 | height: 200px; 10 | padding-top: 40px; 11 | } 12 | 13 | .user_login_box .login_dialog{ 14 | width: 100%; 15 | height: 100%; 16 | padding: 10px; 17 | 18 | } 19 | 20 | .login_dialog ._username{ 21 | height: 50px; 22 | width: 100%; 23 | background-color: #fff; 24 | margin-top: 20px; 25 | border: 1px solid #bebebe; 26 | border-radius: 2px; 27 | } 28 | 29 | ._username .user_input{ 30 | width: 100%; 31 | height: 100%; 32 | font-size: 16px; 33 | padding-left: 6px; 34 | } 35 | .login_dialog .u_passwd{ 36 | margin-top: 10px; 37 | } 38 | 39 | .login_dialog .login_box{ 40 | height: 50px; 41 | width: 100%; 42 | background-color: #fff; 43 | border: 1px solid #F23030; 44 | border-radius: 4px; 45 | margin-top: 30px; 46 | } 47 | 48 | .login_box a{ 49 | display: block; 50 | width: 100%; 51 | height: 100%; 52 | line-height: 50px; 53 | text-align: center; 54 | color: #F23030; 55 | } 56 | 57 | .go_reg_box{ 58 | float: right; 59 | } 60 | .go_reg_box span{ 61 | display: inline-block; 62 | color: #aaa; 63 | height: 20px; 64 | line-height: 20px; 65 | margin-top: 10px; 66 | } -------------------------------------------------------------------------------- /src/assets/css/reg.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #F3F5F7; 3 | } 4 | 5 | .user_login_box{ 6 | max-width: 640px; 7 | min-width: 300px; 8 | margin: 0 auto; 9 | height: 200px; 10 | padding-top: 40px; 11 | } 12 | 13 | .user_login_box .login_dialog{ 14 | width: 100%; 15 | height: 100%; 16 | padding: 10px; 17 | 18 | } 19 | 20 | .login_dialog ._username{ 21 | height: 50px; 22 | width: 100%; 23 | background-color: #fff; 24 | margin-top: 20px; 25 | border: 1px solid #bebebe; 26 | border-radius: 2px; 27 | } 28 | 29 | ._username .user_input{ 30 | width: 100%; 31 | height: 100%; 32 | font-size: 16px; 33 | padding-left: 6px; 34 | } 35 | .login_dialog .u_passwd{ 36 | margin-top: 10px; 37 | } 38 | 39 | .login_dialog .login_box{ 40 | height: 50px; 41 | width: 100%; 42 | background-color: #fff; 43 | border: 1px solid #F23030; 44 | border-radius: 4px; 45 | margin-top: 30px; 46 | } 47 | 48 | .login_box a{ 49 | display: block; 50 | width: 100%; 51 | height: 100%; 52 | line-height: 50px; 53 | text-align: center; 54 | color: #F23030; 55 | } 56 | 57 | .go_reg_box{ 58 | float: right; 59 | } 60 | .go_reg_box span{ 61 | display: inline-block; 62 | color: #aaa; 63 | height: 20px; 64 | line-height: 20px; 65 | margin-top: 10px; 66 | } -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const bodyParser = require('body-parser'); 3 | const cookieParser = require('cookie-parser'); 4 | const cookieSession = require('cookie-session'); 5 | const mysql = require('mysql'); 6 | const server = express(); 7 | server.use(bodyParser.urlencoded({ extended: false })); 8 | //the cores config 9 | server.all('*', function(req, res, next) { 10 | res.header('Access-Control-Allow-Origin', '*'); 11 | res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); 12 | res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); 13 | 14 | if (req.method == 'OPTIONS') { 15 | res.send(200); 16 | /make the require of options turn back quickly/ 17 | } else { 18 | next(); 19 | } 20 | }); 21 | server.listen(3333, () => { 22 | console.log("正在监听3333端口"); 23 | 24 | }); 25 | 26 | //deal (cookie,session) 27 | (() => { 28 | server.use(cookieParser()); 29 | let keyArr = []; 30 | for (let i = 0; i < 100000; i++) { 31 | keyArr[i] = "xsa_" + Math.random() * 100 + i; 32 | } 33 | server.use(cookieSession({ 34 | name: "hc", 35 | keys: keyArr, 36 | maxAge: 30 * 60 * 1000 37 | })) 38 | })(); 39 | 40 | 41 | //deal router 42 | server.use('/', require('./route/index.js')()); 43 | -------------------------------------------------------------------------------- /src/components/NavBottom.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/CategoryRight.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [{ 13 | test: /\.vue$/, 14 | loader: 'vue-loader', 15 | options: { 16 | loaders: {} 17 | // other vue-loader options go here 18 | } 19 | }, { 20 | test: /\.js$/, 21 | loader: 'babel-loader', 22 | exclude: /node_modules/ 23 | }, { 24 | test: /\.css$/, 25 | loader: 'style-loader!css-loader' 26 | }, { 27 | test: /\.less$/, 28 | loader: 'less-loader' 29 | }, { 30 | test: /\.(png|jpg|gif|svg)$/, 31 | loader: 'file-loader', 32 | options: { 33 | name: '[name].[ext]?[hash]' 34 | } 35 | }] 36 | }, 37 | resolve: { 38 | alias: { 39 | 'vue$': 'vue/dist/vue.esm.js' 40 | } 41 | }, 42 | devServer: { 43 | historyApiFallback: true, 44 | noInfo: true 45 | }, 46 | performance: { 47 | hints: false 48 | }, 49 | devtool: '#eval-source-map' 50 | } 51 | 52 | if (process.env.NODE_ENV === 'production') { 53 | module.exports.devtool = '#source-map' 54 | // http://vue-loader.vuejs.org/en/workflow/production.html 55 | module.exports.plugins = (module.exports.plugins || []).concat([ 56 | new webpack.DefinePlugin({ 57 | 'process.env': { 58 | NODE_ENV: '"production"' 59 | } 60 | }), 61 | new webpack.optimize.UglifyJsPlugin({ 62 | sourceMap: true, 63 | compress: { 64 | warnings: false 65 | } 66 | }), 67 | new webpack.LoaderOptionsPlugin({ 68 | minimize: true 69 | }) 70 | ]) 71 | } 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城 2 | - 经过一个多月总算完成第一个版本 3 | ## 前端架构 4 | - 页面结构(H5,CSS3,原生JS) 5 | - 框架(基于Vue脚手架:vue-cli)进行搭建 6 | - 数据请求处理框架(Axios) 7 | - Vue-Router进行路由处理 8 | - Vue-LazyLoad进行图片赖加载 9 | 10 | ## 服务端架构 11 | - 选用NodeJs进行后台开发 12 | - Express中间件进行服务的配置，路由、请求的处理 13 | - 官网 [http://www.expressjs.com.cn/](http://www.expressjs.com.cn/ "express官网") 14 | - Mysql中间件处理与数据库的"通信" 15 | - Body-Parser中间件进行前端请求参数的获取 16 | - Cookie-Parser、Cookie-Session进行cookie与session的处理 17 | 18 | 19 | ## 数据库选取 20 | - 采用MySQL进行相关数据库的设计与实现 21 | 22 | ## 目前项目已实现功能 23 | 1. 首页数据的展示 24 | 2. 分类页数据的展示 25 | 3. 购物车 26 | 4. 我的 27 | 5. 注册 28 | 6. 登录 29 | 7. 商品详情页 30 | 8. 商品搜索 31 | 32 | 33 | ## 安装 34 | 35 | 已安装MySQL数据库，然后导入migou.sql文件 36 | 37 | 然后通过`npm`安装本地服务第三方依赖模块(需要已安装[Node.js](https://nodejs.org/)) 38 | 39 | ``` 40 | cd vue-jd 41 | ``` 42 | 43 | ``` 44 | npm install 或 cnpm install(个人比较喜欢使用后者，下载依赖模块速度较快) 45 | ``` 46 | 47 | ``` 48 | npm run dev 49 | ``` 50 | 51 | 最后开启后台服务 52 | 53 | ``` 54 | node server.js 55 | ``` 56 | 57 | ## 目录结构 58 | 
59 | .
60 | ├── README.md           
61 | ├── libs               		// 后台常用工具模块的封装，比如格式化事件、MD5加密等
62 | ├── route              		// 后台接口的编写目录
63 | ├── server.js          		// 后台服务的配置文件
64 | ├── webpack.config.js  		// webpack配置文件
65 | ├── index.html         		// 项目入口文件
66 | ├── package.json       		// 项目配置文件
67 | ├── src                		// 生产目录
68 | │   ├── assets         		// css js 和图片资源
69 | │   ├── components     		// 各种Vue组件
70 | │   ├── store          		// vuex状态管理器
71 | │   ├── App.vue        		// 项目中全局Vue
72 | │   ├── main.js        		// Webpack 预编译入口
73 | │   └── router.config.js    // vue路由配置文件
74 |
75 | 76 | ## 项目效果图 77 | 78 | 79 | ![](http://i.imgur.com/hc4Kdcv.png) 80 | 81 | ![](http://i.imgur.com/e1dli1Y.png) 82 | 83 | ![](http://i.imgur.com/j9bdh5O.png) 84 | 85 | ![](http://i.imgur.com/KNlLcjv.png) 86 | 87 | ![](http://i.imgur.com/m2H0mLg.png) 88 | 89 | ![](http://i.imgur.com/8GpE1qc.png) 90 | 91 | ![](http://i.imgur.com/sIfHd0z.png) 92 | 93 | 94 | ....未完待续 QQ交流群:526450553已满员，大家可以叫我个人QQ：386271623，拉大家进微信群 95 | 96 | -------------------------------------------------------------------------------- /READ.md: -------------------------------------------------------------------------------- 1 | #基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城 2 | - 经过一个多月总算完成第一个版本 3 | ##前端架构 4 | - 页面结构(H5,CSS3,原生JS) 5 | - 框架(基于Vue脚手架:vue-cli)进行搭建 6 | - 数据请求处理框架(Axios) 7 | - Vue-Router进行路由处理 8 | - Vue-LazyLoad进行图片赖加载 9 | 10 | ##服务端架构 11 | - 选用NodeJs进行后台开发 12 | - Express中间件进行服务的配置，路由、请求的处理 13 | - 官网 [http://www.expressjs.com.cn/](http://www.expressjs.com.cn/ "express官网") 14 | - Mysql中间件处理与数据库的"通信" 15 | - Body-Parser中间件进行前端请求参数的获取 16 | - Cookie-Parser、Cookie-Session进行cookie与session的处理 17 | 18 | 19 | ##数据库选取 20 | - 采用MySQL进行相关数据库的设计与实现 21 | 22 | ##目前项目已实现功能 23 | 1. 首页数据的展示 24 | 2. 分类页数据的展示 25 | 3. 购物车 26 | 4. 我的 27 | 5. 注册 28 | 6. 登录 29 | 7. 商品详情页 30 | 8. 商品搜索 31 | 32 | ##PC端仿京东首页 33 | - [https://github.com/huangche007/jd](https://github.com/huangche007/jd "pc端京东首页") 34 | ##安装 35 | 36 | 已安装MySQL数据库，然后导入migou.sql文件 37 | 38 | 然后通过`npm`安装本地服务第三方依赖模块(需要已安装[Node.js](https://nodejs.org/)) 39 | 40 | ``` 41 | cd vue-jd 42 | ``` 43 | 44 | ``` 45 | npm install 或 cnpm install(个人比较喜欢使用后者，下载依赖模块速度较快) 46 | ``` 47 | 48 | ``` 49 | npm run dev 50 | ``` 51 | 52 | 最后开启后台服务 53 | 54 | ``` 55 | node server.js 56 | ``` 57 | 58 | ## 目录结构 59 | 
60 | .
61 | ├── README.md           
62 | ├── libs               		// 后台常用工具模块的封装，比如格式化事件、MD5加密等
63 | ├── route              		// 后台接口的编写目录
64 | ├── server.js          		// 后台服务的配置文件
65 | ├── webpack.config.js  		// webpack配置文件
66 | ├── index.html         		// 项目入口文件
67 | ├── package.json       		// 项目配置文件
68 | ├── src                		// 生产目录
69 | │   ├── assets         		// css js 和图片资源
70 | │   ├── components     		// 各种Vue组件
71 | │   ├── store          		// vuex状态管理器
72 | │   ├── App.vue        		// 项目中全局Vue
73 | │   ├── main.js        		// Webpack 预编译入口
74 | │   └── router.config.js    // vue路由配置文件
75 |
76 | 77 | ##项目效果图 78 | 79 | 80 | ![](http://i.imgur.com/hc4Kdcv.png) 81 | 82 | ![](http://i.imgur.com/e1dli1Y.png) 83 | 84 | ![](http://i.imgur.com/j9bdh5O.png) 85 | 86 | ![](http://i.imgur.com/KNlLcjv.png) 87 | 88 | ![](http://i.imgur.com/m2H0mLg.png) 89 | 90 | ![](http://i.imgur.com/8GpE1qc.png) 91 | 92 | ![](http://i.imgur.com/sIfHd0z.png) 93 | 94 | ....未完待续 QQ交流群:526450553 95 | 96 | -------------------------------------------------------------------------------- /src/components/Reg.vue: -------------------------------------------------------------------------------- 1 | 25 | 70 | -------------------------------------------------------------------------------- /src/assets/css/category.css: -------------------------------------------------------------------------------- 1 | body { 2 | position: absolute; 3 | width: 100%; 4 | height: 100%; 5 | background-color: #fff; 6 | } 7 | 8 | .caregoty_head .top_bar { 9 | position: fixed; 10 | } 11 | 12 | .category_content { 13 | width: 100%; 14 | height: 100%; 15 | position: relative; 16 | padding-top: 45px; 17 | } 18 | 19 | .category_content .category_left { 20 | width: 90px; 21 | height: 100%; 22 | position: absolute; 23 | left: 0; 24 | top: 0; 25 | padding-top: 45px; 26 | background-color: #fff; 27 | } 28 | 29 | .category_content .category_left ul {} 30 | 31 | .category_content .category_left ul li { 32 | height: 50px; 33 | width: 90px; 34 | background: #f3f4f6; 35 | font-size: 12px; 36 | font-family: sans-serif; 37 | } 38 | 39 | .category_content .category_left ul li a { 40 | height: 50px; 41 | width: 90px; 42 | display: block; 43 | text-align: center; 44 | line-height: 50px; 45 | border-right: 1px solid #e0e0e0; 46 | border-bottom: 1px solid #e0e0e0; 47 | } 48 | 49 | .category_content .category_left ul li.now { 50 | background: #fff; 51 | } 52 | 53 | .category_content .category_left ul li.now a { 54 | border-right: none; 55 | color: #f15353; 56 | } 57 | 58 | .category_content .category_right { 59 | width: 100%; 60 | height: 100%; 61 | padding-left: 90px; 62 | background-color: #fff; 63 | } 64 | 65 | .category_right .category_banner, 66 | .category_detail { 67 | padding: 10px 12px; 68 | } 69 | 70 | .category_right .category_banner a img { 71 | display: block; 72 | width: 100%; 73 | } 74 | 75 | .category_detail .category_detail_item { 76 | float: left; 77 | width: 33.333%; 78 | text-align: center; 79 | } 80 | 81 | .category_detail .category_n { 82 | color: #888; 83 | margin-bottom: 10px; 84 | } 85 | 86 | .category_detail_item_link .category_detail_item_pic { 87 | width: 62px; 88 | height: 62px; 89 | display: inline-block; 90 | } 91 | 92 | .category_detail_item_link .category_detail_item_name { 93 | line-height: 30px; 94 | height: 30px; 95 | overflow: hidden; 96 | } 97 | -------------------------------------------------------------------------------- /src/assets/js/cart.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by hc on 2017/4/4. 3 | */ 4 | function check() { 5 | var cartBoxs = document.getElementsByClassName("check_box"); 6 | for (var i = 0; i < cartBoxs.length; i++) { 7 | cartBoxs[i].onclick = function() { 8 | var hasChecked = this.getAttribute("checked"); 9 | if (hasChecked != null) { 10 | this.removeAttribute("checked"); 11 | } else { 12 | this.setAttribute("checked", "") 13 | } 14 | }; 15 | } 16 | }; 17 | 18 | function animatDelBox() { 19 | var cart_del = document.getElementsByClassName("cart_del"); 20 | var pop = document.getElementsByClassName("pop")[0]; 21 | var pop_box = document.getElementsByClassName("pop_box")[0]; 22 | var delUp = null; 23 | for (var i = 0; i < cart_del.length; i++) { 24 | cart_del[i].onclick = function() { 25 | pop.style.display = "block"; 26 | pop_box.className = "pop_box delBoxOut"; 27 | 28 | this.children[0].style.transition = "all 1s ease 0s"; 29 | this.children[0].style.webkitTransition = "all 1s ease 0s"; 30 | this.children[0].style.transform = "translateY(-5px) translateX(-2px) rotate(-45deg)"; 31 | this.children[0].style.webkitTransform = "translateY(-5px) translateX(-2px) rotate(-45deg)"; 32 | delUp = this.children[0]; 33 | }; 34 | } 35 | document.getElementsByClassName("del_cancel")[0].onclick = function() { 36 | pop.style.display = "none"; 37 | pop_box.className = "pop_box"; 38 | if (delUp) { 39 | delUp.style.transform = "translateY(0px) translateX(0px) rotate(0deg)"; 40 | delUp.style.webkitTransform = "translateY(0px) translateX(0px) rotate(0deg)"; 41 | } 42 | 43 | }; 44 | document.getElementsByClassName("del_ok")[0].onclick = function() { 45 | pop.style.display = "none"; 46 | pop_box.className = "pop_box"; 47 | if (delUp) { 48 | delUp.style.transform = "translateY(0px) translateX(0px) rotate(0deg)"; 49 | delUp.style.webkitTransform = "translateY(0px) translateX(0px) rotate(0deg)"; 50 | } 51 | }; 52 | 53 | }; 54 | 55 | module.exports = { 56 | check, 57 | animatDelBox 58 | } 59 | -------------------------------------------------------------------------------- /src/components/Login.vue: -------------------------------------------------------------------------------- 1 | 26 | 77 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import routes from './router.config' 4 | import Less from 'Less' 5 | import axios from 'axios' 6 | import store from './store/' 7 | import VueLazyload from 'vue-lazyload' 8 | import App from './App.vue' 9 | import Loading from './components/loading' 10 | require('./assets/css/base.css'); //全局引入 11 | Vue.use(Less); 12 | Vue.use(VueRouter); 13 | Vue.use(Loading); 14 | Vue.use(VueLazyload, { 15 | preLoad: 1.3, 16 | error: require('./assets/images/err.png'), 17 | loading: require('./assets/images/loading.gif'), 18 | attempt: 1, 19 | listenEvents: ['scroll'] 20 | }); 21 | const router = new VueRouter({ 22 | mode: 'history', 23 | scorllBehavior: () => ({ 24 | y: 0 25 | 26 | }), 27 | routes 28 | }); 29 | 30 | axios.interceptors.request.use(function(config) { //配置发送请求的信息 31 | store.dispatch('showLoading'); 32 | return config; 33 | }, function(error) { 34 | return Promise.reject(error); 35 | }); 36 | 37 | axios.interceptors.response.use(function(response) { //配置请求回来的信息 38 | store.dispatch('hideLoading'); 39 | return response; 40 | }, function(error) { 41 | return Promise.reject(error); 42 | }); 43 | axios.defaults.baseURL = 'http://localhost:3333/'; 44 | axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded' 45 | Vue.prototype.$http = axios; 46 | /*axios.defaults.baseURL = (process.env.NODE_ENV !=='production' ? config.dev.httpUrl:config.build.httpUrl); 47 | axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';*/ 48 | // 处理刷新的时候vuex被清空但是用户已经登录的情况 49 | if (window.sessionStorage.userInfo) { 50 | store.dispatch('setUserInfo', JSON.parse(window.sessionStorage.userInfo)); 51 | } 52 | 53 | // 登录中间验证，页面需要登录而没有登录的情况直接跳转登录 54 | router.beforeEach((to, from, next) => { 55 | if (to.matched.some(record => record.meta.requiresAuth)) { 56 | if (store.state.userInfo.user_id) { 57 | next(); 58 | } else { 59 | next({ 60 | path: '/login', 61 | query: { redirect: to.fullPath } 62 | }); 63 | } 64 | console.log("================"); 65 | } else { 66 | console.log("nnnnnnnnnnnnnnnnnn"); 67 | next(); 68 | } 69 | }); 70 | new Vue({ 71 | el: '#app', 72 | router, 73 | store, 74 | render: h => h(App) 75 | }) 76 | -------------------------------------------------------------------------------- /src/assets/css/searchpage.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | } 4 | 5 | .h_layout { 6 | min-width: 300px; 7 | max-width: 640px; 8 | margin: 0 auto; 9 | position: relative; 10 | height: 1000px; 11 | background-color: #fff; 12 | } 13 | 14 | .h_layout .top_bar { 15 | position: fixed; 16 | left: 0; 17 | top: 0; 18 | width: 100%; 19 | height: 40px; 20 | z-index: 2; 21 | } 22 | 23 | .h_layout .search_condition { 24 | width: 100%; 25 | height: 40px; 26 | margin-top: 40px; 27 | border-bottom: 1px solid #DFDFDF; 28 | border-top: 1px solid #DFDFDF; 29 | } 30 | 31 | .search_condition ul { 32 | width: 100%; 33 | display: flex; 34 | justify-content: space-around; 35 | } 36 | 37 | .search_condition ul li { 38 | width: 25%; 39 | height: 100%; 40 | float: left; 41 | text-align: center; 42 | line-height: 40px; 43 | } 44 | 45 | li em { 46 | width: 8px; 47 | height: 7px; 48 | display: inline-block; 49 | background: url("../images/jd-sprites.png") no-repeat; 50 | background-size: 200px 200px; 51 | } 52 | 53 | .all_icon { 54 | background-position: 0 -109px; 55 | } 56 | 57 | .price_up { 58 | background-position: -170px -28px; 59 | } 60 | 61 | .price_down { 62 | background-position: -170px -36px; 63 | margin-left: -12px; 64 | } 65 | 66 | .saixuan { 67 | width: 15px; 68 | height: 13px; 69 | display: inline-block; 70 | background: url("../images/jd-search-sprites.png") no-repeat; 71 | background-size: 200px 200px; 72 | background-position: -178px 3px; 73 | margin-left: -4px; 74 | } 75 | 76 | .all { 77 | color: #F23030; 78 | } 79 | 80 | .main_goods_box { 81 | width: 100%; 82 | border-top: 1px solid #DFDFDF; 83 | margin-top: 10px; 84 | } 85 | 86 | .main_goods_box .goods_item { 87 | width: 100%; 88 | height: 120px; 89 | padding: 10px; 90 | } 91 | 92 | .goods_item .goods_item_link { 93 | display: block; 94 | width: 100%; 95 | height: 100%; 96 | border-bottom: 1px solid #eee; 97 | position: relative; 98 | } 99 | 100 | .goods_item_link .goods_item_pic { 101 | display: inline-block; 102 | width: 100px; 103 | height: 100px; 104 | } 105 | 106 | .goods_item_link .goods_right { 107 | position: absolute; 108 | left: 104px; 109 | top: 0; 110 | height: 100%; 111 | } 112 | 113 | .goods_right .pp_name { 114 | height: 40%; 115 | } 116 | 117 | .goods_right .price_box { 118 | color: #F34545; 119 | height: 20%; 120 | line-height: 20px; 121 | margin-top: 10px; 122 | } 123 | 124 | .goods_right .price_box span:nth-child(2) { 125 | font-size: 18px; 126 | margin: 0 -3px; 127 | } 128 | 129 | .goods_right .pinglun_box { 130 | margin-top: 5px; 131 | color: #848689; 132 | } 133 | -------------------------------------------------------------------------------- /src/components/CartMain.vue: -------------------------------------------------------------------------------- 1 | 62 | 84 | -------------------------------------------------------------------------------- /src/components/HomeNav.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | padding: 0; 5 | margin: 0; 6 | /*去掉chorm浏览器中默认点击的颜色*/ 7 | -webkit-tap-highlight-color: transparent; 8 | -webkit-box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-size: 14px; 13 | font-family: "Microsoft YaHei" sans-serif; 14 | color: #000; 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | color: #000; 20 | } 21 | 22 | ul { 23 | list-style: none; 24 | } 25 | 26 | input, 27 | textarea { 28 | border: none; 29 | resize: none; 30 | outline: none; 31 | /*清除移动设备中表单的默认样式*/ 32 | -webkit-appearance: none; 33 | } 34 | 35 | .clearfix::before, 36 | .clearfix::after { 37 | content: '.'; 38 | height: 0; 39 | line-height: 0; 40 | clear: both; 41 | display: block; 42 | visibility: hidden; 43 | } 44 | 45 | [class^='icon'] { 46 | background: url("../images/sprites.png") no-repeat; 47 | background-size: 200px 200px; 48 | } 49 | 50 | .top_bar { 51 | width: 100%; 52 | height: 45px; 53 | background: url("../images/header-bg.png") repeat-x; 54 | background-size: 1px 44px; 55 | border-bottom: 1px solid #bfbfbf; 56 | position: fixed; 57 | z-index: 2; 58 | } 59 | 60 | .top_bar .icon_back { 61 | height: 20px; 62 | width: 20px; 63 | background-position: -20px 0; 64 | display: block; 65 | margin: 10px 10px; 66 | position: absolute; 67 | left: 0; 68 | top: 0; 69 | } 70 | 71 | .top_bar .cartname { 72 | text-align: center; 73 | font-size: 16px; 74 | font-family: sans-serif; 75 | font-weight: normal; 76 | line-height: 45px; 77 | } 78 | 79 | .top_bar .goods_search { 80 | width: 100%; 81 | height: 44px; 82 | padding-left: 40px; 83 | padding-right: 40px; 84 | } 85 | 86 | .top_bar .goods_search .goods_search_content { 87 | width: 100%; 88 | height: 32px; 89 | border-radius: 4px; 90 | border: 1px solid #bfbfbf; 91 | margin-top: 5px; 92 | } 93 | 94 | .top_bar .icon_menu { 95 | height: 44px; 96 | width: 40px; 97 | background-position: -60px 0; 98 | background-clip: content-box; 99 | background-origin: content-box; 100 | -moz-background-origin: content-box; 101 | -webkit-background-origin: content-box; 102 | display: block; 103 | padding: 10px 12px; 104 | position: absolute; 105 | right: 0; 106 | top: 0; 107 | } 108 | 109 | 110 | /*固定底部通栏*/ 111 | 112 | .fixBottomBox { 113 | width: 100%; 114 | height: 50px; 115 | box-shadow: 0 -2px 10px #ccc; 116 | position: fixed; 117 | bottom: 0; 118 | left: 0; 119 | background-color: #fff; 120 | } 121 | 122 | .fixBottomBox ul { 123 | display: flex; 124 | justify-content: space-around; 125 | } 126 | 127 | .fixBottomBox .tabItem { 128 | width: 18%; 129 | height: 100%; 130 | text-align: center; 131 | } 132 | 133 | .tabItem .tab-item-link { 134 | display: inline-flex; 135 | width: 70px; 136 | height: 50px; 137 | } 138 | 139 | .tabItem .tab-item-link .tab-item-icon { 140 | display: inline-flex; 141 | width: 100%; 142 | height: auto; 143 | } 144 | -------------------------------------------------------------------------------- /src/assets/js/category.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by hc on 2017/4/4. 3 | */ 4 | function myMoveScroll() { 5 | var childbox = document.getElementsByClassName("childbox")[0]; 6 | var lis = childbox.children; 7 | var parentBox = document.getElementsByClassName("category_left")[0]; 8 | var height = parentBox.offsetHeight; 9 | var topheight = document.getElementsByClassName("top_bar")[0].offsetHeight; 10 | //想要的 11 | var parentHeight = height - topheight; 12 | var childHeight = childbox.offsetHeight; 13 | var startY = 0; 14 | var endY = 0; 15 | var moveY = 0; 16 | var currentY = 0; 17 | //上下滑动距离的限制 18 | var upDownOffset = 150; 19 | var startTime = 0; 20 | var endTime = 0; 21 | 22 | function addTrans() { 23 | childbox.style.transition = "all.3s ease 0s"; 24 | childbox.style.webkitTransition = "all.3s ease 0s"; 25 | } 26 | 27 | function removeTrans() { 28 | childbox.style.transition = "none"; 29 | childbox.style.webkitTransition = "none"; 30 | } 31 | 32 | function setTransfrom(t) { 33 | childbox.style.transform = 'translateY(' + t + 'px)'; 34 | childbox.style.webiktTransform = 'translateY(' + t + 'px)'; 35 | } 36 | 37 | childbox.addEventListener("touchstart", function(e) { 38 | startTime = new Date().getTime(); 39 | console.log("start"); 40 | var event = e || window.event; 41 | startY = event.touches[0].clientY; 42 | }, false); 43 | 44 | childbox.addEventListener("touchmove", function(e) { 45 | console.log("move"); 46 | var event = e || window.event; 47 | event.preventDefault(); 48 | endY = event.touches[0].clientY; 49 | moveY = startY - endY; 50 | //上下滑动的范围 51 | if ((currentY - moveY) < upDownOffset && (currentY - moveY) > (parentHeight - childHeight - upDownOffset)) { 52 | removeTrans(); 53 | setTransfrom(currentY - moveY); 54 | } 55 | 56 | }, false); 57 | 58 | childbox.addEventListener("touchend", function(e) { 59 | endTime = new Date().getTime(); 60 | console.log("end"); 61 | var event = e || window.event; 62 | //上面满足吸附的条件 63 | if ((currentY - moveY) >= 0) { 64 | addTrans(); 65 | removeTrans(); 66 | setTransfrom(0); 67 | currentY = 0; 68 | //下面满足吸附的条件 69 | } else if ((currentY - moveY) <= (parentHeight - childHeight)) { 70 | addTrans(); 71 | removeTrans(); 72 | setTransfrom(parentHeight - childHeight); 73 | currentY = parentHeight - childHeight; 74 | } else { 75 | currentY = currentY - moveY; 76 | } 77 | //就认为是点击 78 | if (endTime - startTime < 150 && moveY == 0) { 79 | 80 | for (var i = 0; i < lis.length; i++) { 81 | lis[i].className = ""; 82 | lis[i].index = i; 83 | } 84 | var li = e.target.parentNode; 85 | li.className = "now"; 86 | /* 87 | 移动的距离 88 | */ 89 | var translateY = li.index * 50; 90 | if (translateY < childHeight - parentHeight) { 91 | addTrans(); 92 | setTransfrom(-translateY); 93 | currentY = -translateY; 94 | } else { 95 | addTrans(); 96 | setTransfrom(parentHeight - childHeight); 97 | currentY = parentHeight - childHeight; 98 | } 99 | 100 | } 101 | }, false); 102 | }; 103 | 104 | module.exports = { 105 | myMoveScroll 106 | } 107 | -------------------------------------------------------------------------------- /src/components/loading/Loading.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/components/GoodsDetail.vue: -------------------------------------------------------------------------------- 1 | 70 | 111 | -------------------------------------------------------------------------------- /src/components/HomeMain.vue: -------------------------------------------------------------------------------- 1 | 61 | 88 | -------------------------------------------------------------------------------- /src/assets/css/mine.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #F0F2F5; 3 | } 4 | 5 | .mine_layout{ 6 | max-width: 640px; 7 | min-width: 300px; 8 | margin: 0 auto; 9 | height: 300px; 10 | padding-top: 40px; 11 | } 12 | 13 | .mine_layout .mine_infos{ 14 | width: 100%; 15 | height: 135px; 16 | background: url("../images/userbg.png") no-repeat top center; 17 | padding-top: 10px; 18 | position: relative; 19 | } 20 | .mine_infos .user_icon{ 21 | float: left; 22 | width: 76px; 23 | height: 80px; 24 | vertical-align: middle; 25 | margin-right: 4px; 26 | position: relative; 27 | } 28 | 29 | .user_icon img{ 30 | width: 56px; 31 | height: 56px; 32 | border-radius: 50%; 33 | display: inline-block; 34 | overflow: hidden; 35 | position: absolute; 36 | top: 12px; 37 | left: 10px; 38 | z-index: 1; 39 | } 40 | 41 | .mine_infos .user_detal{ 42 | float: left; 43 | color: #fff; 44 | margin-top: 10px; 45 | } 46 | .user_detal .user_name{ 47 | font-size: 16px; 48 | font-weight: 600; 49 | line-height: 32px; 50 | } 51 | 52 | .user_detal .reg{ 53 | margin-top: 8px; 54 | } 55 | .reg .reg_link{ 56 | color: #fff; 57 | } 58 | 59 | .user_detal .vip{ 60 | display: inline-block; 61 | font-size: 11px; 62 | height: 20px; 63 | line-height: 20px; 64 | vertical-align: middle; 65 | border: 1px solid rgba(76,74,72,0.5); 66 | border-radius: 10px; 67 | box-sizing: border-box; 68 | margin-left: 4px; 69 | background-color: rgba(76,74,72,0.3); 70 | text-align: center; 71 | 72 | 73 | } 74 | .vip .vip_icon{ 75 | display: inline-block; 76 | width: 18px; 77 | height: 18px; 78 | border-radius: 50%; 79 | background-color: #4c4a48; 80 | position: relative; 81 | } 82 | .vip .vip_icon img{ 83 | width: 11px; 84 | height: 8px; 85 | position: absolute; 86 | top: 5px; 87 | left: 3px; 88 | } 89 | .vip a{ 90 | display: inline-block; 91 | color: #fff; 92 | height: 18px; 93 | vertical-align: top; 94 | } 95 | 96 | .manage_account{ 97 | float: right; 98 | color: #E6B2B0; 99 | margin-right: 10px; 100 | margin-top: 30px; 101 | } 102 | 103 | .yguanzhu_box{ 104 | height: 45px; 105 | width: 100%; 106 | position: absolute; 107 | left: 0; 108 | bottom: 0; 109 | 110 | } 111 | .mine_infos .mmm_info{ 112 | width: 100%; 113 | height: auto; 114 | } 115 | .item{ 116 | float: left; 117 | width: 33%; 118 | height: 45px; 119 | background: rgba(0,0,0,.2); 120 | text-align: center; 121 | margin-left: 1px; 122 | } 123 | 124 | .item .item_link{ 125 | display: block; 126 | width: 100%; 127 | height: 45px; 128 | text-align: center; 129 | color: #fff; 130 | } 131 | .item_link span:nth-child(2){ 132 | display: block; 133 | } 134 | 135 | .my_order_box{ 136 | margin-top: 10px; 137 | width: 100%; 138 | height: 100px; 139 | background-color: #fff; 140 | 141 | } 142 | .my_order_box .order_top_box{ 143 | border-bottom: 1px solid #E3E5E9; 144 | height: 44px; 145 | line-height: 44px; 146 | padding: 0 10px; 147 | } 148 | 149 | .order_top_box .order_left{ 150 | float: left; 151 | height: 100%; 152 | width: 30%; 153 | line-height: 44px; 154 | position: relative; 155 | } 156 | .order_left img{ 157 | width: 15px; 158 | height: 18px; 159 | display: inline-flex; 160 | line-height: 44px; 161 | position: absolute; 162 | left: 0; 163 | top: 13px; 164 | } 165 | .order_left span{ 166 | margin-left: 25px; 167 | display: inline-flex; 168 | } 169 | .order_right{ 170 | float: right; 171 | color: #848689; 172 | } 173 | 174 | .order_bottom_box{ 175 | height: 56px; 176 | width: 100%; 177 | padding: 0 10px; 178 | } 179 | .order_bottom_box ul{ 180 | display: flex; 181 | justify-content: space-around; 182 | text-align: center; 183 | } 184 | .order_bottom_box .order_item{ 185 | height: 56px; 186 | line-height: 56px; 187 | 188 | } 189 | .order_item .order_item_link{ 190 | display: block; 191 | width: 100%; 192 | height: 100%; 193 | text-align: center; 194 | vertical-align: middle; 195 | } 196 | .order_item_link .order_item_pay{ 197 | display: block; 198 | margin-top: -40px; 199 | color: #848689; 200 | } 201 | .order_item_pic{ 202 | display: inline-block; 203 | width: 21px; 204 | height: 18px; 205 | margin: 0 auto; 206 | } 207 | 208 | .my_b_info { 209 | margin-top: 10px; 210 | width: 100%; 211 | height: auto; 212 | background-color: #fff; 213 | } -------------------------------------------------------------------------------- /src/components/SearchMain.vue: -------------------------------------------------------------------------------- 1 | 59 | -------------------------------------------------------------------------------- /src/assets/css/detail.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F0F2F5; 3 | } 4 | 5 | .detail_box { 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .detail_box .banner_box { 11 | width: 100%; 12 | height: 50%; 13 | position: relative; 14 | overflow: hidden; 15 | } 16 | 17 | .banner_box .banner_child_box { 18 | width: 1000%; 19 | height: 375px; 20 | position: relative; 21 | left: 0; 22 | top: 47px; 23 | margin-bottom: 50px; 24 | } 25 | 26 | .banner_box .banner_item { 27 | visibility: visible; 28 | float: left; 29 | display: -webkit-box; 30 | -webkit-box-pack: center; 31 | -webkit-box-align: center; 32 | background-color: #fff; 33 | background-size: 100% 100%; 34 | transition: all 0ms ease; 35 | height: 375px; 36 | width: 375px; 37 | transform: translate3d(0px, 0px, 0px); 38 | z-index: 10; 39 | } 40 | 41 | .banner_box .banner_item .banner_pic { 42 | max-width: 100%; 43 | max-height: 100%; 44 | display: block; 45 | overflow: hidden 46 | } 47 | 48 | .banner_box .banner_count { 49 | font-size: 16px; 50 | z-index: 11; 51 | position: absolute; 52 | width: 40px; 53 | height: 40px; 54 | border-radius: 50%; 55 | -webkit-border-radius: 50%; 56 | background: rgba(0, 0, 0, 0.15); 57 | right: 14px; 58 | bottom: 14px; 59 | text-align: center; 60 | line-height: 40px; 61 | overflow: hidden; 62 | } 63 | 64 | .banner_count em { 65 | font-style: normal; 66 | color: #fff; 67 | } 68 | 69 | .banner_count .fz18 { 70 | font-size: 14px; 71 | display: inline-block; 72 | color: #fff; 73 | margin-right: -3px; 74 | } 75 | 76 | .banner_count .fz12 { 77 | font-size: 12px; 78 | display: inline-block; 79 | color: #fff; 80 | margin-left: -3px; 81 | } 82 | 83 | .banner_count .nub-bg { 84 | display: inline-block; 85 | color: #fff; 86 | font-size: 12px; 87 | } 88 | 89 | .product_info { 90 | width: 100%; 91 | height: 100px; 92 | background-color: #fff; 93 | } 94 | 95 | .product_info .product_left { 96 | width: 100%; 97 | float: left; 98 | height: 100%; 99 | padding-left: 10px; 100 | position: relative; 101 | } 102 | 103 | .product_left .p_name { 104 | width: 100%; 105 | color: #48484B; 106 | font-size: 16px; 107 | font-weight: 600; 108 | line-height: 26px; 109 | } 110 | 111 | .product_left .product_pric { 112 | margin-top: 10px; 113 | position: absolute; 114 | left: 6px; 115 | bottom: 8px; 116 | } 117 | 118 | .product_pric span { 119 | color: #F23434; 120 | } 121 | 122 | .product_pric span:nth-child(1) { 123 | font-size: 16px; 124 | } 125 | 126 | .product_pric span:nth-child(2) { 127 | font-size: 20px; 128 | font-weight: 600; 129 | margin: 0 -3px; 130 | } 131 | 132 | .product_info .product_right { 133 | float: right; 134 | border: 1px solid #bfbfbf; 135 | border-radius: 4px; 136 | text-align: center; 137 | line-height: 14px; 138 | padding: 10px 14px; 139 | position: absolute; 140 | right: 10px; 141 | bottom: 6px; 142 | } 143 | 144 | .product_intro { 145 | width: 100%; 146 | margin-top: 10px; 147 | height: auto; 148 | background-color: #fff; 149 | padding: 10px 0 10px 6px; 150 | } 151 | 152 | .product_intro .pro_det { 153 | font-size: 16px; 154 | font-weight: 500; 155 | color: #48484B; 156 | line-height: 20px; 157 | } 158 | 159 | .cart_d_footer { 160 | width: 100%; 161 | height: 60px; 162 | position: fixed; 163 | left: 0; 164 | bottom: 0; 165 | background-color: #fff; 166 | border-top: 1px solid #BFBFBF; 167 | border-bottom: 1px solid #BFBFBF; 168 | } 169 | 170 | .cart_d_footer .m { 171 | width: 100%; 172 | display: flex; 173 | justify-content: space-around; 174 | } 175 | 176 | .m .m_box { 177 | width: 50%; 178 | } 179 | 180 | .m .m_item { 181 | display: inline-flex; 182 | height: 100%; 183 | padding: 6px 0; 184 | text-align: center; 185 | width: 100%; 186 | } 187 | 188 | .m_item .m_item_link { 189 | display: block; 190 | width: 100%; 191 | height: 100%; 192 | text-align: center; 193 | } 194 | 195 | .m_item_link .m_item_pic { 196 | display: block; 197 | width: 21px; 198 | height: 23px; 199 | background: url("../images/cart_sprits_all.png") no-repeat top center; 200 | background-size: 100px 100px; 201 | margin: 6px auto 0; 202 | } 203 | 204 | .m_item_link .m_item_pic { 205 | background-position: -26px 0; 206 | } 207 | 208 | .m_item_link .two { 209 | background-position: -52px 0; 210 | } 211 | 212 | .m_item_link .three { 213 | background-position: 0 -20px; 214 | } 215 | 216 | .m .btn_box { 217 | width: 50%; 218 | height: 100%; 219 | float: right; 220 | } 221 | 222 | .btn_box a { 223 | display: inline-block; 224 | width: 50%; 225 | height: 60px; 226 | text-align: center; 227 | color: #fff; 228 | line-height: 60px; 229 | } 230 | 231 | .btn_box .buy_now { 232 | float: left; 233 | background-color: #FFB03F; 234 | } 235 | 236 | .btn_box .buybuy { 237 | float: right; 238 | background-color: #F23030; 239 | } 240 | -------------------------------------------------------------------------------- /src/assets/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by hc on 2017/4/4. 3 | */ 4 | function $id(id) { 5 | return document.getElementById(id); 6 | } 7 | 8 | function bindEvent() { 9 | var sea = $id("my_search"); 10 | /*banner对象*/ 11 | var banner = $id("my_banner"); 12 | /*高度*/ 13 | var height = banner.offsetHeight; 14 | window.onscroll = function() { 15 | var top = document.body.scrollTop; 16 | /*当滚动高度大于banner的高度时候颜色不变*/ 17 | if (top > height) { 18 | sea.style.background = "rgba(201,21,35,0.85)"; 19 | } else { 20 | var op = top / height * 0.85; 21 | sea.style.background = "rgba(201,21,35," + op + ")"; 22 | } 23 | }; 24 | } 25 | 26 | function scrollPic() { 27 | var imgBox = document.getElementsByClassName("banner_box")[0]; 28 | var width = $id("my_banner").offsetWidth; 29 | var pointBox = document.getElementsByClassName("point_box")[0]; 30 | var ols = pointBox.children; 31 | var indexx = 1; 32 | var timer = null; 33 | var moveX = 0; 34 | var endX = 0; 35 | var startX = 0; 36 | var square = 0; 37 | 38 | function addTransition() { 39 | imgBox.style.transition = "all .3s ease 0s"; 40 | imgBox.style.webkitTransition = "all .3s ease 0s"; 41 | } 42 | 43 | function removeTransition() { 44 | imgBox.style.transition = "none"; 45 | imgBox.style.webkitTransition = "none"; 46 | } 47 | 48 | function setTransfrom(t) { 49 | imgBox.style.transform = 'translateX(' + t + 'px)'; 50 | imgBox.style.webkitTransform = 'translateX(' + t + 'px)'; 51 | } 52 | //3. 开始动画部分 53 | pointBox.children[0].className = "now"; 54 | for (var i = 0; i < ols.length; i++) { 55 | ols[i].index = i; // 获得当前第几个小li 的索引号 56 | ols[i].onmouseover = function() { 57 | for (var j = 0; j < ols.length; j++) { 58 | ols[j].className = ""; // 所有的都要清空 59 | } 60 | this.className = "now"; 61 | setTransfrom(-indexx * width); 62 | // 调用动画函数 第一个参数 谁动画 第二个 走多少 63 | square = indexx; // 当前的索引号为主 64 | } 65 | } 66 | timer = setInterval(function() { 67 | indexx++; 68 | addTransition(); 69 | setTransfrom(-indexx * width); 70 | // 小方块 71 | square++; 72 | if (square > ols.length - 1) { 73 | square = 0; 74 | } 75 | for (var i = 0; i < ols.length; i++) // 先清除所有的 76 | { 77 | ols[i].className = ""; 78 | } 79 | console.log("最初", square); 80 | ols[square].className = "now"; // 留下当前的 81 | }, 3000); 82 | 83 | imgBox.addEventListener('transitionEnd', function() { 84 | if (indexx >= 9) { 85 | indexx = 1; 86 | } else if (indexx <= 0) { 87 | indexx = 8; 88 | } 89 | removeTransition(); 90 | setTransfrom(-indexx * width); 91 | }, false); 92 | imgBox.addEventListener('webkitTransitionEnd', function() { 93 | if (indexx >= 9) { 94 | indexx = 1; 95 | } else if (indexx <= 0) { 96 | indexx = 8; 97 | } 98 | 99 | removeTransition(); 100 | setTransfrom(-indexx * width); 101 | }, false); 102 | /** 103 | * 触摸事件开始 104 | */ 105 | imgBox.addEventListener("touchstart", function(e) { 106 | console.log("开始"); 107 | var event = e || window.event; 108 | //记录开始滑动的位置 109 | startX = event.touches[0].clientX; 110 | }, false); 111 | /** 112 | * 触摸滑动事件 113 | */ 114 | imgBox.addEventListener("touchmove", function(e) { 115 | console.log("move"); 116 | var event = e || window.event; 117 | event.preventDefault(); 118 | 119 | //清除定时器 120 | clearInterval(timer); 121 | //记录结束位置 122 | endX = event.touches[0].clientX; 123 | //记录移动的位置 124 | moveX = startX - endX; 125 | removeTransition(); 126 | setTransfrom(-indexx * width - moveX); 127 | }, false); 128 | /** 129 | * 触摸结束事件 130 | */ 131 | imgBox.addEventListener("touchend", function() { 132 | console.log("end"); 133 | //如果移动的位置大于三分之一，并且是移动过的 134 | if (Math.abs(moveX) > (1 / 3 * width) && endX != 0) { 135 | //向左 136 | if (moveX > 0) { 137 | indexx++; 138 | } else { 139 | indexx--; 140 | } 141 | //改变位置 142 | setTransfrom(-indexx * width); 143 | } 144 | //回到原来的位置 145 | addTransition(); 146 | setTransfrom(-indexx * width); 147 | //初始化 148 | startX = 0; 149 | endX = 0; 150 | 151 | clearInterval(timer); 152 | timer = setInterval(function() { 153 | indexx++; 154 | square++; 155 | if (square > ols.length - 1) { 156 | square = 0; 157 | } 158 | for (var i = 0; i < ols.length; i++) // 先清除所有的 159 | { 160 | ols[i].className = ""; 161 | } 162 | console.log("最初", square); 163 | ols[square].className = "now"; // 留下当前的 164 | addTransition(); 165 | setTransfrom(-indexx * width); 166 | 167 | }, 3000); 168 | }, false); 169 | }; 170 | 171 | module.exports = { 172 | bindEvent, 173 | scrollPic 174 | } 175 | -------------------------------------------------------------------------------- /src/assets/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F3F3F3; 3 | } 4 | 5 | .m_layout { 6 | min-width: 300px; 7 | max-width: 640px; 8 | margin: 0 auto; 9 | position: relative; 10 | height: 1000px; 11 | } 12 | 13 | .m_header { 14 | position: fixed; 15 | left: 0; 16 | top: 0; 17 | width: 100%; 18 | height: 40px; 19 | z-index: 2; 20 | } 21 | 22 | .m_header .m_header_box { 23 | position: relative; 24 | min-width: 300px; 25 | max-width: 640px; 26 | height: 40px; 27 | margin: 0 auto; 28 | background: rgba(201, 21, 35, 0); 29 | } 30 | 31 | .m_header_box .icon_logo { 32 | width: 60px; 33 | height: 36px; 34 | position: absolute; 35 | top: 4px; 36 | left: 10px; 37 | background-position: 0 -103px; 38 | display: block; 39 | } 40 | 41 | .m_header_box form { 42 | width: 100%; 43 | height: 40px; 44 | padding-left: 75px; 45 | padding-right: 60px; 46 | position: relative; 47 | } 48 | 49 | .m_header_box form .search { 50 | width: 100%; 51 | height: 30px; 52 | border-radius: 15px; 53 | margin-top: 5px; 54 | padding-left: 30px; 55 | } 56 | 57 | .m_header_box form .icon_search { 58 | display: block; 59 | width: 37px; 60 | height: 40px; 61 | position: absolute; 62 | left: 85px; 63 | top: 10px; 64 | background-position: -60px -109px; 65 | } 66 | 67 | .m_header_box .logo_btn { 68 | display: block; 69 | width: 30px; 70 | height: 40px; 71 | position: absolute; 72 | right: 8px; 73 | top: 0; 74 | color: #fff; 75 | line-height: 40px; 76 | font-weight: 400; 77 | } 78 | 79 | 80 | /*轮播图*/ 81 | 82 | .m_banner { 83 | width: 100%; 84 | overflow: hidden; 85 | position: relative; 86 | } 87 | 88 | .m_banner ul:first-child { 89 | width: 1000%; 90 | transform: translateX(-10px); 91 | -webkit-transform: translateX(-10px); 92 | } 93 | 94 | .m_banner ul:first-child li { 95 | width: 10%; 96 | float: left; 97 | } 98 | 99 | .m_banner ul:first-child li img { 100 | width: 100%; 101 | display: block; 102 | } 103 | 104 | 105 | /*点*/ 106 | 107 | .m_banner ul:last-child { 108 | width: 118px; 109 | height: 6px; 110 | position: absolute; 111 | left: 50%; 112 | margin-left: -59px; 113 | bottom: 10px; 114 | } 115 | 116 | .m_banner ul:last-child li { 117 | width: 6px; 118 | height: 6px; 119 | border: 1px solid #fff; 120 | border-radius: 3px; 121 | margin-left: 10px; 122 | float: left; 123 | } 124 | 125 | .m_banner ul:last-child li:first-child { 126 | margin-left: 0; 127 | } 128 | 129 | .m_banner ul:last-child li.now { 130 | background: #fff; 131 | } 132 | 133 | 134 | /*导航*/ 135 | 136 | .m_nav { 137 | max-width: 100%; 138 | height: 150px; 139 | } 140 | 141 | .m_nav ul { 142 | width: 100%; 143 | padding-top: 16px; 144 | } 145 | 146 | .m_nav .nav_item { 147 | width: 20%; 148 | height: 69px; 149 | float: left; 150 | text-align: center; 151 | } 152 | 153 | .nav_item .nav_item_link { 154 | width: 100%; 155 | height: 100%; 156 | display: block; 157 | text-align: center; 158 | } 159 | 160 | .nav_item .nav_item_link img { 161 | display: block; 162 | width: 30px; 163 | height: 30px; 164 | margin: 0 auto; 165 | } 166 | 167 | .nav_item .nav_item_link span { 168 | font-size: 12px; 169 | } 170 | 171 | 172 | /*商品区*/ 173 | 174 | .m_product { 175 | margin: 0 5px; 176 | } 177 | 178 | 179 | /*common use*/ 180 | 181 | .m_product .product_box { 182 | box-shadow: 0 0 1px 1px #e0e0e0; 183 | } 184 | 185 | .m_product .product_top { 186 | height: 32px; 187 | border-bottom: 1px solid #ccc; 188 | } 189 | .product_left{ 190 | width: 60%; 191 | height: 32px; 192 | display: flex; 193 | } 194 | 195 | .product_left .miaosha_icon{ 196 | height: 30px; 197 | width: 60px; 198 | } 199 | 200 | .product_left .dianshu{ 201 | display: inline-block; 202 | height: 32px; 203 | line-height: 27px; 204 | margin-left: 8px; 205 | } 206 | 207 | .product_left .time{ 208 | line-height: 27px; 209 | margin-left: 4px; 210 | color: #aaa; 211 | } 212 | 213 | .product_content{ 214 | margin-top: 8px; 215 | 216 | } 217 | .product_content .product_skill_item{ 218 | width: 25%; 219 | height: 130px; 220 | float: left; 221 | text-align: center; 222 | background-color: #fff; 223 | } 224 | 225 | .product_skill_item .product_skill_item_link{ 226 | width: 25%; 227 | height: 130px; 228 | display: block; 229 | } 230 | 231 | .product_skill_item_link .product_skill_item_cion{ 232 | width: 80px; 233 | height: 80px; 234 | display: block; 235 | } 236 | 237 | .product_skill_item_link .nowprice{ 238 | width: 80px; 239 | text-align: center; 240 | color: #F11938; 241 | font-weight: 800; 242 | font-family: "微软雅黑"; 243 | font-size: 16px; 244 | } 245 | 246 | .product_skill_item_link .oldprice{ 247 | width: 80px; 248 | text-align: center; 249 | color: #aaa; 250 | } 251 | /*还没逛够*/ 252 | .not_eng_box{ 253 | height: auto; 254 | 255 | } 256 | .left_share_quality_content{ 257 | width: 100%; 258 | } 259 | 260 | .share_quality_left{ 261 | width: 100%; 262 | } 263 | .not_eng_item{ 264 | 265 | text-align: center; 266 | float: left; 267 | width: 50%; 268 | background-color: #fff; 269 | margin-bottom: 10px; 270 | } 271 | 272 | .not_eng_link{ 273 | display: block; 274 | width: 100%; 275 | height: 100%; 276 | transition: all 0s; 277 | } 278 | 279 | .not_eng_pic{ 280 | display: block; 281 | width: 100%; 282 | height: 100%; 283 | overflow: hidden; 284 | margin: 5px 0 5px 5px; 285 | } 286 | 287 | .not_eng_info{ 288 | text-align: left; 289 | margin-left: 10px; 290 | 291 | } 292 | 293 | .not_eng_title{ 294 | overflow: hidden; 295 | margin-bottom: 5px; 296 | height: 36px; 297 | color: #6F7474; 298 | font-weight: 500; 299 | font-family: "Microsoft YaHei"; 300 | 301 | } 302 | 303 | .not_eng_text{ 304 | width: 80px; 305 | color: #F11938; 306 | font-weight: 800; 307 | font-family: "微软雅黑"; 308 | font-size: 16px; 309 | } 310 | -------------------------------------------------------------------------------- /src/assets/css/cart.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F0F2F5; 3 | } 4 | 5 | #carttp .top_bar { 6 | position: static; 7 | } 8 | 9 | .cart_box { 10 | width: 100%; 11 | } 12 | 13 | .cart_box .cart_tip { 14 | width: 100%; 15 | height: 42px; 16 | border-bottom: 1px solid #bfbfbf; 17 | line-height: 42px; 18 | text-align: center; 19 | color: #aaa; 20 | } 21 | 22 | .login { 23 | color: #fff; 24 | display: inline-block; 25 | background: #f15353; 26 | border-radius: inherit; 27 | padding: 4px 12px; 28 | line-height: 1.2em; 29 | color: #fff; 30 | } 31 | 32 | .cart_content { 33 | background-color: #fff; 34 | margin: 10px 8px 0px 8px; 35 | overflow: hidden; 36 | } 37 | 38 | .cart_content .cart_shop { 39 | height: 44px; 40 | width: 100%; 41 | } 42 | 43 | 44 | /*the common checkbox*/ 45 | 46 | .check_box { 47 | display: block; 48 | width: 20px; 49 | height: 20px; 50 | background: url("../images/shop-icon.png") no-repeat; 51 | background-size: 50px 100px; 52 | background-position: 0 0; 53 | position: absolute; 54 | left: 6px; 55 | top: 12px; 56 | } 57 | 58 | .check_box[checked] { 59 | background-position: -25px 0; 60 | } 61 | 62 | .cart_check_box { 63 | width: 40px; 64 | height: 40px; 65 | position: absolute; 66 | } 67 | 68 | .shop_info { 69 | width: 100px; 70 | float: left; 71 | height: 44px; 72 | line-height: 44px; 73 | margin-left: 32px; 74 | } 75 | 76 | .shop_info .shop_icon { 77 | width: 16px; 78 | height: 13px; 79 | display: inline-block; 80 | } 81 | 82 | .cart_free { 83 | height: 44px; 84 | float: right; 85 | line-height: 44px; 86 | text-align: center; 87 | color: #F23C30; 88 | padding-right: 4px; 89 | } 90 | 91 | .cart_item { 92 | background-color: #fff; 93 | height: 130px; 94 | position: relative; 95 | border-bottom: 2px solid #ccc; 96 | width: 100%; 97 | } 98 | 99 | .cart_item .cart_item_box { 100 | position: relative; 101 | width: 40px; 102 | float: left; 103 | background-color: #fff; 104 | } 105 | 106 | .cart_item_box .check_box { 107 | position: absolute; 108 | top: 31px; 109 | left: 6px; 110 | } 111 | 112 | .cart_item .cart_detial_box { 113 | float: left; 114 | background-color: #fff; 115 | margin-left: 30px; 116 | width: 100%; 117 | } 118 | 119 | .cart_detial_box .cart_product_link { 120 | width: 100px; 121 | height: 100px; 122 | display: block; 123 | border: 1px solid #e0e0e0; 124 | border-radius: 4px; 125 | padding: 10px; 126 | float: left; 127 | background-color: #fff; 128 | margin-right: 10px; 129 | } 130 | 131 | .cart_detial_box .cart_product_link img { 132 | width: 100%; 133 | height: 100%; 134 | display: block; 135 | } 136 | 137 | .cart_detial_box .item_names { 138 | height: 34px; 139 | overflow: hidden; 140 | } 141 | 142 | .cart_detial_box .cart_weight { 143 | margin-top: 2px; 144 | color: #BCCCCA; 145 | font-size: 12px; 146 | margin-bottom: 10px; 147 | line-height: 16px; 148 | } 149 | 150 | .cart_detial_box .cart_weight .my_weigth { 151 | font-style: normal; 152 | } 153 | 154 | .cart_detial_box .cart_product_sell { 155 | width: 100%; 156 | } 157 | 158 | .cart_detial_box .cart_product_sell .product_money { 159 | font-size: 12px; 160 | color: #F23030; 161 | } 162 | 163 | .real_money { 164 | font-size: 16px; 165 | } 166 | 167 | .cart_product_sell .cart_add { 168 | width: 100px; 169 | height: 26px; 170 | float: right; 171 | margin-right: 20px; 172 | } 173 | 174 | .cart_product_sell .cart_add .my_add, 175 | .cart_product_sell .cart_add .my_jian { 176 | display: inline-block; 177 | width: 25px; 178 | height: 24px; 179 | border: 1px solid #CBCBCB; 180 | text-align: center; 181 | float: left; 182 | } 183 | 184 | .cart_product_sell .cart_add .my_add { 185 | border-top-left-radius: 4px; 186 | border-bottom-left-radius: 4px; 187 | } 188 | 189 | .cart_product_sell .cart_add .my_jian { 190 | border-top-right-radius: 4px; 191 | border-bottom-right-radius: 4px; 192 | } 193 | 194 | .cart_product_sell .cart_add .my_count { 195 | height: 24px; 196 | width: 30px; 197 | border-top: 1px solid #CBCBCB; 198 | border-bottom: 1px solid #CBCBCB; 199 | text-align: center; 200 | float: left; 201 | } 202 | 203 | .cart_detial_box .cart_del { 204 | position: absolute; 205 | right: 11px; 206 | top: 98px; 207 | } 208 | 209 | .cart_del .del_top { 210 | width: 20px; 211 | height: 5px; 212 | background: url("../images/delete_up.png") no-repeat; 213 | background-size: 20px 5px; 214 | margin-left: -1px; 215 | } 216 | 217 | .cart_del .del_bottom { 218 | width: 18px; 219 | height: 18px; 220 | background: url("../images/delete_down.png") no-repeat; 221 | background-size: 18px 18px; 222 | margin-top: -3px; 223 | } 224 | 225 | .cart_footer { 226 | width: 100%; 227 | height: 50px; 228 | border-top: 1px solid #cccccc; 229 | position: fixed; 230 | bottom: 0; 231 | left: 0; 232 | background-color: #fff; 233 | } 234 | 235 | .cart_footer .all_check_box { 236 | width: 80px; 237 | height: 40px; 238 | position: absolute; 239 | left: 0; 240 | top: 0; 241 | } 242 | 243 | .cart_footer .all_check_box .check_box { 244 | top: 15px; 245 | left: 14px; 246 | } 247 | 248 | .cart_footer .all_check_box span { 249 | text-align: center; 250 | line-height: 50px; 251 | margin-left: 36px; 252 | color: #232326; 253 | font-weight: 600; 254 | } 255 | 256 | .cart_footer .count_money_box { 257 | float: left; 258 | height: 50px; 259 | margin-left: 80px; 260 | } 261 | 262 | .count_money_box .heji { 263 | margin-top: 6px; 264 | } 265 | 266 | .count_money_box .total_money { 267 | color: #aaa; 268 | font-size: 12px; 269 | } 270 | 271 | .count_money_box .total_money i { 272 | font-style: normal; 273 | text-decoration: none; 274 | } 275 | 276 | .count_money_box .go_pay { 277 | position: absolute; 278 | right: 0; 279 | top: 0; 280 | max-width: 98px; 281 | line-height: 50px; 282 | text-align: center; 283 | background: #f23030; 284 | color: #fff; 285 | font-size: 16px; 286 | height: 49px; 287 | margin-top: 1px; 288 | padding: 0 16px; 289 | } 290 | 291 | .pop { 292 | position: fixed; 293 | left: 0; 294 | top: 0; 295 | right: 0; 296 | bottom: 0; 297 | background: rgba(0, 0, 0, .4); 298 | padding: 0 5%; 299 | } 300 | 301 | .pop .pop_box { 302 | width: 85%; 303 | height: 140px; 304 | background-color: #fff; 305 | border-radius: 8px; 306 | margin: 50% auto; 307 | padding: 0 5%; 308 | } 309 | 310 | .pop_box .del_info { 311 | text-align: center; 312 | line-height: 70px; 313 | font-size: 16px; 314 | color: #888888; 315 | } 316 | 317 | .pop_box .del_cancel { 318 | float: left; 319 | width: 35%; 320 | height: 35px; 321 | text-align: center; 322 | line-height: 35px; 323 | border: 1px solid #bfbfbf; 324 | border-radius: 4px; 325 | margin-right: 15%; 326 | } 327 | 328 | .pop_box .del_ok { 329 | float: left; 330 | width: 35%; 331 | height: 35px; 332 | text-align: center; 333 | line-height: 35px; 334 | border: 1px solid #bfbfbf; 335 | border-radius: 4px; 336 | background: #D8505C; 337 | color: #fff; 338 | margin-left: 15%; 339 | } 340 | 341 | @-webkit-keyframes delBoxOut { 342 | 0% { 343 | opacity: 0; 344 | transform: translateY(-2000px); 345 | -webkit-transform: translateY(-2000px); 346 | } 347 | 60% { 348 | opacity: 1; 349 | transform: translateY(30px); 350 | -webkit-transform: translateY(30px); 351 | } 352 | 75% { 353 | transform: translateY(-10px); 354 | -webkit-transform: translateY(-10px); 355 | } 356 | 90% { 357 | transform: translateY(5px); 358 | -webkit-transform: translateY(5px); 359 | } 360 | 100% { 361 | opacity: 1; 362 | transform: none; 363 | -webkit-transform: none; 364 | } 365 | } 366 | 367 | .delBoxOut { 368 | animation: delBoxOut 1s ease; 369 | } 370 | -------------------------------------------------------------------------------- /route/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const mysql = require('mysql'); 3 | const common = require('../libs/common'); 4 | const db = mysql.createPool({ 5 | host: 'localhost', 6 | user: 'root', 7 | password: 'huangche201314', 8 | database: 'myigou' 9 | }); 10 | module.exports = () => { 11 | const route = express.Router(); 12 | const getHomeStr = `SELECT product_id,product_name,product_price,product_img_url,product_uprice FROM product`; 13 | const getCateNames = `SELECT * FROM category ORDER BY category_id desc`; 14 | //get homePage datas 15 | route.get('/home', (req, res) => { 16 | getHomeDatas(getHomeStr, res); 17 | }); 18 | 19 | function getHomeDatas(getHomeStr, res) { 20 | db.query(getHomeStr, (err, data) => { 21 | if (err) { 22 | console.log(err); 23 | res.status(500).send('database err').end(); 24 | } else { 25 | if (data.length == 0) { 26 | res.status(500).send('no datas').end(); 27 | } else { 28 | res.send(data); 29 | } 30 | } 31 | }); 32 | } 33 | 34 | route.get('/category', (req, res) => { 35 | getCateNamesDatas(getCateNames, res); 36 | }); 37 | 38 | function getCateNamesDatas(getCateNames, res) { 39 | db.query(getCateNames, (err, data) => { 40 | if (err) { 41 | console.log(err); 42 | res.status(500).send('database err').end(); 43 | } else { 44 | if (data.length == 0) { 45 | res.status(500).send('no datas').end(); 46 | } else { 47 | res.send(data); 48 | } 49 | } 50 | }); 51 | }; 52 | route.get('/categorygoods', (req, res) => { 53 | let mId = req.query.mId; 54 | const sql = `select * from product,category where product.category_id=category.category_id and category.category_id='${mId}'`; 55 | getCateGoods(sql, res); 56 | }); 57 | 58 | function getCateGoods(sql, res) { 59 | db.query(sql, (err, data) => { 60 | if (err) { 61 | console.log(err); 62 | res.status(500).send('database err').end(); 63 | } else { 64 | if (data.length == 0) { 65 | res.status(500).send('no datas').end(); 66 | } else { 67 | res.send(data); 68 | } 69 | } 70 | }); 71 | } 72 | route.get('/detail', (req, res) => { 73 | let produId = req.query.mId; 74 | const imagesStr = `select image_url from product_image where product_id='${produId}'`; 75 | const productStr = `select * from product where product_id='${produId}'`; 76 | let detailDatas = []; 77 | db.query(imagesStr, (err, imgDatas) => { 78 | if (err) { 79 | console.error(err); 80 | res.status(500).send('database err').end(); 81 | } else { 82 | detailDatas.push(imgDatas); 83 | db.query(productStr, (err, data) => { 84 | if (err) { 85 | console.error(err); 86 | res.status(500).send('database err').end(); 87 | } else { 88 | detailDatas.push(data); 89 | res.send(detailDatas); 90 | } 91 | }); 92 | } 93 | }); 94 | 95 | }); 96 | route.get('/cart', (req, res) => { 97 | const cartStr = "SELECT cart_id,user.user_id,product.product_id,product_name,product_uprice,product_img_url,goods_num,product_num,shop_name FROM product,user,goods_cart,shop where product.product_id=goods_cart.product_id and user.user_id=goods_cart.user_id and shop.shop_id = product.shop_id"; 98 | db.query(cartStr, (err, data) => { 99 | if (err) { 100 | console.log(err); 101 | res.status(500).send('database err').end(); 102 | } else { 103 | if (data.length == 0) { 104 | res.status(500).send('no datas').end(); 105 | } else { 106 | res.send(data); 107 | } 108 | } 109 | }); 110 | }) 111 | 112 | route.get('/search', (req, res) => { 113 | let keyWord = req.query.kw; 114 | let hot = req.query.hot; 115 | let priceUp = req.query.priceUp; 116 | let priceDown = req.query.priceDown; 117 | const keywordStr = `select * from product,shop where product.shop_id=shop.shop_id and product.product_name like '%${keyWord}%'`; 118 | const hotStr = `select * from product,shop where product.shop_id=shop.shop_id and product.product_name like '%${keyWord}%' order by product_comment_num desc`; 119 | const priceUpStr = `select * from product,shop where product.shop_id=shop.shop_id and product.product_name like '%${keyWord}%' order by product_uprice asc`; 120 | const priceDownStr = `select * from product,shop where product.shop_id=shop.shop_id and product.product_name like '%${keyWord}%' order by product_uprice desc`; 121 | if (keyWord != '') { 122 | if (hot != '') { 123 | getSearchDatas(hotStr, res); 124 | } else if (priceUp != '') { 125 | getSearchDatas(priceUpStr, res); 126 | } else if (priceDown != '') { 127 | getSearchDatas(priceDownStr, res); 128 | } else { 129 | getSearchDatas(keywordStr, res); 130 | } 131 | } 132 | 133 | }); 134 | /** 135 | get search datas 136 | */ 137 | function getSearchDatas(keywordStr, res) { 138 | db.query(keywordStr, (err, data) => { 139 | if (err) { 140 | console.log(err); 141 | res.status(500).send('database err').end(); 142 | } else { 143 | if (data.length == 0) { 144 | res.status(500).send('no datas').end(); 145 | } else { 146 | res.send(data); 147 | } 148 | } 149 | }); 150 | } 151 | /* 152 | *user reg func 153 | */ 154 | route.post('/reg', (req, res) => { 155 | 156 | let mObj = {}; 157 | for (let obj in req.body) { 158 | mObj = JSON.parse(obj); 159 | } 160 | let regName = mObj.regName; 161 | let regPasswd = mObj.regPasswd; 162 | regPasswd = common.md5(regPasswd + common.MD5_SUFFXIE); 163 | const insUserInfo = `INSERT INTO user(user_name,login_password,user_number) VALUES('${regName}','${regPasswd}','${regName}')`; 164 | delReg(insUserInfo, res); 165 | }); 166 | /* 167 | *deal user register 168 | */ 169 | function delReg(insUserInfo, res) { 170 | db.query(insUserInfo, (err) => { 171 | if (err) { 172 | console.error(err); 173 | res.send({ 'msg': '服务器出错', 'status': 0 }).end(); 174 | } else { 175 | res.send({ 'msg': '注册成功', 'status': 1 }).end(); 176 | } 177 | }) 178 | }; 179 | route.post('/login', (req, res) => { 180 | 181 | let mObj = {}; 182 | for (let obj in req.body) { 183 | mObj = JSON.parse(obj); 184 | console.log(mObj); 185 | } 186 | let username = mObj.loginName; 187 | let password = common.md5(mObj.loginPawd + common.MD5_SUFFXIE);; 188 | // console.log(username, mObj.passwd); 189 | const selectUser = `SELECT * FROM user where user_name='${username}'`; 190 | db.query(selectUser, (err, data) => { 191 | if (err) { 192 | console.log(err); 193 | res.send({ 'msg': '服务器出错', 'status': 0 }).end(); 194 | } else { 195 | if (data.length == 0) { 196 | res.send({ 'msg': '该用户不存在', 'status': -1 }).end(); 197 | } else { 198 | let dataw = data[0]; 199 | //login sucess 200 | if (dataw.login_password === password) { 201 | //save the session 202 | req.session['user_id'] = dataw.user_id; 203 | dataw.msg = "登录成功"; 204 | dataw.status = 1; 205 | res.send(dataw).end(); 206 | } else { 207 | res.send({ 'msg': '密码不正确', 'status': -2 }).end(); 208 | } 209 | } 210 | } 211 | }); 212 | 213 | }); 214 | route.get('/userinfo', (req, res) => { 215 | let uId = req.query.uId; 216 | const getU = `SELECT user_name,user_number FROM user where user_id='${uId}'`; 217 | db.query(getU, (err, data) => { 218 | if (err) { 219 | console.log(err); 220 | res.status(500).send('database err').end(); 221 | } else { 222 | if (data.length == 0) { 223 | res.status(500).send('no datas').end(); 224 | } else { 225 | res.send(data[0]); 226 | } 227 | } 228 | }); 229 | }); 230 | return route; 231 | } 232 | -------------------------------------------------------------------------------- /src/components/MineMain.vue: -------------------------------------------------------------------------------- 1 | 212 | --------------------------------------------------------------------------------