Skip to content

Commit 75131bc

Browse files
ninuxGithubninuxGithub
committed
采用原生的vue.js 构建vue项目修改
1 parent bfd9f29 commit 75131bc

File tree

5 files changed

+245
-7
lines changed

5 files changed

+245
-7
lines changed

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,11 @@ c.getGenericType(); //得到泛型类型
263263
![image](https://github.com/ninuxGithub/spring-boot-vuejs/blob/master/jqgridMerge.png)
264264

265265

266+
## 需要注意的地方
267+
<script type="text/javascript" src='/user/userIndex.js'></script>
268+
<script type="text/javascript" src='/user/userInput.js'></script>
269+
在/user/userIndex.html 页面其实引入的可以是js 文件而不是vue文件
270+
vue.js 不可以引入关键字import 这就是与vue-cli或者vue+webpack的区别之处
266271

267272

268273

‎pom.xml

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,11 @@
7676
<version>3.9</version>
7777
</dependency>
7878

79-
<!-- <dependency> -->
80-
<!-- <groupId>com.github</groupId> -->
81-
<!-- <artifactId>Excel4J</artifactId> -->
82-
<!-- <version>2.0.1</version> -->
83-
<!-- </dependency> -->
79+
<dependency>
80+
<groupId>com.github</groupId>
81+
<artifactId>Excel4J</artifactId>
82+
<version>2.0.1</version>
83+
</dependency>
8484

8585
<dependency>
8686
<groupId>com.github</groupId>

‎src/main/resources/static/user/userIndex.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@
1313
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
1414
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>
1515
<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.9/vue-resource.min.js'></script>
16-
<script type="text/javascript" src='/user/userIndex.vue'></script>
17-
<script type="text/javascript" src='/user/userInput.vue'></script>
16+
<!-- <script type="text/javascript" src='/user/userIndex.vue'></script> -->
17+
<!-- <script type="text/javascript" src='/user/userInput.vue'></script> -->
18+
<script type="text/javascript" src='/user/userIndex.js'></script>
19+
<script type="text/javascript" src='/user/userInput.js'></script>
1820
<title>User Index Page</title>
1921

2022
<style type="text/css">

‎src/main/resources/static/user/userIndex.js

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
const UserIndex ={
2+
template:`<div class="panel panel-default">
3+
<div class="panel-heading text-center">
4+
<h2>User List</h2>
5+
</div>
6+
7+
<div class="panel-body">
8+
<table class="table table-hover">
9+
<thead>
10+
<tr>
11+
<th>ID</th>
12+
<th>UserName</th>
13+
<th>Password</th>
14+
<th>Role</th>
15+
<th>Operation &nbsp;<router-link :to="{ name: 'userInput', params: { userId: 'null' }}" class="panel-default" >添加</router-link></th>
16+
</tr>
17+
</thead>
18+
<tbody>
19+
<tr v-for="user in users">
20+
<td>{{user.id}}</td>
21+
<td>{{user.username}}</td>
22+
<td>{{user.password}}</td>
23+
<td>{{user.role}}</td>
24+
<td>
25+
<button v-on:click="removeUser(user.id);" class="btn btn-primary">删除</button>
26+
<button v-on:click="modifyUser(user.id);" class="btn btn-info">修改</button>
27+
</td>
28+
</tr>
29+
</tbody>
30+
</table>
31+
<div id="pager"></div>
32+
</div>
33+
34+
<div class="panel-heading text-center">
35+
<h2>User List JQgrid(//TODO : operation)</h2>
36+
</div>
37+
<div id="user_table_div" class="panel-body"></div>
38+
</div>`,
39+
data(){
40+
return {
41+
users:[],
42+
pageNo:1,
43+
totalPages:1
44+
}
45+
},
46+
created() {
47+
this.fetchData(this.pageNo);
48+
},
49+
watch:{
50+
'$route':'fetchData'
51+
},
52+
methods: {
53+
fetchData:function(pageNo){
54+
this.$http.get('/test.json?pageNo='+pageNo, function(data) {
55+
//this.users = data.uer;
56+
console.dir(data)
57+
this.users = data.userPages.content;
58+
this.pageNo = data.pageNo;
59+
this.totalPages = data.userPages.totalPages;
60+
61+
//分页js开始
62+
var that = this;
63+
$(function(){
64+
jQuery("#pager").pager({ pagenumber: that.pageNo, pagecount:that.totalPages , buttonClickCallback: pageClick });
65+
66+
function pageClick(pageNo){
67+
console.dir("current page is:" + pageNo);
68+
that.fetchData(pageNo);
69+
}
70+
});
71+
72+
//####################jqgrid begin####################
73+
74+
$('#user_table_div').empty().html('<table id="user_table" width="100%" class="table table-hover"></table><div id="jQpager" class="panel-body"></div>');
75+
var $table = $('#user_table');
76+
$table.empty();
77+
$table.jqGrid({
78+
datatype : "local",
79+
colModel: [
80+
{ label: 'ID', name: 'id', width: 200, align:'center', key:true},
81+
{ label: '用户名称', name: 'username', width: 300, align:'center'},
82+
{ label: '密码', name: 'password',width:300, align:'center'},
83+
{ label: '操作', sortable: false,name: '', width: 150 ,align:'center',
84+
formatter: function(cellValue, options, rowObject)
85+
{
86+
return '<a class="success-info" onclick="window.operate('+options.rowId+','+rowObject.id+')" >操作'+rowObject.id+'</a>';
87+
}
88+
}
89+
],
90+
rowNum: 5,
91+
shrinkToFit: false,
92+
viewrecords: true,
93+
gridview: true,
94+
sortable:false,
95+
width:1000,
96+
height:'auto',
97+
loadui: "Disable",
98+
recordtext : "记录 {0} ~ {1} | 总记录数 {2}",//显示记录数的格式
99+
emptyrecords : "",//空记录时的提示信息
100+
pgtext : "{0}/{1}",//页数显示格式
101+
rownumbers: true, //可自动在表格前面添加序号
102+
rownumWidth:50,
103+
104+
//*************需要pager对象
105+
pager: "#jQpager"
106+
});
107+
$table.jqGrid('setLabel', 'rn', '序号', {'text-align':'center','vertical-align': 'center', 'width:':'100px'}, {'title':'序号'});
108+
for ( var i = 0; i <= this.users.length; i++){
109+
$table.jqGrid('addRowData', i + 1, this.users[i]);
110+
}
111+
}).error(function(data, status, request) {
112+
console.log('fail:' + status + "," + request);
113+
})
114+
},
115+
operate: function(row, id){
116+
alert(id+ ''+ row)
117+
},
118+
removeUser:function(id){
119+
this.$http.post('/deleteUser', {'id':id}).then((response) => {
120+
console.dir("1")
121+
console.dir(response)
122+
this.fetchData();
123+
this.$router.push({path:'/'});
124+
}, (response) => {
125+
console.dir("2")
126+
});
127+
},
128+
modifyUser:function(id){
129+
this.$router.push({name:'userInput', params:{userId:id}});
130+
}
131+
}
132+
}

‎src/main/resources/static/user/userInput.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
const UserInput ={
2+
template:`<div class="panel panel-default">
3+
<div class="panel-heading text-center">
4+
<h2>User Input</h2>
5+
</div>
6+
<div class="panel-body">
7+
<form class="form-horizontal">
8+
<!-- User Name -->
9+
<div class="form-group">
10+
<label for="userName" class="col-sm-2 control-label">UserName</label>
11+
<div class="col-sm-4">
12+
<input type="text" class="form-control" v-model="user.username" id="userName" aria-describedby="helpBlock1" placeholder="place input UserName....">
13+
</div>
14+
<span id="helpBlock1" class="col-sm-2 has-error help-block ">{{userNameMsg}}</span>
15+
</div>
16+
17+
<!-- Password -->
18+
<div class="form-group">
19+
<label for="password" class="col-sm-2 control-label">Password</label>
20+
<div class="col-sm-4">
21+
<input type="password" class="form-control" v-model="user.password" id="password" placeholder="place input Password....">
22+
</div>
23+
<div class="col-sm-2 help-block has-error">{{passwordMsg}}</div>
24+
</div>
25+
26+
<div class="form-group">
27+
<div class="col-sm-offset-2 col-sm-10">
28+
<button class="btn btn-primary" v-on:click="quit">Quit</button>
29+
<button class="btn btn-primary" v-on:click="submitForm">Submit</button>
30+
</div>
31+
</div>
32+
</form>
33+
</div>
34+
</div>`,
35+
data(){
36+
return {
37+
user:{id: null, username: "", password: "", role: ""},
38+
userNameMsg:'',
39+
passwordMsg:'',
40+
}
41+
},
42+
43+
44+
created() {
45+
this.fetchData()
46+
},
47+
watch:{
48+
'$route':'fetchData',
49+
},
50+
methods: {
51+
fetchData:function(){
52+
var id=this.$route.params.userId;
53+
console.dir(typeof(id))
54+
if(typeof(id)==='string' && id=='null'){
55+
id=null;
56+
}
57+
this.$http.post('/getUser', {'id':id}).then((response) => {
58+
this.user = response.data;
59+
console.dir(response)
60+
}, (response) => {
61+
console.dir("2")
62+
});
63+
},
64+
submitForm: function(e) {
65+
e.preventDefault();
66+
console.dir(this.user)
67+
var flag = true;
68+
if(this.user.username==null){
69+
this.userNameMsg = '用户名为空';
70+
flag=false;
71+
$("#userName").parents('.form-group').addClass('has-error');
72+
}else{
73+
$("#userName").parents('.form-group').removeClass('has-error');
74+
this.userNameMsg = '';
75+
}
76+
if(this.user.password ==null){
77+
this.passwordMsg = '密码为空';
78+
$("#password").parents('.form-group').addClass('has-error');
79+
flag=false;
80+
}else{
81+
$("#password").parents('.form-group').removeClass('has-error');
82+
this.passwordMsg = '';
83+
}
84+
if(flag){
85+
this.$http.post('/addUser', this.user).then((response) => {
86+
// success callback
87+
console.dir(response)
88+
console.dir('success...')
89+
this.$router.push({ path: '/'})
90+
}, (response) => {
91+
console.dir('failed...')
92+
});
93+
}
94+
},
95+
quit: function(){
96+
console.dir('quit submit...')
97+
}
98+
}
99+
}

0 commit comments

Comments
 (0)