基于SpringBoot vue的美妆商城平台

最新推荐文章于 2024-06-16 11:14:45 发布
原创 最新推荐文章于 2024-06-16 11:14:45 发布 · 576 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#spring boot #vue.js #后端

本文介绍了使用Java、SpringBoot、Mybatis和Vue技术开发的美妆商城平台，包括后端数据库操作和前端项目的启动流程，以及支付宝沙箱支付的整合。

一，安装步骤

后端项目启动步骤:
1.先把sql导入数据库
2.把后台项目导入编辑器
3.修改数据库配置
4.启动项目
 
前端项目启动步骤:

1.打开Vue-shop目录,在这个文件夹里面加入cmd目录窗口
2.运行启动vue项目目录(需先安装nodejs软件)

先后执行下面命令
npm install
npm run dev 
执行成功之后,命令窗口会显示前端网站信息

【559】基于SpringBoot vue的美妆商城平台源码和论文含支付宝沙箱支付

      在查阅了许多网站开发的相关资料的基础上，提出了基于Java技术，采用B/S构建结构，选用Spring Boot框架，Mybatis框架，运用VUE技术，UML技术和MySQL数据库来开发一个美妆商城网站，不同于市面上的京东、淘宝等购物网站，而是针对美妆产品购物的新型美妆购物商城，包含管理员、用户模块实现了商城的基本功能，使得美妆产品美妆的交易更加方便，有效，成本更低，将成为美妆产品美妆销售的崭新模式，具有一定的实际意义和推广价值。

关键词：美妆商城    Java    Spring Boot框架    MySQL

<template>
  <div class="app-container">
    <!--  <el-table
      :data="tableData"
      style="width: 100%"> -->

    收件人:{{buy.name}}<hr />
    手机号:{{buy.tel}}<hr />
  收货地址:{{buy.address}}


    <el-table
      style="width: 100%"
      :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
      <el-table-column  label="商品">
          <template slot-scope="scope">
          <el-image
      style="width: 100px; height: 100px"
      :src="url+scope.row.thing.img"
      fit="contain"></el-image>
          </template>
      </el-table-column>
      <el-table-column
        prop="thing.name"
        label="商品名称"
      ></el-table-column>
      <el-table-column prop="thing.thingtype.type" label="类型"></el-table-column>
      <el-table-column prop="thing.thingtype2.type" label="区域"></el-table-column>
      <el-table-column prop="thing.price" label="价格"></el-table-column>
    </el-table>

    <div class="tabListPage">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="sum"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { GetList, State } from "@/api/buylist";
export default {
  data() {
    return {
        url:process.env.VUE_APP_BASE_API,
      tableData: [],
      pageSize: 20,
      currentPage: 1,
      sum: 0,
      buy:{
        name:'',
        tel:'',
        address:''
      },
      keydata:{
        buyId:this.$route.query.buyId
      }
    };
  },
  created() {

    this.Bind();
  },
  methods: {
    async Bind() {
      await GetList(this.keydata).then((list) => {
        this.tableData = list.data.buylist;
        const{name,tel,address}=list.data.buy.client;
        this.buy.name=name
        this.buy.tel=tel
        this.buy.address=address
        this.sum = this.tableData.length;
      });
    },
    handleCurrentChange(val) {
      //翻页事件
      this.currentPage = val;
      this.Bind();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


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

      <div class="title-container">
        <h3 class="title">商城管理后台</h3>
      </div>

      <el-form-item prop="login">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          ref="login"
          v-model="loginForm.login"
          placeholder="Username"
          name="login"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="pwd">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          :key="passwordType"
          ref="pwd"
          v-model="loginForm.pwd"
          :type="passwordType"
          placeholder="Password"
          name="pwd"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>


      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">立即登录</el-button>


    </el-form>


  </div>
</template>

<script>
import { adminmenu } from '@/router/adminrouter';
const defaultMod = {
  login: '',
  pwd: '',
  tel:'',
  mail:'',
  address:'',
  sex:'男',
  age: 0,
  xueli: '',
  name:''
};

export default {
  name: 'Login',
  data() {
    return {
      setmes: Object.assign({}, defaultMod),
      loginForm: {
        login: '',
        pwd: '',
        author: 'admin'
      },
      loginRules: {
        login: [{ required: true, trigger: 'blur' }],
        pwd: [{ required: true, trigger: 'blur' }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.pwd.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('admin/loginin', this.loginForm).then(res => {

        switch (this.$store.state.admin.author) {
            case 'admin':
              // this.$router.options.addRoutes(adminmenu);
              this.$router.options.routes = adminmenu// 配置管理员路由
              this.$router.addRoutes(adminmenu)// 动态加载路由
              break
            default:
              break
          }
          this.$router.push({name:'Dashboard'})
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg:#283443;
$light_gray:#fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.java</groupId>
    <artifactId>shop</artifactId>
    <version>1.0-SNAPSHOT</version>
    <description>shop</description>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.0.RELEASE</version>
    </parent>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <com.alibaba.fastjson>1.2.70</com.alibaba.fastjson>
        <org.projectlombok.lombok>1.16.6</org.projectlombok.lombok>
        <mysql.mysql-connector-java>8.0.29</mysql.mysql-connector-java>
        <com.baomidou.mybatis-plus>3.1.1</com.baomidou.mybatis-plus>
        <org.freemarker.freemarker>2.3.28</org.freemarker.freemarker>
        <com.alibaba.druid>1.1.22</com.alibaba.druid>
        <org.apache.tomcat.embed.tomcat>9.0.12</org.apache.tomcat.embed.tomcat>
    </properties>


    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-logging</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j2</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-logging</artifactId>
                </exclusion>
            </exclusions>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>${org.projectlombok.lombok}</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>${com.alibaba.fastjson}</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>${com.alibaba.druid}</version>
        </dependency>


        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql.mysql-connector-java}</version>
        </dependency>

        <!-- mybatis plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>${com.baomidou.mybatis-plus}</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>${com.baomidou.mybatis-plus}</version>
        </dependency>
<!--        <dependency>-->
<!--            <groupId>org.freemarker</groupId>-->
<!--            <artifactId>freemarker</artifactId>-->
<!--            <version>${freemarker.version}</version>-->
<!--        </dependency>-->


        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
<!--            <scope>provided</scope>-->
            <version>${org.apache.tomcat.embed.tomcat}</version>
        </dependency>
        <!-- 添加jstl标签库依赖模块 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>3.7.4.ALL</version>
        </dependency>

    </dependencies>



    <build>
        <finalName>runok</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <mainClass>com.java.shopApplication</mainClass>
                </configuration>

                <version>1.4.2.RELEASE</version>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <directory>${basedir}/src/main/webapp</directory>
                <targetPath>META-INF/resources</targetPath>
                <includes>
                    <include>**/**</include>
                </includes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>false</filtering>
                <includes>
                    <include>**/**</include>
                </includes>
            </resource>

            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
                <excludes>
                    <exclude>**/*.woff</exclude>
                    <exclude>**/*.woff2</exclude>
                    <exclude>**/*.ttf</exclude>
                </excludes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>false</filtering>
                <includes>
                    <include>**/*.woff</include>
                    <include>**/*.woff2</include>
                    <include>**/*.ttf</include>
                </includes>
            </resource>
        </resources>
    </build>


    <repositories>
        <repository>
            <id>aliyun</id>
            <name>aliyun</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public</url>
        </repository>
    </repositories>
</project>

基于Springboot的美妆平台的设计与实现/销售网站/销售管理系统
2401_86309111的博客
07-27 1326
本文所用的开发框架是Springboot，以MySQL为主要数据源，并且使用了开发工具idea。在实施美妆平台 前，首先要了解美妆平台的主要作用是什么，然后编写相应的体系结构，然后由软件开发人员来编写代码来实现，然后再使用一个测试案例来检验这个体系，然后再按照自己的选择来进行系统的优化。
【2025】springboot美妆商城系统（源码+文档+调试+答疑）
09-12 1323
目录一、项目介绍：二、文档学习资料：三、模块截图：四、开发技术与运行环境：五、代码展示：六、数据库表截图：关于Spring Boot美妆商城系统的课题研究思路，可以从以下几个方面进行阐述：研究背景：随着互联网的快速发展和普及，电子商务已经成为人们购物的主要方式之一。美妆行业作为消费市场的重要组成部分，其在线销售也逐渐占据了重要地位。然而，在当前的美妆电商市场中，用户体验、商品信息展示、商家运营等方面仍存在一些问题，如商品信息不准确、用户购物体验不佳、商家运营成本高等。因此，开发一个高效、便捷、用户友好的美妆
springboot化妆品网上商城含后台管理源码.rar
08-04
管理员表：admin_user 用户表：user 前端访问地址：localhost:8080/mall 可以在配置文件修改端口和项目后缀 后端访问：前端首页最下方可进入后台。 http://localhost:8080/mall/admin/toLogin.html 后台登录账号密码请看数据库管理员表：admin_user 可以注册用户或者用户表查看
ruoyi源码学习-2 路由拦截跳转
tiandi0123的博客
07-15 6247
前言 上期我们分析了ruoyi-ui下src/views/login.vue登录页面的代码。本期稍作补充，并继续分析src/utils/request.js中的请求拦截和响应拦截，以及src/permission.js中准入限制。 上期补充 watch: { $route: { handler: function(route) { this.redirect = route.query && route.query.redirect; }, imme.
基于Vue的美妆购物平台(源码+开题)
杰简程序毕设
02-27 1068
该系统将能够为消费者提供丰富的美妆商品选择和个性化的购物体验，为美妆品牌提供有效的市场推广和销售渠道。同时，本研究还将形成一套基于Vue的美妆购物平台开发方法和实践经验，为类似平台的开发提供借鉴和参考。因此，开发一个基于Vue的美妆购物平台，以其直观的用户界面、流畅的交互体验和高效的数据处理能力，为消费者提供全新的美妆购物体验，显得尤为重要和迫切。本研究的意义在于，通过构建基于Vue的美妆购物平台，不仅可以为消费者提供更加便捷、个性化的购物服务，还能为美妆品牌提供有效的市场推广和销售渠道。
基于SpringBoot+Vue国风彩妆商城系统设计和实现(源码+lw+部署+讲解)
qq_33638415的博客
06-16 837
✌优快云特邀作者、全栈领域优质创作者、10年IT从业经验、码云/掘金/知乎/B站/华为云/阿里云等平台优质作者、专注于Java、小程序/APP、python、大数据等技术领域和毕业项目实战，以及程序定制化开发、文档编写、答疑辅导等。✌🌞👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：200个热门选题推荐✅2023-2024年最值得选的计算机毕业设计选题大全：500个热门选题推荐✅Java精品实战案例《500套》微信小程序项目精品案例《200套》
毕业设计-基于SpringBoot + Vue美妆商城系统全部资料+详细文档+高分项目+源码.zip
最新发布
12-25
毕业设计-基于SpringBoot + Vue美妆商城系统全部资料+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能...
精选资源
基于springboot+Vue在线答疑系统 java毕业设计源码含论文和答辩ppt
05-30
这是一款前后端分离的Springboot和vue源码，前端vue,采用javaweb,基于B/S模式,idea或者eclipse为开发工具,，功能也比较全面，比较适合 作为毕业设计使用，感兴趣的朋友可以下载看看哦 本文从学生的功能要求出发，...
java基于SpringBoot+vue 美妆购物网站源码 带毕业论文
09-11
本资源主要提供了基于SpringBoot框架和Vue技术开发的美妆购物网站的完整源码，同时附带有详细的说明文档，适合进行课程设计、期末大作业以及毕业设计的计算机、数学、电子信息等相关专业的学生使用。项目采用Mysql...
精选资源
javaweb项目毕业设计基于SpringBoot的电商购物平台设计与实现(论文+程序源码+数据库文件)
03-28
4.2.1购物平台门户模块 12 4.2.2商品搜索模块 12 4.2.3商品详情模块 13 4.2.4添加商品模块 14 4.2.5购物车模块 14 4.2.6订单模块 15 4.3 系统文件模块 15 4.4 系统数据库设计 16 4.4.1数据库概念结构设计 16 4.4.2...
基于springboot+vue开发的零食商城，Java项目
09-07
零食商店系统，java项目，springboot项目。eclipse和idea都能打开运行。 推荐环境配置：eclipse/idea jdk1.8 maven mysql 前端技术：Layui，Ajax，Json 后端技术：SpringBoot 2.3.0，MyBatisPlus 本系统共分为两个角色：管理员和普通用户。 主要功能有: 个人中心 用户管理 零食分类管理 零食信息管理 订单评价管理 系统管理 订单管理 零食详情信息 购物车
vue项目 watch之 $route
h666000的博客
10-20 2483
添加日期时间 %DATE% %TIME% // A:代码 $route: { handler: function(route) { this.redirect = route.query && route.query.redirect console.log("redirect",this.redirect) }, immediate: true } // B:代码 this.$router.push({
litemall使用vue+shiro实现权限控制及动态路由
Liuqz2009的专栏
12-27 1413
整体思路 会话开始之初，先初始化一个只有登录路由的Vue实例，在根组件通过 handleLogin（） 将路由定向到登录页，再拉取登录框的数据，让每个请求携带token-- [‘X-Litemall-Admin-Token’]实现用户鉴权. 然后获取当前用户的权限数据,用户登录成功之后，会在全局钩子router.beforeEach中拦截路由，判断是否已获得token,在获得token之后就要去获...
watch一个路由对象this.$route
回纹勾边宝相花团
05-29 7301
问题来源： https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/login/index.vue watch: { $route: { handler: function(route) { const query = route.query if (query...
页面登录功能的思路
xiangxiang的博客
10-11 3887
登录功能实现的大致步骤： 1.前端用户验证用户输入是否规范。 2.前端调用后端的接口，向后端发出登录请求。 3.后端收到请求，验查数据库中是否有相应的账号和密码是否正确。 4.验证通过后，将成功信息连同token一起发给前端。 5.前端将token存储起来，每次用户进入登录才能访问的页面时或者每次进网站时向后端发送那个token。 6.如果token过期了，则清除用户的信息，回到未登录的状态。
vue watch的用法
qq_35176916的博客
03-22 2824
vue watch的三种用法 var app = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { // watch的第一种形式 a: function (val, oldVal) { // 在监听$route时，第一个参数表示to, 第二个参数表示from console.log() ...
若依学习笔记11——集成aj-captcha实现滑块验证码
qq_45311457的博客
10-10 7621
若依集成aj-captcha实现滑块验证码
基于SSM框架美妆商城全套系统设计与实现
qq_53797749的博客
03-15 1182
本文详细阐述了系统的需求分析、架构设计、功能实现以及测试与评估等方面，并对SSM框架在美妆商城系统中的应用进行了深入探讨。整个系统采用分层架构，分为表示层、控制层、业务逻辑层和数据访问层，各层之间通过接口进行通信，降低了层与层之间的耦合度，提高了系统的可维护性和可扩展性。未来，我们将继续完善系统的功能，优化用户体验，探索更多的商业模式和盈利方式，为美妆商城行业的发展贡献更多力量。通过SSM框架的应用，本系统实现了高效、稳定、可扩展的美妆商城系统，为用户提供了优质的购物体验。五、SSM框架的应用与优势。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序猿毕业分享网

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值