Skip to content

Commit 96aa77b

Browse files
bai3bai3
committed
🚧 主页面完成，router完成
1 parent 1bfc748 commit 96aa77b

File tree

9 files changed

+271
-60
lines changed

9 files changed

+271
-60
lines changed

‎config/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = {
1414

1515
// Various Dev Server settings
1616
host: 'localhost', // can be overwritten by process.env.HOST
17-
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
17+
port: 8000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
1818
autoOpenBrowser: false,
1919
errorOverlay: true,
2020
notifyOnErrors: true,

‎data.json

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{
2+
"comments": [
3+
{
4+
"name": "白正序",
5+
"content": "测试测试测试侧测试留言留言里优雅",
6+
"create_time": 1512997751,
7+
"id": 1
8+
},
9+
{
10+
"name": "白植熙1",
11+
"content": "测试测试测试侧测试留言留言里优雅",
12+
"create_time": 1512997751,
13+
"id": 2
14+
},
15+
{
16+
"name": "白植熙2",
17+
"content": "测试测试测试侧测试留言留言里优雅",
18+
"create_time": 1512997751,
19+
"id": 3
20+
},
21+
{
22+
"name": "白植熙3",
23+
"content": "测试测试测试侧测试留言留言里优雅",
24+
"create_time": 1512997751,
25+
"id": 4
26+
},
27+
{
28+
"name": "白植熙4",
29+
"content": "测试测试测试侧测试留言留言里优雅",
30+
"create_time": 1512997751,
31+
"id": 5
32+
},
33+
{
34+
"name": "白植熙5",
35+
"content": "测试测试测试侧测试留言留言里优雅",
36+
"create_time": 1512997751,
37+
"id": 6
38+
},
39+
{
40+
"name": "白植熙6",
41+
"content": "测试测试测试侧测试留言留言里优雅",
42+
"create_time": 1512997751,
43+
"id": 7
44+
},
45+
{
46+
"name": "白植熙7",
47+
"content": "测试测试测试侧测试留言留言里优雅",
48+
"create_time": 1512997751,
49+
"id": 8
50+
},
51+
{
52+
"name": "白植熙8",
53+
"content": "测试测试测试侧测试留言留言里优雅",
54+
"create_time": 1512997751,
55+
"id": 9
56+
},
57+
{
58+
"name": "白植熙9",
59+
"content": "测试测试测试侧测试留言留言里优雅",
60+
"create_time": 1512997751,
61+
"id": 10
62+
},
63+
{
64+
"name": "白植熙10",
65+
"content": "测试测试测试侧测试留言留言里优雅",
66+
"create_time": 1512997751,
67+
"id": 11
68+
},
69+
{
70+
"name": "白植熙11",
71+
"content": "测试测试测试侧测试留言留言里优雅",
72+
"create_time": 1512997751,
73+
"id": 12
74+
},
75+
{
76+
"name": "白植熙12",
77+
"content": "测试测试测试侧测试留言留言里优雅",
78+
"create_time": 1512996751,
79+
"id": 13
80+
}
81+
]
82+
}

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@
1515
},
1616
"dependencies": {
1717
"element-ui": "^2.0.7",
18-
"vue": "^2.5.2"
18+
"vue": "^2.5.2",
19+
"vue-amap": "^0.4.4",
20+
"vue-lazyload": "^1.1.4",
21+
"vue-router": "^3.0.1"
1922
},
2023
"devDependencies": {
2124
"autoprefixer": "^7.1.2",

‎src/App.vue

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,55 @@
11
<template>
22
<div id="app">
3-
<Message/>
3+
<el-menu mode="horizontal" :default-active="activeIndex">
4+
<el-menu-item index="1">
5+
<router-link to="/Message">
6+
留言窗口
7+
</router-link>
8+
</el-menu-item>
9+
<el-menu-item index="2">
10+
<router-link to="/MessageList">
11+
留言列表
12+
</router-link>
13+
</el-menu-item>
14+
</el-menu>
15+
<transition>
16+
<router-view>
17+
</router-view>
18+
</transition>
419
</div>
520
</template>
621

722
<script>
823
import Message from './components/Message'
24+
import MessageList from './components/MessageList'
925
export default {
26+
/* eslint-disable */
27+
data() {
28+
return {
29+
activeIndex: '1'
30+
}
31+
},
32+
1033
name: 'app',
1134
components: {
12-
Message
35+
Message,
36+
MessageList,
1337
}
1438
}
1539
</script>
1640

17-
<style>
41+
<style lang="less">
1842
#app {
19-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
43+
font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
2044
-webkit-font-smoothing: antialiased;
2145
-moz-osx-font-smoothing: grayscale;
2246
text-align: center;
2347
color: #2c3e50;
24-
margin-top: 60px;
48+
.el-menu{
49+
a{
50+
text-decoration: none
51+
}
52+
}
2553
}
54+
2655
</style>

‎src/components/HelloWorld.vue

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/components/Message.vue

Lines changed: 88 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,91 @@
11
<template>
2-
<div class="message">
3-
<h1>留言板</h1>
4-
</div>
5-
</template>
6-
<style lang="less">
7-
@bg: blue;
8-
h1{
9-
color: @bg
10-
}
2+
<el-container>
3+
<el-header>
4+
<h1>小白留言板</h1>
5+
<span>
6+
在这里你可以畅所欲言
7+
</span>
8+
</el-header>
9+
<el-main>
10+
<el-form :model="form" ref="form" label-width="80px">
11+
<el-form-item label="留言姓名" prop="name" :rules="{ required: true, message: '请输入你的名字', trigger: 'blur' }">
12+
<el-input placeholder="请填写标题" v-model="form.name">
1113

12-
</style>
14+
</el-input>
15+
</el-form-item>
16+
<el-form-item label="留言内容" prop="content" :rules="[{ required: true, message: '请输入内容', trigger: 'blur' }, { required: true, message: '请输入内容', trigger: 'blur' },
17+
{ min: 10, max: 100, message: '长度在 10 到 100 个字符', trigger: 'blur,change' }]">
18+
<el-input type="textarea" placeholder="请填写内容" v-model="form.content">
19+
</el-input>
20+
</el-form-item>
21+
<!-- <el-form-item label="打分">
22+
<el-rate
23+
v-model="form.star"
24+
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
25+
</el-rate>
26+
</el-form-item> -->
27+
<el-form-item size="large" >
28+
<el-button type="primary" @click="add('form')">提交</el-button>
29+
<el-button type="warning" @click="resetForm('form')">重置</el-button>
30+
</el-form-item>
31+
</el-form>
32+
</el-main>
33+
</el-container>
34+
</template>
35+
<script>
36+
export default {
37+
/* eslint-disable */
38+
data() {
39+
return {
40+
form: {
41+
name: '',
42+
content: '',
43+
rules: '',
44+
// star: '3'
45+
}
46+
}
47+
},
48+
49+
methods: {
50+
// eslint-disable
51+
add(formName) {
1352
53+
this.$refs[formName].validate((valid) => {
54+
if (valid){
55+
console.log(this.form.content+','+this.form.name+","+Date.parse(new Date())/1000);
56+
let _self = this;
57+
this.$message({
58+
message: '留言成功，请去留言列表查看',
59+
type: 'success',
60+
onClose: function(){
61+
_self.form.name = "";
62+
_self.form.content = "";
63+
}
64+
})
65+
}else {
66+
return false
67+
}
68+
})
69+
},
70+
resetForm(formName) {
71+
this.$refs[formName].resetFields();
72+
}
73+
}
74+
}
75+
</script>
76+
<style scoped lang="less">
77+
.el-header{
78+
margin-bottom: 30px;
79+
h1{
80+
font-size: 20px;
81+
font-weight: bold;
82+
}
83+
span{
84+
font-size: 15px;
85+
}
86+
}
87+
.el-form-item{
88+
text-align: left;
89+
}
90+
91+
</style>

‎src/components/MessageList.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<el-card class="box-card">
3+
<div slot="header" class="clearfix">
4+
<span>留言列表</span>
5+
</div>
6+
<div v-for="o in 4" :key="o" class="text item" style="text-align: left">
7+
{{'列表内容 ' + o }}
8+
</div>
9+
</el-card>
10+
</template>
11+
<script>
12+
export default {}
13+
</script>
14+
<style>
15+
.clearfix:before,
16+
.clearfix:after {
17+
display: table;
18+
content: "";
19+
}
20+
.clearfix:after {
21+
clear: both
22+
}
23+
24+
.box-card {
25+
width: 480px;
26+
}
27+
</style>

‎src/main.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import App from './App'
55
import ElementUI from 'element-ui'
66
import 'element-ui/lib/theme-chalk/index.css'
77
import 'element-ui/lib/index.js'
8+
import router from './router'
89

910
Vue.config.productionTip = false
1011

@@ -14,5 +15,6 @@ Vue.use(ElementUI)
1415
new Vue({
1516
el: '#app',
1617
template: '<App/>',
17-
components: { App }
18+
components: { App },
19+
router
1820
})

‎src/router/index.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Vue from 'vue'
2+
import Router from 'vue-router'
3+
4+
Vue.use(Router)
5+
6+
const Message = (resolve) => {
7+
import('../components/Message').then((module) => {
8+
resolve(module)
9+
})
10+
}
11+
12+
const MessageList = (resolve) => {
13+
import('../components/MessageList').then((module) => {
14+
resolve(module)
15+
})
16+
}
17+
export default new Router({
18+
routes: [
19+
{
20+
path: '/',
21+
redirect: '/Message'
22+
},
23+
{
24+
path: '/Message',
25+
component: Message
26+
},
27+
{
28+
path: '/MessageList',
29+
component: MessageList
30+
}
31+
]
32+
})

0 commit comments

Comments
 (0)