change:

1. 后台界面布局制作

components/layout/adminLayout.vue

@@ -0,0 +1,198 @@
+<script>
+
+export default {
+  name: "adminLayout",
+  props: {
+    headerHeight: {
+      default: 35
+    },
+    sideBarWidth: {
+      default: 270
+    },
+    sideBarHeight: {
+      default: 35
+    },
+    sidebarMenus: {
+      default(){
+        return []
+      }
+    },
+    interactSideBar: {
+      default: true
+    },
+    logoTitle: {
+      default: ''
+    },
+    headerMenus: {
+      default(){
+        return []
+      }
+    },
+    headerMenuKey: {
+      default: ''
+    },
+    userName: {
+      default: ''
+    }
+  },
+  data(){
+    return {
+      isShowSideBar: true,
+      headerStyle: '',
+      boxStyle: '',
+      sideBarStyle: '',
+      conStyle: '',
+    }
+  },
+  beforeMount() {
+    this.init_computedStyle();
+  },
+  methods:{
+    /**
+     * 计算dom元素样式
+     */
+    init_computedStyle(){
+      let headerStyle= ``,
+          boxStyle = ``,
+          sideBarStyle = ``,
+          conStyle = ``;
+      let nextSideBarWidth = this.isShowSideBar?this.sideBarWidth:this.sideBarHeight;
+      headerStyle+=`height:${this.headerHeight}px`;
+      boxStyle += `height:calc(100% - ${this.headerHeight}px);` ;
+      sideBarStyle += `width:${nextSideBarWidth}px;`;
+      conStyle += `width:calc(100% - ${nextSideBarWidth}px);` ;
+      this.headerHeight = headerStyle;
+      this.boxStyle = boxStyle;
+      this.sideBarStyle = sideBarStyle;
+      this.conStyle = conStyle;
+    },
+    switchHandle(){
+      if(!this.interactSideBar){return console.log('不允许交互sidebar');}
+      this.isShowSideBar = !this.isShowSideBar;
+      this.init_computedStyle();
+    }
+  }
+}
+</script>
+
+<template>
+<!-- 管理员控制台布局 永久性头部,可伸缩侧边栏-->
+
+<div class="lay-con">
+<!--  头部横条 -->
+  <div class="lay-header" :style="headerHeight" >
+    <div class="lay-logo">
+      <slot name="logo">
+        <h1>{{logoTitle}}</h1>
+      </slot>
+    </div>
+    <div class="lay-menus">
+      <div class="menus">
+        <span
+          v-for="item in headerMenus"
+          :key="item.key"
+          :class="`menu ${headerMenuKey===item.key?'':''}`"
+        >
+          <a :href="item.href">{{item.text}}</a>
+        </span>
+      </div>
+      <div class="bell">
+        <slot name="bell"> </slot>
+      </div>
+      <div class="user">
+        <slot name="user">
+          <span>{{userName}}</span>
+        </slot>
+      </div>
+
+    </div>
+  </div>
+<!--  内容部分-->
+  <div class="lay-box" :style="boxStyle">
+    <div class="lay-sideBar" :style="sideBarStyle">
+      <div class="lay-sideBar-control" @click="switchHandle">
+        {{isShowSideBar?'&Colone;':'&ngt;'}}
+      </div>
+    </div>
+    <div class="lay-content" :style="conStyle">
+      <slot></slot>
+    </div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+.lay-con {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #fff;
+  position: relative;
+}
+.lay-header{
+  background-color: #59aee3;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+}
+.lay-header > *{
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.lay-logo{
+  margin-left: 15px;
+  margin-right: 15px;
+  box-sizing: border-box;
+}
+.lay-menus{
+  justify-content: end;
+}
+.lay-menus .menus{
+  display: flex;
+  padding: 0 5px;
+}
+.lay-menus .menus .menu{
+  padding: 5px 15px;
+}
+.lay-menus .menus .menu:hover{
+  color: #086fb6;
+}
+.lay-box {
+  width: 100%;
+  display: flex;
+}
+.lay-box > *{
+  transition: width .7s;
+  height: 100%;
+  position: relative;
+}
+.lay-sideBar{
+
+}
+.lay-content{
+  overflow: hidden;
+  background-color: #d5d5d5;
+}
+.lay-sideBar-control{
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  left: 100%;
+  top: 0px;
+  border-radius: 3px;
+  border: 1px solid black;
+  z-index: 999;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+}
+.lay-sideBar-control:hover{
+  border-color: #f0ad4e;
+  background-color: #f0ad4e;
+  color: #fff;
+}
+</style>

map/adminSideBar.js

@@ -0,0 +1,42 @@
+const adminMenus = [
+  {
+    title: '首页展示管理',
+    icon: 'index',
+    child: [
+      {
+        key: 'carousel',
+        title: '轮播图管理',
+        path: '/manger/index/carousel'
+      },
+      {
+        key: 'showing',
+        title: '展示块',
+        path: '/manger/index/showing'
+      },
+      {
+        key: 'indexProduct',
+        title: '展品管理',
+        path: '/manger/index/product'
+      },
+      {
+        key: 'indexNews',
+        title: '新闻中心管理',
+        path: '/manger/index/news'
+      },
+    ],
+    title: '产品管理',
+    icon: 'product',
+    child: [
+      {
+        key: 'searchProduct',
+        title: '产品检索',
+        path: '/manger/product/search'
+      },
+      {
+        key: 'addProduct',
+        title: '新增产品',
+        path: '/manger/product/add'
+      },
+    ],
+  }
+]

package.json

@@ -11,8 +11,11 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.12.2",
     "ant-design-vue": "^1.6.5",
+    "body-parser": "^1.20.2",
     "core-js": "^3.6.5",
     "express": "^4.17.1",
+    "express-session": "^1.17.3",
+    "formidable": "^3.5.0",
     "log4js": "^6.9.1",
     "mysql2": "^3.4.3",
     "nuxt": "^2.16.3",

pages/manger/index.vue

@@ -0,0 +1,41 @@
+<script>
+
+
+import AdminLayout from "~/components/layout/adminLayout.vue";
+
+export default {
+  name: "mangerIndex",
+  components: {AdminLayout},
+  data(){
+    return {
+      headerMenus:[
+        {
+          text: '前往首页',
+          href: '/',
+          key: 'toIndex'
+        }
+      ],
+
+
+    }
+  }
+}
+</script>
+
+<template>
+<div class="w-full">
+<admin-layout
+  :logoTitle="'深圳合方圆站点管理'"
+  :header-menus="headerMenus"
+>
+  test
+  <div class="abc">
+    bhh
+  </div>
+</admin-layout>
+</div>
+</template>
+
+<style scoped>
+
+</style>

pages/product/index.vue

@@ -1,18 +1,4 @@
-<template>
-  <div class="">
-    <lucency-header :lang="lang" page-key="product" :is-phone="isPhone"/>
-<!--    推荐广告-->
-    <product-banner :lang="lang" />
-<!--    产品类别 -->
-    <product-types :lang="lang" :type="type"></product-types>
-<!--    产品列表 -->
-    <product-list :lang="lang" :product-list="products"></product-list>
-    <page-select :page="page" :count="nowCount" :total="nowTotal"></page-select>
-    <default-footer :lang="lang"/>
 
-    <site-bar wechat-src="/image/wechat.jpg"></site-bar>
-  </div>
-</template>
 
 <script>
 import langMap from "@/map/langMap";
@@ -166,6 +152,22 @@ export default {
 }
 </script>
 
+<template>
+  <div class="">
+    <lucency-header :lang="lang" page-key="product" :is-phone="isPhone"/>
+    <!--    推荐广告-->
+    <product-banner :lang="lang" />
+    <!--    产品类别 -->
+    <product-types :lang="lang" :type="type"></product-types>
+    <!--    产品列表 -->
+    <product-list :lang="lang" :product-list="products"></product-list>
+    <page-select :page="page" :count="nowCount" :total="nowTotal"></page-select>
+    <default-footer :lang="lang"/>
+
+    <site-bar wechat-src="/image/wechat.jpg"></site-bar>
+  </div>
+</template>
+
 <style scoped>
 
 </style>

server/index.js

@@ -1,8 +1,26 @@
 const express = require('express');
+const session = require('express-session');
+const bodyParser = require('body-parser');
 
 const router = require('./router/index');
 const app = express();
 const log = require('./logger').logger('app', 'info');
+
+app.use(
+  session({
+    secret: 'hfy',
+    name: 'session', //这里的name值得是cookie的name，默认cookie的name是：connect.sid
+    cookie: { maxAge: 1800000 }, //过期时间半小时
+    keys: ['owner', 'captcha'], // 用户登陆信息,验证码字段
+    resave: true,
+    saveUninitialized: true,
+  })
+);
+
+app.use(bodyParser.urlencoded({ limit: '10mb', extended: true }));
+app.use(bodyParser.json({ limit: '10mb' }));
+
+
 app.use((req, res, next)=>{
   log.info(`${req.method} To ${req.url}`);
   next();

yarn.lock

@@ -2422,6 +2422,11 @@ array.prototype.reduce@^1.0.5:
     es-array-method-boxes-properly "^1.0.0"
     is-string "^1.0.7"
 
+asap@^2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
+
 asn1.js@^5.2.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
@@ -2634,6 +2639,24 @@ body-parser@1.20.1:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
+body-parser@^1.20.2:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
+  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.5"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.11.0"
+    raw-body "2.5.2"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -3296,7 +3319,7 @@ content-disposition@0.5.4, content-disposition@~0.5.2:
   dependencies:
     safe-buffer "5.2.1"
 
-content-type@^1.0.4, content-type@~1.0.4:
+content-type@^1.0.4, content-type@~1.0.4, content-type@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
@@ -3311,6 +3334,11 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
+cookie@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+
 cookie@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
@@ -3824,6 +3852,14 @@ devalue@^2.0.1:
   resolved "https://registry.yarnpkg.com/devalue/-/devalue-2.0.1.tgz#5d368f9adc0928e47b77eea53ca60d2f346f9762"
   integrity sha512-I2TiqT5iWBEyB8GRfTDP0hiLZ0YeDJZ+upDxjBfOC2lebO5LezQMv7QvIUTzdb64jQyAKLf1AHADtGN+jw6v8Q==
 
+dezalgo@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.4.tgz#751235260469084c132157dfa857f386d4c33d81"
+  integrity sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==
+  dependencies:
+    asap "^2.0.0"
+    wrappy "1"
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -4291,6 +4327,20 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+express-session@^1.17.3:
+  version "1.17.3"
+  resolved "https://registry.yarnpkg.com/express-session/-/express-session-1.17.3.tgz#14b997a15ed43e5949cb1d073725675dd2777f36"
+  integrity sha512-4+otWXlShYlG1Ma+2Jnn+xgKUZTMJ5QD3YvfilX3AcocOAbIkVylSWEklzALe/+Pu4qV6TYBj5GwOBFfdKqLBw==
+  dependencies:
+    cookie "0.4.2"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~2.0.0"
+    on-headers "~1.0.2"
+    parseurl "~1.3.3"
+    safe-buffer "5.2.1"
+    uid-safe "~2.1.5"
+
 express@^4.17.1:
   version "4.18.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
@@ -4540,6 +4590,15 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==
 
+formidable@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/formidable/-/formidable-3.5.0.tgz#3605a9325130d05c550d57be8e81d1757baa12d6"
+  integrity sha512-WwsMWvPmY+Kv37C3+KP3A+2Ym1aZoac4nz4ZEe5z0UPBoCg0O/wHay3eeYkZr4KJIbCzpSUeno+STMhde+KCfw==
+  dependencies:
+    dezalgo "^1.0.4"
+    hexoid "^1.0.0"
+    once "^1.4.0"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -5009,6 +5068,11 @@ he@1.2.0, he@^1.1.1, he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hexoid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hexoid/-/hexoid-1.0.0.tgz#ad10c6573fb907de23d9ec63a711267d9dc9bc18"
+  integrity sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -8104,6 +8168,11 @@ raf@^3.4.0:
   dependencies:
     performance-now "^2.1.0"
 
+random-bytes@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/random-bytes/-/random-bytes-1.0.0.tgz#4f68a1dc0ae58bd3fb95848c30324db75d64360b"
+  integrity sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ==
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -8134,6 +8203,16 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-body@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
 raw-loader@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
@@ -9453,6 +9532,13 @@ uglify-js@^3.5.1:
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c"
   integrity sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==
 
+uid-safe@~2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/uid-safe/-/uid-safe-2.1.5.tgz#2b3d5c7240e8fc2e58f8aa269e5ee49c0857bd3a"
+  integrity sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==
+  dependencies:
+    random-bytes "~1.0.0"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"