项目效果图
前端使用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都能实现这个项目
喜欢的话,点个关注,谢谢