使用体验
个人理解：
Vue的优势：
1. 模块解耦：将html代码、js代码、样式代码封装成vue文件，类似于java类，每个vue文件都维护自己的代码，减少了模块的耦合度。
2. 逻辑和视图分层：将数据操作和view渲染做了双向数据绑定，开发者只关注数据即可，无需重复操作视图，比如页面有值发生了变化，可以实时将变化的数据值传递给页面，不用再去操作dom元素渲染页面。
3. 数据管理中心：通过Vuex，可以将公共的需要统一操作数据的逻辑放入Vuex的模块中，在每个Vue文件中均可进行调用，实现原理类似于springMvc，在每一个方法进行拦截与处理数据。
4. 快速搭建：通过elementUI，可以快速的引入现成的UI框架，搭建属于自己的网站和页面，类似于bootstrap。
实际效果
查询：
新增：
修改：
扫描二维码关注公众号，回复：
14757459 查看本文章
删除：
前端项目+后端项目源码
最近研究了一下前端的Vue框架，后端浅写了一个servlet+jdbc提供数据传输服务，前端则采用Vue脚手架+Axios交互+ElementUI布局，如果后端有用其他框架的，可以直接修改前端文件vue.config.js中的访问地址即可使用前端代码访问你的后台：
源码下载地址如下：
| 链接：https://pan.baidu.com/s/1PGEiY15TJgD9LjfXnaB0Bg?pwd=o8fy 提取码：o8fy --来自百度网盘超级会员V3的分享 |
开发前准备
- 创建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实现，这里不再赘述，可以直接访问网盘下载源码。