项目效果图

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

main.js文件

<code>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">code>

<!-- Search Bar -->

<el-card class="search-bar">code>

<el-button type="success" @click="add">新增</el-button>code>

<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>code>

</el-card>

<!-- Goods Table -->

<el-table

:data="goodsList"code>

style="width: 100%"code>

ref="multipleTable"code>

@selection-change="handleSelectionChange" >code>

<el-table-column

type="selection"code>

width="55">code>

</el-table-column>

<el-table-column

prop="cname"code>

label="商品名">code>

</el-table-column>

<el-table-column

prop="price"code>

label="价格">code>

</el-table-column>

<el-table-column

prop="leixing"code>

label="类别">code>

</el-table-column>

<el-table-column

prop="shuliang"code>

label="数量">code>

</el-table-column>

<el-table-column

prop="jieshao"code>

label="介绍">code>

</el-table-column>

<el-table-column

label="操作">code>

<template slot-scope="scope">code>

<el-button

size="mini"code>

@click="handleEdit(scope.$index, scope.row)">编辑</el-button>code>

<el-button

size="mini"code>

type="danger"code>

@click="handleDelete(scope.$index, scope.row)">删除</el-button>code>

</template>

</el-table-column>

</el-table>

<!-- 使用el-dialog组件创建对话框 -->

<el-dialog title="新增表单" :visible.sync="dialogVisible">code>

<el-form :model="formData">code>

<!-- 这里是你的表单内容 -->

<el-form-item label="商品名称">code>

<el-input v-model="formData.cname"></el-input>code>

</el-form-item>

<el-form-item label="价格">code>

<el-input v-model="formData.price"></el-input>code>

</el-form-item>

<el-form-item label="类型">code>

<el-input v-model="formData.leixing"></el-input>code>

</el-form-item>

<el-form-item label="数量">code>

<el-input v-model="formData.shuliang"></el-input>code>

</el-form-item>

<el-form-item label="介绍">code>

<el-input v-model="formData.jieshao"></el-input>code>

</el-form-item>

<!-- ... 其他表单项 ... -->

<el-form-item>

<el-button @click="dialogVisible = false">取消</el-button>code>

<el-button type="primary" @click="submitForm">提交</el-button>code>

</el-form-item>

</el-form>

</el-dialog>

<el-dialog title="修改表单" :visible.sync="dia">code>

<el-form :model="form">code>

<!-- 这里是你的表单内容 -->

<el-form-item label="商品名称">code>

<el-input v-model="form.cname" disabled></el-input>code>

</el-form-item>

<el-form-item label="价格">code>

<el-input v-model="form.price"></el-input>code>

</el-form-item>

<el-form-item label="类型">code>

<el-input v-model="form.leixing" disabled></el-input>code>

</el-form-item>

<el-form-item label="数量">code>

<el-input v-model="form.shuliang"></el-input>code>

</el-form-item>

<el-form-item label="介绍">code>

<el-input v-model="form.jieshao"></el-input>code>

</el-form-item>

<!-- ... 其他表单项 ... -->

<el-form-item>

<el-button @click="dia = false">取消</el-button>code>

<el-button type="primary" @click="submit">提交</el-button>code>

</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）

<code><?xml version="1.0" encoding="UTF-8"?>code>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"code>

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">code>

<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" ?>code>

<beans xmlns="http://www.springframework.org/schema/beans"code>

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"code>

xmlns:context="http://www.springframework.org/schema/context"code>

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">code>

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

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

</context:component-scan>

<!--spring整合mybatis-->

<context:property-placeholder location="classpath:druid.properties"/>code>

<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">code>

<property name="driverClassName" value="${jdbc.driver}"/>code>

<property name="url" value="${jdbc.url}"/>code>

<property name="username" value="${jdbc.username}"/>code>

<property name="password" value="${jdbc.password}"/>code>

</bean>

<!--SqlSessionFactory创建交给spring的IOC容器-->

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">code>

<!--数据库环境配置-->

<property name="dataSource" ref="dataSource"/>code>

<!--类型别名配置-->

<property name="typeAliasesPackage" value="com.easthome.domain"/>code>

<!--如果要引入mybatis主配置文件，可以通过如下配置-->

<!--<property name="configLocation" value="classpath:SqlMapConfig.xml"/>-->code>

</bean>

<!--映射接口扫描配置，由spring创建代理对象，交给IOC容器-->

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">code>

<property name="basePackage" value="com.easthome.Mapper"/>code>

</bean>

</beans>

②spring-mvc配置文件

<beans

xmlns="http://www.springframework.org/schema/beans"code>

xmlns:mvc="http://www.springframework.org/schema/mvc"code>

xmlns:context="http://www.springframework.org/schema/context"code>

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"code>

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">code>

<!--负责控制器的-->

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

<!--mvc注解增强 -->

<mvc:annotation-driven/>

<!--视图解析器-->

<bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">code>

<property name="prefix" value="/"></property>code>

<property name="suffix" value=".jsp"></property>code>

</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" ?>code>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.easthome.Mapper.SPmapper">code>

<select id="findAll" resultType="com.easthome.Pojo.SP">code>

select * from shangpin

</select>

<insert id="add" parameterType="com.easthome.Pojo.SP">code>

insert into shangpin values (#{cname},#{price},#{leixing},#{shuliang},#{jieshao})

</insert>

<update id="update" parameterType="com.easthome.Pojo.SP">code>

update shangpin

set price=#{price},shuliang=#{shuliang},jieshao=#{jieshao}

where cname=#{cname} and leixing=#{leixing}

</update>

<delete id="delete" parameterType="com.easthome.Pojo.SP">code>

delete from shangpin where cname=#{cname}

</delete>

<delete id="deleteAll" parameterType="list">code>

delete from shangpin

where cname in

<foreach collection="list" item="cname" open="(" close=")" separator=",">code>

#{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都能实现这个项目

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