图书管理系统（增删改查，模糊查询 ) ssm+vue

最新推荐文章于 2023-02-10 22:13:26 发布

星域_03zhan

最新推荐文章于 2023-02-10 22:13:26 发布

阅读量510

点赞数 2

分类专栏： vue ssm 文章标签：数据库 vue

本文链接：https://blog.csdn.net/qq_45968950/article/details/123829284

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ssm

2 篇文章 0 订阅

订阅专栏

页面效果：
在这里插入图片描述

1.导入pom依赖：

<dependencies>
    <!--Junit-->
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.12</version>
    </dependency>
    <!--数据库驱动-->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.47</version>
    </dependency>
    <!-- 数据库连接池 -->
    <dependency>
        <groupId>com.mchange</groupId>
        <artifactId>c3p0</artifactId>
        <version>0.9.5.2</version>
    </dependency>

    <!--Servlet - JSP -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.2</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

    <!--Mybatis-->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.5.2</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.2</version>
    </dependency>

    <!--Spring-->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.0.5.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>5.0.5.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.12</version>
    </dependency>
    <!--jackson转换-->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.11.0</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.11.0</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.11.0</version>
    </dependency>
</dependencies>
<build>
<resources>
    <resource>
        <directory>src/main/java</directory>
        <includes>
            <include>**/*.properties</include>
            <include>**/*.xml</include>
        </includes>
        <filtering>false</filtering>
    </resource>
    <resource>
        <directory>src/main/resources</directory>
        <includes>
            <include>**/*.properties</include>
            <include>**/*.xml</include>
        </includes>
        <filtering>false</filtering>
    </resource>
</resources>
<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
            <source>1.8</source>
            <target>1.8</target>
        </configuration>
    </plugin>
</plugins>
</build>

2.配置spring-mvc.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"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!-- 配置SpringMVC -->
    <!-- 1.开启SpringMVC注解驱动 -->
    <!--解决json乱码-->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    <!-- 2.静态资源默认servlet配置-->
    <mvc:default-servlet-handler/>

    <!-- 3.配置jsp 显示ViewResolver视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
    </bean>

    <!-- 4.扫描web相关的bean -->
    <context:component-scan base-package="com.controller" />


</beans>

3.配置mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <settings>
        <setting name="mapUnderscoreToCamelCase" value="true"/>
    </settings>
    <!--定义别名-->
    <typeAliases>
        <package name="com.domain"></package>
    </typeAliases>
    <!--扫描mapper-->
    <mappers>
        <package name="com.dao"></package>
    </mappers>

</configuration>

3.配置spring-service.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.xsd
   http://www.springframework.org/schema/context
   http://www.springframework.org/schema/context/spring-context.xsd">

    <!--    扫描service层下的包-->
    <context:component-scan base-package="com.service"/>


    <!--    配置事务管理-->
    <bean class="org.springframework.jdbc.datasource.DataSourceTransactionManager" id="manager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

</beans>

4.配置spring-mapper.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.xsd
        http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd">
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <!--c3p0连接-->
    <bean class="com.mchange.v2.c3p0.ComboPooledDataSource" id="dataSource">
        <!-- 配置连接池属性 -->
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>

        <!-- c3p0连接池的私有属性 -->
        <property name="maxPoolSize" value="30"/>
        <property name="minPoolSize" value="10"/>
        <!-- 关闭连接后不自动commit -->
        <property name="autoCommitOnClose" value="false"/>
        <!-- 获取连接超时时间 -->
        <property name="checkoutTimeout" value="10000"/>
        <!-- 当获取连接失败重试次数 -->
        <property name="acquireRetryAttempts" value="2"/>
    </bean>
    
    <bean class="org.mybatis.spring.SqlSessionFactoryBean" id="sqlSessionFactory">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        
    </bean>
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <property name="basePackage" value="com.dao"/>
    </bean>

</beans>

5.配置jdbc.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssmbuild?useSSL=false&useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=123456

6.配置applicationContext.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"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd">
        <!--总配置文件-->
    <import resource="spring-mapper.xml"/>
    <import resource="spring-service.xml"/>
    <import resource="spring-mvc.xml"/>

</beans>

7.创建实体类：

@EqualsAndHashCode(callSuper = true)
@Accessors()
@Data
//全参构造
@AllArgsConstructor
//无参构造
@NoArgsConstructor
//实现序列化
public class Book extends BaseEntity {
    private Integer id;
    private String bookName;
    private int bookCounts;
    private String detail;

}

@Data
public class BaseEntity implements Serializable{
    private Boolean isDelete;
    private LocalDateTime createTime;
    private LocalDateTime updateTime;
}

8.创建service接口和实现类：

@Service
public interface BookService {
    List<Book> selectBookById(Integer id);
    List<Book> selectAllBook();
    int save(Book book);
    int update(Book book);
    List<Book> selectByLikeName(String bookName);
    int deleteBook(Integer id);


}

@Service
public class BookServiceImpl implements BookService {
    @Autowired
    private BookMapper bookMapper;
    @Override
    public List<Book> selectBookById(Integer id) {
        return bookMapper.selectBookById(id);
    }

    @Override
    public List<Book> selectAllBook() {
        return bookMapper.selectAllBook();
    }

    @Override
    public int save(Book book) {
        return bookMapper.save(book);
    }

    @Override
    public int update(Book book) {
        return bookMapper.update(book);
    }

    @Override
    public List<Book> selectByLikeName(String bookName) {
        return bookMapper.selectByLikeName(bookName);
    }

    @Override
    public int deleteBook(Integer id) {
        return bookMapper.deleteBook(id);
    }
}

9.创建mapper接口

public interface BookMapper {

    @Select("SELECT * FROM books WHERE id=#{id}")
    List<Book> selectBookById(@Param("id") Integer id);

    @Select("SELECT * FROM books")
    List<Book> selectAllBook();

    @Insert("INSERT INTO books VALUES (null,#{bookName},#{bookCounts},#{detail},0,now(),now())")
    int save(Book book);

    @Update("UPDATE books " +
            "SET bookName=#{bookName}," +
            "bookCounts=#{bookCounts}," +
            "detail=#{detail}," +
            "updateTime=now() " +
            "WHERE id=#{id}")
    int update(Book book);

    @Select(" SELECT * FROM books where bookName like concat('%',#{bookName},'%')")
    List<Book> selectByLikeName(@Param("bookName") String bookName);

    @Delete("DELETE FROM books WHERE id=#{id}")
    int deleteBook(@Param("id") Integer id);

10.创建controller

@RestController
@RequestMapping("/books")
public class BookController {

    @Autowired
    private BookService bookService;
    @CrossOrigin(allowCredentials = "true")
    @GetMapping
    public List<Book> getAllBook() {

        return bookService.selectAllBook();

    }


    @GetMapping("/{id}")
    public List<Book> getBookById(@PathVariable("id") Integer id) {

        return  bookService.selectBookById(id);
    }


    @DeleteMapping("/{id}")
    public void delBookById(@PathVariable("id") Integer id) {

        bookService.deleteBook(id);
    }


    @PostMapping
    public void addBook(@RequestBody Book book) {
        bookService.save(book);

    }

    @PutMapping
    public void update(@RequestBody Book book) {
        bookService.update(book);
    }

    @GetMapping("/like/{bookName}")
    public List<Book> likeBook(@PathVariable("bookName") String bookName) {
        return bookService.selectByLikeName(bookName);
    }
}

前端：
1.在vue.config.js文件中配置跨域问题：

module.exports = {
  devServer: {
    // disableHostCheck: true,
  
	proxy: {
		'/api':{
      target:'http://localhost:8888',
      changeOrigin: true,
      pathRewrite: {
        '^/api':'/'
      }
     
		}
	}
  }
}

2.在main.js中引入element组件：

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';

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

3.创建主页面book.vue：

<template>
<div class="books">
    
		<el-col :span="8">
		<el-input
		  placeholder="请输入内容"
		  v-model="input"
		  clearable>
		</el-input>
		</el-col>
		<el-button type="primary" plain @click="search()">搜索</el-button>
    <el-button @click="goAdd()">添加</el-button>
  <el-table 
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="编号"
      >
    </el-table-column>
    <el-table-column
      prop="bookName"
      label="名称"
      >
    </el-table-column>
    <el-table-column
      prop="bookCounts"
      label="数量"
      >
    </el-table-column>
    <el-table-column
      prop="detail"
      label="详情"
      >
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button @click="edit(scope.row)"  type="text" size="small">编辑</el-button>
         <el-button @click="del(scope.row,scope.$index)"  type="text" size="small">删除</el-button>

      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import axios from "axios"
  export default {
    mounted() {
        this.initData();
    },
    data(){
        return {
            input: '',
            tableData:[]
        }
    },
    methods: {
        
      handleClick(row) {
        //   axios.defaults.withCredentials=true;
        console.log(row);
        this.$router.push({
            path:'/book',
            query:{
                id:row.id
            }
        })
      
    },
    goAdd() {
				this.$router.push({path:"/add"})
			},
			initData() {
				axios.get("/api/books").then(response => {
						console.log(response)
						this.tableData = response.data;
					},
					error => {
						console.log('请求失败', error.message);
					})
			},
			edit(row){
				this.$router.push({
					path:"/add",
					query: {
						id: row.id
					}
				})
			},
			search(){
				console.log(this.input)
				if(this.input == '') {
					this.initData();
				}else{
					axios.get("/api/books/like/" + this.input).then(response => {
							console.log(response)
							this.tableData = response.data;
						},
						error => {
							console.log('请求失败', error.message);
						})
				}
				
				
				
			},
			del(row,index) {
				// console.log(scope)
				
				axios.delete("/api/books/" + row.id).then(response => {
						console.log(response)
						if (response.status == 200) {
							this.tableData.splice(index,1);
							this.$message({
								message: '删除成功',
								type: 'success'
							});

						}

					},
					error => {
						console.log('请求失败', error.message);
					})

			}
    
    }
  }
</script>

4.创建添加/修改页面AddBook.vue

<template>
    <div>
        <el-radio-group v-model="labelPosition" size="small">
  <el-radio-button label="left">左对齐</el-radio-button>
  <el-radio-button label="right">右对齐</el-radio-button>
  <el-radio-button label="top">顶部对齐</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
  <el-form-item label="名称">
    <el-input v-model="formLabelAlign.bookName"></el-input>
  </el-form-item>
  <el-form-item label="数量">
    <el-input v-model="formLabelAlign.bookCounts"></el-input>
  </el-form-item>
  <el-form-item label="描述">
    <el-input v-model="formLabelAlign.detail"></el-input>
  </el-form-item>
</el-form>
	<el-button type="success" @click="sub()">提交</el-button>
		<el-button type="info" @click="back()">返回</el-button>
    </div>
</template>
<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				show:false,
				labelPosition: 'right',
				formLabelAlign: {

				}
			};
		},
		mounted() {
			var id = this.$route.query.id;
			console.log("11111",id)
			if(id !== null && id !== undefined){
				this.initData(id);
				this.show = true;
			}
		},
		methods: {
			back() {
				this.$router.push({
					path: "/"
				})
			},
			sub() {
				if(this.show) {
					// 存在路径id，当前为修改
					axios.put("/api/books", this.formLabelAlign).then(response => {
							console.log(response)
							if (response.status == 200) {
								this.$message({
									message: '恭喜你，这是一条成功消息',
									type: 'success'
								});
								this.$router.push({
									path: "/"
								})
							}
							// this.tableData = response.data;
						},
						error => {
							console.log('请求失败', error.message);
						})
				}else {
					// show为false标识（不存在路径id）我们当前为新增
					axios.post("/api/books", this.formLabelAlign).then(response => {
							console.log(response)
							if (response.status == 200) {
								this.$message({
									message: '恭喜你，这是一条成功消息',
									type: 'success'
								});
								this.$router.push({
									path: "/"
								})
							}
							// this.tableData = response.data;
						},
						error => {
							console.log('请求失败', error.message);
						})
				}
				

			},
			initData(id) {
				axios.get(" /api/books/" + id).then(response => {
						console.log(response)
						this.formLabelAlign = response.data[0];
					},
					error => {
						console.log('请求失败', error.message);
					})
			}
		},
	}
</script>

5.创建展示数据页面OneBook.vue

<template>
	<el-table :data="tableData" border style="width: 100%">
		<el-table-column prop="bookID" label="编号">
		</el-table-column>
		<el-table-column prop="bookName" label="名称">
		</el-table-column>
		<el-table-column prop="bookCounts" label="数量">
		</el-table-column>
		<el-table-column prop="detail" label="描述">
		</el-table-column>
		<el-table-column label="操作">
			<template >
				<el-button @click="handleClick()" type="text" size="small">返回</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	import axios from 'axios'
	export default {

		mounted() {
			var id = this.$route.query.id;
			this.initData(id);
		},
		data() {
			return {
				tableData: []
			}
		},
		methods: {
			handleClick(row) {
				this.$router.push({path:"/"})
			},

			initData(id) {
				axios.get("/api/books/"+ id).then(response => {
						console.log(response)
						this.tableData = response.data;
					},
					error => {
						console.log('请求失败', error.message);
					})
					

			}
		}
	}
</script>

6.修改App.vue文件

<template>
  <div id="app">
    <nav> 
    </nav>
    <router-view/>
  </div>
</template>

<style>
</style>

7.修改index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

import Books from '../views/Books.vue'
import OneBook from '../views/OneBook.vue'
import AddBook from '../views/AddBooks.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Books',
    component: Books
  },
  {
    path: '/add',
    name: 'AddBook',
    component: AddBook
  },
  {
    path: '/book',
    name: 'OneBook',
    component: OneBook
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在这里插入图片描述

星域_03zhan

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
图书管理系统（增删改查，模糊查询 ) ssm+vue

页面效果：1.导入pom依赖：<dependencies>  <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> </dependency> &l
复制链接

扫一扫