用最基本的步骤实现java后端管理系统

技术栈：
后端：

java基础
servlet的相关知识
jsp相关知识
jdbc的相关知识和mybatis框架
Maven项目管理的相关知识和junit单元测试
数据库，sql语句

前端：

html+css+js
Ajax
Vue基础知识
Element UI的使用

项目展示：

前端布局并静态填充

导入element ui的相关依赖cdn导入即可，在element官网复制container容器的实例：

<script src="../js/vue.js"></script>

对上面的内容做修改改为自己需要的界面，包括css样式。

将此页面作为主界面，vue的组件原理spa特性导航只需要加载相应的组件即可。注意编写界面后是没有导航的我们需要引入vue组件解析和路由的依赖：

<!--单文件vue组件解析器--><script src="https://unpkg.com/http-vue-loader"></script><!--vue路由--><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

导入该依赖后就能识别vue组件，加载组件路由导航了，当然还需要node环境，注意安装node包管理在你的目录中要有下图上这个就可以了：

编写vue组件实现导航（每个组件的结构是相同的内容填充element的组件即可）以其中一个组件为例：

<template><div>      <!--script部分会自动绑定div不用设id绑定，只能有一个顶级div--><!--表单--><el-row><el-col :span="20"><div><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="种类"><el-select v-model="formInline.type" placeholder="请选择种类"><el-option label="办公家具" value="办公家具"></el-option><el-option label="客厅家具" value="客厅家具"></el-option><el-option label="卧室家具" value="卧室家具"></el-option><el-option label="书房家具" value="书房家具"></el-option><el-option label="餐厅家具" value="餐厅家具"></el-option><el-option label="卫浴家具" value="卫浴家具"></el-option></el-select></el-form-item><el-form-item label="材质"><el-select v-model="formInline.materials" placeholder="请选择材质"><el-option label="红椿" value="红椿"></el-option><el-option label="柚木" value="柚木"></el-option><el-option label="榉木" value="榉木"></el-option><el-option label="枫木" value="枫木"></el-option><el-option label="橡木" value="橡木"></el-option><el-option label="水曲柳" value="水曲柳"></el-option><el-option label="榆木" value="榆木"></el-option><el-option label="杨木" value="杨木"></el-option><el-option label="松木" value="松木"></el-option></el-select></el-form-item><el-form-item label="空间"><el-select v-model="formInline.space" placeholder="请选择空间"><el-option label="客厅" value="客厅"></el-option><el-option label="卧室" value="卧室"></el-option><el-option label="厨房" value="厨房"></el-option><el-option label="餐厅" value="餐厅"></el-option><el-option label="过道" value="过道"></el-option><el-option label="书房" value="书房"></el-option><el-option label="卫生间" value="卫生间"></el-option><el-option label="门厅" value="门厅"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" v-on:click="searchFunction">查询</el-button></el-form-item></el-form></div></el-col><!--添加按钮--><el-col :span="4"><div><el-button type="primary" plain   style="float: right" v-on:click="dialogVisible = true">添加</el-button></div></el-col><!--添加表单--><el-dialogtitle="添加产品":visible.sync="dialogVisible"width="30%"><el-form :model="form" label-width="80px"><el-form-item label="图片"><el-input v-model="form.picture"></el-input></el-form-item><el-form-item label="型号"><el-input v-model="form.model"></el-input></el-form-item><el-form-item label="种类"><el-select v-model="form.type" placeholder="请选择种类"><el-option label="办公家具" value="办公家具"></el-option><el-option label="客厅家具" value="客厅家具"></el-option><el-option label="卧室家具" value="卧室家具"></el-option><el-option label="书房家具" value="书房家具"></el-option><el-option label="餐厅家具" value="餐厅家具"></el-option><el-option label="卫浴家具" value="卫浴家具"></el-option></el-select></el-form-item><el-form-item label="材质"><!--榉木、柚木、枫木、橡木、红椿、水曲柳、榆木、杨木、松木--><el-select v-model="form.materials" placeholder="请选择材质"><el-option label="红椿" value="红椿"></el-option><el-option label="柚木" value="柚木"></el-option><el-option label="榉木" value="榉木"></el-option><el-option label="枫木" value="枫木"></el-option><el-option label="橡木" value="橡木"></el-option><el-option label="水曲柳" value="水曲柳"></el-option><el-option label="榆木" value="榆木"></el-option><el-option label="杨木" value="杨木"></el-option><el-option label="松木" value="松木"></el-option></el-select></el-form-item><el-form-item label="规格"><el-input v-model="form.size"></el-input></el-form-item><el-form-item label="空间"><el-select v-model="form.space" placeholder="请选择空间"><el-option label="客厅" value="客厅"></el-option><el-option label="卧室" value="卧室"></el-option><el-option label="厨房" value="厨房"></el-option><el-option label="餐厅" value="餐厅"></el-option><el-option label="过道" value="过道"></el-option><el-option label="书房" value="书房"></el-option><el-option label="卫生间" value="卫生间"></el-option><el-option label="门厅" value="门厅"></el-option></el-select></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="addProduct">提 交</el-button></span></el-dialog></el-row><!--表格传入的是一个json，prop是json的key--><el-table:data="tableData"style="width: 100%"><el-table-columnprop="id"label="序号"width="180"></el-table-column><el-table-columnprop="picture"label="图片"width="180"></el-table-column><el-table-columnprop="model"label="型号"width="280"></el-table-column><el-table-columnprop="type"label="种类"width="180"></el-table-column><el-table-columnprop="materials"label="材料"></el-table-column><el-table-columnprop="size"label="规格"></el-table-column><el-table-columnprop="space"label="空间"></el-table-column><el-table-columnlabel="操作"><template slot-scope="scope"><el-button type="primary" v-on:click="updateProduct(scope.row)">修改</el-button><el-button type="danger" v-on:click="deleteById(scope.row)">删除</el-button></template></el-table-column></el-table><!--修改的表单需要获取默认值value：是input中预先放置的文字，当鼠标点击之后依然存在，是值的一部分。
placeholder：是input中输入位置的默认显示的文字，鼠标点击后仍旧显示，但不属于值，类似于背景。--><el-dialogtitle="编辑产品":visible.sync="dialogVisibleone"width="30%"><el-form :model="formone" label-width="80px"><el-form-item label="图片"><el-input v-model="formone.picture" :value=formone.picture></el-input></el-form-item><el-form-item label="型号"><el-input v-model="formone.model"  :value=formone.model></el-input></el-form-item><el-form-item label="种类"><el-select v-model="formone.type" :value=formone.type><el-option label="办公家具" value="办公家具"></el-option><el-option label="客厅家具" value="客厅家具"></el-option><el-option label="卧室家具" value="卧室家具"></el-option><el-option label="书房家具" value="书房家具"></el-option><el-option label="餐厅家具" value="餐厅家具"></el-option><el-option label="卫浴家具" value="卫浴家具"></el-option></el-select></el-form-item><el-form-item label="材质"><!--榉木、柚木、枫木、橡木、红椿、水曲柳、榆木、杨木、松木--><el-select v-model="formone.materials" :value=formone.materials><el-option label="红椿" value="红椿" ></el-option><el-option label="柚木" value="柚木"></el-option><el-option label="榉木" value="榉木"></el-option><el-option label="枫木" value="枫木"></el-option><el-option label="橡木" value="橡木"></el-option><el-option label="水曲柳" value="水曲柳"></el-option><el-option label="榆木" value="榆木"></el-option><el-option label="杨木" value="杨木"></el-option><el-option label="松木" value="松木"></el-option></el-select></el-form-item><el-form-item label="规格"><el-input v-model="formone.size" :value=formone.size></el-input></el-form-item><el-form-item label="空间"><el-select v-model="formone.space" :value=formone.space><el-option label="客厅" value="客厅"></el-option><el-option label="卧室" value="卧室"></el-option><el-option label="厨房" value="厨房"></el-option><el-option label="餐厅" value="餐厅"></el-option><el-option label="过道" value="过道"></el-option><el-option label="书房" value="书房"></el-option><el-option label="卫生间" value="卫生间"></el-option><el-option label="门厅" value="门厅"></el-option></el-select></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisibleone = false">取 消</el-button><el-button type="primary" v-on:click="updateProductCommit">提 交</el-button></span></el-dialog><!--分页--><el-paginationbackgroundlayout="prev, pager, next":total="pageCount.page"@current-change="handleCurrentChange":current-page="currentPage4"></el-pagination></div>
</template><script>
module.exports={data:function (){return{prop:{},//搜索formInline: {type: '',materials: '',space:''},//设置添加表单不可见dialogVisible: false,dialogVisibleone: false,//添加表单的数据form: {picture: '',model:'',type:'',materials:'',size:'',space:''},//更新表单formone: {id:'',picture: '',model:'',type:'',materials:'',size:'',space:''},//表格数据tableData: {id:'',picture:'',model:'',type:'',materials:'',size:'',space:''},pageCount:{page:''},currentPage4: 1}}}
</script><style scoped>.el-table .warning-row {background: oldlace;
}.el-table .success-row {background: #f0f9eb;
}</style>

用的是node环境所以是module.exports 而不是 export default，其里边的data是数据先填充静态的，例子中删了，自己填充，相关函数之后再实现。当写好一个vue组件后会回到主页面中注册组件并编写路由。如下

<script>//注册路由const  Display=httpVueLoader("../components/first.vue");const routes = [{path: '/',component: Display},]const router = new VueRouter({routes})new Vue({el:'#app',router,data:{menu:'欢迎!',},//监听路由变化watch:{$route(to){//console.log(to.path);if (to.path ==='/'){this.menu='首页'}}}});

再主页面的script编写上面代码，接下来就是显示了，再导航中添加router-link标签：

//关联路由
<router-link to="/"><el-menu-item index="2" ><i class="el-icon-menu"></i><span slot="title" style="width:60px">首页</span>
</el-menu-item></router-link>//组件显示
<el-main><!--main--><router-view></router-view>  //这里会动态变化加载不同的组件
</el-main>

其他导航和组件都同理，当所有的组件都编写完后前端就写好了。当然也可以不用vue用jsp每个页面用a标签连接都是也可以的。

后端接口编写

Maven项目管理构建后端web框架，在pom.xml导入相关的依赖，看之前的文章，后端采用mvc架构。

conyroller中是各种数据处理色servlet，factory是工具包，mapper是映射类，model是ORM模型。这些之前的文章都有，不懂可以去看。

Factory是mybatis连接数据库的工具类，进行了封装避免每次都要写重复步骤。
package factory;import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;import java.io.IOException;
import java.io.InputStream;public class SqlsessionFactory {private static SqlSessionFactory sqlSessionFactory;static {//mybatis框架都在xml配置文件中加载配置文件//从 XML 文件中构建 SqlSessionFactory 的实例String resource = "mybatis-config.xml";InputStream inputStream = null;try {inputStream = Resources.getResourceAsStream(resource);} catch (IOException e) {e.printStackTrace();}sqlSessionFactory= new SqlSessionFactoryBuilder().build(inputStream);}public SqlSessionFactory SqlsessionFactory(){return sqlSessionFactory;}}

model是java bean的ORM模型。mapper代理映射看之前的文章。每个mapper对应一个数据库表实现单独操作。之前的文章已经讲了如何进行数据库操作了，这里主要将前后端交互的细节。

在每个vue组件中重写methods对象，使用axios发送请求，axios的cdn导入只在主界面导入就可以了。
之前已经写好了vue组件没有写方法，接下来看写好了方法后的组件：

<template><div>      <!--script部分会自动绑定div不用设id绑定，只能有一个顶级div--><!--表单--><el-row><el-col :span="20"><div><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="种类"><el-select v-model="formInline.type" placeholder="请选择种类"><el-option label="办公家具" value="办公家具"></el-option><el-option label="客厅家具" value="客厅家具"></el-option><el-option label="卧室家具" value="卧室家具"></el-option><el-option label="书房家具" value="书房家具"></el-option><el-option label="餐厅家具" value="餐厅家具"></el-option><el-option label="卫浴家具" value="卫浴家具"></el-option></el-select></el-form-item><el-form-item label="材质"><el-select v-model="formInline.materials" placeholder="请选择材质"><el-option label="红椿" value="红椿"></el-option><el-option label="柚木" value="柚木"></el-option><el-option label="榉木" value="榉木"></el-option><el-option label="枫木" value="枫木"></el-option><el-option label="橡木" value="橡木"></el-option><el-option label="水曲柳" value="水曲柳"></el-option><el-option label="榆木" value="榆木"></el-option><el-option label="杨木" value="杨木"></el-option><el-option label="松木" value="松木"></el-option></el-select></el-form-item><el-form-item label="空间"><el-select v-model="formInline.space" placeholder="请选择空间"><el-option label="客厅" value="客厅"></el-option><el-option label="卧室" value="卧室"></el-option><el-option label="厨房" value="厨房"></el-option><el-option label="餐厅" value="餐厅"></el-option><el-option label="过道" value="过道"></el-option><el-option label="书房" value="书房"></el-option><el-option label="卫生间" value="卫生间"></el-option><el-option label="门厅" value="门厅"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" v-on:click="searchFunction">查询</el-button></el-form-item></el-form></div></el-col><!--添加按钮--><el-col :span="4"><div><el-button type="primary" plain   style="float: right" v-on:click="dialogVisible = true">添加</el-button></div></el-col><!--添加表单--><el-dialogtitle="添加产品":visible.sync="dialogVisible"width="30%"><el-form :model="form" label-width="80px"><el-form-item label="图片"><el-input v-model="form.picture"></el-input></el-form-item><el-form-item label="型号"><el-input v-model="form.model"></el-input></el-form-item><el-form-item label="种类"><el-select v-model="form.type" placeholder="请选择种类"><el-option label="办公家具" value="办公家具"></el-option><el-option label="客厅家具" value="客厅家具"></el-option><el-option label="卧室家具" value="卧室家具"></el-option><el-option label="书房家具" value="书房家具"></el-option><el-option label="餐厅家具" value="餐厅家具"></el-option><el-option label="卫浴家具" value="卫浴家具"></el-option></el-select></el-form-item><el-form-item label="材质"><!--榉木、柚木、枫木、橡木、红椿、水曲柳、榆木、杨木、松木--><el-select v-model="form.materials" placeholder="请选择材质"><el-option label="红椿" value="红椿"></el-option><el-option label="柚木" value="柚木"></el-option><el-option label="榉木" value="榉木"></el-option><el-option label="枫木" value="枫木"></el-option><el-option label="橡木" value="橡木"></el-option><el-option label="水曲柳" value="水曲柳"></el-option><el-option label="榆木" value="榆木"></el-option><el-option label="杨木" value="杨木"></el-option><el-option label="松木" value="松木"></el-option></el-select></el-form-item><el-form-item label="规格"><el-input v-model="form.size"></el-input></el-form-item><el-form-item label="空间"><el-select v-model="form.space" placeholder="请选择空间"><el-option label="客厅" value="客厅"></el-option><el-option label="卧室" value="卧室"></el-option><el-option label="厨房" value="厨房"></el-option><el-option label="餐厅" value="餐厅"></el-option><el-option label="过道" value="过道"></el-option><el-option label="书房" value="书房"></el-option><el-option label="卫生间" value="卫生间"></el-option><el-option label="门厅" value="门厅"></el-option></el-select></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="addProduct">提 交</el-button></span></el-dialog></el-row><!--表格传入的是一个json，prop是json的key--><el-table:data="tableData"style="width: 100%"><el-table-columnprop="id"label="序号"width="180"></el-table-column><el-table-columnprop="picture"label="图片"width="180"></el-table-column><el-table-columnprop="model"label="型号"width="280"></el-table-column><el-table-columnprop="type"label="种类"width="180"></el-table-column><el-table-columnprop="materials"label="材料"></el-table-column><el-table-columnprop="size"label="规格"></el-table-column><el-table-columnprop="space"label="空间"></el-table-column><el-table-columnlabel="操作"><template slot-scope="scope"><el-button type="primary" v-on:click="updateProduct(scope.row)">修改</el-button><el-button type="danger" v-on:click="deleteById(scope.row)">删除</el-button></template></el-table-column></el-table><!--修改的表单需要获取默认值value：是input中预先放置的文字，当鼠标点击之后依然存在，是值的一部分。
placeholder：是input中输入位置的默认显示的文字，鼠标点击后仍旧显示，但不属于值，类似于背景。--><el-dialogtitle="编辑产品":visible.sync="dialogVisibleone"width="30%"><el-form :model="formone" label-width="80px"><el-form-item label="图片"><el-input v-model="formone.picture" :value=formone.picture></el-input></el-form-item><el-form-item label="型号"><el-input v-model="formone.model"  :value=formone.model></el-input></el-form-item><el-form-item label="种类"><el-select v-model="formone.type" :value=formone.type><el-option label="办公家具" value="办公家具"></el-option><el-option label="客厅家具" value="客厅家具"></el-option><el-option label="卧室家具" value="卧室家具"></el-option><el-option label="书房家具" value="书房家具"></el-option><el-option label="餐厅家具" value="餐厅家具"></el-option><el-option label="卫浴家具" value="卫浴家具"></el-option></el-select></el-form-item><el-form-item label="材质"><!--榉木、柚木、枫木、橡木、红椿、水曲柳、榆木、杨木、松木--><el-select v-model="formone.materials" :value=formone.materials><el-option label="红椿" value="红椿" ></el-option><el-option label="柚木" value="柚木"></el-option><el-option label="榉木" value="榉木"></el-option><el-option label="枫木" value="枫木"></el-option><el-option label="橡木" value="橡木"></el-option><el-option label="水曲柳" value="水曲柳"></el-option><el-option label="榆木" value="榆木"></el-option><el-option label="杨木" value="杨木"></el-option><el-option label="松木" value="松木"></el-option></el-select></el-form-item><el-form-item label="规格"><el-input v-model="formone.size" :value=formone.size></el-input></el-form-item><el-form-item label="空间"><el-select v-model="formone.space" :value=formone.space><el-option label="客厅" value="客厅"></el-option><el-option label="卧室" value="卧室"></el-option><el-option label="厨房" value="厨房"></el-option><el-option label="餐厅" value="餐厅"></el-option><el-option label="过道" value="过道"></el-option><el-option label="书房" value="书房"></el-option><el-option label="卫生间" value="卫生间"></el-option><el-option label="门厅" value="门厅"></el-option></el-select></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisibleone = false">取 消</el-button><el-button type="primary" v-on:click="updateProductCommit">提 交</el-button></span></el-dialog><!--分页--><el-paginationbackgroundlayout="prev, pager, next":total="pageCount.page"@current-change="handleCurrentChange":current-page="currentPage4"></el-pagination></div>
</template><script>
module.exports={data:function (){return{prop:{},//搜索formInline: {type: '',materials: '',space:''},//设置添加表单不可见dialogVisible: false,dialogVisibleone: false,//添加表单的数据form: {picture: '',model:'',type:'',materials:'',size:'',space:''},//更新表单formone: {id:'',picture: '',model:'',type:'',materials:'',size:'',space:''},//表格数据tableData: {id:'',picture:'',model:'',type:'',materials:'',size:'',space:''},pageCount:{page:''},currentPage4: 1}},methods:{//添加成功的信息提示addsecess() {this.$message({showClose: true,message: '恭喜你，添加成功!',type: 'success'});},//删除成功提示deleteSuccess() {this.$message({showClose: true,message: '恭喜你，删除成功!',type: 'success'});},//更新成功提示updateSuccess() {this.$message({showClose: true,message: '恭喜你，更新成功!',type: 'success'});},//删除产品有提示deleteById(row){var this_=this;this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {axios({method:"post",url:"http://localhost/senyuanyijia_war_exploded/DeleteProductServlet",data:{id:row.id}}).then(function (response){  //参数对应servlet的httpservletresponseif(response.data =="success"){this_.deleteSuccess();}else {alert("ERROR");}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},//添加产品addProduct(){var this_=this;//alert("添加数据!");axios({method:"post",url:"http://localhost/senyuanyijia_war_exploded/AddProductServlet",data:this_.form}).then(function (response){  //参数对应servlet的httpservletresponseif(response.data =="SUCCESS"){this_.dialogVisible = false;this_.addsecess();}else {alert("ERROR");this_.dialogVisible = false;}})},//编辑产品后回显数据updateProduct(row){var this_=this;axios({method:"post",url:"http://localhost/senyuanyijia_war_exploded/UpdateProductServlet",data:{id:row.id}}).then(function (response){this_.formone=response.data;this_.dialogVisibleone=true;})},//对回显的数据修改后在更新产品updateProductCommit(){//alert("nihao");var this_=this;axios({method:"post",url:"http://localhost/senyuanyijia_war_exploded/UpdateProductedServlet",data:this_.formone}).then(function (response){if(response.data == "success"){this_.dialogVisibleone=false;this_.updateSuccess();}})},//搜索栏searchFunction(){var this_=this;var obj=this.formInline;//console.log(this.formInline);/*{__ob__: Observer}materials: ""space: ""type: "餐厅家具*///去除对象的空属性let _newPar = {};for (var key in obj) {// 如果对象属性的值不为空，就保存该属性（如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）if ((obj[key] === 0 || obj[key]) && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {// 保存属性_newPar[key] = obj[key];}}//console.log(_newPar);axios({method:"post",url:"http://localhost/senyuanyijia_war_exploded/SearchProductServlet",data:_newPar}).then(function (response){this_.tableData=response.data;})},//获取当前页码handleCurrentChange(val) {//console.log(`当前页: ${val}`);//console.log(val);var this_=this;axios({method:"get",url:"http://localhost/senyuanyijia_war_exploded/ProductPageServlet?index="+val,}).then(function (response){this_.tableData=response.data;})}},//钩子函数要在data外mounted(){//console.log('123');//alert('123')var this_=this;//界面加载完后自动执行axios({method:"get",url:"http://localhost/senyuanyijia_war_exploded/ProductServlet"}).then(function (response){this_.tableData=response.data;}) //then响应，servlet将数据用输出流写道servlet中，axios从servlet获取axios({method:"post",url:"http://localhost/senyuanyijia_war_exploded/ProductPageCountServlet"}).then(function (response){this_.pageCount=response.data;})},
}
</script><style scoped>.el-table .warning-row {background: oldlace;
}.el-table .success-row {background: #f0f9eb;
}</style>

前端发送请求（Ajax）：

//POST
axios({method:"post",url:"http://localhost/senyuanyijia_war_exploded/UpdateProductedServlet",data:this_.formone}).then(function (response){if(response.data == "success"){this_.dialogVisibleone=false;this_.updateSuccess();}})
//GET
axios({method:"get",url:"http://localhost/senyuanyijia_war_exploded/ProductPageServlet?index="+val,}).then(function (response){this_.tableData=response.data;})

axios的核心,j通过Ajax将数据发送到对应的servlet，进行数据处理并操作数据库，和增删查改分不开。这里使用了vue框架，MVVM模型不需要写循环，判断等，如果使用jsp的数据自行考虑。将数据发送到对应的servlet
UpdateProductedServlet：

package controller;import com.alibaba.fastjson.JSON;
import factory.SqlsessionFactory;
import mapper.ProductMapper;
import model.Product;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.*;
import java.io.BufferedReader;
import java.io.IOException;@WebServlet(name = "UpdateProductedServlet", value = "/UpdateProductedServlet")
public class UpdateProductedServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");BufferedReader reader=request.getReader();  //???String params=reader.readLine();Product product = JSON.parseObject(params,Product.class);SqlSessionFactory sqlSessionFactory=new SqlsessionFactory().SqlsessionFactory();SqlSession session=sqlSessionFactory.openSession();ProductMapper productMapper=session.getMapper(ProductMapper.class);productMapper.updateOneColumn(product);response.getWriter().write("success");session.commit();session.close();}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}

ProductPageServlet：

package controller;import com.alibaba.fastjson.JSON;
import factory.SqlsessionFactory;
import mapper.ProductMapper;
import model.Product;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.List;@WebServlet("/ProductPageServlet")
public class ProductPageServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");int page=Integer.parseInt(request.getParameter("index"));//计算页面变化int newPage=(page-1)*10;SqlSessionFactory sqlSessionFactory=new SqlsessionFactory().SqlsessionFactory();SqlSession session=sqlSessionFactory.openSession();ProductMapper productMapper=session.getMapper(ProductMapper.class);List<Product> products =productMapper.selectTen(newPage);session.close();String stringjson= JSON.toJSONString(products);response.setContentType("text/json;charset=utf-8");response.getWriter().write(stringjson);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}

上面演示了post和get发送数据后servlet的处理，post是request.getReader()；get是request.getParameter(“index”)；另一个核心是JSON的部分了，这是阿里的fastjson的数据类型的转换，可以把不同类型数据转化为json或将json转化为其他数据类型；在pom文件导入fastjson即可。最后就是response.getWriter().write()方法了它是将后端的数据发送给前端（展示ProductPageServlet返回的数据）：

后端将这些数据发送给前端，看前端如何接收的：

axios({method:"get",url:"http://localhost/senyuanyijia_war_exploded/ProductPageServlet?index="+val,}).then(function (response){this_.tableData=response.data;})
// An highlighted block
var foo = 'bar';

在get方法中将请求发送到对应的url地址，注意get是子地址栏传入数据，then方法处理返回的数据response.data就是返回的数据，将其赋值给vue的tableData就可以了，主要要进行数据类型的转化，vue的table默认是数组类型，不能返回其他类型。不同的类型自己甄别。在post方法中data是在data元素中传递的，也要注意数据类型，有时候错误就发生在数据类型中，导致的失败。

JavaWeb项目框架相关推荐

使用maven搭建ssm框架的javaweb项目
目前主流的javaweb项目,常会用到ssm(Spring+Spring MVC+Mybatis)框架来搭建项目的主体框架,本篇介绍搭建SSM框架的maven项目的实施流程.记之共享! 一.SSM框架 ...
JavaWeb框架（四）：JavaWeb项目基于三大组件实现的公司管理系统
MVC实战项目 Web 三大组件实现公司管理系统需求: 项目实战基于会话跟踪技术实现登录功能基于Filter过滤器实现登录验证功能基于Listener监听器监听ServletCntext对象 ...
log4j在javaWeb项目中的使用
在前边的文章中对log4j的配置文件进行了说明,今天介绍如何在普通的javaWeb项目中使用log4j. 在日常的开发过程中,日志使用的很频繁,我们可以利用日志来跟踪程序的错误,程序运行时的输出参数等 ...
【Web】JavaWeb项目为什么我们要放弃jsp？为什么要前后端解耦？为什么要前后端分离？2.0版，为分布式架构打基础。 - CSDN博客
前戏前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦, 并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务 ...
浅谈javaweb三大框架和MVC设计模式
浅谈javaweb三大框架和MVC设计模式转载自:http://blog.csdn.net/sunpeng19960715/article/details/50890705 小序:博主以前在学jav ...
前后端分离的项目部署到tomcat_如何在开发时部署和运行前后端分离的JavaWeb项目...
在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少.这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项 ...
javaweb项目搭建ehcache缓存系统
转载自 javaweb项目搭建ehcache缓存系统 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider,同时在项目开发中 ...
Druid使用起步—在javaWeb项目中配置监控
原文章:http://my.oschina.net/u/568779/blog/152813 ---------------------------------------------------- ...
从无到有整合SpringMVC-MyBatis项目（1）：搭建JavaWeb项目
前言: 近日有个销售类网站的项目,用了很久的Springboot,突发奇想回到过去,基于SpringMVC-MyBatis框架搭建项目,惭愧的是有些配置已记不清楚,所以决定写篇博客来记录下整个搭建过程 ...
javaWeb项目之图书管理系统(附视频讲解)
javaWeb项目之图书管理系统(附视频讲解) 视频播放地址:javaWeb图书系统本系统为"Swing项目之图书管理系统"(此源码已共享)的Web版,网页框架用采用EasyUI ...

JavaWeb项目框架

用最基本的步骤实现java后端管理系统

前端布局并静态填充

后端接口编写

JavaWeb项目框架相关推荐

最新文章

热门文章