网上书店 Vue+Spring boot+H5+Uniapp

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

目录

`

网上书店 Vue+Spring boot+H5+Uniapp

---

一、项目模块

本项目 是一个基于Spring Boot和Vue.js的web商城系统，包含了商城的PC端后台管理系统,手机H5和uniapp版本。

二、项目模块

包含了后台管理功能和手机端商城业务功能

基础模块，部门管理，用户管理，角色管理，菜单管理，权限分配，参数管理，数据字典管理，定时任务管理，操作日志shi，登录日志，cms内容管理，消息管理：配置消息模板，发送短信，邮件消息，商城功能，会员管理，商品类别，商品管理
订单管理，购物车，banner管理，收藏列表
手机端 -完整的商城购物功能 模拟支付

三 技术选型

核心框架：Spring Boot
数据库层：Spring data jpa
数据库连接池：Druid
缓存：Ehcache
前端：后台管理基于element，手机端界面基于vant

四、运行环境

Intellij IDEA,
Mysql5.7
,Maven，J
DK8
vscode
node16.17.0
HbuildX

五 .PC登录页面代码

代码如下（示例）：

<template>
  <div class="login-container"  style="background-image: url(img/bg.jpg);background-size: 100% 100%;">

    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">

      <div class="title-container">

        <!--$t('login.title')这些都是在lang文件夹下zh.js中定义好的-->

        <h3 class="title">{{ $t('login.title') }}</h3>
        <lang-select class="set-language"/>
      </div>

      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          v-model="loginForm.username"
          :placeholder="$t('login.username')"
          name="username"
          type="text"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          :type="pwdType"
          v-model="loginForm.password"
          :placeholder="$t('login.password')"
          name="password"
          auto-complete="on"
          @keyup.enter.native="handleLogin" />
        <span class="show-pwd" @click="showPwd">
          <svg-icon icon-class="eye" />
        </span>
      </el-form-item>

      <el-button :loading="loading" type="info" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>

      <div style="position:relative">
        <div class="tips">
          <span>{{ $t('login.username') }} : admin</span>
          <span>{{ $t('login.password') }} : admin</span>
        </div>
        <div class="tips">
          <span style="margin-right:18px;">{{ $t('login.username') }} : developer</span>
          <span>{{ $t('login.password') }} : developer</span>
        </div>
      </div>
    </el-form>


  </div>
</template>

<script src="./login.js"></script>
<style rel="stylesheet/scss" lang="scss" src="./login.scss"></style>

六 .H5登录页面代码

代码如下（示例）：

<template>
    <div>
        <img class="user-poster" src="@/assets/img/banner.jpg" >


            <van-cell-group>
            <van-field
                    v-model="mobile"
                    required
                    clearable
                    label="账号"
                    placeholder="请输入手机号"
            />
            </van-cell-group>
            <van-cell-group v-show="show1">
                <van-field
                        v-model="smsCode"
                        center
                        clearable
                        label="短信验证码"
                        placeholder="请输入短信验证码"
                >
                    <van-button slot="button" size="small" type="primary" @click="sendSms" v-show="!hasSendSms">发送验证码</van-button>
                    <van-button slot="button" size="small" disabled type="primary" v-show="hasSendSms">{{second}}秒后重新获取</van-button>
                </van-field>
            </van-cell-group>
            <van-cell-group  v-show="show2">
            <van-field
                    v-model="password"
                    type="password"
                    label="密码"
                    placeholder="请输入密码"
                    required
            />

        </van-cell-group>
            <div class="button-group">
            <van-button type="warning" size="large"   v-show="show1" @click="loginOrRegister">立即登录/注册</van-button>

            <van-button type="info" size="large"   v-show="show1" @click="toLoginByPassword">用户名密码登录</van-button>

            <van-button type="warning" size="large"  v-show="show2"  @click="loginByPass">登录</van-button>


        <van-button type="info" size="large"  v-show="show2" @click="toRegister">手机短信登录/注册</van-button>
            </div>
        <van-tabbar v-model="activeFooter">
            <van-tabbar-item icon="home-o"  replace to="/index">首页</van-tabbar-item>
            <van-tabbar-item icon="search"  replace to="/search">发现</van-tabbar-item>
            <van-tabbar-item icon="cart-o"  replace to="/cart">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o"  replace to="/user">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script src="./login.js"></script>

<style lang="less">
    .button-group{
     margin: 15px;
        .van-button{
            margin-top: 10px;
        }
    }
    .user {
        &-poster {
            width: 100%;
            display: block;
        }

        &-group {
            margin-bottom: 15px;
        }

        &-links {
            padding: 15px 0;
            font-size: 12px;
            text-align: center;
            background-color: #fff;

            .van-icon {
                display: block;
                font-size: 24px;
            }
        }
    }
</style>

---

运行效果

源码

https://pan.baidu.com/s/1HdmGCmAMFIQu37NKvZU0Bw?pwd=3212
提取码：3212