使用体验

个人理解：

Vue的优势：

1. 模块解耦：将html代码、js代码、样式代码封装成vue文件，类似于java类，每个vue文件都维护自己的代码，减少了模块的耦合度。

2. 逻辑和视图分层：将数据操作和view渲染做了双向数据绑定，开发者只关注数据即可，无需重复操作视图，比如页面有值发生了变化，可以实时将变化的数据值传递给页面，不用再去操作dom元素渲染页面。

3. 数据管理中心：通过Vuex，可以将公共的需要统一操作数据的逻辑放入Vuex的模块中，在每个Vue文件中均可进行调用，实现原理类似于springMvc，在每一个方法进行拦截与处理数据。

4. 快速搭建：通过elementUI，可以快速的引入现成的UI框架，搭建属于自己的网站和页面，类似于bootstrap。

实际效果

查询：

新增：

修改：

 

删除：

 

 

前端项目+后端项目源码

        最近研究了一下前端的Vue框架，后端浅写了一个servlet+jdbc提供数据传输服务，前端则采用Vue脚手架+Axios交互+ElementUI布局，如果后端有用其他框架的，可以直接修改前端文件vue.config.js中的访问地址即可使用前端代码访问你的后台：

        

源码下载地址如下：

链接：https://pan.baidu.com/s/1PGEiY15TJgD9LjfXnaB0Bg?pwd=o8fy 
提取码：o8fy 
--来自百度网盘超级会员V3的分享

开发前准备

  1. 创建vue项目：

                执行命令：vue create vuetable01

     2.按需安装elementUI命令:

                执行命令：npm install babel-plugin-component -D

    3. 配置项目中的package.json，在rules中添加，去掉esline校验：

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

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

    4. 安装axious：

                npm install axios

    5. 修改vue.config.js，增加跨域配置项（为了解决跨域问题）：

devServer: {

  proxy: {

        '/api': {

            // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/

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

            // 允许跨域

            changeOrigin: true,

            ws: true,

            pathRewrite: {

                '^/api': ''

            }

        }

  }

    }

6.在main.js中进行配置，配置按需引入的elementUI和axios

ElementUI：

        import ElementUI from 'element-ui';

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

        Vue.use(ElementUI);

Axios：

            //引入axios

          import axios from 'axios'

        //配置请求的根路径

        axios.defaults.baseURL = '/api/'

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

        Vue.prototype.$http = axios

        Vue.use(axios)

 7. Main.js完整配置：

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. 新增组件tableVue文件：

<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. 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. 后端代码采用Servlet+JDBC实现，这里不再赘述，可以直接访问网盘下载源码。

# vue.js # elementui # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB性能调优

avatar 华为开发者空间
cover

领取云主机，带你基于PyTorch构建高效手写体识别系统

avatar 华为开发者空间
cover

华为“云上先锋”实践赛·AI赛道现场会活动成功举办

avatar 华为开发者空间