用最基本的步驟實現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项目框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。