Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 96aa77b

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /