Vue+elementUI+Axios+Servlet+Jdbc realizes adding, deleting, modifying and checking

Experience

Personal understanding:

Advantages of Vue:

1. Module decoupling: Encapsulate html code, js code, and style code into vue files, similar to java classes, each vue file maintains its own code, reducing the coupling of modules.

2. Logic and view layering: Two-way data binding is implemented for data operation and view rendering. Developers only need to focus on the data, and do not need to repeatedly operate the view. For example, if the value of the page changes, the changed data value can be transferred in real time For the page, there is no need to manipulate the dom element to render the page.

3. Data management center: Through Vuex, you can put the common logic that requires unified operation data into the Vuex module, which can be called in each Vue file. The implementation principle is similar to springMvc, and each method is intercepted and Data processing.

4. Quick construction: through elementUI, you can quickly introduce ready-made UI frameworks and build your own websites and pages, similar to bootstrap.

actual effect

Inquire:

Added:

Revise:

 

delete:

 

 

Front-end project + back-end project source code

        Recently, I studied the Vue framework of the front end. The back end briefly wrote a servlet+jdbc to provide data transmission services. The front end uses Vue scaffolding + Axios interaction + ElementUI layout. If the back end uses other frameworks, you can directly modify the front end file vue . The access address in config.js can use the front-end code to access your background:

        

The source code download address is as follows:

Link: https://pan.baidu.com/s/1PGEiY15TJgD9LjfXnaB0Bg?pwd=o8fy  Extraction code: o8fy  --Share from Baidu Netdisk super member V3

Preparation before development

1. Create a vue project:

                Execute the command: vue create vuetable01

     2. Install the elementUI command as needed :

                Execute the command: npm install babel-plugin-component -D

    3. Configure package.json in the project , add it in rules , and remove the esline check:

                "vue/no-unused-components": "off",

                "no-mixed-spaces-and-tabs":0

    4.  Install axious :

                npm install axios

    5.  Modify vue.config.js and add cross-domain configuration items (in order to solve cross-domain problems):

devServer: {

  proxy: {

        '/api': {

            // The purpose of writing here is to replace /api with https://www.baidu.com/

            target: 'http://localhost:8082/Ajaxd01',

            // Allow cross-domain

            changeOrigin: true,

            ws: true,

            pathRewrite: {

                '^/api': ''

            }

        }

  }

    }

6. Configure in main.js , configure elementUI and axios introduced on demand

ElementUI ：

        import ElementUI from 'element-ui' ;

        import 'element-ui/lib/theme-chalk/index.css';

        Vue.use(ElementUI);

Axios：

            //Introduce axios

          import axios from 'axios'

        //Configure the root path of the request

        axios.defaults.baseURL = '/api/'

        // Mount axios on the prototype , all components can be requested through this.$http

        Vue.prototype.$http = axios

        Vue.use(axios)

 7. Main.js complete configuration:

import Vue from 'vue'
import App from './App.vue'
//1. 按需引入表格
import ElementUI from 'element-ui';
//2. 引入样式库
import 'element-ui/lib/theme-chalk/index.css';
//3. 引入路由组件
import VueRouter from 'vue-router';
//4. 引入路由器
import router from '@/router';
//5.引入store
import store from './store'
//引入axios
import axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL = '/api/'

Vue.config.productionTip = false

// 原型上挂载axios， 所有组件都可以通过this.$http来请求
Vue.prototype.$http = axios

//6. 使用表格
Vue.use(VueRouter)
Vue.use(axios)
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
  router:router,
  store
}).$mount('#app')

 8. Add the component tableVue file:

<template>
	<div>
		<div style="float: left;">
			<el-button type="button" @click="dialogFormVisible = true">新增</el-button>
		</div>
		<div style="clear: both;">
			<el-table :data="tableData" style="width: 100%" :stripe="true" size="medium">
			  <el-table-column fixed prop="uid" label="用户ID" width="150" align="center"></el-table-column>
			  <el-table-column prop="upname" label="登录名称" width="150" align="center"></el-table-column>
			  <el-table-column prop="urname" label="用户姓名" width="150" align="center"></el-table-column>
			  <el-table-column prop="uphone" label="联系电话" width="150" align="center"></el-table-column>
			  <el-table-column prop="uaddr" label="通信地址" width="150" align="center"></el-table-column>
				<el-table-column prop="uhobby" label="个人爱好" width="150" align="center"></el-table-column>
				<el-table-column prop="uemail" label="电子邮箱" width="150" align="center"></el-table-column>
			  <el-table-column label="操作" width="200" style="text-align: center;">
				<template slot-scope="scope">
				  <template>
					<el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleClick(scope.row)" >
						<el-button slot="reference">删除</el-button>
					</el-popconfirm>
				  </template>
				 <el-button style="margin-left: 20px;" @click="upuser(scope.row)">修改</el-button>
				</template>
			  </el-table-column>
			</el-table>
			<!-- 新增用户-->
			<el-dialog title="用户信息新增" :visible.sync="dialogFormVisible" >
				<el-form ref="form" :model="form" label-width="100px">
				  <el-form-item label="用户登录名称">
				    <el-input v-model="form.upname"></el-input>
				  </el-form-item>
				  <el-form-item label="用户姓名">
				    <el-input v-model="form.urname"></el-input>
				  </el-form-item>
				  <el-form-item label="登录密码">
				    <el-input type="" v-model="form.upwd"></el-input>
				  </el-form-item>
				  <el-form-item label="确认密码">
				    <el-input v-model="form.upwd2"></el-input>
				  </el-form-item>
				  <el-form-item label="手机号">
				    <el-input v-model="form.uphone"></el-input>
				  </el-form-item>
				  <el-form-item label="地址">
				    <el-input v-model="form.uaddr"></el-input>
				  </el-form-item>
				  <el-form-item label="邮箱">
				    <el-input v-model="form.uemail"></el-input>
				  </el-form-item>
				  <el-form-item label="爱好">
				    <el-checkbox-group v-model="form.uhobby">
				      <el-checkbox label="food" name="uhobby" value="美食"></el-checkbox>
				      <el-checkbox label="party" name="uhobby" value="party"></el-checkbox>
				      <el-checkbox label="online Party" name="uhobby" value="网球"></el-checkbox>
				      <el-checkbox label="hot Gril" name="uhobby" value="辣妹"></el-checkbox>
				    </el-checkbox-group>
				  </el-form-item>
				</el-form>
			  <div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="onSubmit">确 定</el-button>
			  </div>
			</el-dialog>
			
			<!-- 修改用户-->
			<el-dialog title="用户信息修改" :visible.sync="updialogFormVisible" >
				<el-form ref="form" :model="form" label-width="100px">
					<el-input v-model="form.uid" style="display: none;"></el-input>
				  <el-form-item label="用户登录名称">
				    <el-input v-model="form.upname"></el-input>
				  </el-form-item>
				  <el-form-item label="用户姓名">
				    <el-input v-model="form.urname"></el-input>
				  </el-form-item>
				  <el-form-item label="登录密码">
				    <el-input type="" v-model="form.upwd"></el-input>
				  </el-form-item>
				  <el-form-item label="确认密码">
				    <el-input v-model="form.upwd2"></el-input>
				  </el-form-item>
				  <el-form-item label="手机号">
				    <el-input v-model="form.uphone"></el-input>
				  </el-form-item>
				  <el-form-item label="地址">
				    <el-input v-model="form.uaddr"></el-input>
				  </el-form-item>
				  <el-form-item label="邮箱">
				    <el-input v-model="form.uemail"></el-input>
				  </el-form-item>
				  <el-form-item label="爱好">
				    <el-checkbox-group v-model="form.uhobby">
				      <el-checkbox label="food" name="uhobby" value="美食"></el-checkbox>
				      <el-checkbox label="party" name="uhobby" value="party"></el-checkbox>
				      <el-checkbox label="online Party" name="uhobby" value="网球"></el-checkbox>
				      <el-checkbox label="hot Gril" name="uhobby" value="辣妹"></el-checkbox>
				    </el-checkbox-group>
				  </el-form-item>
				</el-form>
			  <div slot="footer" class="dialog-footer">
				<el-button @click="updialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="uponSubmit">确 定</el-button>
			  </div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
  export default {
	name:'tablePage',
    methods: {
	  //删除方法 默认传入选中这一行的数据
      handleClick(row) {
		  const uid =row.uid;
		  console.log("row.uid : "+uid)
		  this.$http.get('/userDelController.do',{params:{
			  uid:uid
		  }}).then(
			response=>{
				console.log("success : "+response.data)
				if(response.data=="success"){
					this.loadList()
				}
			},
			error =>{
				alert(error.message)
			}
		  )
       },
	   //加载table列表
	  loadList(){
	  	this.$http.get('/userListController.do').then(
	  		response=>{
	  			this.tableData=response.data;
	  		},
	  		error =>{
	  			alert(error.message)
	  		}
	  	)
	  },
	  //新增的提交方法
	  onSubmit() {
		const uhobbys=this.form.uhobby;
		var hobby='';
		uhobbys.forEach(function(item){
			hobby+=item+',';
		})
		hobby=hobby.substring(0,hobby.length-1);
		console.log(hobby);
		this.$http.get('/userInsertController.do',{params:{
			upname:this.form.upname,
			urname:this.form.urname,
			upwd:this.form.upwd,
			uphone:this.form.uphone,
			uaddr:this.form.uaddr,
			uhobby:hobby,
			uemail:this.form.uemail
		}}).then(
			response=>{
				console.log("success : "+response.data)
				if(response.data=="success"){
					this.dialogFormVisible=false;
					this.loadList()
				}
			},
			error =>{
				alert(error.message)
			}
		)
	  },
	  //用户修改弹窗 回显用户信息
	  upuser(row){
		  this.updialogFormVisible = true
		  var arr=row.uhobby.split(',');
		  console.log(arr)
		  const userinfo={
			  uid:row.uid,
			  upname:row.upname,
			  urname:row.urname,
			  upwd:row.upwd,
			  upwd2:row.upwd,
			  uphone:row.uphone,
			  uaddr:row.uaddr,
			  uhobby:arr,
			  uemail:row.uemail
		  }
		  this.form=userinfo;
		  
	  },
	  //用户修改提交后台数据
	  uponSubmit(){
		  const uhobbys=this.form.uhobby;
		  var hobby='';
		  uhobbys.forEach(function(item){
		  	hobby+=item+',';
		  })
		  hobby=hobby.substring(0,hobby.length-1);
		  console.log(hobby);
		  this.$http.get('/userUpdateController.do',{params:{
			uid:this.form.uid,
		  	upname:this.form.upname,
		  	urname:this.form.urname,
		  	upwd:this.form.upwd,
		  	uphone:this.form.uphone,
		  	uaddr:this.form.uaddr,
		  	uhobby:hobby,
		  	uemail:this.form.uemail
		  }}).then(
		  	response=>{
		  		console.log("success : "+response.data)
		  		if(response.data=="success"){
		  			this.updialogFormVisible=false;
		  			this.loadList()
		  		}
		  	},
		  	error =>{
		  		alert(error.message)
		  	}
		  )
	  }
    },
	//定义页面渲染数据
    data() {
      return {
		//渲染table的数据
        tableData: [],
		dialogTableVisible: false,//新增dailog弹框是否打开
		dialogFormVisible: false,//新增dailog弹框是否打开
		updialogFormVisible:false,//修改dailog弹框是否打开
		form: {//渲染form的数据
			upname:'',
			urname:'',
			name:'',
			upwd:'',
			uphone:'',
			uaddr:'',
			uhobby:[]
		},
		formLabelWidth: '120px'
      }
    },
	mounted(){
		this.loadList()//在加载时调用渲染table的方法
	},
	components:{
		// confirm
	}
  }
</script>

9. The code of appVue:

<template>
  <div id="app">
	  <!-- table组件-->
	<!-- <router-link class="list-group-item" active-class="active" :to="{name:'adduser'}">News</router-link> -->
	<tablePage/>
	<!-- <sumtest01/>
	<sumtest02/>
	<hr />
	<personlist/>
	<hr />
	<axiosVue/> -->
  </div>
</template>

<script>
//引入table组件
import tablePage from './components/tablePage.vue'

// import sumtest01 from './components/vuex/sumtest01.vue'
// import sumtest02 from './components/vuex/sumtest02.vue'
// import personlist from './components/vuex/personlist.vue'
// import axiosVue from './components/vuex/axiosVue.vue'

export default {
  name: 'App',
  components: {
	tablePage
	// sumtest01,
	// sumtest02,
	// personlist,
	// axiosVue
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 10. The back-end code is implemented using Servlet+JDBC, so I won’t repeat it here, you can directly access the network disk to download the source code.