B/S（浏览器/服务器）结构是目前主流的网络化的结构模式，它能够把系统核心功能集中在服务器上面，可以帮助系统开发人员简化操作，便于维护和使用。只需要学生在学生端安装360浏览器、谷歌浏览器、QQ浏览器等当前大众浏览器，在电脑里面安装sqlserver、mysql数据库等数据库。安装好的浏览器与服务器端的数据库进行信息数据的交互。很多专门软件能够做到的事情，采用B/S结构模式也能实现，它能够结合Web浏览器技术，ActiveX技术以及多种脚本语言等技术。帮助程序开发者节约了不少开发成本。目前B/S结构成为程序开发主流结构，它最好的地方就是没有地点限制还不用专门安装软件，笔记本或者电脑能够上网就能访问系统。系统使用B/S进行开发在后期系统维护上面就会很省事，不用什么问题都在服务器上面操作，简单的学生端处理就解决部分问题，开发出来的程序跟学生交互性上面也会增强，还可以实时刷新浏览器进行程序局部的数据信息更新。
图书个性化推荐系统，在前台首页可以查看首页、图书信息、好书推荐、留言反馈、个人中心、后台管理等内容，。
学生注册、登录，在学生注册页面可以填写学号、密码、学生姓名、性别、出生日期、联系电话、班级等信息进行注册、登录，。
图书信息，在图书信息页面通过查看图书编号、图书名称、图书类别、图片、作者、出版社、版次、数量、点击次数等信息进行预约、立即提交或点我收藏操作，。在个人中心页面通过填写学号、密码、学生姓名、性别、出生日期、联系电话、班级等信息进行更新信息、退出登录操作，。
图5-3图书信息界面图
管理员登录，通过填写输入用户名、密码、角色进行登录，。
学生管理，在学生管理页面中可以通过查看学号、密码、学生姓名、性别、出生日期、联系电话、班级等内容进行修改、删除等操作，。还可以根据需要对图书分类管理进行修改或删除等详细操作，。
图书信息管理，在图书信息管理页面中可以查看图书编号、图书名称、图书类别、图片、作者、出版社、版次、数量等信息，并可根据需要对已有图书信息管理进行详情、预约、查看评论、修改或删除等操作，。
图书预约管理，在图书预约管理页面中可以查看图书编号、图书名称、图书类别、作者、出版社、版次、数量、学号、学生姓名、联系电话、申请日期、审核回复、审核状态、审核等信息，并可根据需要对已有图书预约管理进行详情、退换、修改或删除等详细操作，。
退换图书管理，在退换图书管理页面中可以查看图书编号、图书名称、作者、出版社、版次、数量、学号、退换类型、退换原因、日期、审核回复、审核状态、审核等内容，并且根据需要对已有退换图书管理进行详情，修改或删除等详细操作，。
管理员管理，在管理员管理页面中可以查看用户名、密码、角色等内容，并且根据需要对已有管理员管理进行详情，修改或删除等详细操作，。
留言板管理，在留言板管理页面中可以查看用户名、留言内容、回复内容等信息，并且根据需要对已有留言板管理进行详情，修改、回复或删除等详细操作，。
好书推荐，在好书推荐页面中可以查看标题、简介、图片等信息，并且根据需要对已有好书推荐进行详情，修改或删除等详细操作，。
个人信息，在个人信息页面中通过填写学号、密码、学生姓名、性别、出生日期、联系电话、班级等信息，还可以根据需要对个人信息进行修改等操作、。
图书预约管理，在图书预约管理页面中可以查看图书编号、图书名称、图书类别、作者、出版社、版次、数量、学号、学生姓名、联系电话、申请日期、审核回复、审核状态等信息内容，并且根据需要对已有图书预约管理进行详情、退换或删除等其他详细操作，。
退换图书管理，在退换图书管理页面中通过查看图书编号、图书名称、作者、出版社、版次、数量、学号、退换类型、退换原因、日期、审核回复、审核状态等内容进行详情、修改、删除等操作，。
我的收藏管理，在我的收藏管理页面中可以查看收藏名称、收藏图片等内容，并且根据需要对已有我的收藏管理进行详情、删除等详细操作，。
image15.png
image16.png
image17.png
image18.png
image19.png
image20.png
image21.png
image22.png
image23.png
image24.png
image25.png
image26.png
image27.png
list.vue
<template>
<div class="main-content">
<!-- 列表页 -->
<div v-if="showFlag">
<el-form :inline="true" :model="searchForm" class="form-content">
<el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
<el-form-item :label="contents.inputTitle == 1 ? '标题' : ''">
<el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.title" placeholder="标题" clearable></el-input>
<el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.title" placeholder="标题" clearable></el-input>
<el-input v-if="contents.inputIcon == 0" v-model="searchForm.title" placeholder="标题" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
<el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
<el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
</el-form-item>
</el-row>
<el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
<el-form-item>
<el-button
v-if="isAuth('news','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
type="success"
icon="el-icon-plus"
@click="addOrUpdateHandler()"
>{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
<el-button
v-if="isAuth('news','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
type="success"
@click="addOrUpdateHandler()"
>{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
<el-button
v-if="isAuth('news','新增') && contents.btnAdAllIcon == 0"
type="success"
@click="addOrUpdateHandler()"
>{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
<el-button
v-if="isAuth('news','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
:disabled="dataListSelections.length <= 0"
type="danger"
icon="el-icon-delete"
@click="deleteHandler()"
>{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
<el-button
v-if="isAuth('news','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
:disabled="dataListSelections.length <= 0"
type="danger"
@click="deleteHandler()"
>{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
<el-button
v-if="isAuth('news','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
:disabled="dataListSelections.length <= 0"
type="danger"
@click="deleteHandler()"
>{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
</el-form-item>
</el-row>
</el-form>
<div class="table-content">
<el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
:header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
:border="contents.tableBorder"
:fit="contents.tableFit"
:stripe="contents.tableStripe"
:row-style="rowStyle"
:cell-style="cellStyle"
:style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
v-if="isAuth('news','查看')"
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandler">
<el-table-column v-if="contents.tableSelection"
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="title"
header-align="center"
label="标题">
<template slot-scope="scope">
{{scope.row.title}}
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="introduction"
header-align="center"
label="简介">
<template slot-scope="scope">
{{scope.row.introduction}}
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="picture"
header-align="center"
width="200"
label="图片">
<template slot-scope="scope">
<div v-if="scope.row.picture">
<img :src="scope.row.picture.split(',')[0]" width="100" height="100">
</div>
<div v-else>无图片</div>
</template>
</el-table-column>
<el-table-column width="300" :align="contents.tableAlign"
header-align="center"
label="操作">
<template slot-scope="scope">
<el-button v-if="isAuth('news','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
<el-button v-if="isAuth('news','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
<el-button v-if="isAuth('news','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
<el-button v-if="isAuth('news','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
<el-button v-if="isAuth('news','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
<el-button v-if="isAuth('news','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
<el-button v-if="isAuth('news','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
<el-button v-if="isAuth('news','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
<el-button v-if="isAuth('news','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
clsss="pages"
:layout="layouts"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="Number(contents.pageEachNum)"
:total="totalPage"
:small="contents.pageStyle"
class="pagination-content"
:background="contents.pageBtnBG"
:style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
></el-pagination>
</div>
</div>
<!-- 添加/修改页面 将父组件的search方法传递给子组件-->
<add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
</div>
</template>
