• 图书管理系统（基于SSM + Vue + Restful 实现）

    一、项目依赖

    1. <dependencies>
    2.         <dependency>
    3.             <groupId>com.fasterxml.jackson.coregroupId>
    4.             <artifactId>jackson-databindartifactId>
    5.             <version>2.9.0version>
    6.         dependency>
    7.         <dependency>
    8.             <groupId>org.springframeworkgroupId>
    9.             <artifactId>spring-webmvcartifactId>
    10.             <version>5.2.10.RELEASEversion>
    11.         dependency>
    12.         <dependency>
    13.             <groupId>mysqlgroupId>
    14.             <artifactId>mysql-connector-javaartifactId>
    15.             <version>8.0.29version>
    16.         dependency>
    17.         <dependency>
    18.             <groupId>javax.servletgroupId>
    19.             <artifactId>javax.servlet-apiartifactId>
    20.             <version>3.1.0version>
    21.             <scope>providedscope>
    22.         dependency>
    23.         <dependency>
    24.             <groupId>com.alibabagroupId>
    25.             <artifactId>druidartifactId>
    26.             <version>1.1.16version>
    27.         dependency>
    28.         <dependency>
    29.             <groupId>org.springframeworkgroupId>
    30.             <artifactId>spring-jdbcartifactId>
    31.             <version>5.2.10.RELEASEversion>
    32.         dependency>
    33.         <dependency>
    34.             <groupId>org.mybatisgroupId>
    35.             <artifactId>mybatisartifactId>
    36.             <version>3.5.6version>
    37.             <scope>compilescope>
    38.         dependency>
    39.         <dependency>
    40.             <groupId>org.mybatisgroupId>
    41.             <artifactId>mybatis-springartifactId>
    42.             <version>1.3.0version>
    43.         dependency>
    44.     dependencies>

    二、结构搭建

     三、数据库数据准备

     四、连接文件

    jdbc.properties 连接数据库的信息

    1. jdbc.driver=com.mysql.cj.jdbc.Driver
    2. jdbc.url=jdbc:mysql://localhost:3306/my_db_01?useSSL=false
    3. jdbc.username=root
    4. jdbc.password=100863

    五、前端代码

    html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     
    10.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    11.         integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    12.     <script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.js">script>
    13. head>
    14.  
    15. <body style="padding: 15px;">
    16.     <div id="app">
    17.     <div class="panel panel-primary">
    18.         <div class="panel-heading">
    19.             <h3 class="panel-title">添加新图书h3>
    20.         div>
    21.         <div class="panel-body form-inline">
    22.  
    23.             <div class="input-group">
    24.                 <div class="input-group-addon">书名div>
    25.                 <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名" v-model="bookForm.name">
    26.             div>
    27.  
    28.             <div class="input-group">
    29.                 <div class="input-group-addon">类型div>
    30.                 <input type="text" class="form-control" id="iptType" placeholder="请输入书籍类型" v-model="bookForm.type">
    31.             div>
    32.  
    33.             <div class="input-group">
    34.                 <div class="input-group-addon">作者div>
    35.                 <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者" v-model="bookForm.author">
    36.             div>
    37.  
    38.             <div class="input-group">
    39.                 <div class="input-group-addon">出版社div>
    40.                 <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社"
    41.                        v-model="bookForm.publisher">
    42.             div>
    43.  
    44.             <button id="btnSelect" class="btn btn-info" @click="likeSelect">查询button>
    45.             <button id="btnAdd" class="btn btn-primary" @click="dialogVisible = true">添加button>
    46.  
    47.         div>
    48.     div>
    49.  
    51.         <el-row>
    52.             <el-button type="danger" plain @click="delByIds">批量删除el-button>
    53.         el-row>
    54.  
    56.         <el-dialog
    57.             title="添加书籍"
    58.             :visible.sync="dialogVisible"
    59.             width="30%"
    60.           >
    61.             <el-form :model="bookForm" ref="bookForm"  label-width="100px" class="demo-ruleForm">
    62.                 <el-form-item label="书名" prop="name">
    63.                     <el-input v-model="bookForm.name">el-input>
    64.                 el-form-item>
    65.                 <el-form-item label="类型" prop="type">
    66.                     <el-input v-model="bookForm.type">el-input>
    67.                 el-form-item>
    68.                 <el-form-item label="作者" prop="author">
    69.                     <el-input v-model="bookForm.author">el-input>
    70.                 el-form-item>
    71.                 <el-form-item label="出版社" prop="publisher">
    72.                     <el-input v-model="bookForm.publisher">el-input>
    73.                 el-form-item>
    74.                 <el-form-item>
    75.                     <el-button type="primary" @click="saveBook">确定el-button>
    76.                     <el-button @click="cancelAdd">取消el-button>
    77.                 el-form-item>
    78.             el-form>
    79.     el-dialog>
    80.  
    82.         <el-dialog
    83.                 title="编辑书籍"
    84.                 :visible.sync="dialogEditVisible"
    85.                 width="30%"
    86.         >
    87.             <el-form :model="updateForm" ref="updateForm"  label-width="100px" class="demo-ruleForm">
    88.                 <el-form-item label="书名" prop="name">
    89.                     <el-input v-model="updateForm.name">el-input>
    90.                 el-form-item>
    91.                 <el-form-item label="类型" prop="type">
    92.                     <el-input v-model="updateForm.type">el-input>
    93.                 el-form-item>
    94.                 <el-form-item label="作者" prop="author">
    95.                     <el-input v-model="updateForm.author">el-input>
    96.                 el-form-item>
    97.                 <el-form-item label="出版社" prop="publisher">
    98.                     <el-input v-model="updateForm.publisher">el-input>
    99.                 el-form-item>
    100.                 <el-form-item>
    101.                     <el-button type="primary" @click="updateBook">确定el-button>
    102.                     <el-button @click="cancelEdit">取消el-button>
    103.                 el-form-item>
    104.             el-form>
    105.         el-dialog>
    107. <template>
    108.     <el-table
    109.             :data="tableData"
    110.             style="width: 100%"
    111.             @selection-change="handleSelectionChange"
    112.     >
    113.         <el-table-column
    114.                 type="selection"
    115.                 width="55">
    116.         el-table-column>
    117.         <el-table-column
    118.                 type="index"
    119.                 width="50">
    120.         el-table-column>
    121.         <el-table-column
    122.                 prop="name"
    123.                 label="书名"
    124.                 align="center"
    125.         >
    126.         el-table-column>
    127.         <el-table-column
    128.                 prop="type"
    129.                 label="类型"
    130.                 align="center"
    131.         >
    132.         el-table-column>
    133.         <el-table-column
    134.                 prop="author"
    135.                 label="作者"
    136.                 align="center"
    137.         >
    138.         el-table-column>
    139.         <el-table-column
    140.                 prop="publisher"
    141.                 label="出版社"
    142.                 align="center"
    143.         >
    144.         el-table-column>
    145.         <el-table-column
    146.                 prop="address"
    147.                 label="操作"
    148.                 align="center"
    149.         >
    150.             <el-row>
    151.                 <el-button type="primary" @click="backView">修改el-button>
    152.                 <el-button type="danger" @click="delById">删除el-button>
    153.             el-row>
    154.         el-table-column>
    155.     el-table>
    156. template>
    157.     div>
    158. body>
    159. html>

    js

    1.  
    2.     <script src="../js/vue.js">script>
    3.     
    4.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    5.     
    6.     <script src="https://unpkg.com/element-ui/lib/index.js">script>
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js">script>
    8.     <script>
    9.         new Vue({
    10.             el:"#app",
    11.             data:{
    12.                 // 添加表单
    13.                 bookForm: {
    14.                     name: '',
    15.                     type:'',
    16.                     author:'',
    17.                     publisher:'',
    18.                 },
    19.                 // 更新表单
    20.                 updateForm:{
    21.                     name: '',
    22.                     type:'',
    23.                     author:'',
    24.                     publisher:'',
    25.                 },
    26.                 tableData:[],  // 当前页面要展示的分页列表数据
    27.                 dialogVisible:false, // 增加表单是否可见
    28.                 dialogEditVisible:false, // 编辑表单是否可见
    29.                 pagination:{}, // 分页模型数据,暂时弃用
    30.                 ids:[], // id数组
    31.                 selectedId:'', // 单个id
    32.                 // 复选框
    33.                 multipleSelection:[],
    34.             },
    35.             // 钩子函数,VUE对象初始化完成后自动执行
    36.             created(){
    37.                 this.getAll();
    38.             },
    39.             methods:{
    40.                 // 添加
    41.                 saveBook(){
    42.                     axios.post("/books",this.bookForm).then((resp)=>{
    43.                             this.dialogVisible = false;
    44.                             this.getAll();
    45.                             this.$message({
    46.                                 message: '添加成功!',
    47.                                 type: 'success',
    48.                                 center:true
    49.                             });
    50.                     });
    51.                 },
    52.  
    53.                 // 复选框选中后执行的函数
    54.                 handleSelectionChange(val) {
    55.                     this.multipleSelection = val;
    56.                 },
    57.  
    58.                 // 取消编辑提示
    59.                 cancelEdit(){
    60.                     this.dialogEditVisible = false;
    61.                     this.$message({
    62.                         showClose: true,
    63.                         message: '已取消编辑',
    64.                         center:true
    65.                     });
    66.                 },
    67.  
    68.                 // 取消添加提示
    69.                 cancelAdd(){
    70.                     this.dialogVisible = false;
    71.                     this.$message({
    72.                         showClose: true,
    73.                         message: '已取消添加',
    74.                         center:true
    75.                     });
    76.                 },
    77.  
    78.                 // 查询
    79.                 likeSelect(){
    80.                     axios.get(`/books/${this.bookForm.author}`).then((resp)=>{
    81.                         this.tableData = resp.data;
    82.                     })
    83.                 },
    84.  
    85.                 // 删除单条数据
    86.                 delById(){
    87.                     for (let i = 0; i < this.multipleSelection.length; i++) {
    88.                        var selectionElement = this.multipleSelection[i];
    89.                        this.selectedId = selectionElement.id;
    90.                     }
    91.                     if (this.selectedId == null || this.selectedId.length < 1){
    92.                         this.$message({
    93.                             showClose: true,
    94.                             message: '请选中您要删除的数据',
    95.                             type: 'error',
    96.                             center:true
    97.                         });
    98.                         return;
    99.                     }
    100.                         axios.delete(`/books/${this.selectedId}`,).then((resp) => {
    101.                             this.getAll();
    102.                             this.$message({
    103.                                 message: '删除成功!',
    104.                                 type: 'success',
    105.                                 center: true
    106.                             });
    107.                         });
    108.                     // 清空id
    109.                     this.selectedId = '';
    110.                 },
    111.                 // 批量删除
    112.                 delByIds(){
    113.                     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    114.                         confirmButtonText: '确定',
    115.                         cancelButtonText: '取消',
    116.                         type: 'warning'
    117.                     }).then(() => {
    118.                         this.ids = this.multipleSelection.map(item => item.id);
    119.                         if (this.ids.length < 1){
    120.                             this.$message.error('请选中您要删除的数据!').center=true;
    121.                         }
    122.                         // 转为JSON数据发送到后台
    123.                         this.ids = JSON.stringify(this.ids);
    124.                         axios({
    125.                             method:"delete",
    126.                             url:"/books",
    127.                             data:this.ids,
    128.                             headers: {
    129.                                 'Content-Type': 'application/json;charset=UTF-8'
    130.                             }
    131.                         }).then((resp)=>{
    132.                             this.getAll();
    133.                             this.$message({
    134.                                 type: 'success',
    135.                                 message: '删除成功!'
    136.                             });
    137.                         });
    138.                         // 清空id数组
    139.                         this.ids = [];
    140.                     }).catch(() => {
    141.                             this.$message({
    142.                                 type: 'info',
    143.                                 message: '您已取消删除',
    144.                                 center:true
    145.                             });
    146.                         })
    147.                 },
    148.                 // 回显数据
    149.                 backView(){
    150.                     this.selectedId = this.multipleSelection.map(item => item.id);
    151.                     if (this.selectedId == null || this.selectedId.length < 1){
    152.                         this.$message({
    153.                             showClose: true,
    154.                             message: '请选中您要编辑的数据',
    155.                             type: 'error',
    156.                             center:true
    157.                         });
    158.                         return
    159.                     }
    160.                     this.dialogEditVisible = true;
    161.                     axios.get(`/books/${this.selectedId}`).then((resp)=>{
    162.                         this.updateForm = resp.data;
    163.                     });
    164.                     // 清空id
    165.                     this.selectedId = '';
    166.                 },
    167.  
    168.                 // 更新数据
    169.                 updateBook(){
    170.                     axios.put("/books",this.updateForm).then((resp)=>{
    171.                         // 关闭表单
    172.                         this.dialogEditVisible = false;
    173.                         // 查询数据
    174.                         this.getAll();
    175.                         // 成功提示
    176.                         this.$message({
    177.                             showClose: true,
    178.                             message: '更新数据成功!',
    179.                             type: 'success',
    180.                             center:true
    181.                         });
    182.                     });
    183.                 },
    184.  
    185.                 // 主页列表数据查询
    186.                 getAll(){
    187.                     axios.get("/books").then((resp)=>{
    188.                         this.tableData = resp.data;
    189.                     })
    190.                 },
    191.             }
    192.         })
    193.  
    194.     script>

    六、后端代码

    1.domain包 加载实体类

    1. public class Book {
    2.  
    3.     private Integer id;
    4.     private String name;
    5.     private String type;
    6.     private String author;
    7.     private String publisher;
    8.  
    9.     @Override
    10.     public String toString() {
    11.         return "Book{" +
    12.                 "id=" + id +
    13.                 ", name='" + name + '\'' +
    14.                 ", type='" + type + '\'' +
    15.                 ", author='" + author + '\'' +
    16.                 ", publisher='" + publisher + '\'' +
    17.                 '}';
    18.     }
    19.  
    20.     public Book() {
    21.     }
    22.  
    23.     public Book(Integer id, String name, String type, String author, String publisher) {
    24.         this.id = id;
    25.         this.name = name;
    26.         this.type = type;
    27.         this.author = author;
    28.         this.publisher = publisher;
    29.     }
    30.  
    31.     public Integer getId() {
    32.         return id;
    33.     }
    34.  
    35.     public void setId(Integer id) {
    36.         this.id = id;
    37.     }
    38.  
    39.     public String getName() {
    40.         return name;
    41.     }
    42.  
    43.     public void setName(String name) {
    44.         this.name = name;
    45.     }
    46.  
    47.     public String getType() {
    48.         return type;
    49.     }
    50.  
    51.     public void setType(String type) {
    52.         this.type = type;
    53.     }
    54.  
    55.     public String getAuthor() {
    56.         return author;
    57.     }
    58.  
    59.     public void setAuthor(String author) {
    60.         this.author = author;
    61.     }
    62.  
    63.     public String getPublisher() {
    64.         return publisher;
    65.     }
    66.  
    67.     public void setPublisher(String publisher) {
    68.         this.publisher = publisher;
    69.     }
    70. }

    2.dao数据层

    1. @Repository
    2. public interface BookDao {
    3.  
    4.     @Insert("insert into ev_books(name,type,author,publisher)values(#{name},#{type},#{author},#{publisher})")
    5.     void add(Book book);
    6.  
    7.     @Delete("delete from ev_books where id=#{id}")
    8.     void delete(Integer id);
    9.  
    10.     @Delete("")
    11.     void deleteByIds(@Param("ids") int[] ids);
    12.  
    13.     @Update("update ev_books set name=#{name},type=#{type},author=#{author},publisher=#{publisher} where id=#{id}")
    14.     void update(Book book);
    15.  
    16.     @Select("select * from ev_books where id=#{id}")
    17.     Book getById(Integer id);
    18.  
    19.     @Select("select * from ev_books")
    20.     List getAll();
    21.  
    22. }

    3.service业务层

    BookService接口：

    1. public interface BookService {
    2.     void add(Book book);
    3.     void delete(Integer id);
    4.     void deleteByIds(int[] ids);
    5.     void update(Book book);
    6.     Book getById(Integer id);
    7.     List getAll();
    8. }

    BookService实现类：

    1. @Service
    2. public class BookServiceImpl implements BookService {
    3.  
    4.     @Autowired
    5.     private BookDao bookDao;
    6.  
    7.     @Override
    8.     public void add(Book book) {
    9.         bookDao.add(book);
    10.     }
    11.  
    12.     @Override
    13.     public void delete(Integer id) {
    14.         bookDao.delete(id);
    15.     }
    16.  
    17.     @Override
    18.     public void deleteByIds(int[] ids) {
    19.         bookDao.deleteByIds(ids);
    20.     }
    21.  
    22.     @Override
    23.     public void update(Book book) {
    24.         bookDao.update(book);
    25.     }
    26.  
    27.     @Override
    28.     public Book getById(Integer id) {
    29.         return bookDao.getById(id);
    30.     }
    31.  
    32.     @Override
    33.     public List getAll() {
    34.         return bookDao.getAll();
    35.     }
    36. }

    4.controller控制层

    1. @RestController
    2. @RequestMapping("/books")
    3. public class BookController {
    4.  
    5.     @Autowired
    6.     private BookService bookService;
    7.  
    8.     @PostMapping
    9.     public String save(@RequestBody Book book){
    10.         bookService.add(book);
    11.         return "{'message':'success'}";
    12.     }
    13.  
    14.     @DeleteMapping("/{id}")
    15.     public String delete(@PathVariable Integer id){
    16.         bookService.delete(id);
    17.         return "{'message':'success'}";
    18.     }
    19.  
    20.     @DeleteMapping
    21.     public String deleteByIds(@RequestBody int[] ids){
    22.         bookService.deleteByIds(ids);
    23.         return "{'message':'success'}";
    24.     }
    25.  
    26.     @PutMapping
    27.     public String update(@RequestBody Book book){
    28.         bookService.update(book);
    29.         return "{'message':'success'}";
    30.     }
    31.  
    32.     @GetMapping("/{id}")
    33.     public Book getById(@PathVariable Integer id){
    34.         return bookService.getById(id);
    35.     }
    36.  
    37.    @GetMapping
    38.     public List getAll(){
    39.         return bookService.getAll();
    40.     }
    41. }

    5.config配置

    ServletContainersInitConfig.class 用来配置servlet容器

    1. // 4.定义一个servlet容器启动的配置,在里面加载spring的配置
    2. public class ServletContainersInitConfig extends AbstractAnnotationConfigDispatcherServletInitializer {
    3.     // 加载spring配置
    4.     @Override
    5.     protected Class[] getRootConfigClasses() {
    6.         return new Class[]{SpringConfig.class};
    7.     }
    8.     // 加载springMVC配置
    9.     @Override
    10.     protected Class[] getServletConfigClasses() {
    11.         return new Class[]{SpringMvcConfig.class};
    12.     }
    13.     // 设置哪些请求归属springMVC处理
    14.     @Override
    15.     protected String[] getServletMappings() {
    16.         return new String[]{"/"};
    17.     }
    18.  
    19.     // Post请求乱码处理
    20.     @Override
    21.     protected Filter[] getServletFilters() {
    22.         CharacterEncodingFilter filter = new CharacterEncodingFilter("UTF-8");
    23.         return new Filter[]{filter};
    24.     }
    25. }

    MyBatisConfig.class 用来替换xml

    1. public class MyBatisConfig {
    2.  
    3.     @Bean
    4.     public SqlSessionFactoryBean sqlSessionFactory(DataSource dataSource){
    5.         SqlSessionFactoryBean ssfb = new SqlSessionFactoryBean();
    6.         ssfb.setTypeAliasesPackage("cn.itaxu.domain");
    7.         ssfb.setDataSource(dataSource);
    8.         return ssfb;
    9.     }
    10.  
    11.     @Bean
    12.     public MapperScannerConfigurer mapperScannerConfigurer(){
    13.         MapperScannerConfigurer msc = new MapperScannerConfigurer();
    14.         msc.setBasePackage("cn.itaxu.dao");
    15.         return msc;
    16.     }
    17. }

    SpringConfig.class 用来配置spring

    1. @Configuration
    2. @ComponentScan(value = "cn.itaxu",
    3.         excludeFilters = @ComponentScan.Filter(
    4.                 type = FilterType.ANNOTATION,
    5.                 classes = Controller.class
    6.         )
    7. )
    8. @PropertySource("classpath:jdbc.properties")
    9. @Import({JdbcConfig.class,MyBatisConfig.class})
    10. public class SpringConfig {
    11. }

    SpringMvcConfig.class 用来配置springMVC

    1. // 3.创建springmvc的配置文件,加载controller对应的bean
    2. @Configuration
    3. @ComponentScan({"cn.itaxu.controller","cn.itaxu.config"})
    4. @EnableWebMvc
    5. public class SpringMvcConfig {
    6. }

    SpringMvcSupport.class 用来放行一些静态资源

    1. @Configuration
    2. public class SpringMvcSupport extends WebMvcConfigurationSupport {
    3.     @Override
    4.     protected void addResourceHandlers(ResourceHandlerRegistry registry) {
    5.         // 当访问/pages/???的时候,走/pages目录下的内容
    6.         registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
    7.         // 当访问/js/???的时候,走/js目录下的内容
    8.         registry.addResourceHandler("/js/**").addResourceLocations("/js/");
    9.         // 当访问/css/???的时候,走/css目录下的内容
    10.         registry.addResourceHandler("/css/**").addResourceLocations("/css/");
    11.         // 当访问/plugins/???的时候,走/plugins目录下的内容
    12.         registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/");
    13.     }
    14. }

    六、效果图展示

     

     

     七、总结

     使用SSM框架开发更加的便捷,真正的实现了高内聚、低耦合,与传统的xml方式不同,代码更加的简洁、清晰,大大提高了开发效率。

  • 相关阅读:
    centos系统编译openssl和openssl-lib的rpm安装包
    DDIA读书笔记第八章——分布式系统的麻烦
    【ML】使用支持向量回归器进行时间序列预测
    AUTOSAR DEM （三）:故障事件及故障错误码定义
    计算机视觉基础（8）——齐次坐标系与相机内外参
    ​打造企业自己代码规范IDEA插件（上）
    Kubernetes部署单元-Pod
    安装配置ingress-nginx支持https访问
    单元测试（unit testing）到底是什么？
    Aardio - 通过变量名将变量值整合到一串文本中
  • 原文地址：https://blog.csdn.net/weixin_64144937/article/details/127837121