19 | 
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/h5/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Provider } from "react-redux"
3 | import { PersistGate } from "redux-persist/integration/react"
4 | import { store, persistor } from "store/index"
5 |
6 | import AppRouter from "router/AppRouter"
7 | import "./styles/global.scss"
8 |
9 | function App() {
10 | return (
11 |
19 | {items.map((item, index) => (
20 | 
21 | ))}
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/server/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | "version": "0.2.0",
6 | "configurations": [
7 | {
8 | "type": "node",
9 | "request": "launch",
10 | "name": "Express后端调试",
11 | "program": "${workspaceFolder}\\src\\app.ts",
12 | "outFiles": ["${workspaceFolder}/*/*.js"]
13 | }
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/h5/src/pages/NotFound/notFound.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: center;
5 | width: 100vw;
6 | height: 100vh;
7 | text-align: center;
8 | .icon {
9 | display: block;
10 | width: 24rem;
11 | margin: 0 auto 0.5rem;
12 | }
13 | .sorry {
14 | margin: 2.4rem 0;
15 | font-size: 2.4rem;
16 | line-height: 3.6rem;
17 | }
18 | .goto {
19 | margin: 1.6rem 0;
20 | text-decoration: none;
21 | color: #0b72a4;
22 | font-size: 1.6rem;
23 | line-height: 3.6rem;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/server/src/loaders/index.ts:
--------------------------------------------------------------------------------
1 | import expressLoader from './server';
2 | import mongooseLoader from './database';
3 | import logger from './logger';
4 |
5 | export default async (params: any) => {
6 | const { expressApp } = params;
7 | try {
8 | // 连接数据库
9 | const mongoConnection = await mongooseLoader();
10 | logger.info('✌️ DB loaded and connected!');
11 |
12 | // 起服务器
13 | await expressLoader({ app: expressApp });
14 | logger.info('✌️ Express loaded');
15 | } catch (error) {
16 | logger.error(error);
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/h5/src/components/Tabbar/tabbar.module.scss:
--------------------------------------------------------------------------------
1 | .tabbar-container {
2 | display: flex;
3 | position: fixed;
4 | bottom: 0;
5 | width: 100%;
6 | height: 5.2rem;
7 | box-shadow: 0 -0.2rem 1rem 0.1rem rgba(0, 0, 0, 0.2);
8 | background-color: #fff;
9 | }
10 |
11 | .icon-box {
12 | flex: 1;
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | justify-content: center;
17 | .icon {
18 | margin: 0 auto 0.5rem;
19 | width: 2.1rem;
20 | height: 2.1rem;
21 | }
22 | .text {
23 | color: #999;
24 | }
25 | .selected {
26 | color: #ff6700;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/h5/src/store/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from "redux";
2 | import CommonReducer from "./commonReducer";
3 | import HomeReducer from "./homeReducer";
4 | import SearchReducer from "./searchReducer";
5 | import CategoryReducer from "./categoryReducer";
6 | import AuthReducer from "./authReducer";
7 | import CartReducer from "./cartReducer";
8 |
9 | const rootReducer = combineReducers({
10 | common: CommonReducer,
11 | home: HomeReducer,
12 | search: SearchReducer,
13 | category: CategoryReducer,
14 | auth: AuthReducer,
15 | cart: CartReducer
16 | });
17 |
18 | export default rootReducer;
19 |
--------------------------------------------------------------------------------
/h5/src/store/reducers/homeReducer.js:
--------------------------------------------------------------------------------
1 | import { createReducer } from "./reducerCreator";
2 | import * as types from "../actionTypes/types";
3 |
4 | const initialState = {
5 | nav: "recommend",
6 | selectedTab: "/"
7 | };
8 |
9 | const HomeReducer = createReducer(initialState, {
10 | [types.SET_NAV]: (state = initialState, action) => {
11 | return {
12 | ...state,
13 | nav: action.payload
14 | };
15 | },
16 | [types.SELECT_TAB]: (state, action) => {
17 | return {
18 | ...state,
19 | selectedTab: action.payload
20 | };
21 | }
22 | });
23 |
24 | export default HomeReducer;
25 |
--------------------------------------------------------------------------------
/h5/src/pages/Star/Content/content.config.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Loadable from "react-loadable";
3 |
4 | const Loading = () => 加载中...
;
5 |
6 | const Recommend = Loadable({
7 | loader: () => import("pages/Star/Content/Recommend"),
8 | loading: Loading
9 | });
10 |
11 | const MiLife = Loadable({
12 | loader: () => import("pages/Star/Content/MiLife"),
13 | loading: Loading
14 | });
15 |
16 | const Network = Loadable({
17 | loader: () => import("pages/Star/Content/5G"),
18 | loading: Loading
19 | });
20 |
21 | export const ContentConfig = {
22 | Recommend,
23 | MiLife,
24 | Network
25 | };
26 |
--------------------------------------------------------------------------------
/h5/src/router/PrivateRoute.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Route, Redirect } from "react-router-dom";
3 |
4 | function PrivateRoute({ children, ...rest }) {
5 | let { isAuth } = { ...rest };
6 |
7 | // 未认证跳转
8 | return (
9 |
14 | 错误!
15 |
16 | );
17 | } else if (props.pastDelay) {
18 | return (
19 |
20 |
22 | );
23 | } else {
24 | return null;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/h5/src/store/reducers/searchReducer.js:
--------------------------------------------------------------------------------
1 | import { createReducer } from "./reducerCreator";
2 | import * as types from "../actionTypes/types";
3 |
4 | const initialState = {
5 | historyList: []
6 | };
7 |
8 | const SearchReducer = createReducer(initialState, {
9 | [types.ADD_SEARCH_HISTORY]: (state = initialState, action) => {
10 | return {
11 | ...state,
12 | historyList: [...state.historyList, action.payload]
13 | };
14 | },
15 | [types.REMOVE_ALL_SEARCH_HISTORY]: (state = initialState, action) => {
16 | return {
17 | ...state,
18 | historyList: []
19 | };
20 | }
21 | });
22 |
23 | export default SearchReducer;
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mi-shop",
3 | "version": "1.0.0",
4 | "description": "仿小米商城全栈项目，包括h5, 微信小程序，Android, SSR, Node后端",
5 | "main": "index.js",
6 | "directories": {
7 | "doc": "doc"
8 | },
9 | "scripts": {
10 | "git": "git add . && git commit -m",
11 | "postgit": "git pull && git push && git status"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+https://github.com/cnscorpions/mi-shop.git"
16 | },
17 | "author": "",
18 | "license": "ISC",
19 | "bugs": {
20 | "url": "https://github.com/cnscorpions/mi-shop/issues"
21 | },
22 | "homepage": "https://github.com/cnscorpions/mi-shop#readme"
23 | }
24 |
--------------------------------------------------------------------------------
/h5/src/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore } from "redux";
2 | import { persistStore, persistReducer } from "redux-persist";
3 | import storageSession from "redux-persist/lib/storage/session";
4 | import rootReducer from "./reducers/index";
5 |
6 | const persistConfig = {
7 | key: "root",
8 | storage: storageSession,
9 | whitelist: ["auth", "common", "home", "search", "category"],
10 | debug: true
11 | };
12 |
13 | const persistedReducer = persistReducer(persistConfig, rootReducer);
14 |
15 | export let store = createStore(
16 | persistedReducer,
17 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
18 | );
19 |
20 | export let persistor = persistStore(store);
21 |
--------------------------------------------------------------------------------
/server/src/models/user.model.ts:
--------------------------------------------------------------------------------
1 | import mongoose from 'mongoose';
2 | import { IUser } from '../interfaces/IUser';
3 |
4 | const userSchema = new mongoose.Schema(
5 | {
6 | name: String,
7 | email: {
8 | type: String,
9 | lowercase: true,
10 | unique: true,
11 | index: true,
12 | },
13 | password: String,
14 | salt: String,
15 | role: {
16 | type: String,
17 | default: 'user',
18 | },
19 | },
20 | {
21 | timestamps: true,
22 | },
23 | );
24 |
25 | const user = mongoose.model
16 | 
17 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/h5/src/store/actionTypes/types.js:
--------------------------------------------------------------------------------
1 | // 选择底部tab
2 | export const SELECT_TAB = "SELECT_TAB";
3 |
4 | // 首页-选择nav
5 | export const SET_NAV = "SET_NAV";
6 |
7 | // 应用-是否显示CTA
8 | export const HIDE_DOWNLOAD_APP_BANNER = "HIDE_DOWNLOAD_APP_BANNER";
9 |
10 | // 搜索-添加/删除搜索历史
11 | export const ADD_SEARCH_HISTORY = "ADD_SEARCH_HISTORY";
12 | export const REMOVE_ALL_SEARCH_HISTORY = "REMOVE_ALL_SEARCH_HISTORY";
13 |
14 | // 分类-选择类目
15 | export const SET_CATE = "SET_CATE";
16 |
17 | // Auth - login
18 | export const LOGIN = "LOGIN";
19 | export const SIGNUP = "SIGNUP";
20 | export const OAUTH = "OAUTH";
21 |
22 | // 购物车 - 加入购物车
23 | export const ADD_GOODS_TO_CART = "ADD_GOODS_TO_CART";
24 | export const REMOVE_GOODS_TO_CART = "REMOVE_GOODS_TO_CART";
25 |
--------------------------------------------------------------------------------
/h5/src/utils/request/config.js:
--------------------------------------------------------------------------------
1 | // Content-Type
2 | export const CONTENT_TYPE = {
3 | JSON: "application/json;charset=UTF-8",
4 | FORM: "application/x-www-form-urlencoded; charset=UTF-8"
5 | };
6 |
7 | // 请求方法
8 | export const REQUEST_METHOD = {
9 | GET: "GET",
10 | POST: "POST",
11 | PUT: "PUT",
12 | PATCH: "PATCH",
13 | DELETE: "DELETE"
14 | };
15 |
16 | // HTTP状态码
17 | export const HTTP_STATUS = {
18 | SUCCESS: 200,
19 | CREATED: 201,
20 | ACCEPTED: 202,
21 | CLIENT_ERROR: 400,
22 | AUTHENTICATE: 401,
23 | FORBIDDEN: 403,
24 | NOT_FOUND: 404,
25 | SERVER_ERROR: 500,
26 | BAD_GATEWAY: 502,
27 | SERVICE_UNAVAILABLE: 503,
28 | GATEWAY_TIMEOUT: 504
29 | };
30 |
31 | // base url
32 | export const BASE_URL = "/api";
33 |
--------------------------------------------------------------------------------
/server/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: '@typescript-eslint/parser', // Specifies the ESLint parser
3 | parserOptions: {
4 | ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
5 | sourceType: 'module', // Allows for the use of imports
6 | },
7 | extends: [
8 | 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
9 | 'prettier/@typescript-eslint',
10 | 'plugin:prettier/recommended',
11 | ],
12 | rules: {
13 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
14 | // e.g. "@typescript-eslint/explicit-function-return-type": "off",
15 | },
16 | };
17 |
--------------------------------------------------------------------------------
/h5/src/pages/User/User.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useHistory } from "react-router-dom";
3 |
4 | import userIcon from "assets/user/avatar.png";
5 |
6 | import * as styles from "./user.module.scss";
7 |
8 | export default function User() {
9 | const history = useHistory();
10 |
11 | const goLogin = () => {
12 | history.push("/login");
13 | };
14 |
15 | return (
16 | 抱歉，页面找不到了...
18 |19 | 商城首页 mi.com 20 |
21 |
17 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/h5/src/pages/User/user.module.scss:
--------------------------------------------------------------------------------
1 | @import "styles/global.scss";
2 |
3 | .wrapper {
4 | .login-box {
5 | display: flex;
6 | justify-content: flex-start;
7 | align-items: center;
8 | padding: 2rem 0;
9 | background: url(../../assets/user/background.png) center 0 #f37d0f;
10 | background-size: auto 100%;
11 | & > img {
12 | margin: 0 0.8rem 0 1.6rem;
13 | width: 4.4rem;
14 | }
15 | & > span {
16 | font-size: 1.2rem;
17 | color: #fff;
18 | }
19 | }
20 | .order-box {
21 | @include centerIt;
22 | justify-content: space-between;
23 | padding: 0 1.6rem;
24 | height: 4.1rem;
25 | border-bottom: 1px solid rgba(0, 0, 0, 0.15);
26 | color: rgba(0, 0, 0, 0.87);
27 | font-size: 1.5rem;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/h5/src/pages/Category/LeftPanel/leftPanel.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | position: fixed;
3 | top: 5rem;
4 | bottom: 5.2rem;
5 | left: 0;
6 | border-right: 1px solid #efefef;
7 | width: 7.8rem;
8 | background: aqua;
9 | overflow: hidden;
10 | }
11 |
12 | .list-container {
13 | position: absolute;
14 | top: 0;
15 | bottom: 0;
16 | left: 0;
17 | right: -1.5rem;
18 | padding: 1rem 1.5rem 1rem 0;
19 | background: #fefefe;
20 | overflow-y: auto;
21 | z-index: 90;
22 | .list-item {
23 | height: 4.6rem;
24 | line-height: 4.6rem;
25 | &-text {
26 | display: block;
27 | height: 100%;
28 | font-size: 1.3rem;
29 | text-align: center;
30 | overflow: hidden;
31 | }
32 | &_active {
33 | color: #fb7d34;
34 | transform: scale(1.2);
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/weapp/.temp/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware, compose } from 'redux';
2 | import thunkMiddleware from 'redux-thunk';
3 | import rootReducer from "../reducers/index";
4 |
5 | const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
6 | // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
7 | }) : compose;
8 |
9 | const middlewares = [thunkMiddleware];
10 |
11 | if (process.env.NODE_ENV === 'development' && true) {
12 | middlewares.push(require('redux-logger').createLogger());
13 | }
14 |
15 | const enhancer = composeEnhancers(applyMiddleware(...middlewares)
16 | // other store enhancers if any
17 | );
18 |
19 | export default function configStore() {
20 | const store = createStore(rootReducer, enhancer);
21 | return store;
22 | }
--------------------------------------------------------------------------------
/h5/src/pages/Home/Header/header.module.scss:
--------------------------------------------------------------------------------
1 | .search-container {
2 | display: flex;
3 | flex-wrap: nowrap;
4 | align-items: center;
5 | height: 4.4rem;
6 | background: #f2f2f2;
7 | color: #666;
8 | &-icon {
9 | display: flex;
10 | justify-content: center;
11 | width: 5.2rem;
12 | margin: 0 1rem;
13 | }
14 | &-icon > img {
15 | width: 2.5rem;
16 | }
17 | &-input {
18 | display: flex;
19 | justify-content: flex-start;
20 | align-items: center;
21 | border: 1px solid #e5e5e5;
22 | text-align: left;
23 | padding: 0.8rem 0;
24 | width: 100%;
25 | color: rgba(0, 0, 0, 0.3);
26 | background-color: #fff;
27 | border-radius: 0.04rem;
28 | font-size: 1.6rem;
29 | }
30 | &-input > img {
31 | margin: 0 0.4rem;
32 | width: 1.6rem;
33 | }
34 | &-user > img {
35 | margin: 0 1rem;
36 | width: 2.4rem;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/h5/src/components/Banner/Pagination.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PaginationDot from "./PaginationDot";
3 |
4 | const styles = {
5 | root: {
6 | position: "absolute",
7 | bottom: "1rem",
8 | right: "50%",
9 | marginRight: "-3rem",
10 | display: "flex",
11 | flexDirection: "row"
12 | }
13 | };
14 |
15 | const Pagination = props => {
16 | const handleClick = index => {
17 | const { onChangeIndex } = props;
18 | onChangeIndex(index);
19 | };
20 |
21 | const { index, dots } = props;
22 |
23 | const children = [];
24 |
25 | for (let i = 0; i < dots; i += 1) {
26 | children.push(
27 |
18 | 
19 | 登录/注册
20 |
21 |
22 | 我的订单
23 | 全部订单
24 |
25 | {children}
;
37 | };
38 |
39 | export default Pagination;
40 |
--------------------------------------------------------------------------------
/h5/src/pages/Search/Header/header.module.scss:
--------------------------------------------------------------------------------
1 | .search-container {
2 | display: flex;
3 | flex-wrap: nowrap;
4 | align-items: center;
5 | height: 4.1rem;
6 | background: #f2f2f2;
7 | color: #666;
8 | &-icon {
9 | display: flex;
10 | justify-content: center;
11 | width: 5.2rem;
12 | margin: 0 1rem;
13 | }
14 | &-icon > img {
15 | width: 2.4rem;
16 | }
17 | &-input {
18 | display: flex;
19 | justify-content: flex-start;
20 | align-items: center;
21 | border: 1px solid #e5e5e5;
22 | text-align: left;
23 | padding: 0.6rem 0 0.6rem 0.4rem;
24 | width: 100%;
25 | color: rgba(0, 0, 0, 0.3);
26 | background-color: #fff;
27 | border-radius: 0.04rem;
28 | font-size: 1.6rem;
29 | }
30 | &-input > img {
31 | margin: 0 0.4rem;
32 | width: 1.6rem;
33 | }
34 | &-user > img {
35 | margin: 0 1rem;
36 | width: 2.4rem;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/server/src/app.ts:
--------------------------------------------------------------------------------
1 | import express, { Request, Response } from 'express';
2 | import config from './config/index';
3 | import logger from './loaders/logger';
4 |
5 | // Add a polyfill for the Reflect API
6 | import 'reflect-metadata';
7 |
8 | const startServer = async () => {
9 | const app: express.Application = express();
10 |
11 | try {
12 | await require('./loaders').default({ expressApp: app });
13 | } catch (error) {
14 | logger.error(error);
15 | }
16 |
17 | app.listen(config.port, (err: any) => {
18 | if (err) {
19 | logger.error(err);
20 | process.exit(1);
21 | return;
22 | }
23 | logger.info(`
24 | ################################################
25 | 🛡️ Server listening on port: ${config.port} 🛡️
26 | ################################################
27 | `);
28 | });
29 | };
30 |
31 | startServer();
32 |
--------------------------------------------------------------------------------
/h5/src/pages/Category/Category.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useHistory } from "react-router-dom";
3 |
4 | import Header from "components/Header/Header";
5 | import LeftPanel from "./LeftPanel/LeftPanel";
6 | import RightPanel from "./RightPanel/RightPanel";
7 |
8 | export default function Category() {
9 | const history = useHistory();
10 |
11 | const goBack = () => {
12 | history.goBack();
13 | };
14 |
15 | const goSearch = () => {
16 | history.push("/search");
17 | };
18 |
19 | // const handleScroll = anchor => {
20 | // // 获取元素
21 | // const titleEl = document.querySelector(`span[title=${anchor}]`);
22 | // // 滚动到特定位置
23 | // };
24 |
25 | return (
26 | <>
27 |
29 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/doc/前端组件树.md:
--------------------------------------------------------------------------------
1 | 1. 页面组件
2 |
3 | - [x] 首页
4 | - [x] 头部
5 | - [x] banner 图
6 | - [x] 类目
7 | - [x] 404
8 | - [x] 搜索页
9 | - [x] 头部
10 | - [x] 搜索历史
11 | - [x] 分类
12 | - [x] 顶部栏
13 | - [x] 侧边栏
14 | - [x] 内容
15 | - [ ] 星球
16 | - [x] 顶部栏
17 | - [ ] 通知角标
18 | - [ ] 购物车
19 | - [x] 其他
20 | - [ ] 购物车操作
21 | - [ ] 我
22 | - [x] 其他
23 | - [ ] 订单操作
24 | - [ ] 服务中心
25 | - [ ] 小米中心
26 | - [ ] 登录页
27 | - [x] 基础
28 | - [x] 接口接入
29 | - [x] 表单验证
30 | - [ ] Oauth
31 | - 列表
32 | - 详情
33 |
34 | 2. 公众组件
35 |
36 | - [x] tabbar
37 | - [x] loading
38 | - [x] swiper 组件
39 | - [x] 顶部"前往 App 下载"banner
40 | - [x] 类目
41 | - [ ] 对话框
42 | - [ ] 加载进度条
43 | - [ ] 通知
44 | - [ ] 图片懒加载
45 | - 回到顶部
46 | - 回到上一页
47 | - 商品列表
48 |
49 | 3. 其他
50 |
51 | - nav 切换动画
52 | - 红包晃动动画
53 |
54 | 4. 微信小程序
55 |
56 | 5. React Native 安卓
57 |
--------------------------------------------------------------------------------
/weapp/src/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware, compose } from 'redux'
2 | import thunkMiddleware from 'redux-thunk'
3 | import rootReducer from '../reducers'
4 |
5 | const composeEnhancers =
6 | typeof window === 'object' &&
7 | window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
8 | window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
9 | // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
10 | }) : compose
11 |
12 | const middlewares = [
13 | thunkMiddleware
14 | ]
15 |
16 | if (process.env.NODE_ENV === 'development' && process.env.TARO_ENV !== 'quickapp') {
17 | middlewares.push(require('redux-logger').createLogger())
18 | }
19 |
20 | const enhancer = composeEnhancers(
21 | applyMiddleware(...middlewares),
22 | // other store enhancers if any
23 | )
24 |
25 | export default function configStore () {
26 | const store = createStore(rootReducer, enhancer)
27 | return store
28 | }
29 |
--------------------------------------------------------------------------------
/h5/src/components/Header/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as styles from "./header.module.scss";
3 |
4 | import arrowLeftIcon from "assets/search/arrow-left.png";
5 | import searchIconPath from "assets/home/search.png";
6 |
7 | export default function Header(props) {
8 | const { title, goBack, goSearch } = props;
9 |
10 | const toParentGoback = () => {
11 | goBack();
12 | };
13 |
14 | const toParentGoSearch = () => {
15 | goSearch();
16 | };
17 |
18 | return (
19 |
20 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/server/src/loaders/logger.ts:
--------------------------------------------------------------------------------
1 | import winston from 'winston';
2 | import config from '../config';
3 |
4 | const transports = [];
5 |
6 | /**
7 | * 设置dev/prod下的日志transport
8 | */
9 | if (process.env.NODE_ENV !== 'development') {
10 | transports.push(new winston.transports.Console());
11 | } else {
12 | transports.push(
13 | new winston.transports.Console({
14 | format: winston.format.combine(winston.format.cli(), winston.format.splat()),
15 | }),
16 | );
17 | }
18 |
19 | // 创建logger实例，并导出
20 | const logger = winston.createLogger({
21 | level: config.logs.level,
22 | levels: winston.config.npm.levels,
23 | format: winston.format.combine(
24 | winston.format.timestamp({
25 | format: 'YYYY-MM-DD HH:mm:ss',
26 | }),
27 | winston.format.errors({ stack: true }),
28 | winston.format.splat(),
29 | winston.format.json(),
30 | ),
31 | transports,
32 | });
33 |
34 | export default logger;
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # mi-shop
2 | 仿小米商城全栈项目，包括h5, 微信小程序，Android, SSR, Node后端
3 |
4 | ## 预览
5 |
6 |
9 |
10 | | 首页 | 分类页 | 登录页 |
11 | | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
12 | |  |  |  |
13 |
--------------------------------------------------------------------------------
/h5/src/router/router.config.js:
--------------------------------------------------------------------------------
1 | import Loadable from "react-loadable";
2 | import Loading from "./Loading";
3 |
4 | const Home = Loadable({
5 | loader: () => import("pages/Home/Home"),
6 | loading: Loading,
7 | });
8 |
9 | const Cart = Loadable({
10 | loader: () => import("pages/Cart/Cart"),
11 | loading: Loading,
12 | });
13 |
14 | const Category = Loadable({
15 | loader: () => import("pages/Category/Category"),
16 | loading: Loading,
17 | });
18 |
19 | const Star = Loadable({
20 | loader: () => import("pages/Star/Star"),
21 | loading: Loading,
22 | });
23 |
24 | const User = Loadable({
25 | loader: () => import("pages/User/User"),
26 | loading: Loading,
27 | });
28 |
29 | export const Routes = [
30 | {
31 | path: "/",
32 | component: Home,
33 | },
34 | {
35 | path: "/cart",
36 | component: Cart,
37 | },
38 | {
39 | path: "/category",
40 | component: Category,
41 | },
42 | {
43 | path: "/star",
44 | component: Star,
45 | },
46 | {
47 | path: "/user",
48 | component: User,
49 | },
50 | ];
51 |
--------------------------------------------------------------------------------
/h5/src/components/Banner/PaginationDot.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const styles = {
4 | root: {
5 | height: 18,
6 | width: 18,
7 | cursor: "pointer",
8 | border: 0,
9 | background: "none",
10 | padding: 0
11 | },
12 | dot: {
13 | backgroundColor: "#ddd",
14 | height: ".8rem",
15 | width: ".8rem",
16 | borderRadius: ".4rem",
17 | margin: "0 .5rem"
18 | },
19 | active: {
20 | backgroundColor: "#fff"
21 | }
22 | };
23 |
24 | const PaginationDot = props => {
25 | const { active, onClick, index } = props;
26 |
27 | const handleClick = index => {
28 | onClick(index);
29 | };
30 |
31 | let styleDot;
32 |
33 | if (active) {
34 | styleDot = Object.assign({}, styles.dot, styles.active);
35 | } else {
36 | styleDot = styles.dot;
37 | }
38 |
39 | return (
40 |
47 | );
48 | };
49 |
50 | export default PaginationDot;
51 |
--------------------------------------------------------------------------------
/weapp/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
21 | 
22 |
23 | {title}
24 |
28 | 
29 |
30 |
22 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/weapp/src/app.jsx:
--------------------------------------------------------------------------------
1 | import Taro, { Component } from '@tarojs/taro'
2 | import { Provider } from '@tarojs/redux'
3 |
4 | import Index from './pages/index'
5 |
6 | import configStore from './store'
7 |
8 | import './app.scss'
9 |
10 | // 如果需要在 h5 环境中开启 React Devtools
11 | // 取消以下注释：
12 | // if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
13 | // require('nerv-devtools')
14 | // }
15 |
16 | const store = configStore()
17 |
18 | class App extends Component {
19 |
20 | config = {
21 | pages: [
22 | 'pages/index/index'
23 | ],
24 | window: {
25 | backgroundTextStyle: 'light',
26 | navigationBarBackgroundColor: '#fff',
27 | navigationBarTitleText: 'WeChat',
28 | navigationBarTextStyle: 'black'
29 | }
30 | }
31 |
32 | componentDidMount () {}
33 |
34 | componentDidShow () {}
35 |
36 | componentDidHide () {}
37 |
38 | componentDidCatchError () {}
39 |
40 | // 在 App 类中的 render() 函数没有实际作用
41 | // 请勿修改此函数
42 | render () {
43 | return (
44 |
23 | 
24 |
25 |
29 |
30 | 搜索商品名称
31 |
32 |
33 | 
34 |
35 | 加载中...
;
6 |
7 | const Recommend = Loadable({
8 | loader: () => import("pages/Home/Content/Recommend/Recommend"),
9 | loading: Loading
10 | });
11 |
12 | const Cellphone = Loadable({
13 | loader: () => import("pages/Home/Content/Cellphone/Cellphone"),
14 | loading: Loading
15 | });
16 |
17 | const SmartDevice = Loadable({
18 | loader: () => import("pages/Home/Content/SmartDevice/SmartDevice"),
19 | loading: Loading
20 | });
21 |
22 | const TV = Loadable({
23 | loader: () => import("pages/Home/Content/TV/TV"),
24 | loading: Loading
25 | });
26 |
27 | const Laptop = Loadable({
28 | loader: () => import("pages/Home/Content/Laptop/Laptop"),
29 | loading: Loading
30 | });
31 |
32 | const Appliance = Loadable({
33 | loader: () => import("pages/Home/Content/Appliance/Appliance"),
34 | loading: Loading
35 | });
36 |
37 | export const ContentConfig = {
38 | recommend: Recommend,
39 | cellphone: Cellphone,
40 | smartDevice: SmartDevice,
41 | tv: TV,
42 | laptop: Laptop,
43 | appliance: Appliance,
44 | others: Others
45 | };
46 |
--------------------------------------------------------------------------------
/h5/src/pages/Login/login.module.scss:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | padding: 0 2rem 5rem;
3 | .header-container {
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | align-items: center;
8 | padding-top: 3rem;
9 | padding-bottom: 1rem;
10 | & > img {
11 | width: 4.8rem;
12 | }
13 | & > h4 {
14 | margin-top: 1rem;
15 | font-size: 1.8rem;
16 | color: #000;
17 | font-weight: normal;
18 | }
19 | }
20 | .login-form {
21 | position: relative;
22 | display: flex;
23 | flex-direction: column;
24 | & > input {
25 | margin-bottom: 1rem;
26 | padding: 1.6rem 0;
27 | border: none;
28 | background: none !important;
29 | font-size: 1.8rem;
30 | }
31 | & > input:focus {
32 | outline: none;
33 | }
34 | .login-form-btn {
35 | margin-bottom: 1.4rem;
36 | padding: 1rem 0;
37 | width: 100%;
38 | text-align: center;
39 | border: none;
40 | border-radius: 0.6rem;
41 | overflow: hidden;
42 | background-color: #ff6700 !important;
43 | font-size: 1.8rem;
44 | color: #fff;
45 | }
46 | .icon-eye {
47 | position: absolute;
48 | right: 0.2rem;
49 | bottom: 8rem;
50 | width: 2rem;
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/h5/src/router/AppRouter.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
3 | import PrivateRoute from "./PrivateRoute";
4 | import { Routes } from "./router.config";
5 |
6 | import Login from "pages/Login/Login";
7 | import AppLayout from "components/Layout/AppLayout";
8 | import NotFound from "pages/NotFound/NotFound";
9 | import LandingPage from "pages/LandingPage/LandingPage";
10 | import Search from "pages/Search/Search";
11 | import List from "pages/List/List";
12 |
13 | export default function AppRouter(props) {
14 | return (
15 |
43 | 推荐
44 | 小米智能生活
45 | 5G讨论组
46 | 
47 |
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/weapp/.temp/pages/index/index.js:
--------------------------------------------------------------------------------
1 | import Nerv from "nervjs";
2 | import Taro from "@tarojs/taro-h5";
3 | import { View, Button, Text } from '@tarojs/components';
4 | import { connect } from "@tarojs/redux-h5";
5 |
6 | import { add, minus, asyncAdd } from '../../actions/counter';
7 |
8 | import './index.scss';
9 |
10 | @connect(({ counter }) => ({
11 | counter
12 | }), dispatch => ({
13 | add() {
14 | dispatch(add());
15 | },
16 | dec() {
17 | dispatch(minus());
18 | },
19 | asyncAdd() {
20 | dispatch(asyncAdd());
21 | }
22 | }))
23 | class Index extends Taro.Component {
24 |
25 | config = {
26 | navigationBarTitleText: '首页'
27 | };
28 |
29 | componentWillReceiveProps(nextProps) {
30 | console.log(this.props, nextProps);
31 | }
32 |
33 | componentWillUnmount() {}
34 |
35 | componentDidShow() {}
36 |
37 | componentDidHide() {}
38 |
39 | render() {
40 | return
45 |
46 |
47 |
48 |
49 |
50 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/h5/src/pages/Home/Content/Recommend/Recommend.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Banner from "components/Banner/Banner";
3 | import Cate from "components/Cate/Cate";
4 |
5 | import cate01 from "assets/home/cate/小米秒杀.png";
6 | import cate02 from "assets/home/cate/小米众筹.png";
7 | import cate03 from "assets/home/cate/K30-Pro.png";
8 | import cate04 from "assets/home/cate/以旧换新.png";
9 | import cate05 from "assets/home/cate/超值特卖.png";
10 | import cate06 from "assets/home/cate/智能.png";
11 | import cate07 from "assets/home/cate/笔记本热卖.png";
12 | import cate08 from "assets/home/cate/电视热卖.png";
13 | import cate09 from "assets/home/cate/洗衣机热卖.png";
14 | import cate10 from "assets/home/cate/米粉卡.png";
15 |
16 | const cates = [
17 | {
18 | text: "小米秒杀",
19 | key: "seckill",
20 | icon: cate01
21 | },
22 | {
23 | text: "小米众筹",
24 | key: "crowd",
25 | icon: cate02
26 | },
27 | {
28 | text: "K30-Pro",
29 | key: "miproduct",
30 | icon: cate03
31 | },
32 | {
33 | text: "以旧换新",
34 | key: "recycling",
35 | icon: cate04
36 | },
37 | {
38 | text: "超值特卖",
39 | key: "bargain",
40 | icon: cate05
41 | },
42 | {
43 | text: "智能",
44 | key: "smart",
45 | icon: cate06
46 | },
47 | {
48 | text: "笔记本热卖",
49 | key: "laptop",
50 | icon: cate07
51 | },
52 | {
53 | text: "电视热卖",
54 | key: "tv",
55 | icon: cate08
56 | },
57 | {
58 | text: "洗衣机热卖",
59 | key: "laundry",
60 | icon: cate09
61 | },
62 | {
63 | text: "米粉卡",
64 | key: "sim",
65 | icon: cate10
66 | }
67 | ];
68 |
69 | export default function Recommend() {
70 | return (
71 | <>
72 |
57 |
58 | 
59 |
60 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/h5/src/styles/reset.scss:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html,
7 | body,
8 | div,
9 | span,
10 | applet,
11 | object,
12 | iframe,
13 | h1,
14 | h2,
15 | h3,
16 | h4,
17 | h5,
18 | h6,
19 | p,
20 | blockquote,
21 | pre,
22 | a,
23 | abbr,
24 | acronym,
25 | address,
26 | big,
27 | cite,
28 | code,
29 | del,
30 | dfn,
31 | em,
32 | img,
33 | ins,
34 | kbd,
35 | q,
36 | s,
37 | samp,
38 | small,
39 | strike,
40 | strong,
41 | sub,
42 | sup,
43 | tt,
44 | var,
45 | b,
46 | u,
47 | i,
48 | center,
49 | dl,
50 | dt,
51 | dd,
52 | ol,
53 | ul,
54 | li,
55 | fieldset,
56 | form,
57 | label,
58 | legend,
59 | table,
60 | caption,
61 | tbody,
62 | tfoot,
63 | thead,
64 | tr,
65 | th,
66 | td,
67 | article,
68 | aside,
69 | canvas,
70 | details,
71 | embed,
72 | figure,
73 | figcaption,
74 | footer,
75 | header,
76 | hgroup,
77 | menu,
78 | nav,
79 | output,
80 | ruby,
81 | section,
82 | summary,
83 | time,
84 | mark,
85 | audio,
86 | video {
87 | margin: 0;
88 | padding: 0;
89 | border: 0;
90 | font-size: 100%;
91 | font: inherit;
92 | vertical-align: baseline;
93 | }
94 | /* HTML5 display-role reset for older browsers */
95 | article,
96 | aside,
97 | details,
98 | figcaption,
99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section {
106 | display: block;
107 | }
108 | body {
109 | line-height: 1;
110 | }
111 | ol,
112 | ul {
113 | list-style: none;
114 | }
115 | blockquote,
116 | q {
117 | quotes: none;
118 | }
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 | content: "";
124 | content: none;
125 | }
126 | table {
127 | border-collapse: collapse;
128 | border-spacing: 0;
129 | }
130 |
--------------------------------------------------------------------------------
/h5/src/pages/Search/Header/Header.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useHistory } from "react-router-dom";
3 | import { useDispatch } from "react-redux";
4 | import * as styles from "./header.module.scss";
5 |
6 | import * as actionCreators from "store/actionCreators/index";
7 |
8 | import arrowLeftIcon from "assets/search/arrow-left.png";
9 | import searchIconPath from "assets/home/search.png";
10 |
11 | export default function Header() {
12 | const [inputValue, setInputValue] = useState("");
13 | const dispatch = useDispatch();
14 |
15 | const history = useHistory();
16 |
17 | const goBack = () => {
18 | history.goBack();
19 | };
20 |
21 | const handleInputChange = event => {
22 | const { value } = event.currentTarget;
23 | setInputValue(value);
24 | };
25 |
26 | const handleKeyEnter = event => {
27 | if (event.key === "Enter") {
28 | goToList();
29 | }
30 | };
31 |
32 | const goToList = () => {
33 | if (!inputValue) return false;
34 | history.push(`/list?keyword=${encodeURI(inputValue)}`);
35 | addSearchHistory(inputValue);
36 | };
37 |
38 | const addSearchHistory = history => {
39 | const action = actionCreators.addSearchHistory(history);
40 | dispatch(action);
41 | };
42 |
43 | return (
44 |
45 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/h5/src/pages/Home/Navbar/navbar.module.scss:
--------------------------------------------------------------------------------
1 | @import "styles/global.scss";
2 |
3 | .container {
4 | position: relative;
5 | z-index: 999;
6 | }
7 |
8 | .nav-wrapper {
9 | display: flex;
10 | flex-direction: row;
11 | flex-wrap: nowrap;
12 | width: 100%;
13 | height: 3rem;
14 | background: #f2f2f2;
15 | .nav-item {
16 | flex: 1;
17 | @include centerIt;
18 | color: rgb(116, 116, 116);
19 | border-color: rgb(242, 242, 242);
20 | font-size: 1.4rem;
21 | &-text {
22 | display: block;
23 | height: 3rem;
24 | line-height: 3rem;
25 | }
26 | }
27 | .nav-collapse {
28 | @include centerIt;
29 | flex: 1;
30 | }
31 | .nav-collapse > img {
32 | width: 1.6rem;
33 | }
34 | .active {
35 | color: rgb(237, 91, 0);
36 | border-bottom: 2px solid rgb(237, 91, 0);
37 | }
38 | }
39 |
40 | .nav-layer {
41 | position: absolute;
42 | top: 0;
43 | width: 100%;
44 | box-sizing: border-box;
45 | background-color: #eee;
46 | font-size: 1.5rem;
47 | text-align: left;
48 | padding: 0 1.3rem;
49 | transition: max-height 0.3s ease-in-out;
50 | overflow: hidden;
51 | &-title {
52 | padding-top: 1.4rem;
53 | }
54 | &-arrow-up {
55 | position: absolute;
56 | right: 1.6rem;
57 | top: 0.8rem;
58 | width: 1.6rem;
59 | }
60 | &-btn-group {
61 | display: flex;
62 | justify-content: flex-start;
63 | flex-wrap: wrap;
64 | margin-top: 1.7rem;
65 | &-btn {
66 | display: inline-block;
67 | margin: 0 0.6rem 1rem 0;
68 | width: 7.7rem;
69 | height: 2.7rem;
70 | text-align: center;
71 | line-height: 2.7rem;
72 | border: 1px solid #e5e5e5;
73 | border-radius: 0.4rem;
74 | font-size: 1.3rem;
75 | background-color: #fff;
76 | }
77 | &-btn_active {
78 | background-color: #fde0d5;
79 | border-color: #ff6700;
80 | color: #ff6700;
81 | }
82 | }
83 | }
84 |
85 | .hide {
86 | display: none;
87 | }
88 |
--------------------------------------------------------------------------------
/h5/src/pages/Cart/Cart.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useHistory } from "react-router-dom";
3 | import { useSelector } from "react-redux";
4 | import Header from "components/Header/Header";
5 |
6 | import * as styles from "./cart.module.scss";
7 | import cartIcon from "assets/cart/cart.png";
8 |
9 | const CallForLogin = (props) => {
10 | const { goLogin } = props;
11 |
12 | return (
13 |
46 |
47 |
48 |
55 |
56 |
57 |
58 |
14 | 登录后享受更多优惠
15 | 去登录
16 |
17 | );
18 | };
19 |
20 | const EmptyCart = (props) => {
21 | const { goHome } = props;
22 |
23 | return (
24 |
25 | 
30 |
31 | 购物车还是空的
32 |
33 |
34 | 去逛逛
35 |
36 |
37 | );
38 | };
39 |
40 | export default function Cart() {
41 | const history = useHistory();
42 | const isAuthed = useSelector((state) => state.auth.isAuthed);
43 | const goods = useSelector((state) => state.cart.goods);
44 |
45 | const goBack = () => {
46 | history.goBack();
47 | };
48 |
49 | const goSearch = () => {
50 | history.push("/search");
51 | };
52 |
53 | const goLogin = () => {
54 | history.push("/login");
55 | };
56 |
57 | const goHome = () => {
58 | history.push("/");
59 | };
60 |
61 | return (
62 |
63 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mi-shop-backend",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "app.ts",
6 | "scripts": {
7 | "dev": "set DEBUG=express:* && ts-node-dev --no-notify src/app.ts",
8 | "serve": "tsc && node dist/app.js",
9 | "watch": "tsc -w",
10 | "build": "npm run lint && rimraf dist && tsc",
11 | "lint": "eslint --ext js,ts src/* --quiet --fix",
12 | "git": "git add . && git commit -m",
13 | "postgit": "git pull && git push && git status"
14 | },
15 | "author": "",
16 | "license": "ISC",
17 | "dependencies": {
18 | "@types/agenda": "^2.0.8",
19 | "@types/cors": "^2.8.6",
20 | "@types/express": "^4.17.6",
21 | "@types/hapi__joi": "^17.1.0",
22 | "@types/jsonwebtoken": "^8.5.0",
23 | "@types/mongoose": "^5.7.21",
24 | "@types/node": "^14.0.5",
25 | "agenda": "^3.1.0",
26 | "body-parser": "^1.19.0",
27 | "celebrate": "^12.1.1",
28 | "cors": "^2.8.5",
29 | "dotenv": "^8.2.0",
30 | "express": "^4.17.1",
31 | "husky": "^4.2.5",
32 | "jsonwebtoken": "^8.5.1",
33 | "lint-staged": "^10.2.6",
34 | "mongoose": "^5.9.16",
35 | "reflect-metadata": "^0.1.13",
36 | "typedi": "^0.8.0",
37 | "winston": "^3.2.1"
38 | },
39 | "devDependencies": {
40 | "@typescript-eslint/eslint-plugin": "^3.0.1",
41 | "@typescript-eslint/parser": "^3.0.1",
42 | "eslint": "^7.1.0",
43 | "eslint-config-prettier": "^6.11.0",
44 | "eslint-plugin-prettier": "^3.1.3",
45 | "prettier": "^2.0.5",
46 | "ts-node-dev": "^1.0.0-pre.44",
47 | "typescript": "^3.9.3"
48 | },
49 | "husky": {
50 | "hooks": {
51 | "pre-commit": "lint-staged"
52 | }
53 | },
54 | "lint-staged": {
55 | "*.{js,ts,tsx}": [
56 | "eslint --fix"
57 | ]
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/h5/src/pages/Search/History.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import * as actionCreators from "store/actionCreators/index";
4 | import deleteIcon from "assets/search/delete.png";
5 |
6 | const styles = {
7 | wrapper: {
8 | marginBottom: "3.2rem",
9 | padding: "2rem 1.6rem",
10 | color: "#3C3C3C"
11 | },
12 | header: {
13 | display: "flex",
14 | justifyContent: "space-between"
15 | },
16 | title: {
17 | fontSize: "1.3rem",
18 | fontWeight: 700
19 | },
20 | icon: {
21 | width: "1.4rem",
22 | height: "1.4rem"
23 | },
24 | historyContainer: {
25 | display: "flex",
26 | margin: ".4rem 1.2rem 0 0"
27 | },
28 | tag: {
29 | display: "flex",
30 | justifyContent: "center",
31 | alignItems: "center",
32 | minWidth: "5rem",
33 | boxSizing: "border-box",
34 | margin: "1.2rem 1.2rem 0 0",
35 | padding: ".8rem 1.2rem",
36 | minHeight: "3rem",
37 | borderRadius: "2.8rem",
38 | overflow: "hidden",
39 | whiteSpace: "nowrap",
40 | textOverflow: "ellipsis",
41 | background: "rgba(0,0,0,.04)"
42 | }
43 | };
44 |
45 | export default function History() {
46 | const tags = useSelector(state => state.search.historyList);
47 | const dispatch = useDispatch();
48 |
49 | const removeAllHistory = () => {
50 | const action = actionCreators.removeAllSearchHistory();
51 | dispatch(action);
52 | };
53 |
54 | return (
55 |
56 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/h5/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "h5",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.3.2",
8 | "@testing-library/user-event": "^7.1.2",
9 | "husky": "^4.2.5",
10 | "lint-staged": "^10.2.6",
11 | "node-sass": "^4.14.1",
12 | "prettier": "^2.0.5",
13 | "react": "^16.13.1",
14 | "react-dom": "^16.13.1",
15 | "react-hook-form": "^5.7.2",
16 | "react-loadable": "github:p0o/react-loadable",
17 | "react-redux": "^7.2.0",
18 | "react-router-dom": "^5.1.2",
19 | "react-scripts": "3.4.1",
20 | "react-spinners": "^0.8.3",
21 | "react-swipeable-views": "^0.13.9",
22 | "redux": "^4.0.5",
23 | "redux-persist": "^6.0.0",
24 | "source-map-explorer": "^2.4.2"
25 | },
26 | "scripts": {
27 | "git": "git add . && git commit -m",
28 | "postgit": "git pull && git push && git status",
29 | "start": "react-scripts start",
30 | "build": "react-scripts build",
31 | "lint": "eslint --ext js,ts src/* --quiet --fix",
32 | "analyze": "source-map-explorer 'build/static/js/*.js'",
33 | "test": "react-scripts test",
34 | "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
35 | "eject": "react-scripts eject"
36 | },
37 | "eslintConfig": {
38 | "extends": "react-app"
39 | },
40 | "browserslist": {
41 | "production": [
42 | ">0.2%",
43 | "not dead",
44 | "not op_mini all"
45 | ],
46 | "development": [
47 | "last 1 chrome version",
48 | "last 1 firefox version",
49 | "last 1 safari version"
50 | ]
51 | },
52 | "devDependencies": {
53 | "eslint-config-airbnb": "^18.1.0",
54 | "eslint-config-prettier": "^6.11.0",
55 | "eslint-plugin-jsx-a11y": "^6.2.3",
56 | "eslint-plugin-prettier": "^3.1.3"
57 | },
58 | "husky": {
59 | "hooks": {
60 | "pre-commit": "lint-staged"
61 | }
62 | },
63 | "lint-staged": {
64 | "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
65 | "prettier --write"
66 | ]
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/weapp/.temp/app.js:
--------------------------------------------------------------------------------
1 | import Taro, { Component } from "@tarojs/taro-h5";
2 | import { Provider } from "@tarojs/redux-h5";
3 |
4 | import configStore from "./store/index";
5 |
6 | import './app.scss';
7 |
8 | // 如果需要在 h5 环境中开启 React Devtools
9 | // 取消以下注释：
10 | // if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
11 | // require('nerv-devtools')
12 | // }
13 |
14 | import Nerv from 'nervjs';
15 | import { Router, createHistory, mountApis } from '@tarojs/router';
16 | Taro.initPxTransform({
17 | "designWidth": 750,
18 | "deviceRatio": {
19 | "640": 1.17,
20 | "750": 1,
21 | "828": 0.905
22 | }
23 | });
24 |
25 | const _taroHistory = createHistory({
26 | mode: "hash",
27 | basename: "/",
28 | customRoutes: {},
29 | firstPagePath: "/pages/index/index"
30 | });
31 |
32 | mountApis({
33 | "basename": "/",
34 | "customRoutes": {}
35 | }, _taroHistory);
36 | const store = configStore();
37 |
38 | class App extends Component {
39 |
40 | config = {
41 | pages: ["/pages/index/index"],
42 | window: {
43 | backgroundTextStyle: 'light',
44 | navigationBarBackgroundColor: '#fff',
45 | navigationBarTitleText: 'WeChat',
46 | navigationBarTextStyle: 'black'
47 | }
48 | };
49 |
50 | componentDidMount() {
51 | this.componentDidShow();
52 | }
53 |
54 | componentDidShow() {}
55 |
56 | componentDidHide() {}
57 |
58 | componentDidCatchError() {}
59 |
60 | // 在 App 类中的 render() 函数没有实际作用
61 | // 请勿修改此函数
62 | render() {
63 | return
57 | 搜索历史
58 | 
64 |
65 |
66 | {tags.map((tag, index) => (
67 |
68 | {tag}
69 |
70 | ))}
71 |
72 | -
60 | {tabs.map((tab, index) => (
61 |
62 |
124 |
141 | );
142 | }
143 |
--------------------------------------------------------------------------------
/h5/src/utils/request/index.js:
--------------------------------------------------------------------------------
1 | /** 主要看下涉及哪些点
2 | * 01.taro从0到1项目架构课程介绍
3 | 02.初始化项目流程介绍、目录设计
4 | 03.让alias别名解决路径引用的烦恼
5 | 04.请求api返回redux的状态流程
6 | 05.封装request get请求，给url添加时间戳防止浏览器缓存
7 | 06.封装request post Content-Type 分类请求
8 | 07.把taro-advance脚手架推送到私有仓库
9 | 08.弱网请求失败时自动发起api重试
10 | 09.异常日志上报封装设计思路
11 | 10.异常日志上报封装，五种级别输出。
12 | 11.上报收集日志平台系统介绍
13 | 12.实战接入日志平台
14 | 13.深度序列化错误error控制台上报
15 | 14.登录流程讲解（前端和后端实现流程）
16 | 15.登录实现详细讲解（token附加到请求header头）
17 | 16.用户授权后更新用户信息流程
18 | 17.设计createApiAction自动dispatch优化开发体验
19 | 18.改造actionType支持庞大业务
20 | 19.Action三种ActionType的集合
21 | 20.简化reducers的swich繁琐操作
22 | 21.增加request的状态
23 | 22.课程总结
24 | */
25 |
26 | import { REQUEST_METHOD, BASE_URL } from "./config";
27 |
28 | /**
29 | * 封装网路请求，基于fetch
30 | * 注入token
31 | */
32 | export class Request {
33 | /**
34 | * 发起请求
35 | * @param {*} url
36 | * @param {*} config
37 | */
38 | async fetchData(url, config) {
39 | let result;
40 | const Host =
41 | process.env.NODE_ENV === "development"
42 | ? process.env.REACT_APP_DEV_HOST
43 | : (process.env.REACT_APP_PROD_HOST = "huiduoduo.online");
44 | const requestUrl = `${Host}${BASE_URL}${url}`;
45 | const { method, contentType, token, body } = config;
46 | // 创建headers
47 | const headers = new Headers({
48 | token: !token ? sessionStorage.getItem("MI_SHOP_TOKEN") : token,
49 | "Content-Type": contentType
50 | });
51 | // 根据请求方法判断
52 | if (!method || method === REQUEST_METHOD.GET) {
53 | result = await fetch(requestUrl, {
54 | headers
55 | });
56 | } else if (method === REQUEST_METHOD.POST) {
57 | result = await fetch(requestUrl, {
58 | body: JSON.stringify(body),
59 | headers,
60 | method
61 | });
62 | } else {
63 | result = await fetch(requestUrl, {
64 | body: JSON.stringify(body),
65 | headers,
66 | method
67 | });
68 | }
69 | return this.handleRequest(result);
70 | }
71 |
72 | /**
73 | * 处理相应
74 | * @param {*} result
75 | */
76 | async handleRequest(result) {
77 | const parsedRequest = await this.parseRequest(result);
78 | // 如果res.ok，则请求成功
79 | if (result.ok) {
80 | return parsedRequest;
81 | }
82 | // 请求失败，返回解析之后的失败的数据
83 | const error = parsedRequest;
84 | throw error;
85 | }
86 |
87 | /**
88 | * 根据Content-Type解析返回内容
89 | * @param {*} result
90 | */
91 | async parseRequest(result) {
92 | const contentType = result.headers.get("Content-Type");
93 | if (!contentType) return await result.text();
94 | if (contentType.indexOf("json") > -1) {
95 | return await result.json();
96 | }
97 | if (contentType.indexOf("text") > -1) {
98 | return await result.text();
99 | }
100 | if (contentType.indexOf("form") > -1) {
101 | return await result.formData();
102 | }
103 | if (contentType.indexOf("video") > -1) {
104 | return await result.blob();
105 | }
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/h5/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `yarn start`
8 |
9 | Runs the app in the development mode.-
125 | {cates.map(cate => (
126 |
- setCateInStore(cate.key, cate.anchor)} 135 | > 136 | {cate.text} 137 | 138 | ))} 139 |
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /h5/src/pages/Home/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useSelector, useDispatch } from "react-redux"; 3 | import * as actionCreator from "store/actionCreators/index"; 4 | import * as styles from "./navbar.module.scss"; 5 | import arrowUpIcon from "assets/home/arrow-down.png"; 6 | import arrowDownIcon from "assets/home/arrow-up.png"; 7 | 8 | const navItems = [ 9 | { 10 | text: "推荐", 11 | key: "recommend" 12 | }, 13 | { 14 | text: "手机", 15 | key: "cellphone" 16 | }, 17 | { 18 | text: "智能", 19 | key: "smartDevice" 20 | }, 21 | { 22 | text: "电视", 23 | key: "tv" 24 | }, 25 | { 26 | text: "笔记本", 27 | key: "laptop" 28 | }, 29 | { 30 | text: "家电", 31 | key: "appliance" 32 | }, 33 | { 34 | text: "生活周边", 35 | key: "others" 36 | } 37 | ]; 38 | 39 | export default function Navbar() { 40 | // 获取nav状态 41 | const selector = useSelector(state => state.home.nav); 42 | const dispatch = useDispatch(); 43 | 44 | const [collapse, setCollapse] = useState(false); 45 | 46 | return ( 47 |
48 |
104 | );
105 | }
106 |
107 | const getSlicedArray = array => {
108 | const newArr = array.length > 6 ? array.slice(0, 6) : array;
109 | return newArr;
110 | };
111 |
--------------------------------------------------------------------------------
/h5/src/pages/Category/RightPanel/RightPanel.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as styles from "./rightPanel.module.scss";
3 |
4 | import banner01 from "assets/category/banner01.jpg";
5 | import pic01 from "assets/category/小米10 青春.png";
6 | import pic02 from "assets/category/K30 Pro 变焦版.png";
7 | import pic03 from "assets/category/K30 Pro.png";
8 |
9 | const SectionComponent = (props) => {
10 | const { sections } = props;
11 |
12 | return (
13 | <>
14 | {sections.map((section) => (
15 |
49 | {getSlicedArray(navItems).map((item, index) => (
50 |
75 |
54 | dispatch(actionCreator.selectNavActionCreator(item.key))
55 | }
56 | >
57 |
64 | {item.text}
65 |
66 |
67 | ))}
68 | setCollapse(true)}
71 | >
72 | 
73 |
74 |
76 | 
setCollapse(false)}
82 | />
83 |
103 | 全部
77 |
84 | {navItems.map((nav, index) => (
85 |
95 | dispatch(actionCreator.selectNavActionCreator(nav.key))
96 | }
97 | >
98 | {nav.text}
99 |
100 | ))}
101 |
102 |
16 | {section.bannerPath ? (
17 | 
22 | ) : null}
23 |
39 | ))}
40 |
41 | );
42 | };
43 |
44 | export default function RightPanel() {
45 | const sections = [
46 | {
47 | bannerPath: banner01,
48 | key: "section01",
49 | title: "手机",
50 | anchor: "新品",
51 | items: [
52 | {
53 | key: "section01-item01",
54 | imgUrl: pic01,
55 | text: "小米10 青春",
56 | },
57 | {
58 | key: "section01-item02",
59 | imgUrl: pic02,
60 | text: "K30 Pro 变焦版",
61 | },
62 | {
63 | key: "section01-item03",
64 | imgUrl: pic03,
65 | text: "K30 Pro",
66 | },
67 | {
68 | key: "section01-item04",
69 | imgUrl: pic01,
70 | text: "小米10 青春",
71 | },
72 | {
73 | key: "section01-item05",
74 | imgUrl: pic02,
75 | text: "K30 Pro 变焦版",
76 | },
77 | {
78 | key: "section01-item06",
79 | imgUrl: pic03,
80 | text: "K30 Pro",
81 | },
82 | {
83 | key: "section01-item07",
84 | imgUrl: pic01,
85 | text: "小米10 青春",
86 | },
87 | ],
88 | },
89 | {
90 | bannerPath: null,
91 | key: "section02",
92 | title: "电脑",
93 | anchor: "众筹",
94 | items: [
95 | {
96 | key: "section02-item01",
97 | imgUrl: pic01,
98 | text: "小米10 青春",
99 | },
100 | {
101 | key: "section02-item02",
102 | imgUrl: pic02,
103 | text: "K30 Pro 变焦版",
104 | },
105 | {
106 | key: "section02-item03",
107 | imgUrl: pic03,
108 | text: "K30 Pro",
109 | },
110 | {
111 | key: "section02-item04",
112 | imgUrl: pic01,
113 | text: "小米10 青春",
114 | },
115 | {
116 | key: "section02-item05",
117 | imgUrl: pic02,
118 | text: "K30 Pro 变焦版",
119 | },
120 | {
121 | key: "section02-item06",
122 | imgUrl: pic03,
123 | text: "K30 Pro",
124 | },
125 | {
126 | key: "section02-item07",
127 | imgUrl: pic01,
128 | text: "小米10 青春",
129 | },
130 | ],
131 | },
132 | ];
133 |
134 | return (
135 |
24 | {section.title}
25 |
26 |
27 | {section.items.map((item) => (
28 |
38 |
29 | 
34 | {item.text}
35 |
36 | ))}
37 |
34 | {item.text}
35 |
136 |
138 | );
139 | }
140 |
--------------------------------------------------------------------------------
/server/src/services/auth.service.ts:
--------------------------------------------------------------------------------
1 | import { Service, Inject } from 'typedi';
2 | import jwt from 'jsonwebtoken';
3 | import crypto from 'crypto';
4 | import config from '../config';
5 | import logger from '../loaders/logger';
6 | import userModel from '../models/user.model';
7 | import { IUser, UserDTO } from '../interfaces/IUser';
8 |
9 | @Service()
10 | export default class AuthSerice {
11 | // random salt
12 | private getRandomSalt() {
13 | return Math.random().toString().slice(2, 5);
14 | }
15 |
16 | // encrypt pwd via md5 with salt
17 | private encryptPwd(pwd: string, salt: string) {
18 | const saltedPwd = `${pwd}:${salt}`;
19 |
20 | // 加盐密码的md5值
21 | const md5 = crypto.createHash('md5');
22 | const result = md5.update(saltedPwd).digest('hex');
23 | return result;
24 | }
25 |
26 | // generate jwt
27 | private generateJwt(user: any) {
28 | // 设置0.5小时过期
29 | const today = new Date();
30 | const exp = new Date(today);
31 | exp.setHours(today.getHours() + 0.5);
32 | logger.silly(`Sign JWT for userId: ${user._id}`);
33 | const jwtSecret =
74 |
133 | );
134 | }
135 |
--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Basic Options */
4 | // "incremental": true, /* Enable incremental compilation */
5 | "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
6 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
7 | // "lib": [], /* Specify library files to be included in the compilation. */
8 | // "allowJs": true, /* Allow javascript files to be compiled. */
9 | // "checkJs": true, /* Report errors in .js files. */
10 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */
12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
13 | "sourceMap": true /* Generates corresponding '.map' file. */,
14 | // "outFile": "./", /* Concatenate and emit output to single file. */
15 | "outDir": "./dist" /* Redirect output structure to the directory. */,
16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
17 | // "composite": true, /* Enable project compilation */
18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
19 | // "removeComments": true, /* Do not emit comments to output. */
20 | // "noEmit": true, /* Do not emit outputs. */
21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
24 |
25 | /* Strict Type-Checking Options */
26 | "strict": true /* Enable all strict type-checking options. */,
27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
28 | // "strictNullChecks": true, /* Enable strict null checks. */
29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
34 |
35 | /* Additional Checks */
36 | // "noUnusedLocals": true, /* Report errors on unused locals. */
37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
40 |
41 | /* Module Resolution Options */
42 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
43 | // "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
44 | // "paths": {} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
46 | // "typeRoots": [], /* List of folders to include type definitions from. */
47 | // "types": [], /* Type declaration files to be included in compilation. */
48 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
49 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
52 |
53 | /* Source Map Options */
54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
58 |
59 | /* Experimental Options */
60 | "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
61 | "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */
62 | },
63 | // "include": ["src"],
64 | "exclude": ["node_modules"]
65 | }
66 |
--------------------------------------------------------------------------------
75 | 
76 |
78 | 小米帐号登录/注册
77 |
79 |
131 |
132 |