前端vue后端ssm框架的商品管理系统

项目效果图

前端使用vue2.0技术（创建时配置路由router）

main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'

Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router.js配置（让vue页面每次加载之后都跳转到自己写的vue页面，我这里页面叫做kaoshi.vue）

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import kaoshi from "@/views/kaoshi";

Vue.use(VueRouter)

const routes = [{
      path: '/',
      name: 'kaoshi',
      component: kaoshi
    }
  ]

  const router = new VueRouter({
    routes
  })

  export default router

接下来就是我的前端页面展示

<template>
  <div id="goods-management">
    <!-- Search Bar -->
    <el-card class="search-bar">
      <el-button type="success" @click="add">新增</el-button>
      <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
    </el-card>

    <!-- Goods Table -->
    <el-table
        :data="goodsList"
        style="width: 100%"
        ref="multipleTable"
    @selection-change="handleSelectionChange" >

      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="cname"
          label="商品名">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格">
      </el-table-column>
      <el-table-column
          prop="leixing"
          label="类别">
      </el-table-column>
      <el-table-column
          prop="shuliang"
          label="数量">
      </el-table-column>
      <el-table-column
          prop="jieshao"
          label="介绍">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 使用el-dialog组件创建对话框 -->
    <el-dialog title="新增表单" :visible.sync="dialogVisible">
      <el-form :model="formData">
        <!-- 这里是你的表单内容 -->
        <el-form-item label="商品名称">
          <el-input v-model="formData.cname"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="formData.price"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="formData.leixing"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="formData.shuliang"></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="formData.jieshao"></el-input>
        </el-form-item>
        <!-- ... 其他表单项 ... -->
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
    <el-dialog title="修改表单" :visible.sync="dia">
      <el-form :model="form">
        <!-- 这里是你的表单内容 -->
        <el-form-item label="商品名称">
          <el-input v-model="form.cname" disabled></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="form.leixing" disabled></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="form.shuliang"></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="form.jieshao"></el-input>
        </el-form-item>
        <!-- ... 其他表单项 ... -->
        <el-form-item>
          <el-button @click="dia = false">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "kaoshi",
  data() {
    return {
      multipleSelection: [],
      searchName: '',
      goodsList: [],
      dialogVisible: false, // 控制对话框的显示
      dia: false, // 控制对话框的显示
      formData: {
        cname: '',
        price: '',
        leixing: '',
        shuliang: '',
        jieshao: '',
      },
      form: {
        cname: '',
        price: '',
        leixing: '',
        shuliang: '',
        jieshao: '',
      }
    };
  },
  created() {
    this.findall();
  },

  methods: {
    findall(){
      var that=this;
      this.$axios({
        url:"http://localhost:8080/findAll",
        method:"get"
      }).then(function (resp){
        that.goodsList=resp.data
      })
    },
    onSearch() {

    },
    add() {
      this.dialogVisible = true
    },
    submitForm() {
      var that=this
      console.log('提交表单', this.formData);
      this.$axios({
        url:"http://localhost:8080/add",
        method:"post",
        data:{
          cname:that.formData.cname,
          price:that.formData.price,
          leixing:that.formData.leixing,
          shuliang:that.formData.shuliang,
          jieshao:that.formData.jieshao,
        }
      }).then(function (resp){
        that.dialogVisible = false;
        that.findall()
      },function (error){
        alert(连接失败)
      })
    },
    submit() {
      var that=this
      console.log('提交表单', this.form);
      this.$axios({
        url:"http://localhost:8080/update",
        method:"post",
        data:{
          cname:that.form.cname,
          price:that.form.price,
          leixing:that.form.leixing,
          shuliang:that.form.shuliang,
          jieshao:that.form.jieshao,
        }
      }).then(function (resp){
        that.dia = false;
        that.findall()
      },function (error){
        alert(连接失败)
      })
    },

    handleEdit(index, row) {
      this.dia = true
      this.form= {...row}
      console.log(row)

    },
    handleDelete(index, row) {
      var that=this
      console.log('delete', index, row);
      console.log(row.cname)
      this.$axios({
        url:"http://localhost:8080/delete",
        method:"post",
        data:{
          cname:row.cname
        },
      }).then(function (resp){
        alert("删除成功")
        that.findall()
      },function (error){
        alert(连接失败)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val; // 更新选中的行数据
    },
    handleBatchDelete() {
      var that=this
      if(this.multipleSelection.length==0){
        alert("请至少选择一项")
        return
      }
      this.$axios({
        url:"http://localhost:8080/deleteAll",
        method:"post",
        data: this.multipleSelection.map(item => item.cname)

      }).then(function (resp){
        console.log("批量成功")
        that.findall()

      },function (error){
        alert("连接失败")
      })
    }

  }
}
</script>

<style scoped>
.search-bar {
  margin-bottom: 20px;
}
</style>

后端我是用idea来运行（使用jdk12）

一。创建web项目

二.创建三层架构

三.接下来就是依赖文件（pom.xml）

<?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>org.example</groupId>
  <artifactId>kaoshi09</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>kaoshi09 Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>12</maven.compiler.source>
    <maven.compiler.target>12</maven.compiler.target>
  </properties>
<dependencies>
  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.23</version>
  </dependency>
  <dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.1.15</version>
  </dependency>
  <dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis</artifactId>
    <version>3.5.4</version>
  </dependency>
  <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.12</version>
  </dependency>
  <dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.30</version>
  </dependency>
 <!-- spring-->
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>5.1.5.RELEASE</version>
  </dependency>
  <dependency>
    <groupId>org.aspectj</groupId>
    <artifactId>aspectjweaver</artifactId>
    <version>1.8.13</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>5.1.5.RELEASE</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-tx</artifactId>
    <version>5.1.5.RELEASE</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-test</artifactId>
    <version>5.1.5.RELEASE</version>
  </dependency>
 <!--mybaties-->
  <dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis-spring</artifactId>
    <version>1.3.1</version>
  </dependency>
  <dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.76</version>
  </dependency>
  <dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.13.1</version>
  </dependency>
  <!--springMVC坐标-->
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.1.5.RELEASE</version>
  </dependency>
  <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
  </dependency>
  <dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.2</version>
  </dependency>
  <dependency>
    <groupId>jstl</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
  </dependency>
  <dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
  </dependency>
  <dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.16.1</version>
  </dependency>
  <dependency>
    <groupId>commons-beanutils</groupId>
    <artifactId>commons-beanutils</artifactId>
    <version>1.7.0</version>
  </dependency>
  <dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
  </dependency>
</dependencies>

</project>

4.整合spring.xml 和 spring-mvc.xml 和mybaties

要理清思路,让spring只去管service层

spring-mvc去管理controller层

①spring.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
      http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context-3.0.xsd">

    <!--注解组件扫描-->

    <context:component-scan base-package="com.easthome.Service">
    </context:component-scan>

    <!--spring整合mybatis-->
    <context:property-placeholder location="classpath:druid.properties"/>
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>
    <!--SqlSessionFactory创建交给spring的IOC容器-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--数据库环境配置-->
        <property name="dataSource" ref="dataSource"/>
        <!--类型别名配置-->
        <property name="typeAliasesPackage" value="com.easthome.domain"/>
        <!--如果要引入mybatis主配置文件，可以通过如下配置-->
        <!--<property name="configLocation" value="classpath:SqlMapConfig.xml"/>-->

    </bean>
    <!--映射接口扫描配置，由spring创建代理对象，交给IOC容器-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.easthome.Mapper"/>
    </bean>
</beans>

②spring-mvc配置文件

<beans
        xmlns="http://www.springframework.org/schema/beans"
        xmlns:mvc="http://www.springframework.org/schema/mvc"
        xmlns:context="http://www.springframework.org/schema/context"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context.xsd">

    <!--负责控制器的-->
    <context:component-scan base-package="com.easthome.Controller"></context:component-scan>
    <!--mvc注解增强   -->
    <mvc:annotation-driven/>
    <!--视图解析器-->
    <bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    <!--放行静态资源-->
    <mvc:default-servlet-handler/>
</beans>

③数据库连接文件

账号密码自己的我使用的是mysql数据库

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/db2?serverTimezone=UTC&characterEncoding=utf8&useUnicode=true&useSSL=false
jdbc.username= 账号
jdbc.password= 密码

④mapper配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.easthome.Mapper.SPmapper">
    <select id="findAll"  resultType="com.easthome.Pojo.SP">
        select * from shangpin
    </select>
    <insert id="add" parameterType="com.easthome.Pojo.SP">
        insert into shangpin values (#{cname},#{price},#{leixing},#{shuliang},#{jieshao})
    </insert>
    <update id="update" parameterType="com.easthome.Pojo.SP">
        update shangpin
        set price=#{price},shuliang=#{shuliang},jieshao=#{jieshao}
        where cname=#{cname} and leixing=#{leixing}
    </update>
    <delete id="delete" parameterType="com.easthome.Pojo.SP">
        delete from shangpin where cname=#{cname}
    </delete>
    <delete id="deleteAll" parameterType="list">
        delete from shangpin
        where  cname in
        <foreach collection="list" item="cname" open="(" close=")" separator=",">
            #{cname}
        </foreach>

    </delete>
</mapper>

四.接下来就是三层架构的代码

①controller层

package com.easthome.Controller;

import com.easthome.Pojo.SP;
import com.easthome.Service.SPservice;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class SPcontroller {
    @Autowired
    private SPservice sPservice;
    @RequestMapping(value = "/findAll",produces ="text/plain;charset=UTF-8")
    public String findAll(){
    String all = sPservice.findAll();
    return all;
    }
    @RequestMapping("/add")
    public void add(@RequestBody SP sp) {
        System.out.println(sp.getCname());
        System.out.println(sp.getPrice());
        sPservice.add(sp);

    }
    @RequestMapping("/update")
    public void update(@RequestBody SP sp){

        sPservice.update(sp);
    }

    @RequestMapping("/delete")
    public void delete(@RequestBody SP sp){
        sPservice.delete(sp);
    }

    @RequestMapping("/deleteAll")
    public void deleteAll(@RequestBody List<String> cnames){
        sPservice.deleteAll(cnames);
    }
}

②servic层

service接口

package com.easthome.Service;

import com.easthome.Pojo.SP;

import java.util.List;

public interface SPservice {
    public String findAll();
    public void add(SP sp);
    public void update(SP sp);
    public void delete(SP sp);
    public void deleteAll(List<String> cname);
}

实现类

package com.easthome.Service.imp;

import com.alibaba.fastjson.JSON;
import com.easthome.Mapper.SPmapper;
import com.easthome.Pojo.SP;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class SPservice implements com.easthome.Service.SPservice {
    @Autowired
    private SPmapper sPmapper;
    @Override
    public String findAll() {
        List<SP> all = sPmapper.findAll();
        String s = JSON.toJSONString(all);
        return s ;
    }
    public void add(SP sp){
    sPmapper.add(sp);
    }

    @Override
    public void update(SP sp) {
        sPmapper.update(sp);
    }

    @Override
    public void delete(SP sp) {
        System.out.println(11111);
        System.out.println(sp);
        sPmapper.delete(sp);

    }

    @Override
    public void deleteAll(List<String> cname) {
        System.out.println(cname);
         sPmapper.deleteAll(cname);
    }
}

3.pojo类

package com.easthome.Pojo;

import lombok.Data;

@Data
public class SP {
    String cname;
    Double price;
    String leixing;
    int shuliang;
    String jieshao;
}

4 Mapper接口

package com.easthome.Mapper;

import com.easthome.Pojo.SP;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface SPmapper {
    public List<SP> findAll();
    public void add(SP sp);
    public void update(SP sp);

    public void delete(SP sp);
    public void deleteAll(List<String> cname);
}

五.mysql数据库

到这里就结束了，基本上从0到1都能实现这个项目

喜欢的话，点个关注，谢谢

标签：前端 vue.js javascript

本文转载自: https://blog.csdn.net/weixin_68574954/article/details/142817429
版权归原作者 兆兆想睡觉 所有，如有侵权，请联系我们删除。

前端vue后端ssm框架的商品管理系统

发表评论

“前端vue后端ssm框架的商品管理系统”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

前端vue后端ssm框架的 商品管理系统

发表评论

“前端vue后端ssm框架的 商品管理系统”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

前端vue后端ssm框架的商品管理系统

“前端vue后端ssm框架的商品管理系统”的评论: